Find the perfect coding resourcesLearn more

Intro to Astro

ScrimbaScrimba
Recommended
Meet Your Instructor
James Q Quick avatar

James Q Quick

Instructor

Web Developer, Speaker, and Teacher. JavaScript instructor at Scrimba.

2h 6m

Format

Interactive coding

Subscription

What You'll Learn

Set up a project in Astro

Create and reuse components

Add and organize styles

Use slot components for flexible layouts

Import data from JSON files

Overview

Astro is a web framework that helps you build websites quickly. It's great for blogs, portfolios, and documentation. You can use components from frameworks like React or Vue, write pages in Markdown, and keep everything fast and clean by default. In this course, you'll get a hands-on intro to how Astro works and how to use it to build a real project from start to finish. You'll build a complete site with a header, sections, navigation, and a blog. Along the way, you'll create reusable components, style everything with CSS, and work with real content using Markdown and JSON. You'll also learn how to deploy the site using Netlify. The course is broken into small, focused lessons. You'll learn by doing, with plenty of chances to try things out for yourself.

Table of Contents
1
Intro to Astro3:26
2
Project setup and overview2:25
3
The starter code5:46
4
Create the header section4:20
5
Intro to reusable components2:21
6
Create header component1:46
7
Adding styles3:57
8
Styling the header4:24
9
Styling the header - part 23:43
10
Styling the button links3:14
11
TypeScript in Astro4:07
12
Finish the button link component4:35
13
Slot component2:30
14
Create container component2:07
15
Frontmatter templating4:13
16
Create projects section component4:23
17
Create section component5:09
18
Create section header component4:10
19
Importing data from JSON files2:38
20
Move Project Data to JSON2:04
21
File based routing3:40
22
Navbar Component3:24
23
Create the footer component4:02
24
Content collections in Astro3:08
25
Building the blog schema3:27
26
Markdown Intro4:17
27
Querying content collections2:28
28
Creating the blog section5:09
29
Create the blog card component3:10
30
Create the Blog List Page3:16
31
Dynamic Blog Pages5:18
32
Displaying Blog Content2:45
33
Create the projects list page3:19
34
Deploy to Netlify2:47
35
Wrap up and next steps4:00

Share Your Experience

Sign in to leave a review and help others

No reviews yet. Be the first to review!