Astrojs 101: Build Blazing Fast Frontends!

Get Started with Astro and Unlock the Power to Build Ultra-Fast Frontends with Multiple Frameworks in One.

What you'll learn

Learn to use React, Preact, Svelte, Vue, and Beyond in your Astro application.

Understand Component Islands: a Modern Web Architecture for Building Faster Websites.

Build Modern Practical Real-world Applications.

Get Started with Astro: One of the Fastest Frontend Libraries Out There.

Understand Responsible Hydration and Why it Matters.

Learn How Component Islands Work in Astro.

Understand the Behaviour of Astro Component Markup, Styles and Scripts.

Learn what "Zero Javascript" Means in Practical Terms.

Learn the Powerful Astro Template Syntax and How it Differs from JSX.

Build your own Component Islands Implementation from Scratch.

Requirements

You already know basic HTML, CSS and Javascript

You know the basics of Typescript e.g., you know what types are

Description

Are you tired of sluggish web performance? Frustrated with heavy JavaScript frameworks bogging down your websites? It's time for a revolution, and Astro is leading the charge!Problem Statement: In the fast-paced world of web development, speed and efficiency are everything. Traditional JavaScript frameworks often sacrifice performance for flexibility, leaving developers with bloated sites and sluggish load times. Astro changes the game by putting speed at the forefront, empowering developers like you to create lightning-fast websites with ease.Course Overview: Join us in this comprehensive online course where we'll demystify Astro, the game-changing JavaScript framework built for speed. Whether you're a seasoned developer or just starting your journey, you'll gain invaluable insights into how Astro empowers you to build performant websites like never before.At the end of the course you'll gain in-depth understanding into Astro, and have a rock-solid introduction to Astro -  the framework designed for speed. Highlights:Astro Fundamentals:Harness the power of Astro to build your personal website from scratch.Set up a local development environment effortlessly.Component Islands Mastery:Dive deep into Astro's groundbreaking architecture of component islands.Discover how Astro extracts your UI into smaller, isolated components, ensuring blazing-fast load times.Learn to leverage the flexibility of Astro with your favorite frameworks like React, Vue, Svelte, and Tailwind CSS.Static or Live? Your Choice!:Explore the versatility of Astro with both Static Site Generation (SSG) and Server-Side Rendering (SSR).Effortlessly configure deployment with Astro's flexible adapter system.Practical JavaScript Insights:Demystify the concept of "zero JavaScript" and its real-world implications.Understand why shedding the JavaScript runtime overhead is a game-changer for web performance.Mastering Astro Components:Get hands-on with Astro component markup, styles, and scripts.Unlock the full potential of Astro's template syntax, distinct from JSX.Unleash Component Islands:Dive deep into the core of Astro's architecture and build your own component islands from scratch.Comprehend the magic of Astro's component islands and their pivotal role in web development.Optimized Hydration:Explore responsible hydration and why it's critical for seamless user experiences.The Island Advantage:Gain a profound understanding of why component islands are essential for modern web development.Embrace the Future of Web Development.Astro isn't just another framework; it's a revolution in web development. By the end of this course, you'll have the skills and knowledge to create faster, more efficient websites with Astro, leaving your competition in the dust.Say goodbye to sluggish web performance and hello to a new era of web development!Enrol now and become a master of speed and innovation with Astro!

Overview

Section 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!!!

Section 2: Astro Components In-depth

Lecture 38 Introduction

Lecture 39 The Javascript Runtime Fatigue

Lecture 40 Ditching the Javascript Runtime

Lecture 41 What is an Astro Component? - Part 1

Lecture 42 Manual Astro Installation and Rendering HTML

Lecture 43 The Bliss of Composability

Lecture 44 The Root Element and Local Styles in Compositions

Lecture 45 Hoisting the Head Element?

Lecture 46 Revisiting the Component Script Section

Lecture 47 Fetching Data in Astro

Lecture 48 Revisiting the Component Template Section

Lecture 49 Dynamic Tags in Astro

Lecture 50 The Magic of Slots in Astro

Lecture 51 Similarities and Differences to JSX

Lecture 52 What is an Astro Component? Conclusion

Section 3: Build Your Own Component Island

Lecture 53 Introduction

Lecture 54 A Brief History of how we Got Here

Lecture 55 The Basics of Client-Side Rendering (CSR)

Lecture 56 The PROs and CONs of Client-Side Rendering

Lecture 57 The Basics of Server-Side Rendering (SSR)

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

Lecture 59 Server-Side Rendering with Client-Side Hydration

Lecture 60 The Pros of Server-Side Rendering With Client-Side Hydration

Lecture 61 Partial Hydration for the Win

Lecture 62 Where do Component Islands Come From?

Lecture 63 Objectives and API Design

Lecture 64 Getting Started with Mini-island

Lecture 65 The Content Template element

Lecture 66 Hydration Implementation

Lecture 67 Partial Hydration Implementation - Part 1

Lecture 68 Partial Hydration Implementation - Part 2

Lecture 69 Client:visible Lazy Hydration Implementation

Lecture 70 Client:media Lazy Hydration Implementation

Lecture 71 Vue Framework Support (Mini-island)

Lecture 72 Preact Framework Usage (Mini-island)

Lecture 73 Conclusion

Section 4: The Secret Life of Astro Component Islands

Lecture 74 Introduction

Lecture 75 When Should you Use a Framework Component?

Lecture 76 Step 1: Build an Astro site

Lecture 77 Step 2: Install the Framework Integration

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

Lecture 79 Getting Started with Responsible Hydration

Lecture 80 The Client:load Directive

Lecture 81 The Client:only Directive

Lecture 82 The Client:idle Directive

Lecture 83 The Client:visible Directive

Lecture 84 The Client:media Directive

Lecture 85 Using Multiple Frameworks in Astro

Lecture 86 Sharing State between Component Islands

Lecture 87 Handling Props (and Children) in Framework Components

Lecture 88 Using Multiple Slots in Framework Components

Lecture 89 Nested Framework Components

Lecture 90 Astro Island Gotchas

Lecture 91 Conclusion - Why islands?

Section 5: Conclusion

Lecture 92 Thank you, and Goodbye (for now)

Web developers looking to build modern content websites,Frontend (React, Vue etc.) engineers who want to build much faster websites