Sign In

Assignment 2 - Mobile-First Responsive Web Design

Web Development with HTML and CSS

In this assignment, you will implement a responsive web page using CSS media queries & flexbox layout for these Figma mockups:

Step 1 - Prepare for Development & Deployment

  • Inspect the design mockup using Figma by following this guide
  • Create a public GitHub repository to host & share your code
  • Use GitHub Codespaces to edit the code and add an index.html file
  • Deploy the web page to the cloud by creating a Vercel project

Step 2 - Set up Base Styles & Breakpoints

  • Create a styles.css file and link it from index.html
  • Add appropriate breakpoints using CSS media queries
  • Add base fonts, colors, and text sizes for body & headings
  • Update base styles for tablet and desktop screens appropriately

Step 3 - Implement Section by Section

  • Add the content for each section one by one using HTML
  • Use Figma's "Inspect" tab to identify and add CSS styles
  • Start with mobile and progressively enhance for tablet & desktop
  • Try to replicate the mockup as closely & precisely as possible

Step 4 - Deploy and Make a Submission

  • Test the page carefully at different screen sizes & iterate if required
  • Ensure that the HTML and CSS code is well organized with proper comments
  • Stage, commit, and push your changes to the GitHub repository
  • Verify that your site is deployed to Vercel and submit the link below

Also see:

Web Page Link (Required)
GitHub Repository URL (Required)
You can submit multiple times. Only your last submission will be evaluated.

Evaluation Criteria

  • Every section of the given mockup must be present on your page
  • Each section must have the required content, layout, and styles
  • The layout for each screen size should be implemented accurately
  • You must use the exact fonts, colors, and images used in the mockup
  • All the content must be horizontally centered within the page
  • Where exact replication is difficult, try to get as close as possible