Viacheslav Eremin | Css learning start point.

(NOTES) NOTES (2022)

( back ) Kalob Taulien for beginners ( back )

Kalob Bootstrap CSS lecture

1. Getting started and installing Bootstrap 5
2. Introduction to utilities
3. Bootstrap borders
4. Color schemes
5. Different display classes
6. Flexbox utilities
7. Floating elements
8. Click interactions
9. Overflowing text
10. Position utilities
11. Adding shadows
12. Margin and padding utilities
13. Managing text transformations
14. Vertical alignment
15. Visibility in Bootstrap 5
16. Bootstrap 5 default breakpoints
17. Bootstrap text
18. Containers
19. Bootstrap 5's grid system
20. Grid gutters
21. Fun Bootstrap 5 components
22. Your project

Kalob Taulien CSS lecture

1. The display property
2. IMPORTANT The box model
3. Outlines Borders around borders
4. How to add shadows to text
5. Forcing a minimum width on an element
6. Introduction to CSS positions
7. Relative positioning
8. Absolute positioning
9. Fixed positioning (like headers)
10. Sticky positioning (like modern headers)
11. Controlling overflowing text
12. Centering block elements in the middle of the page
13. Advanced CSS selectors
14. Introduction to pseudo selectors
15. Pseudo selectors getting started
16. Introduction to pseudo elements
17. The before and after pseudo elements
18. Changing the first letter and first line using pseudo elements
19. Highlighting text with selection
20. How to add smooth transitions
21. How to add gradient backgrounds
22. How to layer backgrounds and gradients together
23. How to use custom web fonts
24. What are transformations
25. How to make animations using CSS
26. Flexbox the new kind of page layout
27. Grid the promised land of page layouts
28. Your final project

Emmet extension

Border and Padding does not included to box size, this is default boxing model content-box, the opposite approach is border-box - https://www.w3schools.com/css/

outline-offset

text-shadow

If we need to apply absolute positioning - previous html-element need to be relative - https://www.w3schools.com/css/css_positioning.asp.

Relative - the element is positioned relative to its normal position. Absolute - the element is positioned absolutely to its first positioned parent.

Fixed position placed directly to Viewport

A sticky element toggles between relative and fixed, depending on the scroll position.

overflow

margin: auto

All CSS selectors https://www.w3schools.com/cssref/css_selectors.php

Descendant CSS selector https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator

" ", ">" child select

"+" first child select

":hover" pseudo-class selector https://www.w3schools.com/css/css_pseudo_classes.asp, https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

CSS function - https://developer.mozilla.org/en-US/docs/Web/CSS/abs

"nth-child(5)" - pseudo class https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

CSS pseudo-element https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

::before and ::after pseudo-element

::first-letter pseudo-elementhttps://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

::first-line

::selection

CSS transition https://developer.mozilla.org/en-US/docs/Web/CSS/transition, https://www.w3schools.com/css/css3_transitions.asp

:gradient

Gradient generator https://www.colorzilla.com/gradient-editor/, https://cssgradient.io/

CSS syntax "element.id", "div.right" and "*" - apply to all

display:grid, grid-template-column, grid-template-gap

gird-row-gap, grid-column-start, grid-column-end

Responsive web design

1. The viewport meta element
2. Media query syntax
3. What is mobile-first
4. Responsive images
5. Responsive embeds
6. Multiple media queries
7. Making a responsive layout

@media query syntax and all other CSS rules (@charset, @color-profile, @container, @counter-style, @document Non-standard Deprecated, @font-face @font-feature-values, @font-palette-values, @import, @keyframes, @layer, @media, @namespace, @page, @property, @scope Experimental , @starting-style, @supports) - https://developer.mozilla.org/en-US/docs/Web/CSS/@media