luuductrung1234 / frontend-practice

frontend-practice

[course] - [repo] - [discord]

resource

[Jonas' resources for hand-crafting beautiful and performant websites]

HTML

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

CSS

CSS Naming Conventions

BEM - home page - side effect in CSS - chaining BEM modifier - BEM principles - transparent with namespace

Selectors

CSS Cascade Layers - Cascade and inheritance

Specificity - more - Calculating a selector specificity

Box Model: read-1 - read-2 - box-sizing

Position: read-1 - read-2

Pseudo-elements

Alignment - vertical-align - horizontal-align

Text Alignment: read-1 - read2

CSS Tips & Notes

1. Margin: use it specify a space between elements. When we want to specify vertical space, try to stick with margin-bottom only.
2. Centering the page: first, specify width of the page width: {size}px;. Then use margin: 0px auto;. The browser will auto compute the margin left & right for you.
3. Inline Elements: occupies necessary space for its content. Causes no line-break after or before the element. height and width do not apply. padding and margin are only applied horizontally (left and right).
4. Inline Block: Looks like inline from the outside, behaves like block level on the inside.
5. Absolute Position: base on the first parent element which has been specified position: relative;
6. ::first-letter: only work with a block-level element.

Tools

Specificity Calculator

HTML Validator