Build a website from scratch

Watch on Frontend Masters

Build a website from scratch

for Frontend Masters

author image
Kevin Powell
Embrace the Cascade
course icon
Watch on Frontend Masters

Table of Contents

  1. Welcome

    1. Introduction

  2. The Second Page Content

    1. The Structure
    2. The First Two Sections
    3. The Mushroom Guide
    4. Styling the Guide
    5. The Bento Grid
    6. Updating the Navigation

  3. Project Maintenance

    1. Staying Organized
    2. Refactor when Needed
    3. What layers are, and aren't

  4. Filtering the Guide

    1. Filtering with CSS
    2. Filtering with JavaScript
    3. Changing the Grid
    4. When Nothing Matches
    5. When there is no JS

  5. View Transition Basics

    1. Progressive Enhancements
    2. The View Transition Api
    3. Adding a Cross Document View Transition
    4. Animating the Mushroom Guide Filter
    5. A Fancier Animation

  6. Animating the Navigation

    1. Animating to Display None
    2. Animating From Display None
    3. Better Alternative to Overflow Hidden
    4. Animating the List Items
    5. Fixing the Resizing Issue

  7. Scroll Driven Animations

    1. Linking Animations to Scroll Position
    2. Be Careful with What You Animate

  8. Theming and Customization

    1. Light and Dark Mode
    2. Forcing Matters
    3. Other Customizations

  9. Wrap up and Next Steps

    1. Wrap up and Next Steps