Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Learn Astro - Crash Couse for Beginners
9 students

Learn Astro - Crash Couse for Beginners

The course you need to start learning Astro
Created byChristina Petit - Petipois
Last updated 1/2026
English

What you'll learn

  • How to create a project
  • What Astro components are and how to use thme
  • Understanding content collections in Astro
  • The quickest way to add images
  • How to structure a portfolio website
  • Deploy code to github
  • How to deploy the website

Course content

3 sections • 12 lectures • 3h 19m total length

  • Introduction7:12

    Astro Beginner Bites - Introduction to Astro In this beginner tutorial we will look at the astro website, see what is required to create a project and why Astro is the best web framework for beginners.

    Explore the world of Astro.js, a beginner-friendly framework perfect for content-driven websites, and use it to build static sites.

    Learn about its main features, including astro markdown support and how to get started with installation. This tutorial will also help you with the basics of web development.

  • Creating your first project in Astro13:34

    In this video we will build on the previous installation of Astro,js.

    We will add Tailwind and Starwind UI to style our page.

  • Adding Components in Astro9:45

    In this tutorial we will be looking at components, the building blocks of code that can be reused throughout your site. We will create dynamic project cards and a navbar for our portfolio page.

  • Astro.js Content Collections14:32

    In this tutorial we look at Content Collections in Astro as well as how to structure markdown files.

  • How to use Markdown in Astro15:28

    In this beginner Astro tutorial we will continue with content collections and create a component to display and style each article. You will learn the basic on content management in Astro.

  • Saving your code in Github3:49

    In this mini tutorial we will walkthrough how to add your project to Github. Github is a version control software that developers use to "save" their projects.

    When any changes are made you can push those changes to Github, that way if for any reason your application/website has any errors you can go back to a version where everything was working.

    Visual Studio Code makes this process simple by adding a github plugin. It is recommended to deploy to github often when creating a project.

  • Adding Images in Astro7:59

    In this tutorial we will look at the basics of adding images to our project card component. We will use Unsplash free licensed images so you will not be hit with any copyright.

  • Displaying Articles Dynamically in Astro.js22:18

Requirements

  • The Basics of HTML, CSS and Javascript

Description

Go from knowing nothing about Astro to confidently understanding how it works, while building a clean, modern portfolio website from a Figma design.

This course is designed for beginners who want a practical introduction to Astro without unnecessary complexity or framework overload.

You will start by learning what Astro is, why it exists, and how it differs from traditional JavaScript frameworks. From there, you will set up an Astro project and explore its core concepts, including file-based routing, layouts, and reusable components. You will learn how Astro renders pages, how partial hydration works, and how to keep your site fast by default.

The course walks you through turning a real Figma design into a working website, step by step. You will learn how to structure content using content collections, manage and optimize images, and work with Markdown to create flexible, maintainable pages. Along the way, you will gain a clear understanding of how Astro handles assets and content compared to other tools you may already know.

By the end of the course, you will have a fully working portfolio website, a solid grasp of Astro.js fundamentals, and the confidence to start building your own projects with Astro.

Have fun!

Who this course is for:

  • Beginners to Astro Js

Report abuse