James Q Quick
Login
James Q Quick/Build Modern Websites with Astro (Basic)
Buy now

  • $75

Build Modern Websites with Astro (Basic)

  • Course

A hands-on course to teach you how to build websites the modern way using Astro!
Buy now

Key Takeaways

  • Modern rendering strategies (SSR, SSG, etc.)
  • Website performance and optimization
  • Working with content (MD, MDX, Headless CMS)

Learn By Building

I'm sure you've heard it before, "The best way to learn is to build", and I agree 100%. In this course, you'll learn through building 3 different applications!

  •  fully-featured blog including tags, pagination, authentication, and comments using markdown, Xata, Cloudinary, and more
  •  personal portfolio with MDX including a custom contact form using API endpoints
  •  event site using Storyblok CMS including internationalization and Google Maps

A Few Things You'll Learn

  • Static vs Dynamic Routes
  • SSG vs SSR
  • Content Collections
  • Astro Islands
  • Deploying and Hosting

  • Image Optimization
  • Integrations
  • Tailwind CSS
  • Types with Zod
  • API Endpoints

  • Pagination
  • Markdown and MDX
  • SEO and Meta Tags
  • RSS Feeds
  • Headless CMS

James taking a selfie 👋

Hi, I'm James Q Quick

I'm a full-stack developer with a passion for teaching developers, and I'm here to help you learn the latest and greatest in Web Development.

  •  300+ bootcamp students taught through Launch Code
  •  10+ years experience of teaching developers
  •  200,000+ followers on social media

Who Is This For?

This course is built for beginner to intermediate web developers that want to learn more about modern rendering strategies, performance, integrations, and more!

These People

  • students
  • learners
  • professionals

These Skills

  • HTML
  • CSS
  • JavaScript

These Wants

  • hands-on experience
  • skills for your resume
  • learn something new

Frequently asked questions

Is this course right for ME?

This course is made for beginner to intermediate JavaScript developers. The expectation is that you have basic knowledge of JavaScript and HTML/CSS.

What is your refund policy?

We offer a 30-day money back guarantee. If you are not satisfied with the course, you can request a refund within 30 days of purchase.

What kind of course is this?

This is a video course with hands-on tutorials to build 4 different demo applications with Astro. You will have access to all the videos and resources for the course as well as an exclusive Discord channel to ask questions.

Is there parity pricing available?

Yes! We offer parity pricing. If the cost of this course is prohibitive in your country, please contact us for more information.

Is there a student Discount?

Yes! We offer a 50% discount for students. Please send me an email with a picture of your student id.

What if I need help during the course?

By purchasing this course, you'll have access to a private Discord channel where you can ask questions and get help from the instructor and other students.

What if I have more questions?

If you have any questions that are not answered here, please contact us at me@jamesqquick.com.

Contents

Welcome and Resources

Welcome and Thank You.mp4
Resources.mp4
Upgrading from Astro 2.0 to 3.0 (optional)
Upgrading from Astro 3.0 to 4.0 (optional)
IMPORTANT - Default Port Update

Intro to Astro and Project Setup

Intro to Astro.mp4
Astro 4.0.mp4
Creating Your First Astro Project.mp4
The Dev Toolbar.mp4
Working with Git and Github.mp4
VS Code Setup.mp4
Shortcuts That I Use.mp4
Working With CSS.mp4
Overview of Astro Integrations.mp4
Introduction to Tailwind CSS.mp4
Tailwind Configuration File Types
Setting Up Tailwind CSS.mp4
Updating the Shared Layout.mp4
Updating the Header and Footer Components.mp4

Working with Markdown and Content Collections

Introduction to Markdown and Frontmatter.mp4
Introduction to Content Collections.mp4
Configuring Content Collections with Zod.mp4
Querying and Displaying List of Blog Posts.mp4
Creating the PostList Component.mp4

Dynamic Routes and Pagination

Creating Dynamic Routes for Blog Posts.mp4
Displaying Blog Posts.mp4
Styling Blog Posts Using The Tailwind Typography Plugin.mp4
Cleaning Up Code With Reusable Components.mp4
Creating the TableOfContents Component.mp4
Creating the Share Component.mp4
Intro to Pagination.mp4
Creating The Dynamic Route for Paginated Blog Posts.mp4
Creating the Pagination Component.mp4

SEO and Meta Tags

Introduction to Meta Tags.mp4
Adding Meta Tags.mp4
Customizing Meta Tags Per Page.mp4
Adding an RSS Feed.mp4
Displaying Categories.mp4
Creating Dynamic Routes for Category Pages.mp4
CHALLENGE: Implement Category Pagination
(Final Code) CHALLENGE: Implemented Category Pagination

Updating the Home Page and Clean Up

Displaying a Featured Post.mp4
Displaying Recent Posts.mp4
Refactoring the CategoryList Component.mp4

Image Optimization

Intro to the Astro Image Component.mp4
Setting Up The Astro Image Component.mp4
**UPDATE** - Adding OG Image in Layout for Blog Post Page

Astro Islands with Svelte

Section Intro.mp4
Adding Svelte (and Client Directives) .mp4
Handling Form Submissions with KwesForms.mp4

Deploying

Setting Up a Github Repository.mp4
Deploying to Netlify.mp4
Deploying to Vercel.mp4
Updating the Site Config Property.mp4