astro-sndwch - Exploring Astro with Frontend Masters
Introduction
Explore the universe of web development with astro-sndwch, a dynamic website built using Astro, inspired by the Frontend Masters course. As a frontend developer, I delved into the intricacies of Astro to craft an interactive and feature-rich site.
Project Features
- Live Site: astro-sndwch Live Demo
- GitHub Repository: astro-sndwch GitHub
This site serves as a companion repository for the Astro course on Frontend Masters. The project covers various aspects of web development using Astro, providing a comprehensive learning experience.
Quick Setup
Get started with the astro-sndwch project by following these steps:
- Clone the repository:
git clone https://github.com/kravchuk21/astro-sndwch.git- Navigate to the project folder:
cd astro-sndwch- Install dependencies:
npm install- Start exploring Astro:
npm startWhat's Inside?
The astro-sndwch project covers a multitude of features and workflows commonly found in modern websites, including:
- Marketing Landing Page
- Shop with Advanced Layouts and Shared State
- Blog with Content Collections and Dynamic Routes
- About Page with Markdown Content
- Custom 404 Page
Project Highlights
- Astro Components: Leverage the power of Astro components, including frontmatter and slots.
- Layouts: Explore basic and advanced layouts for a seamless user experience.
- Fetching Data: Learn to fetch data using
fetchin Astro components and integrate with APIs and headless CMS. - Styling: Dive into styling techniques, including scoped styles, global styles, and the use of Astro goodies for CSS.
- Dynamic Routes: Implement dynamic routes for rendering pages at build time.
- Content Collections: Set up and configure content collections for building dynamic pages.
- Endpoints: Explore the creation of endpoints like RSS feeds and static APIs.
- Image Handling: Utilize the
assetsdirectory for efficient image management. - Hydrating JS Components: Learn to hydrate JS components, share state between islands, and collaborate with multiple frameworks.
Explore astro-sndwch!
Immerse yourself in the Astro universe by exploring the project's codebase on GitHub: