NOTE this will be updated frequently!

Technologies learned🛠️

HTML

h1-h6, p, ul, ol, li, script, a, title, span, div

• void tags (they only have an opening tag):
  img, style, link, hr, meta

CSS

width, height, color, background-color, display, position, float, clear, @media, flex, inline-flex, justify-content, align-items

Types of CSS: internal, external, inline

• internal: Write the CSS code in the SAME HTML file using the <style></style> tag.
  Example:
  

  <style>
  p{
  color: red;
  }
  </style>

• external: Write the CSS code in an external file for example style.css and we access it with the tag.
  Example:
  <link rel="stylesheet" href="./style.css"/>
  note: Inside the href attribute it might be different depending on your file location!

• inline: Write the CSS code directly in the tag's attribute section using the style keyword.
  Example:
  <p style="color: red;>

CSS NOTES

• font-size

  • 1pt (point) = 1/72nd inch
  • 1px = 1/96th inch
  • 1em = 100% of parent (meaning if the parent is 20px the element will be 20px too)
  • 2em = 200% (meaning if the parent is 20px the element will be 2 x 20px = 40px)

• display

  • block (takes up the entire full width of the web page)
    
    

  • inline (only takes up as much width as necessary. It does not start on a new line and allows other elements to appear beside it.)
    
    

  • inline-block (make an element behave like an inline and a block-level element. It allows the element to flow inline with surrounding content while maintaining block-level properties, such as setting a specific width and height.)
    
    

    

  • flex
    

    • We wrap the elements(tags) with a div with the display=flex to apply the flex structure. We add "flex" in the container div.
      
      

      

  • inline-flex
    

    • Similar to the normal but flex, but the difference is that it doesn't take the full width, it allows other elements to occupy the same line. It will only occupy as much width as the content
      

  FLEXBOX

  PARENT (CONTAINER)

  • flex-direction: row (by default, APPLIED TO THE PARENT)
    
    

  • flex-direction: column
    
    
    
    

  • flex: nowrap
    it's NOT responsive, used when we don't want the child flex-items to move to the next line!
    
    

  • flex: wrap
    It's opposite to nowrap, where if the flex-items cant fit in one line because of the screen size, it'll wrap/move the items to the next line! (RESPONSIVE)
    
    
    

    justify-content
    

    • Sets the distribution of the items along the **main-axis**
      

    Note: to apply this type of CSS, there should be some space left! Meaning the items don't occupy the entire container.
    

    • justify-content: flex-start This value will squish everything to the left/start side of the container
      
      

    • justify-content: flex-end This value will squish everything to the right/end side of the container
      
      

    • justify-content: center This value will squish everything to the center of the container
      
      

    • justify-content: space-between
      This value will input a space between every element and its adjacent item
      
      
      
      

    
    

    align-items

    • Sets the distribution of the items along the **cross-axis**
      

    Note: We need to set a height to the container, otherwise we won't see any changes! Another thing is, that flex-wrap has to be set to nowrap because it'll affect the behavior!
    

    • align-items: flex-start; height: 70vh (viewport height)

      • vh (viewport height): it's the height of the window that you are viewing the page
        
        

    • align-items: flex-end; height: 70vh
      
      
      

    • align-items: center; 70 vh
      
      

    • align-content: is used when the flex-wrap is set to wrap
      
      "BEFORE"
      
      
      
      "AFTER"
      
      
      

  CHILDREN (ELEMENTS INSIDE THE CONTAINER)

  • flex-basis: ###px (APPLIED TO THE CHILDREN)
    This will extend along the main-axis, we add "flex-basis" in the child div
    
    

    • Column direction
      
      
      
    • Row direction
      
      

  • order
    
    The order is used to change the order of the child flex item!
    
    
    
    If only one of the items has the order set to any number greater than 0 then it'll shift to the end.
    
    
    
    But of course, if you have more than one child item with an order number > 0, then they will be ordered accordingly
    
    
    
    

  • align-self:

    • Used when we want to change the alignment of a specific item in the container
      
    

  FLEX-SIZING

  FLex-Sizing works according to a priority list
  
  

  Example:
  

  • Here we have a container that has the display set to flex, so by default, the flex-sizing is set to content width unless there's a higher priority that is set.
    
    
    In case the screen is shrunk, each of the items will automatically shrink until they reach the minimum content size.
    
    
    
    The max-width: the longest possible line of the text
    The min-width: the longest word in the text
    
    
    

  • Assigning a specific size to the flex-items:
    

    • In case we assign a specific size width to each item (for example 100px), the item's assigned size will be respected until the overall width of the container gets smaller than the assigned size. If the screen is smaller, the priority goes to the content size/width.
      
      

    • In case we use flex-basis(recap: determines the width of each of the items), the width will get ignored (again IF there's enough space)
      
      

      Note: If the screen is shrunk (Phone-Screen), min-width will be applied
      

      
      

• position

  • static
  • relative
  • absolute
  • fixed

• float

  • left
    

    BEFORE:
    
    AFTER:
    

  • right
    

    BEFORE:
    
    AFTER:
    
    

• clear Used when we need to avoid the style effect "float: left" that the element before has.

  • left
    

    BEFORE:
    
    AFTER:
    
    

  • both
    
    

• @media

  • @media(max-width: ###px) BEFORE:
    
    AFTER:
    
    
  • @media(min-width: ###px)
  • @media(min-width: ###px) and (max-width: ###px)
    
    
  • @media(max-width: ###px) and (min-width: ###px)
    
    
  • @media screen (orientation: landscape)
    The screen keyword is not necessary by default because it's going to apply to all screens. Where do we use the orientation? It's when we want to target the website whenever it's being printed