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:

✅ Deployed site:

Install VS Code

Setup Prettier Code Formatter

Build your next awesome project

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

[howtobecomeadeveloper]

What video would you like to see next? 👇

[PegeCovers]

If your project is not showing up at around 40:14, it's because you haven't declared the toggleTheme with a "const". You need to declare it with a const because unlike the useEffect function above it, it's a custom function that hasn't been declared/defined elsewhere (like useEffect has been, since it's a part of React itself).

This is what happened to me. Cheers guys and good luck with the project.

[codiosity]

Its morning here, fresh air, fresh start portfolio website, to showcase miniprojects, .... Learning becomes very much interesting with these kinda tutorials, Love from 🇮🇳

[RYKalmante]

I just wanted to say thank you for the tutorial. After watching your videos 8 times, I now have at least a 10% understand of how React works. I'm looking forward to learning more from you. I hope you can create more content on ReactJS and ReactTS soon. If you have a Patreon account or any other way for your subscribers or students to support you, please keep us posted so we can contribute in a small way.

[anujrajthala]

1:13:45 why is the use flexbox resolving that transform issue?

[PegeCovers]

This is the only tutorial so far that is in any way helpful, lmao. You're a natural at this. Do not stop creating helpful videos.

[ayhantahapastutmaz]

Thank you sir. Good video, good explanation.

[DoyleQueena-nf]

Young Jason Jackson Margaret Harris Helen

[whysoserious]

Bro you' re really underrated. The designs, the way of explaining everything is awesome just one thing naming of the classes could be short and easier ✌✌✌✌

[rohansharma]

Conatct form is not link with any backend

[DuyentheNomad]

Want to say thank you for the video! Really easy to follow along. Could you plz make more video about the CSS concepts (would be great if you can cover it in a practical way like how did you come up with styling the whole portfolio website, etc)?

Thank youu ~

[kamranracabov]

Как вы сделали эту аватарку, из какой нейросети и что написали?

[akarshtyagi]

Where are fully functional contact form of portfolio ???

[soumadip_banerjee]

Tusen Takk! Love from Kolkata, India.
🇮🇳❤️🇸🇯

[rishabhthapliyal]

Plz make a chat application with a video calling feature ..kind of like a WhatsApp clone....

[NathanAguilarr]

Where would you recommend to host a personal portfolio that showcases MERN stack projects and .NET projects? Im building my own portfolio from scratch using HTML, CSS, and JavaScript?

[amulkumar-yeariddminingen]

i really donot want to make this from scratch so can i use this and replace it with my info and i did some modification like made the contact form working using email js lib, added a nav for better navigation, and a resume viewer.

[kelpi]

This was very helpful! It is simple and yet beautiful. Can't wait to see more! 🖤🖤

[rounaksingh]

Can someone help me with building a basic navigation bar for this project? Thanks!

[Fluxxx]

Thank you so much for wonderful website u created! It help me a lot