Design and Development

Overview

In this assessment, you will take a Figma design from Frontend Mentor and implement it using Bootstrap. This project simulates a real-world task where you receive a design handoff and are expected to create a responsive, pixel-perfect webpage. You will apply your knowledge of Bootstrap’s grid system, components, and utility classes while utilizing version control through Git.

Objectives

• (Optional) Create or modify a high-fidelity Figma design.
• (Optional) Use the prototyping feature to demonstrate interactivity within a Figma design.
• Use Bootstrap to implement a high-fidelity Figma design accurately.

Note: With your instructor’s permission, you may use Tailwind in place of Bootstrap for this assessment.

Submission

Submit your completed lab using the Start Assignment button on the Assignment page in Canvas.

Your submission should include:

• A link to the chosen Frontend Mentor challenge.
  • Or your custom Figma project – see extra credit requirements below.
• A link to the GitHub repository for your implemented project.

Instructions

You will implement a high-fidelity Figma design from a selection available to you through Frontend Mentor. You will have several options to choose from, so choose whichever option you will enjoy implementing the most, or whichever option you may continue to work with in the future.

Your work will be graded according to the requirements listed in the following section. Creativity and creative effort are often factors that benefit you, but in this case we are looking for an implementation that accurately captures the provided design. Deviations from the design, even intentional, will be considered incorrect, and points deducted.

Focus on the implementation of the challenge’s design, not its functionality. You will be tested on functional implementations throughout the course, but that is not the intent of this assignment.

Project Requirements

1. Design Selection

• Choose a free or free+ challenge from Frontend Mentor that meets the following criteria:
  • Difficulty level: Junior or Intermediate.
  • Uses only HTML and CSS (JavaScript is optional but not required).

A list of challenges that meet these requirements is included here .

2. Bootstrap Implementation

• Use Bootstrap’s grid system to create a responsive layout that adjusts for different screen sizes.
• Include Bootstrap components like cards, buttons, navbars, or accordions where appropriate.
• Apply utility classes for styling elements (e.g., padding, margin, text alignment).
• Add any custom CSS needed to achieve the required design fidelity.

3. Version Control with Git

• Initialize a Git repository locally and push your code to a GitHub repository.
• Use clear, descriptive commit messages to document your progress.
• Ensure that your repository is organized with separate files for HTML, CSS, and any assets.

4. README Documentation

• Create a README file in your repository that includes:
  • An overview of the project and the chosen Frontend Mentor challenge.
  • A description of your approach and any customizations made.
  • Any challenges faced during implementation and how they were addressed.

5. Reflection

• Write a brief reflection (100-200 words) discussing:
  • Challenges you encountered during the project.
  • Your approach to solving these challenges.
  • Improvements you would make if given more time.

Tips for Success

• Plan your layout: Review the Figma design file and plan the structure before coding.
• Utilize Bootstrap’s components and utilities: Minimize custom CSS by leveraging Bootstrap’s built-in classes.
• Commit frequently: Use Git to document your progress and make it easier to track changes.
• Test your design: Check your implementation on different screen sizes to ensure it is responsive.
• Document blockers: If you encounter issues, document them in the README file and explain your troubleshooting process.

Rubric for Evaluation

References

• Frontend Mentor Challenges 
• Bootstrap Documentation 
• Git Documentation