AstroJS 101: Build Blazing Fast Frontends!

Course Curriculum

Chapter 1: Build your first Astro Application

Lecture 1: (Extra) PDF: Understanding Astro (500+ Page Practical Book to Master Astro)

Lecture 2: Project overview

Lecture 3: Installing NodeJS and Setting up your Code Editor

Lecture 4: The Astro Install Wizard

Lecture 5: Understanding the Astro Project Structure

Lecture 6: Introduction to Astro Pages

Lecture 7: The Anatomy of an Astro Component

Lecture 8: Astro Component Styles

Lecture 9: Reusable Page Layouts

Lecture 10: Capitalising component names

Lecture 11: The global style directive

Lecture 12: Custom fonts and global CSS

Lecture 13: Independent Astro components

Lecture 14: Adding interactive scripts to Astro components

Lecture 15: Adding an Interactive theme toggle

Lecture 16: The :global() selector

Lecture 17: Event Handling

Lecture 18: Theming via CSS variables

Lecture 19: Accessing global client objects

Lecture 20: The magic of scripts

Lecture 21: Leveraging inline scripts

Lecture 22: Beware of Global Selectors in Scripts

Lecture 23: Using Markdown for Pages

Lecture 24: How to Navigate between Astro Pages

Lecture 25: Uniformity via Markdown Layouts

Lecture 26: Composing Layouts in Astro

Lecture 27: Astro Component Props

Lecture 28: Leveraging Markdown Frontmatter Properties

Lecture 29: Interactive Navigation State with Astro Scripts

Lecture 30: Composing Astro Components

Lecture 31: Complete Component Card Navigation

Lecture 32: Astro's Template Flow of Data

Lecture 33: The Dark Side of define:vars

Lecture 34: How to Load Multiple Files in Astro – Part 1

Lecture 35: How to Load Multiple Files in Astro – Part 2

Lecture 36: Deploying a static Astro site

Lecture 37: How Fast is Our Astro Website? Shocker!!!

Chapter 2: Astro Components In-depth

Lecture 1: Introduction

Lecture 2: The Javascript Runtime Fatigue

Lecture 3: Ditching the Javascript Runtime

Lecture 4: What is an Astro Component? – Part 1

Lecture 5: Manual Astro Installation and Rendering HTML

Lecture 6: The Bliss of Composability

Lecture 7: The Root Element and Local Styles in Compositions

Lecture 8: Hoisting the Head Element?

Lecture 9: Revisiting the Component Script Section

Lecture 10: Fetching Data in Astro

Lecture 11: Revisiting the Component Template Section

Lecture 12: Dynamic Tags in Astro

Lecture 13: The Magic of Slots in Astro

Lecture 14: Similarities and Differences to JSX

Lecture 15: What is an Astro Component? Conclusion

Chapter 3: Build Your Own Component Island

Lecture 1: Introduction

Lecture 2: A Brief History of how we Got Here

Lecture 3: The Basics of Client-Side Rendering (CSR)

Lecture 4: The PROs and CONs of Client-Side Rendering

Lecture 5: The Basics of Server-Side Rendering (SSR)

Lecture 6: The PROs and CONs of Server-Side Rendering (SSR)

Lecture 7: Server-Side Rendering with Client-Side Hydration

Lecture 8: The Pros of Server-Side Rendering With Client-Side Hydration

Lecture 9: Partial Hydration for the Win

Lecture 10: Where do Component Islands Come From?

Lecture 11: Objectives and API Design

Lecture 12: Getting Started with Mini-island

Lecture 13: The Content Template element

Lecture 14: Hydration Implementation

Lecture 15: Partial Hydration Implementation – Part 1

Lecture 16: Partial Hydration Implementation – Part 2

Lecture 17: Client:visible Lazy Hydration Implementation

Lecture 18: Client:media Lazy Hydration Implementation

Lecture 19: Vue Framework Support (Mini-island)

Lecture 20: Preact Framework Usage (Mini-island)

Lecture 21: Conclusion

Chapter 4: The Secret Life of Astro Component Islands

Lecture 1: Introduction

Lecture 2: When Should you Use a Framework Component?

Lecture 3: Step 1: Build an Astro site

Lecture 4: Step 2: Install the Framework Integration

Lecture 5: Steps 3 & 4: Write and Render the Framework Component

Lecture 6: Getting Started with Responsible Hydration

Lecture 7: The Client:load Directive

Lecture 8: The Client:only Directive

Lecture 9: The Client:idle Directive

Lecture 10: The Client:visible Directive

Lecture 11: The Client:media Directive

Lecture 12: Using Multiple Frameworks in Astro

Lecture 13: Sharing State between Component Islands

Lecture 14: Handling Props (and Children) in Framework Components

Lecture 15: Using Multiple Slots in Framework Components

Lecture 16: Nested Framework Components

Lecture 17: Astro Island Gotchas

Lecture 18: Conclusion – Why islands?

Chapter 5: Conclusion