Astro JS v5 & WordPress (Astro.js, TailwindCSS & WordPress)

Name: Astro JS v5 & WordPress (Astro.js, TailwindCSS & WordPress)
Rating: 4.4 (104 reviews)

Astro JS + Headless WordPress: Build a fully functioning real estate property website with Astro.js Tailwind + WordPress

Created byTom Phillips, WebDevEducation (Tom Phillips)

Last updated 7/2026

English

What you'll learn

Increase your value and improve your knowledge as a web developer
Learn Astro JS
Create a static, server-compiled, content-driven website using Astro JS & Headless WordPress
Set up WordPress as a backend to build content, then render the content as pages with Astro JS & GraphQL
Deploy your Astro JS static website and rebuild whenever content changes using Vercel
Learn how to style Astro JS apps with Tailwind CSS
Learn how to create custom WordPress Gutenberg blocks with ACF pro
Create static file api endpoints with Astro JS
Implement smooth view transitions using Astro's View Transitions API
Create a basic WordPress theme for our headless WordPress backend

Course content

8 sections • 70 lectures • 10h 45m total length

Important! Read this before you start the course! (Github repo etc)1:03
Project overview8:18
High level overview of Astro & WordPress architecture7:59
Udemy ratings and reviews0:38
NEW - Astro project setup11:27
NEW - Add tailwind css to astro11:22
Setup prettier for auto formatting code on save2:08
Local WordPress site setup12:39
Create basic WordPress block theme16:56

Add the navbar and site logo in WordPress6:36
Render the navbar within Astro5:25
Render the site logo within Astro using the Astro Image component7:36
Add additional pages within WordPress3:04
Add the Navigation block to the Header4:05
Render the Navigation links in Astro12:21
Render the navigation submenu in Astro (part 1)16:38
NEW - Render the navigation submenu in Astro (part 2)9:08
Integrate React into Astro and render Font Awesome icon6:55
Map WordPress page routes to use Astro site url9:37

Dynamic routes in Astro10:08
Render correct data for pages7:53
Add poppins font to Astro site and WordPress theme11:52
Create the Cover block for the homepage in WordPress5:15
Add default styles for the Button block in WordPress3:13
Render the Cover block within Astro9:52
Render the Heading block within Astro (+ demo of named slots)13:30
NEW - Render the Buttons and Button blocks within Astro12:17
Finish the Cover component18:45
Add Image block and render Image component in Astro5:57
Add remaining homepage content and small styling fixes13:21
Create custom Tick Item block in WordPress14:28
Finish the Tick Item block6:50
Render the Tick Item block in Astro4:37
Create the global footer in WordPress5:29
Render the global footer in Astro11:44

Create Property custom post type and property details custom fields15:08
Build out more of the property page in WordPress14:16
Create custom Property Details block in WordPress12:45
Render property details block in Astro22:26
Add more properties in WordPress3:32
Create Property Search custom block in WordPress4:52
Render the property search filters in Astro16:07
Set up SSR in Astro5:07
Render the buying/all-properties page as SSR15:05
Generate static file endpoint for buying/all-properties page10:58
Query for the static file endpoint in an SSR page4:30
Fix 404 page9:13
Hook up the url query string to the search form4:01
Generate static endpoint for properties7:26
Render properties in property search14:39
Filter the properties based on search filters7:36
Implement pagination for the property search14:05
Add styling for the page numbers in Astro5:56
Implement View Transitions API13:12

Requirements

Have a good understanding of Javascript
Experience WordPress would be beneficial but is not a requirement
Experience with React would be beneficial but the React code in this course is minimal

Description

This course has been updated to Astro v5 and Tailwind v4.

Dive into the world of modern web development with the Astro JS & Headless WordPress course.

You'll explore the innovative integration of Astro JS with a headless WordPress backend, and deploy your website with the cutting-edge hosting platform, Vercel. Experience the advantages of Server-Side Rendering (SSR) and Static Site Generation (SSG) for optimal performance, and write your code confidently in TypeScript.

Course Highlights:

Real-World Project: Build 'Astro Estates', a sophisticated real estate website, applying your skills in a project that mirrors professional development workflows.
Tailwind CSS Integration: Achieve stunning, responsive, and modern designs effortlessly with Tailwind CSS, right within your JavaScript environment.
Headless WordPress: Dive into basic WordPress block and theme development tailored for headless architecture.
GraphQL Expertise: Fetch data seamlessly from WordPress using GraphQL, simplifying data management and boosting your site's speed.
Seamless Page Transitions: Implement the View Transitions API for fluid, app-like navigational experiences between pages.
Static and Dynamic Harmony: Learn to manipulate static files and leverage API endpoints for content delivery.
React JS Interactivity with Astro island architecture: Bring your static sites to life with interactive elements using Astro's island architecture and React JS, the industry standard for UI development.
Effortless Deployment with Vercel: Discover the simplicity and power of deploying your projects on Vercel, ensuring your sites are not only blazing fast but also globally distributed and scalable.

By the time you complete this course, you'll have a profound understanding of building and deploying full-stack web applications using Astro JS and WordPress with Vercel. This skill set will empower you to craft web experiences that are not just high in quality but also in demand by modern businesses.

Join the Astro JS & Headless WordPress course now and start your journey to becoming a full-stack web development expert, with the power to deploy industry-leading websites with ease!

Who this course is for:

Web developers who want to learn a better approach to creating static, content-driven websites with WordPress, React JS, and GraphQL, using Astro JS

Astro JS v5 & WordPress (Astro.js, TailwindCSS & WordPress)

What you'll learn

Explore related topics

Course content

Introduction and project setup9 lectures • 1hr 13min

Build out the homepage4 lectures • 46min

Build out the navbar10 lectures • 1hr 21min

Build the additional pages16 lectures • 2hr 35min

Build out the property pages19 lectures • 3hr 21min

Build out the contact form2 lectures • 31min

Deploy4 lectures • 14min

Extras6 lectures • 44min

Requirements

Description

Who this course is for: