fem-challenges

Design and coding challenges from Frontend Mentor

Completed Challenges

Junior Challenges

  1. Loopstudios Landing Page
  2. Interactive Price Component
  3. Testimonial Grid Section
  4. Fylo Data Storage Component

Newbie Challenges

  1. Profile Card
  2. FAQ Accordion Card
  3. Social Proof
  4. Article Preview
  5. Four Card Feature Section
  6. Base Apparel
  7. Single Price Grid Component
  8. Coding Bootcamp Testimonial Slider
  9. Intro Component with Sign-up Form
  10. Pod Request Access Landing Page
  11. Ping Coming Soon Page
  12. Huddle Landing Page

Basic Approach to the Challenges

  1. Create a single git repo for all Frontend Mentor challenges and a separate folder and branch for each project (did not create a separate branch for the first project)
  2. Create a README for each project folder to keep track of design decisions, references used, issues that you’d like to resolve down the road, insights, etc.

  3. Download the challenge and read the directions and style-guide

    • Review the design with the above in mind, making note of general appearance, sections, components, similarities across sections/pages, graphics, etc.
  4. HTML
    • Structure the content and layout using semantic HTML, keeping in mind the needs of the largest design layout. What needs to be grouped? What may need positioning? Where are wrappers and/or containers needed? Use understandable class names.
  5. CSS
    • Design for mobile first
    • Define custom properties (adapt Kevin Powell’s naming style)
    • Focus on general styles first
    • Add enhancements one section at a time to keep commits as clean as possible
    • Refactor as necessary
  6. Review code, cleanup where necessary
  7. Run the HTML and CSS through the W3 Validators, make any necessary corrections
  8. Test on mobile phone and desktop, and try live pages on the Responsive Design Checker cleanup where necessary
  9. Submit solution on Frontend Mentor
  10. Correct any Accessibility problems identified by Frontend Mentor