100DaysOfCode - Day 16 Flexbox

100DaysOfCode, CSS_flexbox · 16 Dec 2020

Besides working on Day15 project, I start taking The Complete Web Developer in 2021: Zero to Mastery. My Day16 project would be CSS related: flexbox. I’m following the lesson tutorial to make a flexbox project.

I have basic CSS skills, but I’m lack of practice. This project help me to improve my knowledge of it.

This is my project: Day16_flexbox and my code

I get to learn CSS units: px, em and rem.

I find these 2 blogs helpful: CSS units for font-size: px, em and rem and 一次搞懂 CSS 字體單位：px、em、rem 和 %(in beautiful Taiwanese Mandarin).

Also, I learn about CSS transitions and transforms from this blog. CSS Transitions and Transforms for Beginners

Below is my quick note:

Transforms move or change the appearance of an element, while transitions make the element smoothly and gradually change from one state to another.

They need to be with one another to make beautiful and nice animations.

We can use cleaner and faser code: transition shorthand to set the effect:

div {
  transition: [property] [duration] [timing-function] [delay];
}

Also, we have transform shorthand to deal with its effect:

div {
  transform: rotate(90deg) scale(2) translateY(-50%) translateX(50%);
}