Introduce the fundamentals of HTML and CSS
Talking best practices and tools of the trade
Getting your hands dirty with CodePen
How to continue your coding journey
HTML
CSS
JavaScript
Header
Nav
Main
Footer
Figure
Each of these elements are made of a pair of tags
Doctype
HTML
Head
Body
Write descriptive comments
The three parts of web development are ...
Name some semantic elements. Why are they important?
What four things make up a website's basic structure
How should you name an element
Which one should you choose, class or id?
What is one way to write clean code?
Selector
Curly brackets
Declaration
Property and values
Semicolon
Sans-serif
Serif
Monospaced
Floats
Relative
Fixed
Absolute
Block
Inline
Inline-block
Keep things DRY
HTML deals with structure
CSS deals with the look and feel
HTML deals with ... and CSS deals with ...
What is the cascade?
Name the six parts of a CSS rule.
How does specificity work?
What's the difference between padding and margin?
The two common units of measurement are ...
index.html and a style.css file
One folder - assets with subfolders css, js, img
Two folder - build/src or src/dist
Three folder - src/tmp/dist
Write out the basic structure
Remember you need four things
Use five semantic elements
Include a three photos
Include a single link
Make sure all your elements have content
Create five headers, add a random class to each
Add an id to a paragraph tag
Create five divs, add classes using BEM
Put an additional class on your first two headers
The text color of the first five elements should be different
Change the background color for the sixth item
Add 20px padding to the sixth item
Change the font-size of the seventh item
The eigth and tenth items should have the exact same styles
The background of your last item should be #BADA55
Nest three section elements inside a main element
Each section should have an h2
Put five paragraphs inside the first section element
Add a footer to the main element
Add comments to the ends of each of the sections
Make 3 square divs, give them equal width and height
Green, red and blue backgrounds with white text
Add 20px padding to one div
Add 15px margin to another
Add 5px margin and 5px padding to the third
Make 3 headers of different sizes
Use a "web-safe" font for the first
Use a Google Font for the other two
https://www.google.com/fontsDeveloper Panel
Sublime Text
Github