( back ) Kalob Taulien for beginners ( back )
![](Css0_1.png)
Kalob Bootstrap CSS lecture
![](BootstrapBeginners-1_1.png)
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
![](Css1_1.png)
![](Css12_1.png)
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
![](Css13_1.png)
![](Css14_1.png)
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/
![](Css15_1.png)
![](Css16_1.png)
outline-offset
![](Css17_1.png)
![](Css18_1.png)
![](Css19_1.png)
![](Css3_1.png)
![](Css4_1.png)
text-shadow
![](Css20_1.png)
![](Css21_1.png)
![](Css22_1.png)
If we need to apply absolute positioning - previous html-element need to be relative - https://www.w3schools.com/css/css_positioning.asp.
![](Css23_1.png)
![](Css24_1.png)
Relative - the element is positioned relative to its normal position. Absolute - the element is positioned absolutely to its first positioned parent.
![](Css25_1.png)
![](Css26_1.png)
![](Css27_1.png)
![](Css28_1.png)
![](Css29_1.png)
Fixed position placed directly to Viewport
![](Css5_1.png)
![](Css6_1.png)
A sticky element toggles between relative and fixed, depending on the scroll position.
![](Css30_1.png)
![](Css31_1.png)
![](Css32_1.png)
overflow
![](Css33_1.png)
![](Css34_1.png)
![](Css35_1.png)
![](Css36_1.png)
margin: auto
![](Css7_1.png)
![](Css8_1.png)
![](Css9_1.png)
![](Css10_1.png)
All CSS selectors https://www.w3schools.com/cssref/css_selectors.php
![](Css45_1.png)
![](Css46_1.png)
Descendant CSS selector https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator
![](Css38_1.png)
" ", ">" child select
![](Css40_1.png)
![](Css41_1.png)
![](Css39_1.png)
"+" first child select
![](Css42_1.png)
![](Css43_1.png)
":hover" pseudo-class selector https://www.w3schools.com/css/css_pseudo_classes.asp, https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
![](Css47_1.png)
![](Css48_1.png)
CSS function - https://developer.mozilla.org/en-US/docs/Web/CSS/abs
![](Css49_1.png)
![](Css50_1.png)
![](Css51_1.png)
"nth-child(5)" - pseudo class https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
![](Css52_1.png)
![](Css53_1.png)
CSS pseudo-element https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
![](Css54_1.png)
![](Css55_1.png)
![](Css56_1.png)
::before and ::after pseudo-element
![](Css57_1.png)
![](Css58_1.png)
![](Css59_1.png)
![](Css60_1.png)
![](Css61_1.png)
![](Css62_1.png)
![](Css63_1.png)
![](Css64_1.png)
::first-letter pseudo-elementhttps://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
![](Css65_1.png)
![](Css66_1.png)
![](Css67_1.png)
![](Css68_1.png)
::first-line
![](Css69_1.png)
![](Css70_1.png)
::selection
![](Css71_1.png)
![](Css72_1.png)
![](Css73_1.png)
![](Css74_1.png)
![](Css75_1.png)
CSS transition https://developer.mozilla.org/en-US/docs/Web/CSS/transition, https://www.w3schools.com/css/css3_transitions.asp
![](Css77_1.png)
![](Css78_1.png)
![](Css79_1.png)
![](Css80_1.png)
![](Css81_1.png)
:gradient
![](Css82_1.png)
![](Css83_1.png)
![](Css84_1.png)
![](Css85_1.png)
![](Css86_1.png)
Gradient generator https://www.colorzilla.com/gradient-editor/, https://cssgradient.io/
![](Css88_1.png)
![](Css89_1.png)
![](Css90_1.png)
![](Css91_1.png)
CSS syntax "element.id", "div.right" and "*" - apply to all
![](Css93_1.png)
![](Css94_1.png)
![](Css95_1.png)
![](Css96_1.png)
![](Css97_1.png)
![](Css98_1.png)
display:grid, grid-template-column, grid-template-gap
![](Css99_1.png)
![](Css100_1.png)
![](Css101_1.png)
![](Css102_1.png)
![](Css103_1.png)
![](Css104_1.png)
![](Css105_1.png)
![](Css106_1.png)
gird-row-gap, grid-column-start, grid-column-end
![](Css107_1.png)
![](Css108_1.png)
Responsive web design
![](Css2_1.png)
![](Css110_1.png)
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
![](Css111_1.png)
![](Css112_1.png)
![](Css113_1.png)
![](Css114_1.png)
![](Css115_1.png)
![](Css116_1.png)
![](Css117_1.png)
![](Css118_1.png)
![](Css119_1.png)
![](Css120_1.png)
![](Css121_1.png)
responsive iframe embed
![](Css122_1.png)
![](Css123_1.png)
![](Css124_1.png)
![](Css125_1.png)
![](Css127_1.png)
![](Css128_1.png)
![](Css129_1.png)
![](Css130_1.png)
Flexbox. display:flex
![](Css131_1.png)
![](Css132_1.png)
![](Css133_1.png)
![](Css134_1.png)
![](Css135_1.png)
![](Css136_1.png)
![](Css137_1.png)
![](Css138_1.png)
![](Css139_1.png)
![](Css140_1.png)
![](Css141_1.png)
![](Css142_1.png)
![](Css143_1.png)
![](Css144_1.png)
![](Css145_1.png)
Related pages
- (2024) Google Cloud and Cloudflare
- (2023) CloudflareWorker and Supabase
- (2022) JS, Css
- (2022) Typescript, Webpack
- (2022) Angular, RxJs, Firebase, MongoDb
- (2022) Node, NestJs, Electron, Pwa, Telegram
- (2022) React, Redux, GraphQL, NextJs
- (2022) Angular/Typescript, JS books
![](http://forum.vb-net.com/GetTopicCount.png?id=99eb1f49-f58b-454a-974a-eb5325486631)
<SITEMAP> <MVC> <ASP> <NET> <DATA> <KIOSK> <FLEX> <SQL> <NOTES> <LINUX> <MONO> <FREEWARE> <DOCS> <ENG> <CHAT ME> <ABOUT ME> < THANKS ME> |