Front-end Mentor Challenges

Try these challenges targeting new front-end developers

Frontend Mentor | Front-end coding challenges using a real-life workflowFrontend Mentor

The next step in your journey to improving your HTML/CSS skills is to practice, and practice some more. A really good site for this is https://www.frontendmentor.io/. They have a large number of free challenges that allow you to clone a repository containing directions and supporting material to try to replicate a model HTML screen.

Below are a set of challenges that are targeted toward new front-end developers that focus exclusively on HTML/CSS (no JavaScript). They are a great starting point. Once you have completed these, you can progress to harder challenges, and as we move on to incorporate JavaScript into our site, you can include those challenges as well. I highly recommend the site and encourage you work through these challenges. It will really improve your skills.

Frontend Mentor | Testimonials grid section coding challengeFrontend Mentor

Frontend Mentor | 3-column preview card component coding challengeFrontend Mentor

Frontend Mentor | Single price grid component coding challengeFrontend Mentor

Frontend Mentor | Huddle landing page with a single introductory section coding challengeFrontend Mentor

Frontend Mentor | Social proof section coding challengeFrontend Mentor

Frontend Mentor | Four card feature section coding challengeFrontend Mentor