How to Build 3 Astro.js Projects in Under an Hour
Petitpois
Create portfolio-worthy projects using Astro JS in under 30 minutes each
Photo by Kenny Eliason on Unsplash
Astro JS is such a lightweight framework that makes it easy for developers to create projects quickly. In this article we will breakdown the approach to creating projects quickly and efficiently using Astro JS and Tailwind CSS.
Projects we will create:
Portfolio Website
Product landing page
News Website
Portfolio Website
Photo by Zalfa Imani on Unsplash
A portfolio website is one of the best ways to showcase your skills and services online.
No matter the profession, a portfolio is an invaluable tool to establish credibility in any field.
The basics of a portfolio consists of:
Who you are
What you have achieved
How to get in touch
Product landing page
Photo by C D-X on Unsplash
Having a landing page for the product you are selling is a great marketing tool.
From shoes to software applications, a product landing page gives you the opportunity to get customers and expose your product to the world.
The basics of a product landing page consists of:
Product image
Product information
Call to action
News website
A news website is a great step to your web development journey as it allows you to work with APIs that enrich your software project.
Photo by Markus Spiske on Unsplash
News API — scrapes websites for articles and returns useful information such as the title, source, image, publish date and link to read the article.
News website Breakdown
Get all articles (from the API)
Display article information
Link to read specific article
Would you like to see more practical projects?
Sign up for my Practical Astro JS course today
Subscribe to my newsletter
Read articles from Petitpois directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Petitpois
Petitpois
🚀 Experienced Software Developer | Passionate Problem Solver | Creative Coder With over a decade of dedicated experience in software development, I bring a wealth of expertise across various domains of frontend and backend website and application development. My journey in the tech world has been marked by a fervent passion for problem-solving, coding excellence, and innovative design. Key Skills: Languages: HTML5, CSS3, Javascript, PHP, C# Frameworks & Libraries: Vue.JS, Nuxt, Ionic Content Management System: Wordpress Game Development: Proficient in designing, programming, and publishing Unity games Beyond traditional development, I nurture a keen interest in game development. I have not only designed and programmed mini Unity games using C#, but I've also actively participated in online game jams to refine my techniques and elevate my programming skills. Being an integral part of a religious community, I've embraced a commitment to continuous personal and professional growth. In addition to my technical prowess, I have honed valuable soft skills through ongoing participation in seminars on communication, leadership, team collaboration, public speaking, accurate reading, and personality development. These skills equip me to work seamlessly as part of a team, take the lead, train others, and confidently operate independently when needed. Join me on this exciting journey as I share insights, tips, and experiences from the dynamic world of software development and game design. Let's explore the endless possibilities of code and creativity together!