Practical Projects with Astro JS

Name: Practical Projects with Astro JS
Rating: 4.6 (2 reviews)

Make websites using Astro JS

Created byChristina Petit - Petipois

Last updated 1/2026

English

What you'll learn

Learn Astro JS basics
Fast Web Development
Build Modern Practical Real-world Applications
Create Websites using Astro JS
Learn Server Side Rendering (SSR) in Astro
Astro JS Framework

Course content

7 sections • 33 lectures • 8h 53m total length

Course Introduction4:06
Course Introduction

Project Overview & Setup5:14
In this tutorial, we will research the website template we are going to use and break down the approach.
Featured Image - Coding the Hero section33:13
The main feature of the landing page is the Hero or Featured Image. We will source free images and recreate the Canva design using Astro.js
Coding the About Section26:27
The About section features a two-column layout and other styles we need to code.
What we Offer - Custom Card Components19:36
This section will build on what we already learnt with images and we will create our own custom OfferCard Component
Coding the Testimonial Section8:30
We will be working with arrays and images to make a customized testimonial section.
Wrapping it up - Coding the Footer14:33
As we finalize our landing page we will revisit concepts and code that will be useful in your future projects
Deploying Website to Netlify9:45
Source code0:04
Fitness Astro Template source code

Project Overview2:05
Creating a new Astro Project5:30
Figma to Astro: Florist Website - Creating a new Astro Project
We wil create a new Astro JS project in Visual Studio Code
Creating the Hero & About Sections26:54
Figma to Astro: Florist Website - Hero & About Sections
We will convert the Hero and About Designs from Figma to Astro JS
Adding a Product Gallery Section20:14
Figma to Astro: Product Gallery
This video deep dives into recreating the Gallery Section of the Figma Design.
Adding a Feature Section16:45
Adding Testimonials14:24
Adding the Testimonial Section
Adding an Image Gallery7:25
Adding the Image Gallery
Subscribe Section8:06
Adding a newsletter or subscribe call to action section
Blog Section12:52
In this lecture we will add the blog section
Source code0:03

Course Introduction2:05
In this video, we discuss the elements of making a tutorial website. We will look at examples online and gather inspiration for our tutorial website.
Setup and Layout27:25
In this video we will setup and layout our Astro JS website with flowbite, tailwind css
Adding Markdown Content23:06
This video we will walk through adding content to the website via markdown files and learn how to make dynamic routes

Course Introduction2:24
In this video, we discuss the elements of making a tutorial website. We will look at examples online and gather inspiration for our tourism website.
Setup and Layout51:51
In this video, we set up a basic home page for the tourism website. We walk through a component-based approach to Astro JS Website design. We also incorporate installing tailwind CSS and Flowbite for quick styling.
Adding content using Astro 5 Content Layer39:41
In this video, we set up the tour page for the tourism website and individual tour pages. We use the new content collection layout from Astro 5.

Requirements

Intermediate knowledge of Javascript
Node JS
Visual Studio Code
Basics of Astro JS

Description

Welcome to Practical Project with Astro JS

In this comprehensive course, we will make Astro JS websites. If you want to learn the fastest-growing JavaScript framework for content websites, look no further.

Astro JS is a great framework for beginners and professionals alike. As we will not be going to the very basics of Astro JS it is recommended to use this course as more of a portfolio boost to showcase your skills.

You will learn:

How to convert a Canva website template
How to convert a Figma Design to an Astro Website
How to convert design into code
How to create an Astro.js Website from scratch
How to add Server-Side Rendering (SSR) in Astro JS

Projects

Convert a Canva Website Template to Astro JS
Convert a Figma Website Template to Astro JS
Make a tutorial curation website using Astro JS
Make a travel website using Astro JS
Create an Astro JS Web Application with Server-Side Rendering (coming soon)

Who am I?

I am a freelance web developer with a passion for teaching web development, as a visual learner I will go step by step through the process of creating a website and deconstructing a design from free resources available online.

I hope you enjoy the course and learn this great JavaScript framework.

Enjoy

Who this course is for:

Beginner Developers looking to create practical projects
Intermediate Developer looking to expand portfolio

Practical Projects with Astro JS

What you'll learn

Explore related topics

Course content

Practical Astro JS Projects - Introduction1 lecture • 4min

Canva Design to Astro JS8 lectures • 1hr 57min

Figma Design to Astro JS10 lectures • 1hr 54min

Building a Tutorial Website in Astro JS3 lectures • 53min

Create a Customer Review Component with Astro DB1 lecture • 8min

Build a Tourism Website in Astro JS3 lectures • 1hr 34min

Create an Airbnb Clone7 lectures • 2hr 23min

Requirements

Description

Who this course is for: