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 Astro's 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 Astro's 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!
You may also like
- Top 10 Video Editing Courses to Learn in November 2024
- Top 10 Music Production Courses to Learn in November 2024
- Top 10 Animation Courses to Learn in November 2024
- Top 10 Digital Illustration Courses to Learn in November 2024
- Top 10 Renewable Energy Courses to Learn in November 2024
- Top 10 Sustainable Living Courses to Learn in November 2024
- Top 10 Ethical AI Courses to Learn in November 2024
- Top 10 Cybersecurity Fundamentals Courses to Learn in November 2024
- Top 10 Smart Home Technology Courses to Learn in November 2024
- Top 10 Holistic Health Courses to Learn in November 2024
- Top 10 Nutrition And Diet Planning Courses to Learn in November 2024
- Top 10 Yoga Instruction Courses to Learn in November 2024
- Top 10 Stress Management Courses to Learn in November 2024
- Top 10 Mindfulness Meditation Courses to Learn in November 2024
- Top 10 Life Coaching Courses to Learn in November 2024
- Top 10 Career Development Courses to Learn in November 2024
- Top 10 Relationship Building Courses to Learn in November 2024
- Top 10 Parenting Skills Courses to Learn in November 2024
- Top 10 Home Improvement Courses to Learn in November 2024
- Top 10 Gardening Courses to Learn in November 2024