Frontend Projects

Archive

Every frontend project, newest first.

2025

December

    1. 3D Christmas TreeAn interactive 3D Christmas tree scene built with Three.js, using Kenney asset packs for the tree and decorations.

2024

November

    1. Personal Website (2025)ArchivedMy personal website for 2025 — a pure static Astro 5 site with TypeScript, custom SCSS theming, and Catppuccin color scheme.

October

    1. E-commerce Product PageBuild a beautiful product page with a lightbox product gallery and cart functionality — a great test of JavaScript skills.
    1. News HomepageTest your CSS Grid skills with this news homepage layout challenge, including a mobile navigation menu.
    1. Contact FormBuilding accessible forms is a crucial task for front-end developers. This challenge will help you practice building a form with several input types and validation.
    1. FAQ AccordionBuild an accessible FAQ accordion with smooth keyboard navigation and animated open/close transitions.
    1. Interactive Rating ComponentThis is a nice, small project to practice handling user interactions and updating the DOM. Perfect for anyone who has learned the basics of JavaScript!

September

    1. Quiz AppThis app will test your skills (as well as your knowledge!) as you build out a fully functional quiz. We provide a local JSON file to help you practice working with JSON!
    1. Password Generator AppThis app will be an excellent test of your HTML, CSS, and JS skills. You'll build custom form controls and use JavaScript to generate random passwords.
    1. Tip Calculator AppThis small app is perfect for anyone starting to get to grips with JavaScript. The calculator functionality will be a nice test!
    1. Time Tracking DashboardA perfect opportunity to practice your CSS Grid skills. For anyone wanting to take it up a notch, we provide a JSON data file to practice working with data.
    1. Article Preview ComponentPractice your layout skills with this article preview component. There's lots of fun to be had playing around with animations for the sharing icons as well.
    1. Meet Landing PageThis HTML & CSS only challenge is perfect if you're starting to get comfortable with your layout skills. The responsive layout shifts will also be a great test!
    1. Testimonials Grid SectionThis challenge will be perfect practice for anyone wanting to test their CSS Grid skills. Grid is such a powerful addition to CSS, so it's worth getting to grips with it!
    1. Four Card Feature SectionA nice layout-based challenge for beginners. This will test anyone who is new to multi-column and responsive layouts.

2023

December

    1. Personal Website (2024)ArchivedThe version of my personal website used through 2024, built with SvelteKit, Skeleton, and Tailwind.
    1. WordGuess Game (React)A game where you guess a letter to find the word. Fetches a random word from an API and uses Framer Motion for animations when changing pages.

August

    1. JavaScript E-Commerce FrontendArchivedThe frontend mockup of an e-commerce site. Made with just JavaScript and CSS/HTML.
    2. Personal Website (2023)ArchivedThe second iteration of my personal website, rebuilt from scratch with updated styles and a better understanding of HTML structure.
    3. TypeScript E-Commerce FrontendAn e-commerce site frontend rebuilt from the ground up with TypeScript and Vite, featuring improved architecture and a component system.

July

    1. WordGuess Game (JavaScript)ArchivedA basic game to guess the word, made in just HTML and JavaScript. Just uses a small list of words from a local JSON file.

2022

February

    1. Personal Website (2022)ArchivedMy first public version of my own personal website.

2021

June

    1. Simple E-Commerce Frontend (2021)ArchivedMy earliest e-commerce frontend project — now retired, but preserved as a mark of early progress as a developer.

January

    1. Simple WebsiteArchivedMy very first GitHub page, created as a class project. The beginning of the journey.
Back to top