GRC 339: Assignments

Flexbox form

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

Desktop

Webpage with a form to order a burger, top of desktop view.

Webpage with a form to order a burger, bottom of desktop view.

Mobile

Webpage with a form to order a burger, top of mobile view.

Webpage with a form to order a burger, 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-form

Set up

  1. Download this zip file.

  2. Unzip the file. It contains one HTML file and one CSS file.

  3. Open the CSS in VS Code and the HTML on Firefox.

Tasks

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

  2. Make sure to test in small sizes. (If you’re working on Chrome rather than Firefox, your narrow size won’t be narrow enough for testing.)

Requirements

  1. The options of burgers must be in two columns on wider screens and one column on narrower devices. (Depending on the size of your phone, the personal information may not fall into just one column; that’s fine.)

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

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

  2. Go to your grc339/flexbox-form/ folder in your public repository on GitHub. ➤

  3. Upload the index.html and flexboxform.css files to your GitHub repository. ➤

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