For this assignment, you will have to create a fictitious, small business to design a website for. It must be a small business, with only one location. It can be a restaurant, cafe, bakery, etc., as long it fits the requirement. (Keep it simple.)
Design or photo studio is not allowed, though. You can’t work on your portfolio, either.
Start with template for new HTML files and save four files in the same folder in your computer: index.html, about.html, menu.html and location.htmlcontact.html.
Download the content, initial CSS file and the placeholders for the images and include them in the same folder as your HTML files.
Make sure to include the same header and footer on all pages.
The header must contain the logo (as a link to home) and the main navigation with a link to the internal pages. You want to write your navigation menu as a list. (Also, you may be tempted not to include a link from a page to itself, but it’s not a good idea.)
You don’t need a link to the home page on the navigation, though. Just make the logo a link to home and remove Home from the navigation.
Paste the content of each page into each page. Make sure to apply proper hierarchy to the content.
On the home page, include only the header (with logo and navigation), the slogan, address, phone number, and the footer. (We’ll make it more interesting later.)
Include gray rectangles as placeholders for all images (except for the logo). Include an empty alt attribute for now. (alt="")
Don’t use any style.
(Don’t worry, you’ll be able to use nice images, colors, and typefaces later. But for now, it’s only the content.)
Publish your pages on the URL:
username.github.io/grc338/website-content-hierarchy
For now, you will be evaluated on your HTML skills as well as on your hierarchy and semantic choices.
Use proper headings for headings, proper paragraph tags for each paragraph, appropriate list and list items tags for the lists, etc.
(Don’t worry about how your pages will render on the browser. “I don’t like the bullets” is not a good reason for not using lists; you can style the bullets out in CSS next week.)
Penalties in the list of easy mistakes to avoid are 20 points now. There’s no reason not to avoid all of them, though.
Keep the link from all of your pages to a single CSS file, so you don’t have to do it later. But keep the CSS as is now.
Don’t forget the navigation on all pages.
Make the logo a link to home. (Then you won’t need a “Home” link on the main navigation.)
You don’t need the word “Home” on your home page.
You must have only one h1 per page, and it’s the logo.
Keep the slogan as paragraph. (But you can go ahead and give it the class slogan to style it different later.)
Your links on the main navigation are list items inside an unordered list inside the nav element.
And don’t use any styles.
You don’t have to submit anything on Canvas.
When you’re done, use tools such as FreeFormatter, HTML Formatter, or Code Beautify to organize your HTML code.
Go to your public repository on GitHub, and open a new folder named grc338/website-content-hierarchy/. (If you don’t copy and paste, there’s a 83% chance of you misspelling “hierarchy” and end up with a broken link.) ➤
Create a new index.html file and commit. ➤
Upload all four HTML files (index.html, about.html, menu.html and contact.html) to your GitHub repository. ➤
Upload your CSS file too.
Upload all your placeholder image files too.
Click on your name to check if it’s working.
Check Canvas for deadlines.