https://github.com/sambeevors/four-week-frontend
A structured, 28-day coding adventure designed to help beginners establish and enhance their web development skills 👨💻
https://github.com/sambeevors/four-week-frontend
Last synced: 2 months ago
JSON representation
A structured, 28-day coding adventure designed to help beginners establish and enhance their web development skills 👨💻
- Host: GitHub
- URL: https://github.com/sambeevors/four-week-frontend
- Owner: sambeevors
- Created: 2024-04-12T14:38:48.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-12T14:39:38.000Z (about 1 year ago)
- Last Synced: 2025-02-13T22:51:21.148Z (4 months ago)
- Size: 1.95 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Four Week Frontend 👨💻
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](https://twitter.com/whatsamtweets) or use the hashtag #FourWeekFrontend so I can see all the awesome things you build!
## Roadmap
- [ ] 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
## Week 1: The basics 🧑🎓
### Day 1: Personal Bio Page
Create a simple HTML page featuring a short biography.
### Day 2: Recipe Page
Build a page that displays a favorite recipe.
### Day 3: Contact Form
Set up a contact form with fields for name, email, and message.
### Day 4: CSS Styling Challenge
Take the bio page from Day 1 and enhance it visually.
### Day 5: Event Flyer
Create a webpage that acts as a flyer for an upcoming event.
### Day 6: Product Page
Design a simple product page for a fictional item.
### Day 7: Daily Planner Page
Create a simple daily planner page where one can list tasks or appointments for the day.
## Week 2: Add a little ✨ spice ✨
### Day 8: CSS Typography Poster
Create a web poster using only HTML and CSS that features inspiring quotes using creative typography.
### Day 9: Responsive Sidebar Layout
Build a layout with a sidebar that adapts to different screen sizes using media queries.
### Day 10: CSS-Only Slideshow
Design a simple image slideshow using only HTML and CSS with manual navigation controls.
### Day 11: Animated Menu Icon
Create a hamburger menu icon that animates into an "X" when clicked.
### Day 12: Parallax Scrolling Effect
Implement a basic parallax scrolling effect on a single-page site.
### Day 13: Simple JavaScript Alert Button
Add a button that, when clicked, shows a JavaScript alert saying "Hello, world!"
### Day 14: JavaScript-based Image Gallery
Enhance a static HTML/CSS image gallery with basic JavaScript to handle image switches on button clicks.
## Week 3: Interactivity 🧚
### Day 15: Pop-up Modal
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.
### Day 16: Password Strength Checker
Implement a password strength indicator that updates as the user types their password.
### Day 17: Digital Clock
Build a live digital clock that displays the current time and updates every second.
### Day 18: Quick Math Quiz
Create a quick-fire math quiz that asks simple arithmetic questions and checks answers in real-time.
### Day 19: Dynamic Search Filter
Implement a search box that filters through a list of items (like names or titles) displayed on the page as the user types.
### Day 20: Dark Mode
Create a page that uses CSS variables and JavaScript to toggle between light and dark mode.
### Day 21: Instagram Filter Clone
Build a simple application where users can apply different Instagram-esque filters to images.
## Week 4: APIs and beyond 🚀
### Day 22: Weather API Integration
Create an application that pulls current weather data from a weather [API](https://open-meteo.com/) and displays it.
### Day 23: Currency Converter
Build a tool that converts amounts between different currencies using real-time exchange rates from an [API](https://freecurrencyapi.com/).
### Day 24: Local Storage Notes App
Develop a simple note-taking app that saves notes to the browser's local storage.
### Day 25: Random Joke Generator
Create a page that fetches a random joke from an [API](https://sv443.net/jokeapi/v2/) and displays it, with a button to load another joke.
### Day 26: Music Player Interface
Develop a simple interface for playing music files.
### Day 27: Blog Post Page
Create a blog post page that can load different posts stored in JSON format when selected from a list.
### Day 28: Portfolio with Accordions
Build a demo page that uses accordions to show/hide embedded demos of the other days' projects.