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

Astro JS + Headless WordPress: Xây dựng website bất động sản hoàn chỉnh với Astro.js, Tailwind + WordPress

4.5

(97 đánh giá)

1,189 học viên

Giảng viên

Tom Phillips

Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao

50.000đ 349.000đ -86%

✓ Xem giỏ hàng và thanh toán

Bao gồm phụ đề tiếng Việt, tiếng Anh

11.0 giờ video

75 bài giảng

Truy cập vĩnh viễn

Học trên mọi thiết bị

Cập nhật: 30/05/2026

#Astro #Frontend Frameworks #Javascript #Web Development

Bạn sẽ học được gì

Nâng cao giá trị bản thân và mở rộng kiến thức với tư cách là một lập trình viên web

Học Astro JS

Tạo website tĩnh, biên dịch từ server, tập trung vào nội dung bằng Astro JS & Headless WordPress

Thiết lập WordPress làm backend để xây dựng nội dung, sau đó hiển thị nội dung thành các trang với Astro JS & GraphQL

Triển khai website tĩnh Astro JS và tự động rebuild mỗi khi nội dung thay đổi bằng Vercel

Học cách tạo kiểu cho ứng dụng Astro JS với Tailwind CSS

Học cách tạo các khối Gutenberg tùy chỉnh cho WordPress với ACF pro

Tạo các API endpoint dạng file tĩnh với Astro JS

Triển khai hiệu ứng chuyển trang mượt mà bằng Astro's View Transitions API

Tạo một WordPress theme cơ bản cho headless WordPress backend của chúng ta

Yêu cầu

Có kiến thức tốt về Javascript

Có kinh nghiệm với WordPress sẽ là lợi thế nhưng không bắt buộc

Có kinh nghiệm với React sẽ có lợi, nhưng mã React trong khóa học này rất ít

Đối tượng phù hợp

Dành cho lập trình viên web muốn học cách tiếp cận tốt hơn để tạo website tĩnh, tập trung nội dung với WordPress, React JS và GraphQL bằng Astro JS

Nội dung khóa học

8 phần • 70 bài giảng

1 Quan trọng! Hãy đọc phần này trước khi bắt đầu khóa học! (Github repo, v.v.)

2 Tổng quan về dự án

3 Tổng quan kiến trúc cấp cao của Astro & WordPress

4 Đánh giá và nhận xét trên Udemy

5 MỚI - Thiết lập dự án Astro

6 MỚI - Thêm Tailwind CSS vào Astro

7 Thiết lập Prettier để tự động định dạng mã khi lưu

8 Thiết lập WordPress site trên local

9 Tạo WordPress block theme cơ bản

1 Truy vấn dữ liệu từ WordPress trong Astro

2 Tạo BlockRenderer component trong Astro

3 Hiển thị các khối đầu tiên từ BlockRenderer component

4 Tạo common head component và thêm dữ liệu SEO

1 Thêm thanh điều hướng và logo website trong WordPress

2 Hiển thị thanh điều hướng trong Astro

3 Hiển thị logo website trong Astro bằng Astro Image component

4 Thêm các trang phụ trong WordPress

5 Thêm Navigation block vào Header

6 Hiển thị các liên kết điều hướng trong Astro

7 Hiển thị menu con điều hướng trong Astro (phần 1)

8 MỚI - Hiển thị menu con điều hướng trong Astro (phần 2)

9 Tích hợp React vào Astro và hiển thị Font Awesome icon

10 Ánh xạ các route trang WordPress để sử dụng URL site Astro

1 Dynamic routes trong Astro

2 Hiển thị dữ liệu chính xác cho các trang

3 Thêm font Poppins vào site Astro và WordPress theme

4 Tạo Cover block cho trang chủ trong WordPress

5 Thêm kiểu mặc định cho Button block trong WordPress

6 Hiển thị Cover block trong Astro

7 Hiển thị Heading block trong Astro (+ demo về named slots)

8 MỚI - Hiển thị Buttons và Button blocks trong Astro

9 Hoàn thiện Cover component

10 Thêm Image block và hiển thị Image component trong Astro

11 Thêm nội dung còn lại cho trang chủ và chỉnh sửa kiểu dáng nhỏ

12 Tạo Tick Item block tùy chỉnh trong WordPress

13 Hoàn thiện Tick Item block

14 Hiển thị Tick Item block trong Astro

15 Tạo global footer trong WordPress

16 Hiển thị global footer trong Astro

1 Tạo Custom Post Type "Property" và các trường tùy chỉnh cho chi tiết bất động sản

2 Xây dựng thêm cho trang bất động sản trong WordPress

3 Tạo Property Details block tùy chỉnh trong WordPress

4 Hiển thị property details block trong Astro

5 Thêm nhiều bất động sản hơn trong WordPress

6 Tạo Property Search custom block trong WordPress

7 Hiển thị bộ lọc tìm kiếm bất động sản trong Astro

8 Thiết lập SSR trong Astro

9 Hiển thị trang buying/all-properties dưới dạng SSR

10 Tạo static file endpoint cho trang buying/all-properties

11 Truy vấn static file endpoint trong một trang SSR

12 Sửa lỗi trang 404

13 Kết nối query string URL với form tìm kiếm

14 Tạo static endpoint cho các bất động sản

15 Hiển thị các bất động sản trong tìm kiếm

16 Lọc các bất động sản dựa trên bộ lọc tìm kiếm

17 Triển khai phân trang cho tìm kiếm bất động sản

18 Thêm kiểu dáng cho số trang trong Astro

19 Triển khai View Transitions API

1 Tạo form liên hệ trong WordPress và hiển thị trên trang liên hệ

2 Hiển thị form liên hệ trong Astro dưới dạng React component

1 Deploy WordPress site local lên hosting Flywheel

2 Upload dự án Astro lên Github repo

3 Deploy dự án Astro lên Vercel

4 Thiết lập tự động rebuild site Astro mỗi khi dữ liệu WordPress thay đổi

1 Hiển thị logo website làm favicon trong dự án Astro

2 Triển khai chức năng menu mobile với React component (phần 1)

3 Triển khai chức năng menu mobile với React component (phần 2)

4 Cải thiện điểm Google Page Speed (phần 1)

5 Cải thiện điểm Google Page Speed (phần 2)

6 PHẦN THƯỞNG!

Giới thiệu khóa học

This course has been updated to Astro v5 and Tailwind v4.

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!