Learn what a Web Developer is, what are the paths to choose, what tools are required to get started, and the basics of Git, HTML, and CSS by building a portfolio website using a Figma Design. This course will give you enough basics to get your journey started as a Web Developer with strong basic practical skills. You'll be deploying the code to Netlify to show off to your friends too. Yayy!! 🙌 Code: https://github.com/ahsanayaz/my-portfolio Course site: https://codewithahsan.dev/courses/web-dev-bootcamp If you like the video, press the 👍button and subscribe to the channel to help it grow. 📚 FREE COURSES at https://codewithahsan.dev/courses 🎥🎤📷 GEAR for Content Creation (contains affiliate links) 🎥🎤📷: https://ahsanayaz.com/gear 👉 Blazing fast SEO with Prerender.io https://prerender.io/?fpr=muhammad-ahsan77 ❤️❤️ Become a Supporter at Patron (because you're awesome): https://patreon.com/muhd_ahsanayaz ❤️ Support the CodeWithAhsan community One-Time-Only: https://buymeacoffee.com/codewithahsan 🎥 Live Streams / Free sessions: https://twitch.tv/CodeWithAhsan 👉 Socials: https://bio.link/muhd_ahsanayaz 00:00:00 - Introduction 00:01:08 - Day 1 Overview 00:06:30 - What is Web Development 00:16:41 - Tools you need to get started 00:22:10 - Basic terminal/linux commands 00:32:50 - Your first HTML page and basic HTML tags 00:43:42 - HTML Headings 00:43:57 - HTML Paragraph tag 00:50:03 - Comments in HTML 00:52:11 - HTML img tag for rendering images 00:56:35 - Using Attributes with HTML tags 01:02:25 - input tag in HTML to take user input 01:08:07 - Block vs Inline elements in HTML 01:20:00 - Creating your GitHub repository 01:21:18 - Understanding how GitHub workflow works and pushing your code 01:28:52 - Creating a netlify account for deployment 01:33:08 - Understanding HTML Semantics 01:37:00 - Implementing Blog page from Figma Design using HTML Semantics 01:49:00 - 3 ways to implement Styles in a web application 01:50:52 - Understanding CSS Selectors 02:06:20 - Implementing the CSS styles for the Blog page as per the Figma Design 02:20:57 - Understanding CSS Box Model 02:47:58 - Implementing the structure (HTML) of Portfolio Page Header and First Section 03:06:00 - Implementing the styles (CSS) of Portfolio Page Header and First Section 03:28:52 - Implementing the Posts Section from the Portfolio Page Figma Design 03:55:07 - Implementing the Features Section from the Portfolio Page Figma Design 04:19:02 - How to handle mobile responsiveness with Media Queries 04:28:08 - Finalizing the Portfolio Website with Mobile Responsiveness for each section 04:48:07 - Using JavaScript to show/hide mobile menu based on mobile vs desktop devices