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

Course Curriculum

Chapter 1: Introduction and project setup

Lecture 1: Important! Read this before you start the course! (Github repo etc)

Lecture 2: Project overview

Lecture 3: High level overview of Astro & WordPress architecture

Lecture 4: Udemy ratings and reviews

Lecture 5: Astro project setup

Lecture 6: Add tailwind css to astro

Lecture 7: Setup prettier for auto formatting code on save

Lecture 8: Local WordPress site setup

Lecture 9: Create basic WordPress block theme

Chapter 2: Build out the homepage

Lecture 1: Query WordPress data from within Astro

Lecture 2: Create BlockRenderer component in Astro

Lecture 3: Render first blocks from the BlockRenderer component

Lecture 4: Create common head component and add SEO data

Chapter 3: Build out the navbar

Lecture 1: Add the navbar and site logo in WordPress

Lecture 2: Render the navbar within Astro

Lecture 3: Render the site logo within Astro using the Astro Image component

Lecture 4: Add additional pages within WordPress

Lecture 5: Add the Navigation block to the Header

Lecture 6: Render the Navigation links in Astro

Lecture 7: Render the navigation submenu in Astro (part 1)

Lecture 8: Render the navigation submenu in Astro (part 2)

Lecture 9: Integrate React into Astro and render Font Awesome icon

Lecture 10: Map WordPress page routes to use Astro site url

Chapter 4: Build the additional pages

Lecture 1: Dynamic routes in Astro

Lecture 2: Render correct data for pages

Lecture 3: Add poppins font to Astro site and WordPress theme

Lecture 4: Create the Cover block for the homepage in WordPress

Lecture 5: Add default styles for the Button block in WordPress

Lecture 6: Render the Cover block within Astro

Lecture 7: Render the Heading block within Astro (+ demo of named slots)

Lecture 8: Render the Buttons and Button blocks within Astro

Lecture 9: Finish the Cover component

Lecture 10: Add Image block and render Image component in Astro

Lecture 11: Add remaining homepage content and small styling fixes

Lecture 12: Create custom Tick Item block in WordPress

Lecture 13: Finish the Tick Item block

Lecture 14: Render the Tick Item block in Astro

Lecture 15: Create the global footer in WordPress

Lecture 16: Render the global footer in Astro

Chapter 5: Build out the property pages

Lecture 1: Create Property custom post type and property details custom fields

Lecture 2: Build out more of the property page in WordPress

Lecture 3: Create custom Property Details block in WordPress

Lecture 4: Render property details block in Astro

Lecture 5: Add more properties in WordPress

Lecture 6: Create Property Search custom block in WordPress

Lecture 7: Render the property search filters in Astro

Lecture 8: Set up SSR in Astro

Lecture 9: Render the buying/all-properties page as SSR

Lecture 10: Generate static file endpoint for buying/all-properties page

Lecture 11: Query for the static file endpoint in an SSR page

Lecture 12: Fix 404 page

Lecture 13: Hook up the url query string to the search form

Lecture 14: Generate static endpoint for properties

Lecture 15: Render properties in property search

Lecture 16: Filter the properties based on search filters

Lecture 17: Implement pagination for the property search

Lecture 18: Add styling for the page numbers in Astro

Lecture 19: Implement View Transitions API

Chapter 6: Build out the contact form

Lecture 1: Create the contact form in WordPress and render on contact page

Lecture 2: Render the contact form in Astro as a React component

Chapter 7: Deploy

Lecture 1: Deploy local WordPress site to Flywheel hosting

Lecture 2: Upload Astro project to github repo

Lecture 3: Deploy Astro project to Vercel

Lecture 4: Set up automatic rebuilds of Astro site anytime WordPress data changes

Chapter 8: Extras

Lecture 1: Render site logo for the favicon in the Astro project

Lecture 2: Implement the mobile menu functionality with a React component (part 1)

Lecture 3: Implement the mobile menu functionality with a React component (part 2)

Lecture 4: Improve google page speed score (part 1)

Lecture 5: Improve google page speed score (part 2)

Lecture 6: BONUS!