Introduction
  • Welcome To The Course
  • How The Web Works (Summarized)
  • The Roles Of HTML & CSS In Web Development
  • Getting Setup With Visual Studio Code
HTML Basics
  • Section Intro
  • Create & Open HTML Pages
  • Doctype & Basic Layout
  • Setting Up Live Server (VSCode Extension)
  • Meta Tags & Search Engines
  • Headings, Paragraphs & Typography
  • Links, Images & Attributes
  • Lists & Tables
  • Forms & Input
  • Block & Inline Level Elements
  • Divs & Spans, Classes & Ids
  • HTML Entities
  • HTML5 Semantic Tags & Challenge
  • HTML5 Semantics Solution & Wrap Up
CSS Basics
  • Section Intro
  • Implementing CSS
  • Basic CSS Selectors
  • Dev Tools Introduction
  • Fonts In CSS
  • Color Types
  • Backgrounds & Borders
  • Box Model, Margin & Padding
  • Float & Alignment
  • Link State & Button Styling
  • Navigation Menu Styling
  • Inline, Block & Inline-Block Display
  • Positioning
  • Form Style Challenge
  • Form Style Solution
  • Aside: Visibility, Order & Negative Margin
Hotel Website
  • Project Intro
  • Aside: Design & Ideas
  • File Structure & Navbar
  • Showcase & Home Info
  • Features & Footer
  • About Page
  • Contact Page
Intro To Responsive Layouts
  • What Is Responsive Design?
  • Getting Started With Media Queries
  • Em & Rem Units
  • Vh & Vw Units
  • Making The Hotel Website Fully Responsive
Intro To Flexbox
  • What Is Flexbox?
  • Flexbox Basics
  • Flex Properties
  • Flex Alignment & Justify
EdgeLedger Website (Flexbox)
  • Project Intro
  • Header HTML & Navbar Styles
  • Hero Section & Overlay
  • Icons & Solutions Sections
  • Cases & Blog Sections
  • Finishing The Homepage
  • Responsive Media Queries
  • Inner Pages
  • Navbar & Lightbox Effects
  • Extra - Adding a Favicon
Website Deployment - Shared Host
  • Types Of Web Hosting
  • Shared Hosting Setup
  • Hosting Company Links
  • Setting Up Email
  • Upload Your Site via FTP
  • BONUS: Contact Form Submission (PHP Script)
More CSS Concepts - Advanced Selectors, Animation & More
  • Targeted Selectors
  • nth-child Pseudo Selectors
  • before & after Pseudo Selectors
  • Box Shadows
  • Text Shadows
  • CSS Variables (Custom Properties)
  • Keyframe Animation 1
  • Keyframe Animation 2
  • CSS Transitions
  • Transform Property
Mini Projects With Keyframes, Transitions, etc
  • Presentation Website [1] - Intro & HTML
  • Presentation Website [2] - Page CSS
  • Presentation Website [3] - Text Animation
  • Hamburger Menu Overlay [1] - HTML & Base CSS
  • Hamburger Menu Overlay [2] - Creating The Hamburger
  • Hamburger Menu Overlay [3] - Animating The Hamburger Lines
  • Hamburger Menu Overlay [4] - Menu Overlay
  • Knowledge Timeline [1] - HTML & Base CSS
  • Knowledge Timeline [2] - Boxes & Arrows
  • Knowledge Timeline [3] - Responsive Media Queries
  • Knowledge Timeline [4] - Scroll In Animation
  • Quick Dropdown Menu Project
CSS Grid
  • What Is CSS Grid?