Daily Code 72 | Final Lesson (🟥 HTML & 🟦 CSS Course 14)

Now finally the last lesson of this course! https://www.youtube.com/watch?v=G3e-cpL7ofc

Today we just learend some miscellaneous leftover things about html and CSS, such as media tags and comments. I put them in the comments below

My Code

With media tags I can adjust how my website looks for different screen sizes. The code below shows 1, 2, 3, or 4 video thumbnails per row depending on the size of the browser window, just like the real YouTube

@media (max-width: 599px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .video-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .video-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  .video-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

Comments in html work like this

<!-- here goes the comment -->

and in CSS like this

/* here goes the comment */

And that was it! The course was a great way to get an overview about HTML and CSS, which I preferably should already have had before I jumped into JavaScript. Well better late then never 😄