CSS Crash Course

The 2ND part of my “Don’t Panic It’s Only…” crash courses covers the fundamentals of CSS, selectors, key properties, flex and grid. I’m still working on it (coming out in about 2–3 days from now,) but here’s what it will cover.

This CSS Curriculum follows same subjects from my book:

My Coding Books

CSS Curriculum

1. CSS Code Placement: internal, external, inline.
2. Cascade, Specificity and Inheritance: The 3 main behavior types.
3. Selectors: by tag name, id, class (id and class names can include - and _)
4. Properties: Basic and short-hand (composite) properties.
5. Attribute selectors: [attr], [attr=value], [attr~=value], etc
6. Case-insensitive attribute selectors: [attr^=value i]
7. Combinators: space ( ), >, +(adjacent sibling,) and ~(general sibling)
8. #id.clsname.active is not the same as #id .clsname .active
9. Comments /* unseen */
10. Pseudo Classes :root, :first-child, :last-child, :only-child, :nth-child(), :checked, :disabled, :enabled, :past, :future, :is(), :not()
11. User-action Pseudo Classes: :link, :hover, :focus, :visited
12. Pseudo Elements (are added by the browser, don’t really exist in the DOM spec.) ::before, ::after, ::selection, ::first-letter, ::first-line, ::grammar-error, ::spelling-error
13. Basic Properties: font-size, font-family, font-weight, color
14. Text: font, font-family, font-size, text-align, text-shadow, text-decoration (removing underline from links,) line-height, text-overflow: ellipsis.
15. Text Align: left, center, right, text-align-last, vertical-align.
16. Colors: built-in names, X11 (cornflowerblue), rgb, rgba, hex, hexa
17. Borders: border, border-width, border-color, border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, box-shadow (create drop shadow or glow effect.)
18. Elliptical border radius: create irregular shape rounded corners.
19. Box Model: The basics of how padding, margin and box-sizing work
20. Display and Position Intro: control content flow and its position (position: static, relative, absolute, fixed and sticky), also(display: none, block, inline, inline-block, inline-flex, inline-grid.) and visibility: hidden, visible or collapse (last one is for tables only.)
21. Dimensions: width, height, max-width, max-height, box-sizing.
22. CSS Variables: :root { --name: val; }
23. CSS Units: Absolute length: (px, pt, pc, in, cm, mm, q) and Relative length: (fr, em, ex, %, ch, rem, vw, vh, vmin, vmax.)
24. Backgrounds: background url() and other background properties.
25. Fitting content with object-fit property: fill, cover, contain, none.
26. Gradients: linear, radial, conic, and repeating versions of each.
27. Filters: blur(10px), contrast(120%), invert(100%), opacity(50%), etc.
28. Z-index: Re-arrange natural drawing order of elements.
29. Flex: display: flex, flex-direction, justify-content (stretch, space-between, space-around, space-evenly, center, flex-start, flex-end), align-items, align-content, flex-basis, flex-grow, flex-shrink, order.
30. Grid: grid box model, gaps, lines, grid-template-columns, grid-template-rows, implicit and explicit content placement, negative coordinate system, fractional units (fr-units, relative units,) grid-column, grid-row with span, grid-column-start, grid-column-end, grid-row-start, grid-row-end, min-content,max-content, multi-directional 360 “float”, align-self, justify-self, template areas, naming grid lines, repeat(), auto-fill, auto-fit, grid-auto-flow: row, column, dense, row dense, column dense.
31. Transitions: transition: 0.4s;
32. Animation: @keyframes {} at-rule, animation-name, animation-fill-mode (none, forwards, backwards, both,) animation-duration, animation-timing-function (linear, ease, ease-in, ease-out, ease-in-out, cubic-beizer,) animation-delay, animation-iteration-count, animation-direction, animation-play-state (paused, running,) animation: normal 3000ms ease;
33. Transforms: 2D: translate(200px, 100px), scale(2.0), rotate(45deg), transform-origin: 50% 500 (default). 3D: perspective: 200px, perspective-origin: 50% 50% (default,) transform: rotateX, rotateY, rotateZ. 3D cube.
34. Sass/SCSS: Basic examples.
35. DOM.style property: Changing CSS dynamically with JavaScript.
36. CSS Art.

This CSS Curriculum follows same subjects from my book:

My Coding Books