Zach Saucier
Front-end web developer; specialist in web animations and user interaction.
Starting HTML & CSS
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
- Markup―style 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!
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.
