وب سایت تخصصی شرکت فرین
دسته بندی دوره ها

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
  • 45,900 تومان
    بیش از یک محصول به صورت دانلودی میخواهید؟ محصول را به سبد خرید اضافه کنید.
    خرید دانلودی فوری

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

    ایمیل شما:
    تولید کننده:
    شناسه: 27513
    حجم: 4588 مگابایت
    مدت زمان: 580 دقیقه
    تاریخ انتشار: 27 آذر 1402

    45,900 تومان
    افزودن به سبد خرید