( 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
responsive iframe embed
Flexbox. display:flex
Related pages
)
|
|