Assignment 2 - Mobile-First Responsive Web 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

Also see: https://jovian.com/ashishkankal/understanding-flexbox-in-css