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
On this page of the site you can watch the video online CSS Responsive Card Design | Mini-Project Tutorial for Beginners with a duration of hours minute second in good quality, which was uploaded by the user Dave Gray 31 May 2022, share the link with friends and acquaintances, this video has already been watched 24,976 times on youtube and it was liked by 599 viewers. Enjoy your viewing!
