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
}

Tailwind CSS

• You can practice on my Svelte project template
• Use the responsively.app for preview
• unocss is more powerful + faster
• if tailwind or unocss are ugly "atoms" then https://daisyui.com/ is the "molecule" => MUST use

must absolutely practice

• flex / grid (done)

Want more free icon for your Webapp?

• Fontawesome free icons is not enough?
• Look at https://icon-sets.iconify.design/
• just find the SVG version of the icon you want and copy paste it directly to your HTML https://www.svgviewer.dev/

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;