AstroJS 101: Build Blazing Fast Frontends!

Focused View

Ohans Emmanuel

7:12:22

33 View

1. Build your first Astro Application

1.1 Understanding Astro (Download Ebooks - PDFEpub).html

1.2 Understanding Astro (Read online on Github).html

1. (Extra) PDF Understanding Astro (500+ Page Practical Book to Master Astro).html

2.1 Read the entire section transcript online.html

2.2 The Completed Project Source Code.html

2. Project overview.mp4

03:37

3.1 Astro editor setup for other code editors.html

3.2 Download NodeJS.html

3. Installing NodeJS and Setting up your Code Editor.mp4

02:48

4. The Astro Install Wizard.mp4

02:47

5. Understanding the Astro Project Structure.mp4

06:57

6. Introduction to Astro Pages.mp4

02:43

7. The Anatomy of an Astro Component.mp4

04:22

8. Astro Component Styles.mp4

05:36

9. Reusable Page Layouts.mp4

06:46

10. Capitalising component names.mp4

02:54

11. A Test on What Youve Learned So Far.html

12. The global style directive.mp4

03:12

13. Custom fonts and global CSS.mp4

03:22

14. Independent Astro components.mp4

05:32

15. Adding interactive scripts to Astro components.mp4

04:53

16. Adding an Interactive theme toggle.mp4

05:49

17. The global() selector.mp4

03:20

18. Event Handling.mp4

02:35

19. Theming via CSS variables.mp4

04:40

20. Accessing global client objects.mp4

09:36

21. The magic of scripts.mp4

05:19

22. A Test on What Youve Learned So Far.html

23. Leveraging inline scripts.mp4

05:34

24. Beware of Global Selectors in Scripts.mp4

03:58

25. Using Markdown for Pages.mp4

03:52

26. How to Navigate between Astro Pages.mp4

01:34

27. Uniformity via Markdown Layouts.mp4

04:47

28. Composing Layouts in Astro.mp4

02:55

29. Astro Component Props.mp4

03:56

30.1 Markdown Page Images (find images with the same name).html

30. Leveraging Markdown Frontmatter Properties.mp4

09:14

31. Interactive Navigation State with Astro Scripts.mp4

04:22

32. Composing Astro Components.mp4

14:07

33. A Test on What Youve Learned So Far.html

34. Complete Component Card Navigation.mp4

02:51

35. Astros Template Flow of Data.mp4

06:22

36. The Dark Side of definevars.mp4

05:09

37. How to Load Multiple Files in Astro - Part 1.mp4

07:17

38.1 The Completed Project Source Code.html

38. How to Load Multiple Files in Astro - Part 2.mp4

07:46

39. A Test on What Youve Learned So Far.html

40. Deploying a static Astro site.html

41.1 The Completed Project Source Code.html

41. How Fast is Our Astro Website Shocker!!!.mp4

01:13

2. Astro Components In-depth

1.1 Read the entire section transcript online.html

1. Introduction.mp4

02:00

2. The Javascript Runtime Fatigue.mp4

07:03

3. Ditching the Javascript Runtime.mp4

04:14

4. What is an Astro Component - Part 1.mp4

04:40

5. Manual Astro Installation and Rendering HTML.mp4

03:33

6. The Bliss of Composability.mp4

03:31

7. The Root Element and Local Styles in Compositions.mp4

03:04

8. Hoisting the Head Element.mp4

05:36

9. Revisiting the Component Script Section.mp4

11:02

10. Fetching Data in Astro.mp4

05:42

11. Revisiting the Component Template Section.mp4

09:00

12. Dynamic Tags in Astro.mp4

03:10

13. The Magic of Slots in Astro.mp4

07:08

14. Similarities and Differences to JSX.mp4

06:28

15. What is an Astro Component Conclusion.mp4

00:45

3. Build Your Own Component Island

1.1 Final Component Island Implementation (Annotated Source Code).html

1.2 Read the entire section transcript online.html

1. Introduction.mp4

02:10

2. A Brief History of how we Got Here.mp4

01:45

3. The Basics of Client-Side Rendering (CSR).mp4

03:39

4. The PROs and CONs of Client-Side Rendering.mp4

03:14

5. The Basics of Server-Side Rendering (SSR).mp4

02:40

6. The PROs and CONs of Server-Side Rendering (SSR).mp4

03:03

7. Server-Side Rendering with Client-Side Hydration.mp4

03:34

8. The Pros of Server-Side Rendering With Client-Side Hydration.mp4

02:31

9. Partial Hydration for the Win.mp4

02:38

10. Where do Component Islands Come From.mp4

02:14

11. Objectives and API Design.mp4

07:17

12. Getting Started with Mini-island.mp4

07:33

13. The Content Template element.mp4

03:12

14. Hydration Implementation.mp4

09:26

15. Partial Hydration Implementation - Part 1.mp4

13:10

16. Partial Hydration Implementation - Part 2.mp4

06:06

17. Clientvisible Lazy Hydration Implementation.mp4

04:53

18. Clientmedia Lazy Hydration Implementation.mp4

06:48

19. Vue Framework Support (Mini-island).mp4

09:38

20. Preact Framework Usage (Mini-island).mp4

08:35

21.1 Final Component Island Implementation (Annotated Source Code).html

21. Conclusion.mp4

01:36

4. The Secret Life of Astro Component Islands

1.1 Read the entire section transcript online.html

1. Introduction.mp4

01:24

2. When Should you Use a Framework Component.mp4

03:48

3.1 The Starter Template.html

3. Step 1 Build an Astro site.mp4

05:37

4. Step 2 Install the Framework Integration.mp4

03:02

5. Steps 3 & 4 Write and Render the Framework Component.mp4

05:34

6. Getting Started with Responsible Hydration.mp4

03:17

7. The Clientload Directive.mp4

03:38

8. The Clientonly Directive.mp4

03:11

9. The Clientidle Directive.mp4

01:57

10. The Clientvisible Directive.mp4

03:01

11. The Clientmedia Directive.mp4

01:45

12. Using Multiple Frameworks in Astro.mp4

06:06

13.1 Signals from Preact.html

13.2 Signia from tldraw.html

13.3 Solid signals.html

13.4 Sveltes stores.html

13.5 Vues reactivity API.html

13. Sharing State between Component Islands.mp4

13:18

14. Handling Props (and Children) in Framework Components.mp4

07:04

15. Using Multiple Slots in Framework Components.mp4

06:05

16. Nested Framework Components.mp4

02:01

17. Astro Island Gotchas.mp4

05:02

18. Conclusion - Why islands.mp4

02:09

5. Conclusion

1. Thank you, and Goodbye (for now).html

Description

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.

Who is this for?

Web developers looking to build modern content websites

Frontend (React, Vue etc.) engineers who want to build much faster websites

What You Need to Know?

You already know basic HTML, CSS and Javascript

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

More details

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.

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!

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

User Reviews

Rating

average 0

Total votes0

Focused display

I'm Ohans Emmanuel. A software architect and frontend specialist with a decade of experience. I wrote my first book in 2017 and have written 5+ books since then. My blogs (and books) have garnered over 4 million views to date.My goal when I teach a subject (preferably a complex one) is to break down the subject in a way that it can be understood by a 5-year-old. This is fuelled by my frustrations as a beginner years ago when I aspired to be a self-taught Engineer.I've recently moved to Udemy as a teaching platform to reach a wider audience, and I can't wait to create even more impactful courses for the modern frontend engineer.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.