AstroJS 101: Build Blazing Fast Frontends!

Name: AstroJS 101: Build Blazing Fast Frontends!
Rating: 4.6 (248 reviews)

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

Created byOhans Emmanuel

Last updated 9/2023

English

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.

Course content

5 sections • 92 lectures • 7h 16m total length

(Extra) PDF: Understanding Astro (500+ Page Practical Book to Master Astro)0:31
Project overview3:37
Installing NodeJS and Setting up your Code Editor2:48
The Astro Install Wizard2:47
Understanding the Astro Project Structure6:57
Introduction to Astro Pages2:43
The Anatomy of an Astro Component4:22
Astro Component Styles5:36
Reusable Page Layouts6:46
Capitalising component names2:54
A Test on What You've Learned So Far
The global style directive3:12
Custom fonts and global CSS3:22
Independent Astro components5:32
Adding interactive scripts to Astro components4:53
Adding an Interactive theme toggle5:49
The :global() selector3:20
Event Handling2:35
Theming via CSS variables4:40
Accessing global client objects9:36
The magic of scripts5:19
A Test on What You've Learned So Far
Leveraging inline scripts5:34
Beware of Global Selectors in Scripts3:58
Using Markdown for Pages3:52
How to Navigate between Astro Pages1:34
Uniformity via Markdown Layouts4:47
Composing Layouts in Astro2:55
Astro Component Props3:56
Leveraging Markdown Frontmatter Properties9:14
Interactive Navigation State with Astro Scripts4:22
Composing Astro Components14:07
A Test on What You've Learned So Far
Complete Component Card Navigation2:51
Astro's Template Flow of Data6:22
The Dark Side of define:vars5:09
How to Load Multiple Files in Astro - Part 17:17
How to Load Multiple Files in Astro - Part 27:46
A Test on What You've Learned So Far
Deploying a static Astro site2:33
How Fast is Our Astro Website? Shocker!!!1:13

Introduction2:00
The Javascript Runtime Fatigue7:03
Ditching the Javascript Runtime4:14
What is an Astro Component? - Part 14:40
Manual Astro Installation and Rendering HTML3:33
The Bliss of Composability3:31
The Root Element and Local Styles in Compositions3:04
Hoisting the Head Element?5:36
Revisiting the Component Script Section11:02
Fetching Data in Astro5:42
Revisiting the Component Template Section9:00
Dynamic Tags in Astro3:10
The Magic of Slots in Astro7:08
Similarities and Differences to JSX6:28
What is an Astro Component? Conclusion0:45

Introduction2:10
A Brief History of how we Got Here1:45
The Basics of Client-Side Rendering (CSR)3:39
The PROs and CONs of Client-Side Rendering3:14
The Basics of Server-Side Rendering (SSR)2:40
The PROs and CONs of Server-Side Rendering (SSR)3:03
Server-Side Rendering with Client-Side Hydration3:34
The Pros of Server-Side Rendering With Client-Side Hydration2:31
Partial Hydration for the Win2:38
Where do Component Islands Come From?2:14
Objectives and API Design7:17
Getting Started with Mini-island7:33
The Content Template element3:12
Hydration Implementation9:26
Partial Hydration Implementation - Part 113:10
Partial Hydration Implementation - Part 26:06
Client:visible Lazy Hydration Implementation4:53
Client:media Lazy Hydration Implementation6:48
Vue Framework Support (Mini-island)9:38
Preact Framework Usage (Mini-island)8:35
Conclusion1:36

Introduction1:24
When Should you Use a Framework Component?3:48
Step 1: Build an Astro site5:37
Step 2: Install the Framework Integration3:02
Steps 3 & 4: Write and Render the Framework Component5:34
Getting Started with Responsible Hydration3:17
The Client:load Directive3:38
The Client:only Directive3:11
The Client:idle Directive1:57
The Client:visible Directive3:01
The Client:media Directive1:45
Using Multiple Frameworks in Astro6:06
Sharing State between Component Islands13:18
Handling Props (and Children) in Framework Components7:04
Using Multiple Slots in Framework Components6:05
Nested Framework Components2:01
Astro Island Gotchas5:02
Conclusion - Why islands?2:09

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.
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.

Prerequisites for the course

Familiarity with HTML and CSS basics
Familiarity with JavaScript basics

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!

Who this course is for:

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

AstroJS 101: Build Blazing Fast Frontends!

What you'll learn

Explore related topics

Course content

Build your first Astro Application37 lectures • 2hr 55min

Astro Components In-depth15 lectures • 1hr 17min

Build Your Own Component Island21 lectures • 1hr 46min

The Secret Life of Astro Component Islands18 lectures • 1hr 18min

Conclusion1 lecture • 1min

Requirements

Description

Who this course is for: