CSS Crash Course In 30 Minutes
👉 Become A VS Code SuperHero Today: https://vsCodeHero.com
In this web development crash course, I will cram in as much about CSS as I can in about 30 minutes. If you are interested in learning CSS but know nothing, then you are in the right place. We will be looking at selectors, declarations, styles, etc. We will be creating a basic website and you can download the code for reference. This video is intended for beginners.
Code: https://github.com/codeSTACKr/css-crash-course
HTML Color Names:
http://codestackr.com/blog/html-color-names/
Timestamps:
00:00 - Preface
01:10 - Code Editors
01:28 - What is CSS?
01:57 - CSS Usage
03:31 - Usage Demo
06:10 - CSS Selectors
06:47 - Colors Explained
08:26 - Fonts Explained
09:24 - Font Demo
10:42 - Units of Measurement
11:17 - em Demo
11:45 - Borders
13:18 - Padding
14:48 - Margin
15:06 - Box Model
15:52 - Header / Container
19:17 - Navigation Menu
22:05 - Jumbo with Image
24:34 - Main Section / Sidebar
27:35 - Footer
28:40 - @media / Responsive
30:11 - Position
31:38 - Clear Fix
36:58 - Extras (Radius, Text Styles, etc)
39:25 - Outro
_____________________________________
📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________
🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions
🤖 I now use AI-powered code completions thanks to Kite. You should too so grab it FREE: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
_____________________________________
💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________
Watch Next:
Web Development - Beginners Roadmap (2020) - https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners - https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________
Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/codeSTACKr
_____________________________________
** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.
#css #beginner #codestackr
Видео CSS Crash Course In 30 Minutes канала codeSTACKr
In this web development crash course, I will cram in as much about CSS as I can in about 30 minutes. If you are interested in learning CSS but know nothing, then you are in the right place. We will be looking at selectors, declarations, styles, etc. We will be creating a basic website and you can download the code for reference. This video is intended for beginners.
Code: https://github.com/codeSTACKr/css-crash-course
HTML Color Names:
http://codestackr.com/blog/html-color-names/
Timestamps:
00:00 - Preface
01:10 - Code Editors
01:28 - What is CSS?
01:57 - CSS Usage
03:31 - Usage Demo
06:10 - CSS Selectors
06:47 - Colors Explained
08:26 - Fonts Explained
09:24 - Font Demo
10:42 - Units of Measurement
11:17 - em Demo
11:45 - Borders
13:18 - Padding
14:48 - Margin
15:06 - Box Model
15:52 - Header / Container
19:17 - Navigation Menu
22:05 - Jumbo with Image
24:34 - Main Section / Sidebar
27:35 - Footer
28:40 - @media / Responsive
30:11 - Position
31:38 - Clear Fix
36:58 - Extras (Radius, Text Styles, etc)
39:25 - Outro
_____________________________________
📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________
🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions
🤖 I now use AI-powered code completions thanks to Kite. You should too so grab it FREE: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
_____________________________________
💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________
Watch Next:
Web Development - Beginners Roadmap (2020) - https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners - https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________
Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/codeSTACKr
_____________________________________
** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.
#css #beginner #codestackr
Видео CSS Crash Course In 30 Minutes канала codeSTACKr
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Do This! BEFORE Learning A JavaScript FrameworkCSS Nesting Is Coming Soon! 🤯 How To Nest Selector Styles TODAY!! (2021)HTML Crash Course In 30 MinutesThis is ALL you NEED to Become a Web Developer Today (2021)Learn CSS Position In 9 MinutesFlexbox CSS In 20 MinutesCSS Crash Course TutorialLearn REACT JS in under 5 MINUTES (2020)Visual Studio Code Web Dev Setup In 6 MinutesCSS Grid vs FlexboxLearn Every CSS Selector In 20 MinutesWeb Developer Roadmap 2021 | A Guide To Starting A Career In Web DevelopmentTop 10 Best VS Code Extensions (2020)Learn CSS FLEXBOX in 20 MinutesCSS Position Explained In 6 MinutesLearn Git in 30 MinutesLearn CSS Grid in 20 MinutesAsync JavaScript - Callbacks, Promises, Async/AwaitFlexbox vs. CSS Grid — Which is Better?