Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved content formatting. #2

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 38 additions & 38 deletions notes.md
Original file line number Diff line number Diff line change
@@ -1,60 +1,60 @@
Let's make a pizza restaurant menu page
Let's make a pizza restaurant menu page.

start by sourcing in CSS
Start by sourcing in CSS.

Check to make sure it's linked
Check to make sure it's got linked.

--Create A Header--
- header is a container element:
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 <header>, <footer>, <main>)
- Add an h1 for the header with our restaurant name
-> Add an h1 for the header with our restaurant name
opening tag and closing tag

- add an image
-> 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).
<img src="fileName.img" class="pizzaImg"/>

- add a link to pizza Wiki
difference between opening in same page or new page
-> Add a link to pizza Wiki
difference between opening in same page or new page.

- maybe turn our image into the link
-> Maybe turn our image into the link.


--Create a Footer--
use < href="mailto"> to create a contact us link
Create a Footer:
-> Use < href="mailto"> to create a contact us link.

add an h6 for a copy right
-> Add a h6 for a copy right

--Create a Content Block--
Create a Content Block:

We're going to create a menu, so I'm going to use some list properties
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
Use a UL for types or unspecific items, and an OL to list the specific items.

Create a table with Pizza Prices
Create a table with Pizza Prices.

Add a button for ordering - buttons are different than links - use buttons for clicking (accessibility)
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
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.