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

It enables file formatting to create pretty links.

It can be used to build individual pages in folders with the `index.html` files.

It can be used to build individual pages without folders.

What is the use of the `format` option under `build` in Astro's configuration file?

What is the use of the <code>format</code> option under <code>build</code> in Astro’s configuration file?

To store static assets, such as fonts, icons, and images

To store public assets, such as post data and authors

No special purpose for a `public` folder in Astro

What is the use of the <code>public</code> folder?

Which attribute should be present on images to ensure good SEO?

Which attribute should be present on images to ensure good SEO?

Import aliases provide a way to use absolute imports.

Import aliases are used for importing static assets.

To allow search engines to display results as rich text

To provide extra information about a page on social media platforms

What is the purpose of the Open Graph protocol?

What is the purpose of the Open Graph protocol?

**(True or False)** The `<link rel="canonical" />` tag can be used to identify the original source of the content.

(True or False) The <code>&lt;link rel=&quot;canonical&quot; /&gt;</code> tag can be used to identify the original source of the content.

They are special XML markups that can be used to enhance the functionality of HTML.

They are special JSON markups that enable search engines to display results as rich snippets in search results.

They are special JavaScript markups that enable authors to write interactive code in Markdown files.

Use the custom `:global` pseudo selector.

**(Select all that apply.)** How can you define global CSS in Astro? 

(Select all that apply.) How can you define global CSS in Astro?

`<div class:list={[highlighted && 'highlighted']} />`

`<div class={[highlighted && 'highlighted']} />`

`<div class:list={[{ highlighted: highlighted }]} />`

`<div classList={[{ highlighted: highlighted }]} />`

**(Select all that apply.)** Which option is the correct way to create conditional CSS in Astro?

(Select all that apply.) Which option is the correct way to create conditional CSS in Astro?

The frontmatter variables are automatically available in the `script` tags encapsulated in the same component.

What is the proper way to pass variables from the frontmatter to the `script` tags?

What is the proper way to pass variables from the frontmatter to the <code>script</code> tags?

Test your knowledge of the basic building blocks 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 the Home Page