This Projects Hub reflects my journey as a self-taught frontend developer. It serves as a centralized place where I showcase all of my web development projects in its own dedicated repository.
Each project I build represents a piece of my learning journey and is treated as a real-world deliverable with its own README documentation and live site deployment.
This hub is an ever evolving repository that will be regularly updated as soon as a new project is deployed.
Directions: Click to see my projects
📄 HTML PROJECTS
| Project | Preview | Links |
|---|---|---|
| 1. Beginner Portfolio Website |  |
🌐 | 💻 |
| » Recipe Page |  |
🌐 | 💻 |
| » Table Tennis Page |  |
🌐 | 💻 |
| » HTML Forms |  |
🌐 | 💻 |
| 2. FreeCodeCamp Projects |  |
🌐 | 💻 |
| » Book Catalog Table |  |
🌐 | 💻 |
| » Checkout Page |  |
🌐 | 💻 |
| » Event Hub Page |  |
🌐 | 💻 |
| » Movie Review Page |  |
🌐 | 💻 |
| » Recipe Page |  |
🌐 | 💻 |
| » Survey Form |  |
🌐 | 💻 |
| » Travel Agency Page |  |
🌐 | 💻 |
| » Video Compilation Page |  |
🌐 | 💻 |
| 3. The Little Taco Shop Website |  |
🌐 | 💻 |
🎨 HTML + CSS PROJECTS
| Project | Preview | Links |
|---|---|---|
| 1. The Little Taco Shop Website v2 |  |
🌐 | 💻 |
| 2. Living the Simple Life |  |
🌐 | 💻 |
| 3. Chris Courses Learning Platform |  |
🌐 | 💻 |
| 4. YouTube Clone Website |  |
🌐 | 💻 |
| 5. Simple Landing Page |  |
🌐 | 💻 |
| 6. W3Schools Projects |  |
🌐 | 💻 |
| 7. FreeCodeCamp Projects |  |
🌐 | 💻 |
| » Availability Table |  |
🌐 | 💻 |
| » Blog Post Card |  |
🌐 | 💻 |
| » Book Inventory App |  |
🌐 | 💻 |
| » Business Card |  |
🌐 | 💻 |
| » Confidential Email Page |  |
🌐 | 💻 |
| » Contact Form |  |
🌐 | 💻 |
| » Event Flyer Page |  |
🌐 | 💻 |
| » House Painting |  |
🌐 | 💻 |
| » Job Application Form |  |
🌐 | 💻 |
| » Magazine Layout |  |
🌐 | 💻 |
| » Moon Orbit |  |
🌐 | 💻 |
| » Newspaper Article |  |
🌐 | 💻 |
| » Page of Playing Cards |  |
🌐 | 💻 |
| » Personal Portfolio |  |
🌐 | 💻 |
| » Product Landing Page |  |
🌐 | 💻 |
| » Set of Colored Boxes |  |
🌐 | 💻 |
| » Stylized To-Do List |  |
🌐 | 💻 |
| » Technical Documentation Page |  |
🌐 | 💻 |
| » Tribute Page |  |
🌐 | 💻 |
| 8. Frontend Mentor Projects | ||
| » Simple Omelette Recipe |  |
🌐 | 💻 |
| » QR Code Component |  |
🌐 | 💻 |
| » Blog Preview Card |  |
🌐 | 💻 |
| » Social Links Profile |  |
🌐 | 💻 |
| » Product Preview Card |  |
🌐 | 💻 |
| » Four-Card Feature Section |  |
🌐 | 💻 |
| » Testimonials Grid Section |  |
🌐 | 💻 |
| » Results Summary Component |  |
🌐 | 💻 |
| » NFT Preview Card Component |  |
🌐 | 💻 |
| » Order Summary Component |  |
🌐 | 💻 |
| » Stats Preview Card Component |  |
🌐 | 💻 |
| » 3-Column Preview Card Component |  |
🌐 | 💻 |
| » Profile Card Component |  |
🌐 | 💻 |
| » Social Proof Section |  |
🌐 | 💻 |
| » Single Price Grid Component |  |
🌐 | 💻 |
| » Huddle Landing Page |  |
🌐 | 💻 |
| » Bento Grid |  |
🌐 | 💻 |
| » Fylo Data Storage Component |  |
🌐 | 💻 |
| » Clipboard Landing Page |  |
🌐 | 💻 |
| » Chat App CSS Illustration |  |
🌐 | 💻 |
🚀 HTML + CSS + JAVASCRIPT PROJECTS
| Project | Preview | Links |
|---|---|---|
| 1. Conquering Responsive Layouts |  |
🌐 | 💻 |
| 2. W3Schools JS Tutorial Clone Site |  |
🌐 | 💻 |
| 3. FreeCodeCamp Projects | ||
| » JS Trivia Bot |  |
🌐 | 💻 |
| » Veil and Visions |  |
🌐 | 💻 |
| » No One Asked |  |
🌐 | 💻 |
- Land my first frontend developer role
- Explore open-source and freelancing opportunities
- Learn more by building web applications that solve real-world problems
- Improve performance, accessibility, and responsiveness
- Stay updated on latest frontend tech trends and best practices
- Grow toward full-stack or AI-related paths
- HTML5, CSS3, JavaScript
- Visual Studio Code (IDE)
- Git & GitHub (CLI + Desktop)
- Netlify (site deployment)
- Markdown (project documentation)
- Figma (design-to-code)
- PerfectPixel (image-to-code)
- Google Lighthouse (accessibility evaluation)
Elmar Chavez — Frontend Developer in Progress
🗓️ Year: 2025
🎯 Goal: To become an expert frontend developer with a strong presence online
“I started this journey barely knowing what an HTML is. Now, I build and deploy full websites with confidence.”