CSS Responsive Card Design | Mini-Project Tutorial for Beginners
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Create a CSS Responsive Card Design in this mini-project tutorial for beginners. This CSS project pulls together concepts learned from previous lessons in the CSS for Beginners tutorial series.
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Beginners
🔗 All Resources for this CSS Tutorial Series: https://github.com/gitdagray/css_course
📬 Course Updates ➜ https://courses.davegray.codes/
CSS Responsive Card Design | Mini-Project Tutorial for Beginners
(00:00) Intro
(00:05) Welcome
(00:26) Project Preview
(02:10) Starter Code
(02:52) HTML structure
(08:59) CSS Styles
(09:26) CSS Reset
(10:57) Utility Classes
(12:23) General Styles
(17:09) card class styles
(22:22) Small breakpoint media query
(24:31) Medium breakpoint media query
(26:42) Large and XL breakpoints
(28:34) Testing the breakpoints
(30:14) Mobile device landscape breakpoint
(33:34) Experiment and make it your own
⚙ Web Dev Tools:
🔗 Chrome Browser: https://www.google.com/chrome/
🔗 Visual Studio Code (VS Code): https://code.visualstudio.com/
🔗 Live Server VS Code Extension: https://marketplace.visualstudio.com/...
🔗 vscode-icons VS Code Extension: https://marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: https://marketplace.visualstudio.com/...
🔗 W3C CSS Validator: https://jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: https://specificity.keegan.st/
🔗 HTML Special Characters and Entities: https://unicode-table.com
🔗 CanIUse.com: https://caniuse.com/
📚 References:
🔗 MDN CSS: https://developer.mozilla.org/en-US/d...
🔗 MDN CSS Basics: https://developer.mozilla.org/en-US/d...
🔗 MDN CSS Selectors: https://developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: https://developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: https://developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: https://developer.mozilla.org/en-US/d...
🔗 MDN - Styling Lists: https://developer.mozilla.org/en-US/d...
🔗 MDN - Display Property: https://developer.mozilla.org/en-US/d...
🔗 MDN - Floats: https://developer.mozilla.org/en-US/d...
🔗 MDN - Columns: https://developer.mozilla.org/en-US/d...
🔗 MDN - Margin Collapsing: https://developer.mozilla.org/en-US/d...
🔗 MDN - White-Space: https://developer.mozilla.org/en-US/d...
🔗 MDN - Positioning: https://developer.mozilla.org/en-US/d...
🔗 MDN - Flexbox: https://developer.mozilla.org/en-US/d...
🔗 MDN - Basic Concepts of Grid Layout: https://developer.mozilla.org/en-US/d...
🔗 MDN - Grid Template Areas: https://developer.mozilla.org/en-US/d...
🔗 MDN - CSS Images: https://developer.mozilla.org/en-US/d...
🔗 MDN - CSS Background Images: https://developer.mozilla.org/en-US/d...
🔗 Chip Cullen - Article on Content Layout Shift: https://chipcullen.com/what-width-and...
🔗 MDN - CSS Media Queries: https://developer.mozilla.org/en-US/d...
✅ Follow Me:
Github: https://github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: https://yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about CSS Responsive Design and Card Project helpful? If so, please share. Let me know your thoughts in the comments.
#css #card #project
Nesta página do site você pode assistir ao vídeo on-line CSS Responsive Card Design | Mini-Project Tutorial for Beginners duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Dave Gray 31 Maio 2022, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 24,976 vezes e gostou 599 espectadores. Boa visualização!
