first lines of CSS on any project

body {
	margin: 0;
}

* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	display: block;
}

HTML classes

• he recommends having a class for every single element you will style – this makes it easier to be prescriptive and precise in your styling

sharing a grid across elements

• if you want to share the same set of columns across multiple elements, you can just define the columns in a CSS class and use that CSS class on multiple divs!

  .main-grid {
      display: grid;
      grid-template-columns: minmax(1em, 1fr) minmax(0px, 500px) minmax(1em, 1fr);
  }
  

grid order

• elements inside a grid can also get an order property, and it behaves the exact same as in flexbox

font awesome

• a library with a bunch of icons

• you can get the CSS import from cdnjs.com, which hosts a bunch of libraries for easy use in a demo, e.g.

  <!-- <https://cdnjs.com/libraries/font-awesome> -->
  <link href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css>" rel="stylesheet">
  

  and then include it in your markup like so:

  <a href="#" class="social-link"><i class="fab fa-facebook-square"></i></a>
  

  you can get this markup from the font awesome website when you search for a specific icon.

position

• can set position: absolute and set a top and left
  • position: absolute moves an item out of the flow, which means that the position of adjacent items can change too
  • in contrast, if you use transform: translate(X, Y); the adjacent elements behave as if it was in its original place
• with position: absolute, the width of an element becomes the minimal width it needs for its content (it's no longer the default of 100%)
• can set position: fixed and the item never moves, even as you scroll
• position: initial sets the position to be its original value

html entities

• symbols surrounded by & and ; → e.g. × is an "X" symbol
  • usually it's just a bunch of numbers, e.g. ☰ is a hamburger menu (☰)

plain JavaScript

• setting up the close button:

  const closeButton = document.querySelector('.close-nav');
  const nav = document.querySelector('.nav');
  
  closeButton.addEventListener("click", () => {
      nav.classList.remove('navigation-open');
  });