1. Introduction FREE CHAPTER

• Welcome To The Course
• How The Web Works
• The Roles Of HTML, CSS & JS In Web Development
• VS Code Editor & Environment

2. Essential HTML

• Section Intro
• Create & Open HTML Files
• HTML Tags & Attributes
• Document Structure
• Live Server & Prettier
• Sandbox Files Setup
• Meta Tags & Search
• Headings, Paragraphs & Emphasis
• Browser Devtools Intro
• Lists
• Anchor Tags
• Images
• Block vs Inline Elements
• Line Breaks, Horizontal Rules & Entities
• Divs & Spans
• Classes & IDs
• Semantic Elements
• Emmet Crash Course
• Keyboard Shortcuts
• Pricing Grid Challenge

3. HTML Form & Input Elements

• Section Intro
• Form & Input Tags
• Text-Based Input Tags
• Input Field Attributes
• Select Boxes & Textarea
• Checkboxes & Radio Buttons
• Other Input Fields
• Datalist
• HTML Form Challenge

4. More HTML Elements

• Section Intro
• Audio Element
• Video Element
• Image Map
• Tables
• Iframe
• Global Attributes
• SVG Element
• Popover & Details
• Progress & Meter

5. CSS Basics

• Section Intro
• Implementing CSS
• Basic CSS Selectors
• Fonts In CSS
• Font & Text Properties
• Colors (Color Names, HEX, RGB, HSL)
• CSS Specificity
• Backgrounds
• Styling Links
• Font Awesome Library
• CSS Basics Challenge

6. Box Model & Positioning

• Section Intro
• Box Model Explained
• Sizing & Overflow
• Padding
• Margin
• Universal Selector & Reset
• Borders
• Display Property
• Position Property
• Box Shadow
• Freelance Form Mini-Project
• Shoe Cards Mini-Project

7. Flexbox

• Section Intro
• What Is Flexbox?
• Flexbox Basics - Containers & Items
• Align & Justify Items
• Flex Properties & Dynamic Sizing
• Flex Order
• Flexbox Layout Challenge
• Pricing Card CSS Mini-Project

8. Responsive Design

• Section Intro
• What Is Responsive Design?
• Flexible Layouts & Percentages
• rem & em Units
• Viewport Units (vh & vw)
• Media Queries
• Responsive Pricing Grid
• Responsive Flexbox Layout
• Container Queries
• Container Units

9. Landing Form Mini-Project

• Project Intro
• Setup & HTML
• Base CSS & Header Styles
• Main Content Flex & Alignment
• Inner Styles
• Mobile Layout & Media Queries

10. Various CSS Features

• Section Intro
• Custom Properties
• Vendor Prefixes
• Filters
• Smooth Scroll Mini-Project
• Sticky Nav & Style On Scroll
• calc() Function
• Nesting

11. Lumina Creative Website Project

• Project Intro
• Setup & Base CSS
• Header & Navigation
• Hero Text
• Custom Properties
• Gallery Section Flexbox
• Footer
• About Page
• Contact Page
• Image Lightbox Effect

12. Git, GitHub & Web Hosting

• Section Intro
• Intro To Git & GitHub
• Generate SSH Keys
• Git Workflow & Commands
• Deploy Website To Netlify
• Contact Form Submission
• Connect & Configure a Domain Name

13. Web Accessibility Introduction

• Section Intro
• What Is Web Accessibility?
• Skilltide Browser Extension
• Screen Reader Testing
• Role Attribute
• ARIA Attributes
• Aria Expanded & Dynamic Elements

14. Advanced Selectors - Pseudo Classes & Elements

• Section Intro
• Attribute Selectors
• Child & Sibling Combinators
• Pseudo Elements
• Pseudo Classes - first-child, last-child & nth-child
• Pseudo Classes - first-of-type, last-of-type, nth-of-type
• before & after Pseudo Elements
• Image Overlay With :before
• is(), where() & has()
• Styling Forms
• Selectors Challenge

15. CSS Grid

• Section Intro
• CSS Grid Overview
• Grid Columns & Gap
• repeat() & minmax()
• Grid Rows
• Grid Challenge 1
• Align & Justify Properties
• repeat() With autofit & autofill
• Positioning & Spanning Items
• Named Grid Lines
• Grid Challenge 2
• CSS Grid & Media Queries
• Grid Template Areas
• Lumina Creative Grid Refactor

16. Transitions, Animation & A Little JavaScript

• Section Intro
• Transitions Overview
• Creating Transitions
• Transform Property
• Absolute Centering With Transform/Translate
• 3D Transforms
• JavaScript & CSS Intro
• Hamburger Menu
• Keyframes - Part 1
• Keyframes - Part 2 (CSS Loader Animation)
• 3D Rotating Cube
• Presentation Website Mini-Project

17. Tutor Website Project - Part 1

• Project Intro
• Project Setup
• Desktop Navigation
• Mobile Navigation
• Hero Section
• Hero SVG & Media Queries
• Navbar Background On Scroll
• Learn Section
• Chapters Section
• Summary Section

18. Tutor Website Project - Part 2

• Info Section
• Takeaway Section
• Details & Author Sections
• Stats Section
• Newsletter Section
• Footer & Social Icons
• Contact Page
• Add Accessibility
• Deploy To Vercel & Formspree Setup

19. Leno Website Project (BEM) - Part 1

• Project Intro
• BEM Methodology Explained
• Project Setup
• Navbar & Desktop Menu
• Mobile Navigation
• Hero Section
• Navbar Background On Scroll
• Testimonials Section
• Features Section
• Features Mobile Layout

20. Leno Website Project (BEM) - Part 2

• Preview Section
• Animated Play Button
• Video Modal
• Details Area
• Screenshots Section
• Download Section
• Footer
• Create The Details Page
• Pricing Cards
• Details Features

21. Conclusion

• Course Wrap Up