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

سرفصل های دوره

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

1. Introduction and project setup

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

2. Project overview

3.1 astro.pdf

3. High level overview of Astro & WordPress architecture

4. Astro project setup

5. Add tailwind css to astro

6. Setup prettier for auto formatting code on save

7.1 plugins.zip

7. Local WordPress site setup

8. Create basic WordPress block theme

2. Build out the homepage

1. Query WordPress data from within Astro

2. Create BlockRenderer component in Astro

3. Render first blocks from the BlockRenderer component

4. Create common head component and add SEO data

3. Build out the navbar

1.1 ae-logo.zip

1. Add the navbar and site logo in WordPress

2. Render the navbar within Astro

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

4. Add additional pages within WordPress

5. Add the Navigation block to the Header

6. Render the Navigation links in Astro

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

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

9. Integrate React into Astro and render Font Awesome icon

10. Map WordPress page routes to use Astro site url

4. Build the additional pages

1. Dynamic routes in Astro

2. Render correct data for pages

3.1 fonts.zip

3. Add poppins font to Astro site and WordPress theme

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

4. Create the Cover block for the homepage in WordPress

5. Add default styles for the Button block in WordPress

6. Render the Cover block within Astro

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

8. Render the Buttons and Button blocks within Astro

9. Finish the Cover component

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

10. Add Image block and render Image component in Astro

11. Add remaining homepage content and small styling fixes

12. Create custom Tick Item block in WordPress

13. Finish the Tick Item block

14. Render the Tick Item block in Astro

15. Create the global footer in WordPress

16. Render the global footer in Astro

5. Build out the property pages

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

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

3. Create custom Property Details block in WordPress

4. Render property details block in Astro

5. Add more properties in WordPress

6. Create Property Search custom block in WordPress

7. Render the property search filters in Astro

8. Set up SSR in Astro

9. Render the buyingall-properties page as SSR

10. Generate static file endpoint for buyingall-properties page

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

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

13. Generate static endpoint for properties

14. Render properties in property search

15. Filter the properties based on search filters

16. Implement pagination for the property search

17. Add styling for the page numbers in Astro

18. Implement View Transitions API

6. Build out the contact form

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

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

7. Deploy

1. Deploy local WordPress site to Flywheel hosting

2. Upload Astro project to github repo

3. Deploy Astro project to Vercel

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

139,000 تومان

افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy