Web Bootcamp

Web Bootcamp

hola

importing bootstrap

Importing in js file

import "bootstrap/dist/css/bootstrap.min.css"

importing in css/scss file to override default

body-bf:#12332
@import "~bootstrap/dist/css/bootstrap.min.css"

    <style>
      ul > li:nth-child(3n + 1) {
        background-color: red; /* 1,4,7,10 */
      }
      ul > li:nth-child(3n + 2) {
        background-color: green; /* 2,5,8,11 */
      }
      ul > li:nth-child(3n + 3) {
        background-color: blue; /* 3,6,9 */
      }
    </style>

Different types of observers supported by modern browsers

https://medium.com/@jitubutwal144/different-types-of-observers-supported-by-modern-browsers-4db7a86f6b9d

Subtle, yet Beautiful Scroll Animations: Intersection observer
https://www.youtube.com/watch?v=T33NN_pPeNI&list=WL&index=58&t=131s

Resize Observer:
https://www.youtube.com/watch?v=M2c37drnnOA

Mutate Observer:
https://www.youtube.com/watch?v=Mi4EF9K87aM

DOM Elements

Node VS Elements

---

---

---

---

---

Insert Adjacent Elem

Links:

https://github.com/yogain123/freecodecamp-css (positions + Selectors)
https://github.com/yogain123/css-stuff-psudo-elem-flex/blob/master/style.css (FlexBox thing)
https://github.com/yogain123/css-border
https://github.com/yogain123/manual-validation-html-css

flexbox props

8 CSS tips

https://medium.com/@AmanPawasker/8-essential-css-tips-every-web-developer-must-know-5991a8ca929e

handle image content

object-fit: "cover"

CSS layers

by default user agent define some css rule to eaach html elem, we override it by owr own style

similary we can also define layers to css style to tell what is more important to handle specificity

the way our stack wrks is that broswr stylesheet at bottom is least speicifc, then we have layer called utilities is more specific and then we have all the code not in layer which is going to be the next most specific after utilities

---

specificity increases frm left to right

we can change speicifcty of vendr css imports

imports in css is not a good practise because first it downloads the entire styles.css and then looks for all the css import and then it downloads them, so thigs are not parelley
so its good to put @imports in html file

---

Note::
Unlike normal CSS with the layer, everything dealing with important goes in backward order (right to left)

======

whne we gicve id to element, it gets attached to windw objetct so we can use direct , window.hola , or hola to get it
<div id="hola">Hellooooo</div>

text overflow

https://codepen.io/web-dot-dev/pen/GRvdLNv

picture Elem

From Chatgpt

html attribute data-something -> https://chat.openai.com/share/9c200155-bdf4-47df-b62e-09114726115d

z-index -> For z-index to work, the element (or pseudo-element) must be positioned—meaning it should have position: relative, position: absolute, position: fixed, or position: sticky. By default, ::before and ::after are inline, so you will need to set their position.