Learn to build a responsive website for The Little Taco Shop in this comprehensive CSS tutorial. Master modern CSS techniques and responsive web design principles as you work through a complete project. Begin with HTML structure, import Google fonts, and implement a CSS reset. Explore CSS variables, utility classes, and general styles before diving into specific components like headers, navigation, and footers. Create engaging layouts for about and contact pages, convert HTML tables to CSS grids, and fine-tune menu styles. Evaluate desktop and mobile views, implement media queries, and add a dark mode feature. Organize your CSS effectively and get a preview of integrating JavaScript. Perfect for beginners looking to solidify their CSS skills through hands-on practice.
Overview
Syllabus
Intro
Welcome
Project Intro
Starter Code
HTML head and meta tags
HTML header, nav and hero
Importing Google fonts
CSS Reset
CSS Variables
CSS Utility Classes
General Styles
header and nav styles
HTML footer and main
footer styles
main styles
About styles
Contact form styles
Reviewing progress
Heading and title consistency
Converting an HTML table to a CSS grid
Menu styles
Evaluating desktop and mobile views
Adding a media query
Adding dark mode
Organizing the CSS
Preview: A touch of JavaScript
Final Notes and changes
Taught by
Dave Gray
