- Creating what harrisonmalone.com actually is (fonts, margin, classes and ids, using ids to link to days)
- Introduction to class and id
- Styling a specific element within a class
.content p
- Emphasize class is for many things id is for one thing
- External stylesheets (can also use style tag in head but don't)
Looking at box model, padding is fat being added to organs, border is skin, margin is space you're away from me.
Padding and margin syntax.
.box {
/* margin: top right bottom left */
margin: 10px 0px 10px 0px;
/* shorter way */
margin: 10px 0px;
}
body {
margin: 0px;
}
Can override elements with certain box model attributes on them
p {
margin: 5px 0px;
}
- Introduction to unsplash
- Different values (px, vh, vw, %)
- Google fonts, font awesome
- Different displays (inline, inline block, block)
- What is a component, it's a single piece of your website, making things modular is much cleaner, also kind of how react works
- CSS components (using import)
- Build some components (buttons, cards, badges, labels)
- Pseudo-class (hover) to create box shadow effect on button
- For cards show off position relative and absolute
- Box shadow generator or just use figma
- Quick intro to media queries
- Creating something in figma, implementing it in css, digital color meter, searching for inspiration, link to figma buttons, link to inspiration