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

Focused View

Tom Phillips,WebDevEducation Support

9:39:50

58 View

1. Introduction and project setup

1. Important! Read this before you start the course!.html

2. Project overview.mp4

06:43

3.1 astro.pdf

3. High level overview of Astro & WordPress architecture.mp4

07:59

4. Astro project setup.mp4

09:25

5. Add tailwind css to astro.mp4

11:21

6. Setup prettier for auto formatting code on save.mp4

02:08

7.1 plugins.zip

7. Local WordPress site setup.mp4

12:39

8. Create basic WordPress block theme.mp4

16:56

2. Build out the homepage

1. Query WordPress data from within Astro.mp4

10:23

2. Create BlockRenderer component in Astro.mp4

08:41

3. Render first blocks from the BlockRenderer component.mp4

18:10

4. Create common head component and add SEO data.mp4

09:05

3. Build out the navbar

1.1 ae-logo.zip

1. Add the navbar and site logo in WordPress.mp4

06:36

2. Render the navbar within Astro.mp4

05:25

3. Render the site logo within Astro using the Astro Image component.mp4

06:58

4. Add additional pages within WordPress.mp4

03:04

5. Add the Navigation block to the Header.mp4

04:05

6. Render the Navigation links in Astro.mp4

12:21

7. Render the navigation submenu in Astro (part 1).mp4

16:38

8. Render the navigation submenu in Astro (part 2).mp4

07:29

9. Integrate React into Astro and render Font Awesome icon.mp4

06:55

10. Map WordPress page routes to use Astro site url.mp4

09:37

4. Build the additional pages

1. Dynamic routes in Astro.mp4

10:08

2. Render correct data for pages.mp4

07:53

3.1 fonts.zip

3. Add poppins font to Astro site and WordPress theme.mp4

11:52

4.1 paul-kapischka-nlbmgdbio4y-unsplash-scaled.zip

4. Create the Cover block for the homepage in WordPress.mp4

05:15

5. Add default styles for the Button block in WordPress.mp4

03:13

6. Render the Cover block within Astro.mp4

09:52

7. Render the Heading block within Astro (+ demo of named slots).mp4

13:30

8. Render the Buttons and Button blocks within Astro.mp4

12:06

9. Finish the Cover component.mp4

18:45

10.1 charles-forerunner-3fpxt37x6uq-unsplash-scaled.zip

10. Add Image block and render Image component in Astro.mp4

05:57

11. Add remaining homepage content and small styling fixes.mp4

13:21

12. Create custom Tick Item block in WordPress.mp4

14:28

13. Finish the Tick Item block.mp4

06:50

14. Render the Tick Item block in Astro.mp4

04:37

15. Create the global footer in WordPress.mp4

05:29

16. Render the global footer in Astro.mp4

11:44

5. Build out the property pages

1. Create Property custom post type and property details custom fields.mp4

15:08

2.1 frames-for-your-heart-2d4laqalbda-unsplash-scaled.zip

2.2 jared-rice-ahiunolb7cg-unsplash-scaled.zip

2.3 kirsten-drew-v-wkjz4dbac-unsplash-scaled.zip

2.4 todd-kent-178j8tjrnlc-unsplash-scaled.zip

2.5 vita-vilcina-ktoid0fljqu-unsplash-scaled.zip

2.6 webaliser- tptxzd9moo-unsplash-scaled.zip

2. Build out more of the property page in WordPress.mp4

14:16

3. Create custom Property Details block in WordPress.mp4

12:45

4. Render property details block in Astro.mp4

22:26

5. Add more properties in WordPress.mp4

03:32

6. Create Property Search custom block in WordPress.mp4

04:52

7. Render the property search filters in Astro.mp4

16:07

8. Set up SSR in Astro.mp4

05:07

9. Render the buyingall-properties page as SSR.mp4

10:44

10. Generate static file endpoint for buyingall-properties page.mp4

10:58

11. Query for the static file endpoint in an SSR page.mp4

03:52

12. Hook up the url query string to the search form.mp4

04:01

13. Generate static endpoint for properties.mp4

07:26

14. Render properties in property search.mp4

14:39

15. Filter the properties based on search filters.mp4

07:36

16. Implement pagination for the property search.mp4

14:05

17. Add styling for the page numbers in Astro.mp4

05:56

18. Implement View Transitions API.mp4

13:12

6. Build out the contact form

1. Create the contact form in WordPress and render on contact page.mp4

09:03

2. Render the contact form in Astro as a React component.mp4

22:06

7. Deploy

1. Deploy local WordPress site to Flywheel hosting.mp4

04:43

2. Upload Astro project to github repo.mp4

02:28

3. Deploy Astro project to Vercel.mp4

04:48

4. Set up automatic rebuilds of Astro site anytime WordPress data changes.mp4

02:22

Description

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

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

Who is this 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

What You Need to Know?

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

More details

Description
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

User Reviews

Rating

average 0

Total votes0

Focused display

Tom Phillips has been developing front end web and mobile apps in the United Kingdom for numerous years. In that time he has had to prepare and teach multiple courses on the latest cutting edge front end web frameworks to junior developers, as well as mentor them during their early days as junior developers. Through doing this, Tom found efficient methods to teach and break down common complex problems that many developers face when trying to get started with new frameworks, especially in such a rapidly changing field as front end web development. Now he's applying those methods to his Udemy courses!Way back when Tom himself was a junior developer, he was fortunate enough to have been mentored by experts in the field. This allowed him to rapidly progress in his career and understand and architect multiple large projects in his time as an expert front end developer. Now Tom is passing on the buck and sharing his knowledge. Get the same mentoring that Tom received by enrolling on one of his courses and fast-track your understanding and knowledge in front end web development.

WebDevEducation Support

Instructor's Courses

Tom has been a web developer for over a decade. He created WebDevEducation to provide courses that provide you with the skills to increase your value as a front end developer by improving your web development skills. Learn popular web development libraries and frameworks with Tom to get ahead of the competition!(TOMPHILL LTD - 09531652)

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.