Front-End Web Development
  • What You'll Get in This Course
  • Syllabus Download
  • Bookmark the Course Resources
  • How to Get the Most Out of the Course
  • Download the 12 Rules to Learn to Code eBook
  • How Does the Internet Actually Work?
  • How Do Websites Actually Work?
  • What You'll Need to Get Started - Setup Your Local Web Development Environment
  • How to Get Help When You're Stuck
  • Pathfinder
Introduction to HTML
  • Introduction to HTML
  • The Anatomy of an HTML Tag
  • What we're building - HTML Personal Site
  • What is The HTML Boilerplate?
  • How to Structure Text in HTML
  • HTML Lists
  • HTML Image Elements
  • HTML Links and Anchor Tags
  • How to Ace this Course
Intermediate HTML
  • HTML Tables
  • Using HTML Tables for Layout
  • HTML Tables Code Challenge
  • How to Type Emojis
  • HTML Tables Solution Walkthrough
  • HTML Forms
  • Forms in Practice - Create a Contact Me Form
  • HTML Challenge
  • Publish Your Website!
  • Tip from Angela - Habit Building with the Calendar Trick
  • Get Monthly Tips and Tools to Level Up as a Developer
Introduction to CSS
  • Introduction to CSS
  • Inline CSS
  • A Quick Note About the Next Lesson
  • Internal CSS
  • External CSS
  • How to Debug CSS Code
  • The Anatomy of CSS Syntax
  • CSS Selectors
  • Classes vs. Ids
  • CSS Quiz
  • Tip from Angela - Dealing with Distractions
  • Join the Student Community
Intermediate CSS
  • What We'll Make - Stylised Personal Site
  • What Are Favicons?
  • HTML Divs
  • The Box Model of Website Styling
  • CSS Display Property
  • Learn More About Web Design
  • CSS Static and Relative Positioning
  • Absolute positioning
  • The Dark Art of Centering Elements with CSS
  • Font Styling in Our Personal Site
  • Learn More About Typography
  • Adding Content to Our Website
  • CSS Sizing
  • Font Properties Challenge 1 - Change the Font Colour
  • Font Properties Challenge 2 - Change the Font Weight
  • Font Properties Challenge 3 - Change the Line Height
  • CSS Font Property Challenge Solutions
  • CSS Float and Clear
  • CSS Challenge
  • Stylised Personal Site Solution Walkthrough
  • [Optional] Get More Practice HTML and CSS
  • Tip from Angela - Nothing Easy is Worth Doing!
Introduction to Bootstrap 4
  • What is Bootstrap?
  • Installing Bootstrap
  • Web Design 101 - Wireframing
  • The Bootstrap Navigation Bar
  • What We'll Make: TinDog
  • Download the Starting Files
  • Setting Up Our New Project
  • Bootstrap Grid Layout System
  • Getting Montserrat Black and other Font Weights
  • Adding Grid Layouts to Our Website
  • A Note About CSS Link Order
  • Bootstrap Containers
  • Bootstrap Buttons & Font Awesome
  • Styling Our Website Challenges and Solutions
  • Bootstrap Challenge 1
  • Solution to Bootstrap Challenge 1
  • Tip from Angela - How to Deal with Procrastination
Intermediate Bootstrap
  • The Bootstrap Carousel Part 1
  • The Bootstrap Carousel Part 2
  • Bootstrap Cards
  • The CSS Z-Index and Stacking Order
  • Media Query Breakpoints
  • Bootstrap Challenge 2
  • Bootstrap Challenge 2 Solution
  • How to become a Better Programmer - Code Refactoring
  • Put it into Practice - Refactor our Website Part 1
  • Advanced CSS - Combining Selectors
  • Refactoring our Website Part 2
  • Advanced CSS - Selector Priority