Front-end web developer; specialist in web animations and user interaction.
Starting HTML & CSS
Front-end web programming crash course
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?
- <h1></h1> (all the way up to h5)
Also important elements
- There are a lot more
That's it! You know HTML!
Okay, so maybe not 100%
Done with the bones,
onto the flesh!
- .X - class selector
- #X - ID selector
- [attr] - attribute selector
- X Y - child selector
- X > Y - direct child selector
- :hover - hover state selector
- :checked - checked state selector
- ::before - pseudo element
- * - selects everything
- Browser prefixes
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
We're not actually done learning CSS
The box model
What we see
What the browser sees
Position determined by document flow
This is the default value
Position determined by top/left values in reference to a relative element
- Greedy in width (pushes other elements down)
- Default of many elements
- Only takes necessary space on inner content
- Default of <span>, <a>
- Be careful of white space in HTML
Also display: table and display: flex
- Doesn't push elements to next line
- Can be given width and height
Need to clear the floats - usually clear:both
Like inline-block, but lets text wrap around it
Meant for wrapping text around images
- rem, vw, vh, vmin, vmax, pt, pc, ex
Beware of stacking when using em, ex, % for fonts
Mind hurting yet?
And now for something completely different
- Markup―style separation
- Cleanliness of code (includes comments)
Developer === professional Googler
We're here to help
Don't quit. It takes time
Next week, the muscles...
What else do you want to learn about?
- Media queries
- More in depth styling
Let me know! firstname.lastname@example.org
Starting HTML & CSS
By Zach Saucier