Created a year ago
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 fromindex.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')