Code with Ahsan

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

Web Development Bootcamp - Crash Course | No experience required

Get Full Course Access

Highly Recommended Courses

Explore top skills

In-demand Careers

Popular Topics

Creative Skills

Business Skills

Choose your learning path