Homework 1: Responsive Web Design – Recreate the New York Times Front Page

Overview

Your goal is to create a responsive webpage that mirrors the front page of The New York Times. This project will help you master HTML, CSS, and responsive design techniques using media queries.

Objectives

Semantic Markup: Use HTML elements like <header>, <main>, <section>, and <footer> to build a well-structured page.
Responsive Design: Ensure your layout adapts perfectly across desktop, tablet, and mobile devices.
Visual Appeal: Emulate the clean and elegant style of the New York Times front page.

Requirements

General Structure

File(s): Submit your index.html file. If you choose to use external CSS, include those files as well.
Content: Your page must have a prominent header with the text "The New York Times" and display content in columns that adjust based on screen size.

Layout & Design

Desktop View (width > 1024px): Display three columns of content.
Tablet View (width between 768px and 1024px): Display two columns of content.
Mobile View (width < 768px): Display a single column of content.
Visual Style: Aim to capture the elegant look of the New York Times front page using modern CSS techniques.
There should be at least 1 image in one of the columns, and the image is responsive.
You may use your own content for the articles, or use placeholder text like Lorem Ipsum.

Technical Requirements

HTML/CSS Best Practices: Write clean, organized, and well-commented code. Validate your HTML with the W3C Validator.
Responsive Techniques: Use media queries to ensure your design adapts gracefully to various devices.
Expectations: Your page will be a static page implemented in HTML and CSS. To exceed our expectations (20/20), add a bit of interactivity using JavaScript. Perhaps, the date of the newspaper can be dynamically set to the current date. Or add a sidebar that can be opened by clicking on a menu icon in mobile view.

Evaluation Criteria

Criterion	Description	Points
Functionality	Your page must display a responsive layout that adapts to desktop (3 columns), tablet (2 columns), and mobile (1 column).	50%
Semantic Markup	Effective use of semantic HTML to structure your page.	25%
Visual Design & Styling	Aesthetic resemblance to the New York Times front page with attention to typography, spacing, and alignment.	15%
Code Quality & Organization	Clean, readable, and well-commented code that follows best practices.	10%

Submission Guidelines

Accessibility: Follow basic accessibility principles, including proper heading structure and alt text for images.
Testing: Use your browser's developer tools to test your design across different viewport sizes.
Documentation: Comment your code to explain your design choices and media query breakpoints.
Resources: For help and inspiration, visit the MDN Web Docs on HTML and MDN Web Docs on CSS.
AI usage: You may use AI to give you ideas and inspiration, but you may not use any AI tools (including our own CourseAssist AI tutor) to generate all the code for you. You must write your own code. If you have used AI in any way, please document how you used AI by answering the following questions:
1. What AI tool did you use?
2. How did you use it? What kind of questions did you ask? (include links to your conversation if applicable)
3. How much did it help you? How helpful and accurate was it?
Please submit your answers to these questions in a separate file named ai_usage.txt and submit it along with your submission.
Gradescope Submission: Upload your index.html, any CSS files, assets (images), and ai_usage.txt to Gradescope.
File Naming: Ensure your main file is named index.html.

Due Date

April 16, 2025