Dive into a comprehensive 1 hour 35 minute video tutorial on Astro, a powerful static site generator for building lightning-fast websites with minimal production JavaScript. Learn to create Astro components and integrate components from other frameworks like React, Vue, and Svelte. Follow along as the instructor guides you through creating a new Astro project, exploring folder structure, and running a development server. Master Astro components, top-level async requests, layouts, and prop passing. Develop practical skills by building a complete project, including global styling, header components, React integration, and dynamic classes. Explore advanced topics such as working with Markdown files, fetching data, and creating blog pages. Conclude the tutorial by learning how to build static assets and deploy your Astro project to Netlify. Don't forget to install the recommended VS Code extension for enhanced syntax highlighting.
Overview
Syllabus
- Intro / What Is Astro?.
- Project Demo.
- Create A New Astro Project.
- Folder Structure.
- Run Dev Server & Prepare.
- Astro Components.
- Making a Request - Top Level Async.
- Create A Layout.
- Passing Props.
- Start Project / Global Styling.
- Header Component.
- React Integration.
- Showcase Component.
- Features & Card Components.
- Dynamic Classes - Dark Card.
- Page Content & Tabs Component.
- Footer Component.
- About Page.
- Refactor Card Component.
- Blog Page & Markdown Files.
- Fetching Markdown FIles.
- Blog Showcase Component.
- Single Post Page / getStaticPaths().
- Build Static Assets.
- Deploy To Netlify.
Taught by
Traversy Media
