React Responsive Portfolio Website Tutorial Using ReactJs | React js Projects For Beginners | Deploy
26.5 هزار بار بازدید -
2 ماه پیش
-
Learn to build and deploy
Learn to build and deploy a responsive React Portfolio Website with a light & dark mode, a cartoon hero image of us generated with AI. Perfect for developers with a foundation in HTML, CSS, and JavaScript, you'll enhance your skills with hands-on React fundamentals, using tools like GitHub, Visual Studio Code, and Netlify for deployment. Complete with a free downloadable code repository, this guide is your step-by-step ticket to upgrading your web development portfolio. Start now!
What You'll Learn:
- React JS.
- Vite, Node, JSX.
- Refactor code and extract them into React Components.
- Craft visually appealing sections
- Light & Dark mode theme switching.
Prerequisites:
- Some prior experience in HTML, CSS, and JavaScript.
- You are eager to dive into React.
Tools and Technologies Covered:
- Version Control: Utilize GitHub for seamless collaboration and project management.
- Github Desktop: Efficiently update your repository with ease using Github Desktop.
- Code Editor: Leverage Visual Studio Code as your primary code editor for enhanced productivity.
- Deployment: Learn how to deploy your website for free using Netlify, making it accessible to users worldwide.
- ChatGPT and Leonardo AI for image generation.
✅ Finished Code Link:
https://github.com/Ade-mir/harris-joh...
✅ Deployed site:
https://harris-johnsen.netlify.app/
Install VS Code
How to Install and Setup VS Code on Mac
Setup Prettier Code Formatter
How to use Prettier in VS Code - Code...
Build your next awesome project
https://www.tubebuddy.com/quicknav/la...
GitHub: https://github.com/
GitHub Desktop: https://desktop.github.com/
Visual Studio Code: https://code.visualstudio.com/
Netlify: https://www.netlify.com/
Node: https://nodejs.org/en
Vite: https://vitejs.dev/
React: https://react.dev/
ChatGPT: https://chatgpt.com/
Leonardo AI: https://leonardo.ai/
Timestamps:
00:00 - What we are building / Finished Portfolio
01:18 - Prerequisites
01:26 - Tools we are using
01:44 - Creating a React App using Vite as our local development server
11:17 - Adding Google Fonts
13:58 - Installing extensions
14:54 - Prettier video ref
18:12 - Hero component
33:17 - Theme component
44:40 - Common styles
54:05 - Hero styles
54:38 - Flexbox video ref
01:05:40 - Projects component
01:11:08 - Projects styling
01:23:41 - Skills component
01:30:09 - Skills styling
01:33:29 - Contact component
01:35:23 - Form video ref
01:39:08 - Form styling
01:47:40 - Footer component and styling
01:49:02 - General media queries
01:53:34 - Making Hero responsive
01:55:46 - Making Projects responsive
01:57:20 - Making Projects responsive
01:58:45 - Making Contact responsive
02:01:06 - Form video ref
02:01:16 - Chat GPT image generation
02:07:12 - Leonardo AI image generation
02:16:44 - Deploying with Netlify
What You'll Learn:
- React JS.
- Vite, Node, JSX.
- Refactor code and extract them into React Components.
- Craft visually appealing sections
- Light & Dark mode theme switching.
Prerequisites:
- Some prior experience in HTML, CSS, and JavaScript.
- You are eager to dive into React.
Tools and Technologies Covered:
- Version Control: Utilize GitHub for seamless collaboration and project management.
- Github Desktop: Efficiently update your repository with ease using Github Desktop.
- Code Editor: Leverage Visual Studio Code as your primary code editor for enhanced productivity.
- Deployment: Learn how to deploy your website for free using Netlify, making it accessible to users worldwide.
- ChatGPT and Leonardo AI for image generation.
✅ Finished Code Link:
https://github.com/Ade-mir/harris-joh...
✅ Deployed site:
https://harris-johnsen.netlify.app/
Install VS Code
How to Install and Setup VS Code on Mac
Setup Prettier Code Formatter
How to use Prettier in VS Code - Code...
Build your next awesome project
https://www.tubebuddy.com/quicknav/la...
GitHub: https://github.com/
GitHub Desktop: https://desktop.github.com/
Visual Studio Code: https://code.visualstudio.com/
Netlify: https://www.netlify.com/
Node: https://nodejs.org/en
Vite: https://vitejs.dev/
React: https://react.dev/
ChatGPT: https://chatgpt.com/
Leonardo AI: https://leonardo.ai/
Timestamps:
00:00 - What we are building / Finished Portfolio
01:18 - Prerequisites
01:26 - Tools we are using
01:44 - Creating a React App using Vite as our local development server
11:17 - Adding Google Fonts
13:58 - Installing extensions
14:54 - Prettier video ref
18:12 - Hero component
33:17 - Theme component
44:40 - Common styles
54:05 - Hero styles
54:38 - Flexbox video ref
01:05:40 - Projects component
01:11:08 - Projects styling
01:23:41 - Skills component
01:30:09 - Skills styling
01:33:29 - Contact component
01:35:23 - Form video ref
01:39:08 - Form styling
01:47:40 - Footer component and styling
01:49:02 - General media queries
01:53:34 - Making Hero responsive
01:55:46 - Making Projects responsive
01:57:20 - Making Projects responsive
01:58:45 - Making Contact responsive
02:01:06 - Form video ref
02:01:16 - Chat GPT image generation
02:07:12 - Leonardo AI image generation
02:16:44 - Deploying with Netlify
2 ماه پیش
در تاریخ 1403/02/26 منتشر شده
است.
26,576
بـار بازدید شده