Скачать с ютуб React Responsive Portfolio Website Tutorial Using ReactJs | React js Projects For Beginners | Deploy в хорошем качестве

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...   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