CSS Crash Course 2021

Описание: Welcome to Web-Crunch CSS Crash Course where we pick up from my previously authored HTML Crash Course to build a complete resume/portfolio website from scratch.

This course is sponsored by my newest full-length course called Hello HTML + CSS. I'm currently building this course. Once it's ready for prime time I'll be sending out an invite to it to my subscriber list in advance to the general public.

About the course
This course clocks in as one of my longest screencasts to date (about 3 hours) but I hope it proves useful. CSS is a bear of a language to master. I know developers who have worked for decades building websites and software that still struggle to leverage CSS to a masterful degree.

The truth is, CSS is an open book. There are a few strict protocols to adhere to when authoring valid CSS but in terms of writing CSS at scale, there are numerous ways you can go about it. Some ways can hinder productivity, speed, and usefulness while other ways of author CSS let you move fast and provide the richest experience to end-users.

Who is this course for?
This course is for absolute beginners. If you're a seasoned pro, this might be a good refresher for you.

HTML Crash Course:
https://web-crunch.com/posts/html-cra...

Starting Code for this video:
https://github.com/justalever/htmlcra...

Final Code for this video:
https://github.com/justalever/csscras...

Timestamps:

Slides:
00:00:15 - Introduction
00:01:50 - What is CSS?
00:02:42 - Why you might learn CSS
00:04:17 - Tools used to author CSS
00:05:02 - Building blocks of a CSS file
00:05:47 - CSS Syntax
00:07:02 - How does CSS actually work?
00:09:25 - Understanding how CSS is applied
00:10:26 - What is a CSS selector?
00:12:54 - What is the CSS Box model?
00:14:50 - Understanding block and inline-block display
00:16:00 - Cascade
00:16:39 - Specificity
00:17:11 - Inheritance
00:16:00 - Cascade
00:18:30 - Values and units
00:20:20 - Color
00:22:36 - Browser inconsistencies
00:23:57 - Introduction to CSS Crash Course Resume Project

Crash Course Project
00:24:18 - Demo of the final resume website
00:27:23 - Course source code
00:29:03 - Setting up the project
00:30:16 - Defining where the CSS will live
00:36:35 - Using custom fonts
00:41:24 - CSS variables
00:48:25 - Adding a CSS reset file
00:53:47 - Defining base styles
00:55:16 - Understanding background color and images
01:02:40 - Defining base containers
01:02:40 - Defining base containers
01:09:14 - Styling the global navigation
01:43:30 - CSS Media Queries
01:56:30 - Styling the resume content
02:00:00 - Styling the blog articles on the index page
02:35:02 - Styling the contact page
02:55:20 - CSS animations
03:00:12 - Final words and where to head next

Hi, My name is Andy Leverenz and I work as a product designer and developer. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.

♥️ Sponsor me on GitHub
https://github.com/sponsors/justalever

☕️ Keep me awake. Buy me a coffee
https://www.buymeacoffee.com/webcrunch

📰 One-Click Subscribe:
https://www.youtube.com/user/webcrunc...

💻 Previously published at:
https://web-crunch.com/posts/how-to-u...

👋 Latest Course: HELLO HTML & CSS (coming soon)👋
https://hellohtmlcss.com

💎Ruby on Rails Course: HELLO RAILS
https://hellorails.io

💻 Check out the blog:
https://web-crunch.com

🦄 Check out my personal site:
https://justalever.com

🚀 Links:
Weekly Newsletter: https://digest.web-crunch.com/
Twitter:   / webcrunchblog  
Github: https://github.com/justalever

📘Check out my book on UX Design:
"LUXD: Learn User Experience Design"
https://web-crunch.com/products/luxd

📙 Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"
https://web-crunch.com/products/ptt