GRC 339: Assignments

Flexbox basic layout

I’m providing the structure for a webpage and your job is to style it to the best if your abilities to match the following layouts:

Desktop

A11y page, top of desktop view.

page, bottom of desktop view.

Mobile

A11y page, top of mobile view.

A11y page, middle of mobile view.

A11y page, bottom of mobile view.

Whatever you do, though, you may not edit the HTML file at all.

Publish your pages on the URL: username.github.io/grc339/flexbox-basic-layout

Set up

  1. Download this zip file.

  2. Unzip the file. It contains one HTML file, four images, and one CSS file.

  3. Open the CSS in VS Code (or your text editor of choice) and the HTML on your favorite browser Firefox.

Tasks

  1. Give the proper value to the following lines on the CSS: 12, 13, 20, 24, 29, 33, and 84.

  2. Don’t change anything else on your CSS.

  3. Work offline on your CSS file, until you found a solution that you’re happy with, but don’t change the HTML file.

Requirements

  1. The paragraph line of the article should be between 8 and 16 words on all window sizes.

  2. When the main article and the sidebar are positioned side-by-side, the former must be approximately twice as big as the latter.

  3. Have I mentioned that you are not allowed to change the HTML file?

Evaluation

You’ll be evaluated on your technical skills using CSS.

Submission

You don’t need to submit anything to Canvas.

  1. Go to your grc339/flexbox-basic-layout/ folder in your public repository on GitHub. ➤

  2. Upload all six files (index.html, flexbox.css, and the four images) to your GitHub repository. ➤

  3. Click on your name to check if it’s working.

Check Canvas for deadlines.