React Responsive Portfolio Website Tutorial Using ReactJs | React js Projects For Beginners | 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 Form...
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
On this page of the site you can watch the video online React Responsive Portfolio Website Tutorial Using ReactJs | React js Projects For Beginners | Deploy with a duration of hours minute second in good quality, which was uploaded by the user How to Become a Developer 15 May 2024, share the link with friends and acquaintances, this video has already been watched 138,710 times on youtube and it was liked by 2.9 thousand viewers. Enjoy your viewing!
