Challenges
- beginner
- HTML,
- CSS
Huddle landing page with coded decorative elements
Test your ability to code and position decorative elements with this challenge. The intro section is where most of the planning for this challenge will come in.
View challenge - beginner
- HTML,
- CSS
Huddle landing page with alternating feature blocks
This 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.
View challenge - intermediate
- HTML,
- CSS
Fylo landing page with dark theme and features grid
This design has some nice layout challenges in it. A perfect training ground to practice your Flexbox and/or Grid skills.
View challenge - beginner
- HTML,
- CSS
Huddle landing page with single introductory section
A perfect challenge for beginners, this project will get you working with a two column layout.
View challenge - intermediate
- HTML,
- CSS
Fylo landing page with two column layout
This 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.
View challenge - beginner
- HTML,
- CSS
Huddle landing page with single column layout
This challenge is perfect for beginners. The content is mostly in a single column layout, with some complexity in the footer.
View challenge - beginner
- HTML,
- CSS
Huddle landing page with split benefits section
This challenge is great if you're just starting to build more complex pages. It's mostly a single column layout, but with a couple of more challenging areas.
View challenge - beginner
- HTML,
- CSS
Fylo landing page with features grid section
Test your layout skills on this challenge with a couple of tricky areas. Both the features section and the footer will need some planning to find the best solution.
View challenge - beginner
- HTML,
- CSS
Fylo landing page with detailed integrations section
There are some interesting layout challenges in this one. Test your skills with both mobile and desktop designs with some multi-column layouts.
View challenge - intermediate
- HTML,
- CSS
Huddle landing page with alternating sections
Practice using pseudo-elements for styling extras and the CSS position property with these wavy sections.
View challenge - beginner
- HTML,
- CSS
Fylo beta sign up landing page
Test your layout skills with this responsive split-screen beta sign up landing page. This is a great challenge if you're looking for a simple layout to get started with.
View challenge
Resources
Want some amazing front-end resources? Of course you do. Check out our curated list of (mostly) free resources for HTML, CSS, JavaScript and more.
- HTML,
- CSS,
- JS
Materialize
If you like Google's Material Design, then you'll love Materialize. It's a great library for quick development using Material Design principles.Visit website- HTML,
- CSS,
- JS,
- general
CodeNewbie
An amazingly supportive community of programmers at all levels. If you're experienced, dive in and help the newbies. If you're a newbie join up, start asking questions and someone will help you out.Visit website- CSS
Sass
Sass is a CSS preprocessor that will supercharge your styling. It adds powerful features to help speed up your development workflow and make your code easier to maintain.Visit website
Subscribe to the Frontend Mentor newsletter
Stay up-to-date with new challenges, blog posts and general front-end goodness.
FAQs
Is there anywhere to post my solution code?
There is a Finished Projects channel in the Slack community where you can post a link to your solution. Also, please tweet us @frontendmentor with your Github URL and we'll retweet and have a quick peek at your code.
I need help. Is there anywhere I can get support?
Of course! Join our Slack community (below) and you can post questions and also help others out.
Are the challenges free?
Yes! All of the challenges are completely free. Simply download the starter code from the challenge page and you're up and running!
Who started Frontend Mentor?
Frontend Mentor was started by Matt Studdert, who is a Front-end/JavaScript developer and web development instructor. He currently teaches at General Assembly in London, UK.
Join our Slack community
Talk to others taking the challenges, get help with your code, discuss features. Chat about everything front-end!