HTML: HTML5 tags; classes and ids; nesting; the DOM
and a lot of CSS!
element, class, id selectors; cascade order; floats and clears; inheritance and specificity; the box model; overflow; positioning; DRY style principles; selector abstraction...
INTERnet!
clients and servers are just computers with programs and data. servers and clients have different programs.
clients and servers talk to each other using protocols. the most common is HTTP. another is FTP.
clients and servers find each other using URLs. the protocols they use are directed to these URLs.
HTTP Protocols
The object of a protocol is a URL
There are four HTTP protocols: GET, PUT, DELETE, POST
These protocols send an action over a URL to data that exists at on the server and then redirects the client to do something, usually view the change(a GET request)
e.g. Write a new entry:
http://myblog.wordpress.com/edit
Submit the new entry:
PUT -> http://myblog.wordpress.com/entry?=1
Now, view the new entry:
GET -> http://myblog.wordpress.com/entry?=1
HTML
HTML is for CONTENT
HTML is a markup language
<tag> </tag>
<!doctype = html>
<head> contains <meta>, <script>, and <link> tags, is not visible
<body> contains content, is visible
HTML5 has new tags that help make it more semantic:
Selectors can be made with HTML elements, classes, ids, pseudo-classes and pseudo-elements
CSS selectors are applied top to bottom
The more specific the selector, the higher priority it is
Only make the selector as specific as you have to
Keep your CSS D.R.Y.
CSS structure does not always match content structure
more css
FLOATS AND CLEARS:
Floating an element makes it move to the edge of its container
Floating takes the element out of the normal DOM flow
Use a clearfix to make sure that the container extends around the floated element
POSITIONING:
Relative: TRBL based on position in normal DOM flow
Absolute: TRBL based on container
Fixed: TRBL based on browser window/frame
EVEN MORE CSS
Child elements inherit from their parent elements
You can nest your selectors by using a space
The Box Model: margin, padding, border, content
Overflow: visible; auto; hidden; scroll;
PRACTICE #1
https://www.dumbojobboard.com
Write semantic HTML to create this page
Write DRY CSS to style this page
Either steal the images (ask if you need help with this!) or use placehold.it
Practice #2
csszengarden.com
Steal HTML and open it locally on your machine
Create a stylesheet to style it
If you need help with inspiration or getting the positioning correct, look at the many examples on the page. You can steal a style sheet and modify it as well!