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.
Top comments (0)