GRC 339: Assignments

Digital magazine: responsive layout

Using the pages from the last assignments, you will use CSS Grid, Flexbox, and media queries to make them adapt to different sizes.

On desktop, it’ll look somewhat like this:

Tasks

1. Copy your files from last week to a new folder.

2. Follow along the video and make the layout as shown in the video.

3. Don’t forget to read my feedback from previous assignments, so you don’t make the same mistakes.

Requirements

1. Two pages with looking as similar as possible to mine.

2. When you’re done, use tools such as FreeFormatter or HTML Formatter to organize your HTML and CSS code.

3. Only one CSS file for all the pages. (Not one for each page.)

Evaluation

Penalties in the list of easy mistakes to avoid are 10 points each. Please use the list as a checklist so you can avoid all of them.

Submission

1. You don't need to submit anything to Canvas.

2. Go to your grc339/digital-magazine/ folder in your public repository on GitHub. ➤

3. Upload your HTML files (index.html and mainstory.html) to your GitHub repository. ➤

4. Upload your CSS file.

5. Make sure to click on your name to check if it’s working.

Check Canvas for deadlines.