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

Astro JS v4 & WordPress (Astro.js, TailwindCSS & WordPress), available at $79.99, has an average rating of 4.67, with 71 lectures, based on 47 reviews, and has 672 subscribers.

You will learn about 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 Astros View Transitions API Create a basic WordPress theme for our headless WordPress backend This course is ideal for individuals who are Web developers who want to learn a better approach to creating static, content-driven websites with WordPress, React JS, and GraphQL, using Astro JS It is particularly useful 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.

Enroll now: Astro JS v4 & WordPress (Astro.js, TailwindCSS & WordPress)

Summary

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

Price: $79.99

Average Rating: 4.67

Number of Lectures: 71

Number of Published Lectures: 70

Number of Curriculum Items: 71

Number of Published Curriculum Objects: 70

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will 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 Astros View Transitions API

Create a basic WordPress theme for our headless WordPress backend

Who Should Attend

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

Target Audiences

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

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!

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!

Instructors

Tom Phillips
Fast-paced information-dense courses for busy web developers

WebDevEducation (Tom Phillips)
Fast-paced information-dense courses for busy web developers

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 4 votes

4 stars: 11 votes

5 stars: 32 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!