Practicing Implementation with Frontend Mentor
Scenario
In a professional setting, developers often work from detailed Figma designs to build high-quality, pixel-perfect web components. To strengthen your development skills, this lab will introduce you to Frontend Mentor, a tool providing real-world coding challenges. Frontend Mentor will help you practice translating Figma designs into HTML and CSS and give you a taste of professional front-end development workflows. The hands-on challenges will enhance your proficiency with core web development tools and refine your ability to implement design specifications accurately.
Objectives
By the end of this lab, you will be able to:
- Create an account and navigate the Frontend Mentor platform.
- Complete two foundational Frontend Mentor challenges using HTML and CSS.
- Optionally complete additional challenges to build more complex web components.
Submission Requirements
Submit your completed lab using the Start Assignment button on the assignment page in Canvas. Your submission should include:
- A link to your GitHub repository or repositories containing the challenge solutions.
Instructions
Create an Account
Frontend Mentor requires GitHub authentication, making account creation simple.
- Navigate to Frontend Mentor .
- Select Log in with GitHub at the top-right of the screen.
Note: Make sure to use your personal or assigned GitHub account for this lab, as you will be submitting your work via GitHub repositories.
Explore Frontend Mentor
Take five to ten minutes to look around the Frontend Mentor platform. Here are some highlights:
- Challenges: Frontend Mentor offers a variety of challenges based on professional Figma designs, providing real-world experience.
- Community: After submitting a solution, you can view other solutions, allowing you to learn from different coding approaches.
- Articles and Resources: Frontend Mentor provides articles on best practices and tutorials.
Once familiar with the platform, continue to the first challenge below.
(Graded) First Challenge – QR Code Component
Challenge Link: QR Code Component Challenge
- Download Starter Files: The challenge includes pre-written HTML and CSS starter code, simulating a real-world project handoff. Download these files.
- Download Figma Design File: Open the design in Figma to inspect elements as needed.
- Review Documentation: Read through the
README.mdandstyle-guide.mdfiles for design details, colors, and fonts. - Implementation: Open the starter code in VS Code, inspect the Figma file, and start implementing the design.
Objective: Build out the QR code component to match the design as closely as possible. This simple component will help you practice aligning layout and style with a professional design.
Evaluation Criteria
| Criteria | Excellent (5 points) | Good (4 points) | Satisfactory (3 points) | Needs Improvement (1-2 points) | Points |
|---|---|---|---|---|---|
| Accuracy to Design | Matches design precisely, with pixel-perfect alignment, spacing, and sizing of all elements. | Minor discrepancies with alignment or spacing, but overall close to the design. | Some noticeable differences, but layout resembles the design. | Significant differences in layout or spacing, and does not closely match the design. | __ / 5 |
| CSS Styling | CSS is well-organized and matches style guide exactly (colors, fonts, and sizes). | CSS is mostly accurate, with minor deviations from the style guide. | CSS is functional but lacks adherence to style guide in multiple areas. | CSS is incomplete, with major deviations in styling from the design specifications. | __ / 5 |
| Layout and Structure | Uses clean, semantic HTML structure that aligns well with the component’s layout. | HTML structure is generally good, with minor issues in organization. | HTML structure is satisfactory but may lack semantic tags or contain redundant elements. | HTML structure is messy or lacks semantic organization, impacting readability. | __ / 5 |
| Responsiveness | Component is fully responsive and adapts smoothly to screen sizes as expected. | Component is mostly responsive, with slight layout shifts on smaller screens. | Component shows basic responsiveness but may not adapt well on all screen sizes. | Component is not responsive or has significant layout issues on smaller screens. | __ / 5 |
| Completion and Function | All requirements from the challenge are met, and the component functions as intended. | Component is mostly functional, with minor missing details. | Component is functional but lacks some minor aspects required in the challenge. | Component does not meet key requirements of the challenge or lacks functionality. | __ / 5 |
(Graded) Second Challenge – Blog Preview Card
Challenge Link: Blog Preview Card Challenge
Repeat the steps from the first challenge to complete this component.
- Download the starter files and Figma design.
- Read the
README.mdandstyle-guide.mdfiles. - Implement hover and focus states for interactive elements.
Objective: Build the blog preview card to match the design, focusing on accurate layout, typography, and hover/focus states. This challenge will help reinforce your HTML and CSS skills, while adding basic interactivity.
Evaluation Criteria
| Criteria | Excellent (5 points) | Good (4 points) | Satisfactory (3 points) | Needs Improvement (1-2 points) | Points |
|---|---|---|---|---|---|
| Accuracy to Design | Matches design precisely, with pixel-perfect alignment, spacing, and sizes of all elements. | Minor discrepancies with alignment or spacing, but overall close to the design. | Some noticeable differences, but layout resembles the design. | Significant differences in layout or spacing, and does not closely match the design. | __ / 5 |
| CSS Styling | CSS is well-organized and matches style guide exactly (colors, fonts, and sizes). | CSS is mostly accurate, with minor deviations from the style guide. | CSS is functional but lacks adherence to style guide in multiple areas. | CSS is incomplete, with major deviations in styling from the design specifications. | __ / 5 |
| Interactive Elements | Hover and focus states are implemented exactly as specified, with smooth transitions and responsive feedback. | Hover and focus states are mostly implemented, with minor issues in transitions or responsiveness. | Some hover and focus states are present, but may not match the design specifications. | Interactive states are missing or incorrectly implemented. | __ / 5 |
| HTML Structure and Tags | Uses clean, semantic HTML structure that organizes the layout well and follows accessibility standards. | HTML structure is generally good, with minor improvements needed in organization or semantics. | HTML structure is satisfactory but lacks accessibility or uses redundant elements. | HTML structure is messy or lacks semantic organization, impacting accessibility. | __ / 5 |
| Completion and Function | All requirements from the challenge are met, and the card functions as intended with full interactivity. | Card is mostly functional, with minor missing details or incomplete interactive elements. | Card is functional but lacks some minor aspects or interactivity required in the challenge. | Card does not meet key requirements of the challenge or lacks core functionality. | __ / 5 |
(Ungraded) Third Challenge – Space Tourism Multi-Page Website
Challenge Link: Space Tourism Multi-Page Website
This challenge is more complex and involves building a multi-page website with various components and interactions. Consider this an extended project and complete as much as possible within the time allowed.
- Download Starter Files: This challenge includes HTML, CSS, and JavaScript starter files.
- Review Figma and JSON Files: Open the Figma design and
data.jsonfiles to access the page data and detailed design specifications. - Implement Interactive Elements: Your users should be able to toggle between tabs, view different pages, and see hover states for interactive elements.
Optional Code-Along: This challenge is part of a collaboration with Scrimba and includes a free code-along course by Kevin Powell . The course is approximately seven hours, and you may use it as a supplementary resource.
Objective: Create as many pages and components as possible, focusing on responsive design, interactive elements, and layout. This project will test your proficiency in HTML, CSS, and JavaScript, and can serve as an impressive addition to your portfolio.
Continuing Practice
Frontend Mentor offers a wide range of challenges at different difficulty levels. For additional practice, return to the Frontend Mentor challenges page to continue expanding your portfolio. Practicing regularly will improve your skills and help build a strong foundation in front-end development.
Reflection
After completing these challenges, take a few minutes to answer the following questions:
- How did using Figma designs as references affect your coding process?
- What challenges did you encounter when aligning your code with the design specifications?
- How can the feedback and community resources on Frontend Mentor help you improve as a developer?
Summary
In this lab, you practiced implementing Figma designs using Frontend Mentor’s challenges. By building projects like the QR Code Component and Blog Preview Card, you gained valuable experience in interpreting design files, writing HTML and CSS, and creating professional, polished components. These projects can serve as strong additions to your development portfolio and provide a foundation for continued practice on Frontend Mentor.