Starting HTML & CSS

Front-end web programming crash course

 

Zach Saucier

Feel free to use your laptops.

Too much to cover; let's go!

Did any of you have any website ideas?

Before we start,

What is a web page?

A hypertext document connected to the WWW

Needs to be on a server for people to be able to access it

Made in text editors

What does that look like?

  • <tags>
  • classes
  • IDs
  • Element
  • Container
  • Parent
  • Children
  • Siblings
  • Nesting
  • attributes
  • comments

Important elements

  • <html></html>
  • <head></head>
  • <body></body>
  • <div></div>
  • <span></span>
  • <ul></ul>
  • <li></li>
  • <p></p>
  • <a></a>
  • <img/>
  • <h1></h1> (all the way up to h5)

Also important elements

  • <meta>
  • <title></title>
  • <button></button>
  • <table></table>
  • <form></form>
  • <input/>
  • <script></script>
  • <link/>
  • <style></style>
  • There are a lot more

That's it! You know HTML!

Okay, so maybe not 100%

Done with the bones,

onto the flesh!

  • Selector
  • Property
  • Value

Advanced selectors

  • .X               - class selector
  • #X              - ID selector
  • [attr]          - attribute selector
  • X Y            - child selector
  • X > Y         - direct child selector
  • :nth-child()

Advanced selectors

  • :hover       - hover state selector
  • :checked   - checked state selector
  • ::before     - pseudo element
  • ::after
  • *                 - selects everything

(continued)

  • Comments
  • Browser prefixes
  • Specificity
  • Inheritance

Another language learned!
In 4 slides!

Notice I didn't even begin to start going through properties and values

If you think it should have it, there's likely something for it

Google it.

We're not actually done learning CSS

Position

ing 

in CSS

The box model

What we see

What the browser sees

position: static

Position determined by document flow

 

This is the default value

position: absolute

Position determined by top/left values in reference to a relative element

position: relative

position: fixed

display: block

  • Greedy in width (pushes other elements down)
  • Default of many elements

display: inline

  • Only takes necessary space on inner content
  • Default of <span>, <a>
  • Be careful of white space in HTML

display: inline-block

Also display: table and display: flex

  • Doesn't push elements to next line
  • Can be given width and height

Floats

Need to clear the floats - usually clear:both

Like inline-block, but lets text wrap around it

Meant for wrapping text around images

CSS units

  • px
  • %
  • em
  • rem, vw, vh, vmin, vmax, pt, pc, ex

Beware of stacking when using em, ex, % for fonts

Mind hurting yet?

Mine is

And now for something completely different

Important techniques

  • Markupstyle separation
  • Re-usability
  • Cleanliness of code (includes comments)
  • Responsive
  • Mobile-first

Developer === professional Googler

We're here to help

Don't quit. It takes time

Next week, the muscles...

JavaScript!

What else do you want to learn about?

  • Animations
  • Media queries
  • Pre-processors
  • More in depth styling
  • Games

Let me know! hello@zachsaucier.com

Project time!

Create this design in HTML + CSS!

JSFiddle.net 

 

Click to download project files

or

type in http://bit.ly/1KWyyYX

 

Send to hello@zachsaucier.com

to enter competition

Starting HTML & CSS

By Zach Saucier

Starting HTML & CSS

The second lesson in my web development crash course. Teaching the very basics of HTML and CSS.

  • 752
Loading comments...

More from Zach Saucier