GRC 338: Assignments

Final website: mobile first

If you’ve been waiting to style your website from last week, I have good news and bad news. You’re going to style it, but it will look worse than last week.

Using your HTML files from last assignment, download this CSS file and background image and fill the blanks in the CSS to make the website look as close as possible to the screenshots below:

Screenshot of a lasagna recipe on a narrow broser window.

Screenshot of a lasagna recipe on a narrow broser window.

Screenshot of a lasagna recipe on a narrow broser window.

Screenshot of a lasagna recipe on a narrow broser window.

Screenshot of a lasagna recipe on a narrow broser window.

Screenshot of a lasagna recipe on a narrow broser window.

Screenshot of a lasagna recipe on a narrow broser window.

You can make your browser window really narrow, to avoid worrying about other sizes. Even better, you can use the mobile built‑in simulator, also called User Agent, in your favorite browser.

Tasks

  1. Copy your HTML files and images from last week to a new folder in your computer.

  2. Copy the CSS file and the background image to that same folder.

  3. Start by reading my feedback from previous assignments, so you don’t make the same mistakes.

  4. You will need a div with the class home-container on the home page and a div with the class container on the other pages. That div wraps all the content inside the body, including the header and the footer.

  5. You will need a main element to wrap the content between the header and the footer of your content in all pages.

  6. On the menu page, you’ll need to give the main element the class menu.

  7. Fill the blanks in the CSS files to style your website according to the screenshots above.

  8. Check the list of mistakes to avoid.

  9. When you’re done, use tools such as FreeFormatter, HTML Formatter, or Code Beautify to organize your HTML code.

Requirements

  1. Four pages with the tentative, final content.

  2. Menu with a total of at least eight items. (That’s the actual menu for food, drink, etc., not navigation.)

  3. Each item on the menu needs description and price.

  4. At least one image per page (besides the logo).

  5. Fonts from [Adobe Fonts][] or [Google Fonts][]. (Adobe is highly preferable.)

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

Evaluation

Penalties in the list of easy mistakes to avoid are 20 points now. Three or more mistakes is an automatic zero, with no further comments. There’s no reason not to avoid all of them, though.

Submission

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

  2. Go to your public repository on GitHub, and open a new folder named grc338/website-mobile-first. (It’s a different URL from last week.)➤

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

  4. Upload all four HTML files (index.html, about.html, menu.html and contact.html) to your GitHub repository. ➤

  5. Upload your CSS file.

  6. Upload all your image files too.

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

Check Canvas for deadlines.