GRC 338: Assignments

CSS style: grid layout

Using the files from the last assignments, use CSS Grid to make the page look good on laptop and desktop screens. Don’t worry about mobile this time; it won’t look good.

Tasks and requirements

  1. Read all the instructions carefully before starting.

  2. Start by reading my comments from the last assignment. Make sure to address every issue on it.

  3. Copy your CSS and JPEG files from last week into the new folder.

  4. Make the necessary changes to make your page look like this:

    Screenshot of a lasagna recipe on a narrow broser window.

    Screenshot of a lasagna recipe on a narrow broser window.

  5. You want your content centered on the page.

  6. You want your header to take the whole width of the content.

  7. Caption will go on the right of the image.

  8. The Ingredients and Directions sections should take one column each.

  9. The footer must take the whole width of the content.

  10. Check the list of mistakes to avoid.

  11. Keep your CSS organized.

  12. Publish your pages on the URL: username.github.io/grc338/css-grid-layout

Evaluation

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

Pay attention to the list of mistakes to avoid.

Tips

  1. To center your page on the window, give the div.container the properties max-width: XXem; and margin: auto;, replacing XXem with a proper value.

  2. Since only the section elements will be side-by-side, their parent, the main element, will be a grid container.

  3. You’ll need more than one grid container.

  4. Do not change the HTML file for any reason.

  5. Have I asked you to avoid the most common mistakes?

Suggestion

  1. Don’t forget: You want to work offline, saving your files on your computer. Only when you’re happy with the results that you want to upload to GitHub. You may change your mind and upload a new file, but what you don’t want is to work straight on GitHub.

  2. I suggest, however, that you upload the old HTML, CSS, and JPEG files to the new folder in GitHub before you even start changing anything.

  3. Then you check your name. It'll be the last week's layout, of course.

  4. When you're done working with your new CSS, you use it to replace the old one.

This will prevent you from emailing me the night the assignment is due saying that your file is not working.

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

Submission

  1. You don’t have to submit anything on Canvas.

  2. Got to your public repository on GitHub, and open a new folder named grc338/css-grid-layout/. (Always copy and paste!) ➤

  3. Create a new index.html file and commit. ➤

  4. Upload all three files (index.html, lasagnastyle.css, and lasagna.jpg) to your GitHub repository. ➤

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

Check canvas for deadlines.