Day 2 #100DaysofCode

Here I am again, day 2 of the #100DaysofCode. Staying accountable and blogging about my journey every day.

What did I learn today?

SVGs

SVGs are Scalable Vector Graphics and the main difference between SVG and image formats like JPEG is that SVG can easily be scaled to any size without compromising its quality or file size. SVGs are defined using XML which is an HTML-like syntax so it is easily identifiable and readable. Here's an example of an SVG markup taken from The Odin Project:

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <rect x=0 y=0 width=100 height=100 fill="burlywood"/>
    <path d="M 10 10 H 90 V 90 L 10 60" fill="transparent" stroke="black" stroke-width="3"/>
  <circle cx=50 cy=50 r=20 class="svg-circle"/>
    <g class="svg-text-group">
      <text x="20" y="25" rotate="10" id="hello-text">Hello!</text>
      <use href="#hello-text" x="-10" y="65" fill="white"/>
    </g>
</svg>
</div>

Looks kinda scary!

HTML Tables

HTML Tables basically allow us to organize data into Tabular format and easily make connections with different types of information displayed. The course included some MDN articles that had some assessments; great way to practice what I was learning.

CSS Reset

I've come across CSS Reset before but I haven't used them. I've always done this:

// CSS Reset
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

CSS Units

I learned about the difference between px, em, and rem. Basically, px is static in nature and does not scale while em and rem scale based on the browser size. I adopted the use of em and rem but Odin recommends sticking to rem because em could cause undesirable effects. I also read this article that suggests using rem for font-size and px for everything else; I might adopt that practice.