GRC 339: Assignments

Flexbox basic layout

I’m providing the structure for a webpage and your job is to style it to the best of 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

I made an example, using CSS Grid, on how it should look. But you can’t use CSS Grid, you have to use Flexbox and make it the same.

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 Firefox.

Tasks

  1. Don’t change the HTML file.

  2. Work offline on your CSS file, until you found a solution that you’re happy with.

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.