Let's make a pizza restaurant menu page
start by sourcing in CSS
Check to make sure it's linked
--Create A Header--
-
header is a container element: Elements used to contain other elements. Some have an implied meaning or usage, but all of them act like divs in terms of layout and style. (like
, , ) -
Add an h1 for the header with our restaurant name opening tag and closing tag
-
add an image self closing tag
Some elements allow optional additional parameters called attributes which help spcodecify more about this particular element. Attributes include a specific keyword(src, class), an equal sign, and a value in double quotes (filname, className).
-
add a link to pizza Wiki difference between opening in same page or new page
-
maybe turn our image into the link
--Create a Footer-- use < href="mailto"> to create a contact us link
add an h6 for a copy right
--Create a Content Block--
We're going to create a menu, so I'm going to use some list properties
Use a UL for types, and an OL to list the specific items
Create a table with Pizza Prices
Add a button for ordering - buttons are different than links - use buttons for clicking (accessibility)
Once I get all my HTML on the page, THEN I like to style it.
Hard to style and then do more HTML and then style and then do more HTML - could be kinda like shoveling while it's raining
--Header Style--
- Use IDs when possible
- Add a background color
- center the image
- make h1 pretty
- remove underline on link
--Content Style--
- remove bullets from UL
- add a border
- center div
- make font look neat
--Footer Style--
- add background color
- make it absolute with a left of 0 and width of 99% to fill up the space