How to build a product card // HTML & CSS in-depth (grid layout)
Learn how to build a product card themed in three different variants in this in-depth episode about HTML & CSS and see how to
✔️ use CSS grid layout
✔️ reference external fonts in HTML
✔️ build a card layout from scratch
✔️ use CSS variables to build different themes
✔️ use JS to switch between product variants
⌨️ CODE ⌨️
https://github.com/crayon-code/websit...
🖇️ USEFUL LINKS 🖇️
🔗 Complete guide to grid layout https://css-tricks.com/snippets/css/c...
🔗 CSS linear gradient https://developer.mozilla.org/de/docs...)
🔗 Google Fonts: https://fonts.google.com/
🔗 CSS custom properties / variables on MDN https://developer.mozilla.org/en-US/d...
🔗 querySelector on MDN: https://developer.mozilla.org/de/docs...
🔗 querySelectorAll on MDN: https://developer.mozilla.org/de/docs...
🔗 All about BEM (block - element - modifier): http://getbem.com/
🔔 SUBSCRIBE & LIKE 🔔
▶️ / @crayoncode
⚙️ USEFUL VSCODE EXTENSIONS ⚙️
Live server: https://marketplace.visualstudio.com/...
Bracket Pair Colorizer: https://marketplace.visualstudio.com/...
⏱️ TIMESTAMPS ⏱️
00:00 Markup
03:40 Basic CSS Setup
05:40 Theme Variables & Variable Setup
07:19 Card Layout
08:27 Product Image Styling
11:21 Product Details Grid Layout
17:01 Header, Capacity & Price Styling
19:29 Product Variant Selection Styling
22:15 Product Variant Selection Implementation
🎨 ARTWORK 🎨
Images created by freepik:
https://www.freepik.com/free-vector/r...
👋 FOLLOW
📸 INSTAGRAM: / crayon_code
🏷️ HASHTAGS 🏷️
#html #css #gridlayout #tutorial