The Four Week Frontend challenge is a structured, 28-day coding adventure designed to help beginners establish and enhance their web development skills. Over the course of four weeks, participants will delve into a variety of projects that cover essential frontend technologies including HTML, CSS, and JavaScript. Each day presents a unique, manageable project that builds on the previous skills learned, culminating in a comprehensive portfolio of projects ranging from simple web pages to interactive applications. The challenge is designed for vanilla CSS / JS, but if you're learning a new framework this may serve as a great starting point!
This challenge is ideal for those looking to start a career in web development or simply enhance their coding skills. Each week focuses on different aspects of frontend development:
- Week 1: Focuses on HTML and CSS basics, laying the groundwork with projects like personal bios, recipe pages, and a daily planner.
- Week 2: Deepens HTML and CSS skills with more complex layouts and introduces basic JavaScript to enhance page interactivity.
- Week 3: Shifts towards JavaScript-intensive projects, helping participants understand how to manipulate the DOM and handle events.
- Week 4: Expands on JavaScript skills with API integration and complex functionality, rounding out the challenge with practical applications like a weather dashboard, a currency converter, and more.
The Four Week Frontend challenge is designed to fit around your life and commitments. While it's laid out as a 28-day program, you don't need to complete it in consecutive days. This challenge serves as a structured guide for those looking to build or enhance their frontend skills at their own pace. Whether you're filling gaps in your days, expanding your knowledge over weekends, or even spreading it out over several months, each project provides a step-by-step progression in web development. Use this challenge as your roadmap to a more rounded and robust frontend expertise whenever you find the time to code!
If you decide to take on the challenge, I'd love to see! Tweet me @whatsamtweets or use the hashtag #FourWeekFrontend so I can see all the awesome things you build!
- Solutions / examples for each day
- A README.md file for each day that explains the core concept and suggests ways to go about tackling the challenge
Create a simple HTML page featuring a short biography.
Build a page that displays a favorite recipe.
Set up a contact form with fields for name, email, and message.
Take the bio page from Day 1 and enhance it visually.
Create a webpage that acts as a flyer for an upcoming event.
Design a simple product page for a fictional item.
Create a simple daily planner page where one can list tasks or appointments for the day.
Create a web poster using only HTML and CSS that features inspiring quotes using creative typography.
Build a layout with a sidebar that adapts to different screen sizes using media queries.
Design a simple image slideshow using only HTML and CSS with manual navigation controls.
Create a hamburger menu icon that animates into an "X" when clicked.
Implement a basic parallax scrolling effect on a single-page site.
Add a button that, when clicked, shows a JavaScript alert saying "Hello, world!"
Enhance a static HTML/CSS image gallery with basic JavaScript to handle image switches on button clicks.
Create a modal that pops up when a button is clicked, which can be closed by clicking a "close" button or outside the modal area.
Implement a password strength indicator that updates as the user types their password.
Build a live digital clock that displays the current time and updates every second.
Create a quick-fire math quiz that asks simple arithmetic questions and checks answers in real-time.
Implement a search box that filters through a list of items (like names or titles) displayed on the page as the user types.
Create a page that uses CSS variables and JavaScript to toggle between light and dark mode.
Build a simple application where users can apply different Instagram-esque filters to images.
Create an application that pulls current weather data from a weather API and displays it.
Build a tool that converts amounts between different currencies using real-time exchange rates from an API.
Develop a simple note-taking app that saves notes to the browser's local storage.
Create a page that fetches a random joke from an API and displays it, with a button to load another joke.
Develop a simple interface for playing music files.
Create a blog post page that can load different posts stored in JSON format when selected from a list.
Build a demo page that uses accordions to show/hide embedded demos of the other days' projects.