Skip to content

Learn CSS SCSS

DUONG Phu-Hiep edited this page Jul 6, 2023 · 4 revisions

https://cssbattle.dev/

flex

https://www.youtube.com/watch?v=fuiEYR6Hoe0

.columns {
  flex-wrap: wrap; // allow the 3rd column to go down if there is not enough room for all 3 columns
}

.columns > * {
  flex-basis: 200px; //a column want to be 200px
  flex-grow: 1; //a column is allow to grow and at the same time want to be 200px
}

image

Tailwind CSS

must absolutely practice

  • flex / grid (done)

Want more free icon for your Webapp?

hover animation

https://ianlunn.github.io/Hover/


*** obsolete, use vite instead ***

Use the vue instant prototype

npm install -g webpack sass sass-loader
vue serve

https://www.youtube.com/watch?v=qm0IfG1GyZU

center the content horizontally & vertically

display: grid;
place-items: center;