do you remember?

a review of html css and "internet' topics

Ashley Williams, NYCDA

Monday, 11 March 2013

covered so far

Structure of the Internet
HTTP Protocols and URL Anatomy
Anatomy of a website
The roles of HTML, CSS, JS
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:

CSS

CSS is for STYLES
CSS is a set of selectors and declarations.
Declarations are made up of properties and values
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!

FoLLOW UP TUTORIALS

http://learnlayout.com

http://learn.shayhowe.com/html-css/

review 1

By ag_dubs