Frontend Beginner Projects

MDN Projects

• Markup Letter
• Planet Table
• Structuring a Page of Content
• Mozilla Splash Page
• Styling a Biography Page
• Styling a Digital Business Card
• Fancy Letterhead
• A Cool Box
• School Homepage
• Fundamental Layout
• Accessibility Troubleshooting

Scrimba CSS Challenges

• Spoiler Reveal
• Colorful Button
• Expanding Search Bar
• Codepen Tile
• Loading Animation #1
• Loading Animation #2
• Archery Target
• Word Carousel
• Flag of France
• Flag of Germany
• Flag of Madagascar
• Flag of Switzerland
• Flag of Japan
• Flag of Sweden
• Flag of Niger
• GitHub Profile Layout
• Toggle Switch
• Playing Card - Ace of Spades
• Playing Card - 4 of Hearts
• Adjustable Progress Bar
• Jeopardy Card Flip
• Loading Animation #3
• Instagram Stories Menu
• Animation ProgressBar
• GitHub Contribution Graph

Frontend Mentor Projects

• QR Code Component
• Blog Preview Card
• Social Links Profile
• Recipe Page

Roadmap.sh Projects

• Single Page CV
• Basic HTML Website
• Personal Portfolio
• Changelog Component
• Testimonial Cards
• Datepicker UI
• Accessible Form UI
• Image Grid Layout
• Tooltip UI

freeCodeCamp Projects

• Survey Form
• Tribute Page
• Tech Doc Page
• Product LandingPage
• PersonalPortfolio

JavaScript Focused Projects

Beginner Projects

Frontend Mentor Projects

• FAQ Accordion
• Interactive Rating Component
• Article Preview Component
• Base Apparel Page
• Intro w/ Signup Form
• Single Column Coming Soon Page

MDN Projects

• Silly Story Generator
• Image Gallery

Roadmap.sh Projects

• Tabs
• Cookie Consent
• Restricted Text Area
• Accordion
• Age Calculator
• Flash Cards

freeCodeCamp Projects

• Pyramid Generator
• Gradebook App
• Role Playing Game
• Background Color Changer
• Calorie Counter
• RPS Game
• Music Player
• Palindrome Checker Project

Intermediate Projects

Frontend Mentor Projects

• Conference Ticket Generator
• Product List w/ Cart
• Mortgage Repayment Calculator
• Contact Form
• Newsletter Signup w/ Success Message
• Age Calculator App
• News Homepage
• Notifications Page
• Interactive Card Details Form
• Expenses Chart Component
• Intro Section w/ Dropdown Navigation
• Time Tracking Dashboard
• Tip Calculator App
• Agency Landing Page
• Blogr Landing Page
• Crowdfunding Product Page
• Interactive Pricing Component
• LoopStudios Landing Page
• Coding Bootcamp Testimonials Slider
• Social Media Dashboard w/ Theme Switcher
• Insure Landing Page
• Pricing Component w/ Toggle
• Project Tracking Intro Component
• Fylo Dark Theme Landing Page

Scrimba JavaScript Interview Challenges

Content Pending...

Roadmap.sh Projects

• Custom Dropdown
• Task Tracker
• Temperature Converter

freeCodeCamp Projects

• Date Formatter
• Football Team Cards
• Todo App
• Roman Numeral Converter
• Spam Filter
• Number Sorter
• Statistics Calculator
• Spreadsheet
• Phone Number Validator
• Shopping Cart
• Platformer Game
• Dice Game
• Cash Register
• fCC Author's Page
• fCC Forum Leaderboard
• Pokémon Search App