Gain insights into building high-performing static pages with Astro. Learn about setting up projects, optimizing performance, SEO, accessibility, and adding interactivity using Astro Islands.

Building Static Pages With Astro for Perfect Core Web Vitals.png

tarball.tar.gz

Astro

Astro Without Run Command

Astro-Test with Copy Command

Astro Without Run Command-copy

Build Test

API Variable

Astro is a framework-agnostic, all-in-one web framework designed to create high-performing websites. Its island architecture helps create these websites.

In this interactive course, you’ll learn how to set up and build a static blog with perfect performance, SEO, and accessibility by following best practices and using Astro. You’ll also learn the differences between different rendering paradigms, such as SSR and SSG, and the differences between the MPA and SPA architectures. Additionally, you’ll learn how to work with routes and create API endpoints for data fetching, and how to add interactivity to pages with the help of Astro Islands.

By the end of this course, you’ll have a solid foundation in setting up new projects in Astro and building high-performing components with a minimal JavaScript footprint.

Building Static Pages with Astro for Perfect Core Web Vitals

Which function can be used to create dynamic routes in Astro?

Which function can be used to create dynamic routes in Astro?

Which is the correct annotation to mark a route as dynamic with any depth?

Which is the correct annotation to mark a route as dynamic with any depth?

It supports the use of custom components.

It supports customizing default elements.

How is MDX different from regular Markdown?

How is MDX different from regular Markdown?

We need to export a component from the home page called `404`.

We need to add a file to our routes named `404.astro`.

We need to return a page with the slug `/404` in a `getStaticPaths` call.

How can we create a custom 404 page in Astro?

How can we create a custom 404 page in Astro?

Given the following file location: `src/pages/api/author.json.ts`, what will be the correct generated API endpoint?

Given the following file location: <code>src/pages/api/author.json.ts</code>, what will be the correct generated API endpoint?

To return an item from the array at a given index

To return the index of an item from the array

To return `true` or `false`, whether an element can be found in the array by an index

What is the use of the `findIndex` array method?

What is the use of the <code>findIndex</code> array method?

**(Select all that apply.)** What is true for SSG? 

(Select all that apply.) What is true for SSG?

Gives better site performance compared to SSG

The perfect approach for content-heavy websites and landing pages

**(Select all that apply.)** What is true for SSR? 

(Select all that apply.) What is true for SSR?

By setting the `output` configuration option to `server`

By setting the `output` configuration option to `server` and defining `adapter`

By setting the `render` variable to `false` inside an Astro template

By setting the `render` variable to `true` inside an Astro template

By setting the `prerender` variable to `true` inside an Astro template

By setting the `prerender` variable to `false` inside an Astro template

How can we opt out of SSR in Astro?

Which adapter is not supported out of the box by Astro?

Which adapter is not supported out of the box by Astro?

Test your knowledge about the dynamic behavior of Astro.

Introduction

Getting Started with Astro

Setting Up the Home Page

Setting Up Individual Posts

Setting Up the Contact Page

Building Astro

Mastering Astro Framework

Conclusion

Appendix

Quiz: Setting Up Individual Posts