Learn practical skills, build real-world projects, and advance your career

Mobile-First Responsive Design

In this assignment, you will implement a responsive web page using CSS media queries & flexbox layout for these Figma mockups: https://www.figma.com/file/5QR0T9a8ZYBlOShN55uW63/Responsive-Design-Art-News-Landing-Page-(Community)?node-id=0%3A1&t=UPhKkIOocr63KPoa-1

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
print('Hello World')