Learn HTML & CSS: 2-Hour Portfolio Website Tutorial (2024)

Learn HTML and CSS quickly with this hands-on crash course! In just 2 hours, you'll build a modern and responsive portfolio website from scratch. No boring theory – just practical, real-world experience that will get you coding confidently. Perfect for beginners and a great refresher for experienced developers.

Free Web Developers Community and Courses: https://www.skool.com/web-dev-mastery

Designer's Profile: https://www.figma.com/@elias_dev

Resources
- VSCode Setup: https://youtu.be/VWCI1ct02hY
- Design Link: https://www.figma.com/community/file/1164933568884615740/portfolio?searchSessionId=lwnsxv2d-v96nfiicdri
- HTML Documentation: https://developer.mozilla.org/en-US/docs/Web/HTML
- CSS Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS
- Responsive Design: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
- Source Code: https://github.com/hayk-simonyan/portfolio-website

🔖 Sections
0:00 Introduction
1:12 HTML Essentials
3:49 CSS Essentials
7:43 Figma Basics
12:03 Project Setup
14:03 Creating the Navbar
30:09 Main Section
42:45 Quote Section & Social Links
57:52 Projects Section
1:15:15 Skills & About Sections
1:33:24 Contacts & Footer
1:51:40 Responsive Design
1:56:20 Using Media Queries & Breakpoints
2:06:58 Making our Portfolio Responsive
2:15:41 Responsive Design for Tablets
2:20:25 Recap