[Jonas' resources for hand-crafting beautiful and performant websites]
Semantic HTML: We should not think about what the HTML element look like as it is rendered on the page. But instead, we should think about what the element actually mean?, what it stand for?. When we markup the content with specific HTML element, we assign the meaning to it. Let's Talk about Semantics
BEM - home page - side effect in CSS - chaining BEM modifier - BEM principles - transparent with namespace
CSS Cascade Layers - Cascade and inheritance
Specificity - more - Calculating a selector specificity
Box Model: read-1 - read-2 - box-sizing
Alignment - vertical-align - horizontal-align
Text Alignment: read-1 - read2
- Margin: use it specify a space between elements. When we want to specify vertical space, try to stick with
margin-bottom
only. - Centering the page: first, specify width of the page
width: {size}px;
. Then usemargin: 0px auto;
. The browser will auto compute the margin left & right for you. - Inline Elements: occupies necessary space for its content. Causes no line-break after or before the element.
height
andwidth
do not apply.padding
andmargin
are only applied horizontally (left and right). - Inline Block: Looks like inline from the outside, behaves like block level on the inside.
- Absolute Position: base on the first parent element which has been specified
position: relative;
::first-letter
: only work with a block-level element.