From The Odin Project's curriculum
What I learned:
- What is the difference between inline, inline-block, and block elements?
- Can you apply margin-top, margin-bottom to inline elements? Does it affect the parent container's height?
- Can you apply padding-top, padding-bottom to inline elements? Does it afect the parent container's height?
- What is one way to position/move block-level elements horizontally? What is float?
- What type of element is
? How to align
horizontally?
- How to vertically align inline elements such as ? How to vertically align multiple inline elements next to each other? (without using flex!)
- What kind of selector is this -> input[type="submit"] ?
- How to make sure navigation bar sticks to the bottom of the page?
- How is the middle value of vertical alignment calculated? How about baseline?
- How to contribute to an open source project?
Awesome resources:
- https://internetingishard.com/html-and-css/floats/
- https://www.impressivewebs.com/css-vertical-align/
- http://phrogz.net/css/vertical-align/
- https://christopheraue.net/design/why-vertical-align-is-not-working -> this article helped me vertical align my profile icons with the rest of the
- elements without having to use flexbox. It hlped me understand how the value middle is calculated relative to baseline, and how an element's default value is baseline. Since I did not set a vertical alignment value for profile icon, it had pushed the baseline far past the default center, which meant that the middle line was also pushed down!
- https://www.youtube.com/watch?v=mENDYhfxH-o -> Learned how to use fork, clone, and upstream to submit a pull request!
TODO: FIX YOUR MARKDOWNS!