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.

⭐ 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:
https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

HTML for Beginners Course: https://youtu.be/mJgBOIoGihA

JavaScript for Beginners Course: https://youtu.be/EfAl9bwzVZk

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/items?itemName=ritwickdey.LiveServer
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/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility#grid_and_the_danger_of_markup_flattening
CanIUse.com - display contents: https://caniuse.com/?search=display%3A%20contents

Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/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