Muf's Frontendmentor Challenge Solution
3-column preview card componentThis challenge is perfect if you're just getting started. The shift between the layouts will be a nice test if you're new to building responsive projects.
Advice generator appThe perfect project if you're learning how to interact with 3rd-party APIs. This challenge uses the Advice Slip API to generate random quotes of advice.
Age calculator appThis challenge is designed to sharpen your JavaScript and form validation skills. Working with dates in JavaScript can be tricky, so this will be a nice test!
Agency landing pageThis challenge will be a perfect test of your layout and responsive skills. There's a tiny bit of JS for the mobile menu, but the focus is HTML & CSS.
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.
Base Apparel coming soon pageThis layout looks simple enough, but there are some interesting details to it that will test your CSS skills. You'll also get to practice basic form validation.
Bento gridThis challenge is perfect for testing your CSS Grid and responsive skills with this bento grid layout.
Blog preview cardThis HTML & CSS-only challenge is a perfect project for beginners getting up to speed with HTML and CSS fundamentals, like HTML structure and the box model.
Blogr landing pageFlex your layout muscles with this landing page challenge. You'll mostly be working with HTML & CSS for this project with a tiny bit of JS for the mobile menu.
Bookmark landing pageThis challenge will really test your layout skills. There are also areas that will require some JavaScript, such as the tabbed features section and the FAQ accordion.
Calculator appThis calculator app will be a great test of your CSS and JS skills especially. If you're wanting to practice using Grid, this challenge will be perfect for you!
Chat app CSS illustrationIn this challenge, you'll be building out the entire app illustration from scratch. This will seriously test your CSS skills. So give it a go if you feel confident!
Clipboard landing pagePut your layout skills to the test with this HTML & CSS landing page challenge. This challenge includes a design for hover states.
Coding bootcamp testimonials sliderThis challenge will be a nice test if you're new to JavaScript. It's also a great opportunity to play around with content animations and transitions.
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.
Crowdfunding product pageThis challenge will test both your layout and state management skills. As visitors make pledges, your goal is to keep track of the changes.
E-commerce product pageIn this challenge, you'll build a beautiful product page. We'll be putting your JS skills to the test with a lightbox product gallery and cart functionality!
Easybank landing pageThis challenge will provide a nice test for your layout skills. If you're ready to move up from Junior challenges, this one is a great next step.
Expenses chart componentIn this challenge, you'll create a bar chart component from scratch. We provide a local JSON file, so you can add the chart data dynamically if you choose.
FAQ accordionIn this challenge, you'll build an FAQ accordion. This is an extremely common front-end pattern, so it's an excellent opportunity to get some practice in!
FAQ accordion cardIn this challenge, you'll be building out an FAQ accordion. This is an extremely common front-end pattern, so it's a great opportunity to get some practice in!
Four card feature sectionA nice layout-based challenge for beginners. This will test anyone who is new to multi-column and responsive layouts.
Fylo dark theme landing pageThis design has some nice layout challenges in it. A perfect training ground to practice your Flexbox and/or Grid skills.
Fylo data storage componentThis component has some interesting CSS challenges in the design. If you're looking to test your CSS skills, this will be a great project for you!
Fylo landing page with two column layoutThis project is great if you're starting to get confident with slightly more complex layouts. The second section with the testimonial area will provide a nice challenge.
Huddle landing page with a single introductory sectionA perfect challenge for beginners, this project will get you working with a two column layout.
Huddle landing page with alternating feature blocksThis challenge is perfect if you're wanting to practice your layout skills. If you're starting to get a bit more confident laying out a web page, give this project a go.
Huddle landing page with curved sectionsPractice using pseudo-elements for styling extras and the CSS position property for the sections with curved edges.
IP Address TrackerIn this challenge, you'll be using two separate APIs together to create an IP Address Tracking app.
Insure landing pageTest your layout skills with this HTML & CSS only landing page. This challenge is perfect if you're starting to get confident in laying out web pages.
Interactive card details formThis fun project will be an excellent way to practice DOM manipulation and form validation while also putting your HTML and CSS skills to the test.
Interactive comments sectionThis is project will put your JavaScript skills to the test. We provide a JSON file to pull the data, but it's also a perfect project to build as a full-stack CRUD app!
Interactive pricing componentIn this project, you'll build out an interactive pricing component complete with custom range input slider and pricing toggle. A perfect way to test your JS skills!
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!
Intro component with sign-up formPractice building out a sign-up form complete with client-side validation using JavaScript.
Intro section with dropdown navigationThis challenge will test your ability to create dropdown navigation menus, a common pattern on larger sites. It will also provide some nice basic layout challenges.
Job listings with filteringIn this challenge, you'll be using JavaScript to filter out jobs based on selected categories. We provide a local JSON file to help you practice working with JSON data.
Launch countdown timerThis will be a fun one! Your challenge is to build this countdown timer. There are lots of small CSS tests in the design as well. So it should keep you busy!
Loopstudios landing pageThis challenge is perfect if you're looking to test your CSS Grid chops. Even without Grid, this project will be a fun one to help you practice your layout skills!
Manage landing pageThis challenge will be a great test for your responsive skills. There are lots of small details and slight content shifts for different screen sizes.
Mortgage repayment calculatorThis mortgage calculator is an excellent project for practicing working with forms, client-side validation, and updating the DOM. Remember to focus on accessibility, too!
Multi-step formAn excellent test for your form-building and JS skills, this project will pose many challenges along the way to completion.
NFT preview card componentThis HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with.
News homepageThis news homepage will be an excellent opportunity to practice your CSS Grid skills. There will be lots of tricky decisions to make and plenty of learning opportunities!
Newsletter sign-up form with success messageThis will test your skills with basic form structure, validation, and submission. The success state will also be an excellent opportunity to work with DOM manipulation.
Notifications pageThis project will be a brilliant test of your HTML, CSS, and basic JavaScript skills. You'll use JS to toggle the visual state of the notifications.
Order summary componentA perfect project for newbies who are starting to build confidence with layouts!
Ping single column coming soon pageThis challenge is great for beginners and offers a chance to practice basic client-side form validation.
Pricing component with toggleThis challenge will get you thinking about building an accessible custom toggle control and also test your layout skills.
Product list with cartPractice updating the UI in multiple places based on user actions. The starter download also includes a JSON file to help you practice populating the DOM dynamically.
Product preview card componentThis HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects.
Profile card componentThis is a perfect challenge to test your layout skills. The card layout doesn't shift, so it's also great for those that haven't dived into responsive websites yet!
Project tracking intro componentSome interesting layout and code challenges are baked into this design. Perfect if you're a beginner who is starting to get a bit more confident with your layouts.
QR code componentA perfect first challenge if you're new to HTML and CSS. The card layout doesn't shift, so it's ideal if you haven't learned about building responsive layouts yet.
REST Countries API with color theme switcherIf you're wanting to test your JavaScript skills this is the challenge for you. Use whichever JS framework you prefer and pull data from the REST Countries API.
Recipe pageThis challenge will help you focus on writing semantic HTML. Ensure you think through what HTML elements are most appropriate for each piece of content.
Results summary componentThis challenge has something for everyone. It’s a HTML and CSS only project, but we’ve also provided a JSON file of the test results for anyone wanting to practice JS.
Rock, Paper, Scissors bonus gameThis challenge will test your HTML, CSS and JavaScript skills. There's even a Rock, Paper, Scissors, Lizard, Spock version if you really want to challenge yourself.
- Rock, Paper, Scissors game
This challenge will test your HTML, CSS and JavaScript skills. There's even a Rock, Paper, Scissors, Lizard, Spock version if you really want to challenge yourself.
Room homepageThis small homepage challenge packs a big punch to test your layout skills. There's also a slider in there to add a JS layer for extra practice.
Single price grid componentIn this challenge, you will build out the pricing component to the designs provided. This is perfect for beginners and people who want to complete a smaller challenge.
Social links profileIn this small project, you'll build out your social link-sharing profile. You can even personalize it and use it to share all your social profiles!
Social media dashboard with theme switcherThis challenge will be a perfect chance to practice your Grid skills. The color theme switcher also adds a nice additional test.
Social proof sectionThis project will test your layout skills. If you're starting to get confident with Flexbox or Grid, this will provide a nice challenge!
Space tourism multi-page websiteThis project is a fun collaboration with Scrimba and Kevin Powell! If you like, you can follow along and watch Kevin complete the project on Scrimba. Lots to learn!
Stats preview card componentThis is a great small challenge to help get you used to building to a design. There's no JS in this project, so you'll be able to focus on your HTML & CSS skills.
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!
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.
Tip calculator appThis small app is perfect for anyone starting to get to grips with JavaScript. The calculator functionality will be a nice test!
Todo appThe classic todo app with a few twists! This app includes a dark/light theme toggle and drag & drop reordering for anyone wanting an extra test.
URL shortening API landing pageIntegrate with the Clean URI link shortening API and play with browser storage in this landing page challenge.