Compass Internship Project: Figma Page Recreation

Description

This project involves recreating a Figma-designed webpage using only HTML and CSS. The goal is to accurately reproduce the layout and design, while also implementing responsiveness to ensure the page looks good across various screen sizes (mobile, tablet, and desktop).

The page includes all the elements and styles specified in the Figma design, such as typography, colors, spacing, and images. The challenge was to manually translate the visual components from Figma into static HTML and CSS without relying on CSS frameworks or pre-built components, while maintaining the integrity of the design.

Features:

• Figma design-to-code conversion using plain HTML and CSS.
• Responsive layout for mobile, tablet, and desktop views.
• Styling elements like text, buttons, images, and forms based on Figma mockups.
• Use of flexbox and grid systems for layout and alignment.

Knowledge Used

In this project, I applied the following concepts and tools:

• HTML:

  • Semantic elements like <header>, <footer>, <section>, <article>, and <div> to structure the page.
  • Image embedding using <img> with appropriate alt attributes for accessibility.

• CSS:

  • Flexbox: Used for responsive layout and alignment of elements.
  • CSS Grid: Used to manage complex page layouts and ensure responsiveness.
  • Media Queries: Ensured the page adapts to different screen sizes (mobile, tablet, and desktop).
  • CSS Variables: Utilized for consistent color, font, and spacing management across the project.

• Responsive Design:

  • Used media queries to adjust styles for different screen widths (e.g., mobile-first approach).