Astro for Fast Website Development

Jason Lengstorf

Jason Lengstorf

Learn With Jason
3 hours, 37 minutes CC
Astro for Fast Website Development

Course Description

Learn to build super speedy, content-focused websites using Astro, the modern web framework that delivers zero JavaScript by default (until you need it)! In the course, you'll start with a marketing website and add a blog. Then, you'll learn to add e-commerce features like a shopping cart using state management, server-side rendering, and API integration. You'll build all this while being framework-agnostic, demoing using both React and SolidJS with Astro!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: August 24, 2023

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 10 minutes
  • Introduction
    Jason Lengstorf begins the course by introducing key aspects of Astro, a web framework that features zero JavaScript by default, incorporates partial hydration, and maintains a UI-agnostic approach. This course is compatible with Astro versions 2.x and 3.x.

Project Setup, Layouts, & Styling

Section Duration: 1 hour, 6 minutes
  • Astro Adoption
    Jason highlights the advantages of adopting Astro, which encompass a content-focused approach, streamlined maintenance, and decreased bundle sizes. This section also includes instances of websites that have utilized the Astro framework.
  • Astro Project Setup
    Jason outlines the course objectives, the tools employed, and the prerequisites for participants. Additionally, the process of creating a new Astro project is part of this segment.
  • Create an Astro Page & Layout
    Jason explores Astro's approach to generating new routes and creates an "about" page using Markdown. The creation of templates, using slots as convenient placeholders for incorporating external HTML content, is also discussed in this part of the course.
  • CSS Styles & Navigation
    Jason demonstrates utilizing the <style> tag with or without the is:global attribute to implement global and scoped styling in Astro. Adding navigation by mapping over an array of navItems in Frontmatter is also covered in this segment.
  • Homepage Hero & Images
    Jason discusses various techniques used to manage images and demonstrates importing an image from the source directory. Image optimization strategies and Astro's experimental asset support, which is currently experimental, are also discussed in this segment.
  • 404 Page & noscript tag
    Jason walks through nesting layouts to enhance styling control and illustrates how to customize the 404 page. The use of the `<noscript>` tag to render HTML content in cases where JavaScript is disabled is also covered in this segment.

Using Frameworks & Fetching Data

Section Duration: 53 minutes

Blog, RSS & Deployment

Section Duration: 1 hour, 22 minutes
  • Homepage Product Preview
    Jason walks through the process of showcasing a preview of shop products on the homepage. This involves modifying the output of a previously constructed component by adding props.
  • Content Collections
    Jason illustrates the creation of a blog page while discussing topics like structuring, validating, and ensuring type-safety for Markdown content. This is accomplished through the utilization of content collections.
  • Dynamic Routing
    Jason showcases the process of generating dynamic routes within Astro's file-based routing system. Astro page files can generate multiple pages that match specific criteria by incorporating dynamic route parameters directly into the filename.
  • Adding an RSS Feed
    Jason illustrates the utilization of the @astrojs/rss package to automatically generate an RSS feed, which is displayed when new blog content is published. A student's question about employing a link tag for RSS autodiscovery is also covered in this segment.
  • Enabling SSR & Forms
    Jason explores the various rendering modes available in Astro and integrates a newsletter subscription form. By activating the hybrid rendering mode, Astro will default to pre-rendering and selectively server-render pages that opt out of this process.
  • Form Submission
    Jason walks through the process of incorporating the subscription form on a page that has not opted for server-side rendering (SSR). The handling of form submissions is directed to the SSR page specified in the form's action property.
  • Astro Q&A
    Jason addresses student questions related to making decisions about when to implement server-side rendering (SSR), approaches to authentication, and the utilization of serverless functions.
  • Deploying Astro
    Jason discusses deployment support for Astro applications and provides a step-by-step walkthrough of deploying the course repository to Netlify.

Wrapping Up

Section Duration: 4 minutes
This was an enjoyable little introduction to Astro. I just completed "Astro for Fast Website Development" by Jason Lengstorf on Frontend Masters!
Chad Elofson

Chad Elofson

chadelofson

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now