Jason Lengstorf
Learn With Jason
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
CloseCourse Details
Published: August 24, 2023
Topics
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
Table of Contents
Introduction
Section Duration: 10 minutes
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
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.
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.
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.
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.
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.
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
Jason demonstrates the process of fetching shop item data from an API and rendering the received JSON object on the DOM. Astro components can leverage the `fetch()` function to initiate HTTP requests to APIs, utilizing the complete URL for data retrieval.
Jason incorporates the functionality to add and remove items from the cart by employing nanostores to handle state management. Additionally, the process of tracking the cart's subtotal is demonstrated in this segment.
Jason demonstrates implementing support for the React and Solid frameworks in Astro. Styling Solid components using CSS modules and setting up the cart.tsx file is also covered in this segment.
Jason walks through implementing some shopping cart functionality. Displaying cart items, subtotal, total, and implementing the ability to remove items from the cart are covered in this segment.
Jason develops a React component for adding items to the cart and illustrates the concept of selective hydration using client directives. A student's question about utilizing nanostores to sustain state across multiple pages is also covered within this segment.
Blog, RSS & Deployment
Section Duration: 1 hour, 22 minutes
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.
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.
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.
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.
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.
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.
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.
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
Jason wraps up the course by highlighting the advantages of constructing websites with Astro and offering supplementary resources for further exploration.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops