CSS Complete Project for Beginners

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

This CSS Complete Project for Beginners guides you through a full tutorial for applying modern CSS and modern responsive web design to the website for The Little Taco Shop. This is the final project in a CSS for Beginners full course.

💖 Support me on Patreon ➜   / davegray  

⭐ Become a full-stack web dev with Zero To Mastery Courses:
The Complete Web Developer: https://bit.ly/WebDevMaster
The Complete Web Designer: https://bit.ly/CompWebDesign
Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

🚩 Subscribe ➜ https://bit.ly/3nGHmNn

🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
   • CSS Tutorials for Beginners  

📺 HTML for Beginners Course:    • HTML Full Course for Beginners | Comp...  

📺 JavaScript for Beginners Course:    • JavaScript Full Course for Beginners ...  

🔗 All Resources for this CSS Tutorial Series: https://github.com/gitdagray/css_course

📬 Course Updates ➜ https://courses.davegray.codes/

CSS Complete Project for Beginners

(0:00:00) Intro
(0:00:05) Welcome
(0:00:26) Project Intro
(0:00:55) Starter Code
(0:03:04) HTML head and meta tags
(0:07:03) HTML header, nav and hero
(0:20:49) Importing Google fonts
(0:21:31) CSS Reset
(0:23:28) CSS Variables
(0:27:37) CSS Utility Classes
(0:28:56) General Styles
(0:44:13) header and nav styles
(1:03:28) HTML footer and main
(1:10:53) footer styles
(1:12:47) main styles
(1:16:36) About styles
(1:19:08) Contact form styles
(1:26:16) Reviewing progress
(1:28:29) Heading and title consistency
(1:30:07) Converting an HTML table to a CSS grid
(1:34:21) Menu styles
(1:50:18) Evaluating desktop and mobile views
(1:52:04) Adding a media query
(1:54:55) Adding dark mode
(2:02:21) Organizing the CSS
(2:03:29) Preview: A touch of JavaScript
(2:08:50) Final Notes and changes

⚙ 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/...
🔗 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/

📚 New Project References:
🔗 MDN - Grid and the Danger of Markup Flattening: https://developer.mozilla.org/en-US/d...
🔗 CanIUse.com - display contents: https://caniuse.com/?search=display%3...

✅ Follow Me:
Github: https://github.com/gitdagray
Twitter:   / yesdavidgray  
LinkedIn:   / davidagray  
Blog: https://yesdavidgray.com
Reddit:   / daveoneleven  

Was this tutorial with a CSS Complete Project Tutorial for Beginners helpful? If so, please share. Let me know your thoughts in the comments.

#css #complete #project