Coding through all of freeCodeCamp’s Responsive Web Design certification — in the 2nd video of this series, we’ll work through the Basic CSS module, learning CSS selectors, classes, font sizes, borders, custom fonts with Google Fonts, padding, margin, CSS ids, and units like pixels (px) and em.
Check out freeCodeCamp’s Responsive Web Design certification: https://www.freecodecamp.org/learn/responsive-web-design/
Get free additional cheat sheets, study guides, and resources for freeCodeCamp and all kinds of other things on my website: https://resources.bytesized.xyz
00:00:00 Introduction
00:00:17 Introducing the Basic CSS Module
00:00:50 Get free study guides and cheat sheets
00:01:28 Change the Color of Text
00:02:43 Use CSS Selectors to Style Elements
00:05:53 Use a CSS Class to Style an Element
00:07:57 Style Multiple Elements with a CSS Class
00:08:55 Change the Font Size of an Element
00:10:03 Set the Font Family of an Element
00:11:47 Import a Google Font
00:15:13 Specify How Fonts Should Degrade
00:17:38 Size Your Images
00:19:21 Add Borders Around Your Elements
00:21:22 Add Rounded Corners with border-radius
00:22:50 Make Circular Images with a border-radius
00:23:21 Give a Background Color to a div Element
00:24:22 Set the id of an Element
00:25:48 Use an id Attribute to Style an Element
00:27:58 Adjust the Padding of an Element
00:29:57 Adjust the Margin of an Element
00:32:18 Add Different Padding to Each Side of an Element
00:33:32 Add Different Margins to Each Side of an Element
00:35:10 Use Clockwise Notation to Specify the Padding of an Element
00:36:24 Use Clockwise Notation to Specify the Margin of an Element
00:37:15 Use Attribute Selectors to Style Elements
00:40:00 Understand Absolute versus Relative Units
00:42:25 Style the HTML Body Element
00:43:21 Inherit Styles from the Body Element
00:45:55 Prioritize One Style Over Another
00:47:27 Override Styles in Subsequent CSS
00:49:19 Override Class Declarations by Styling ID Attributes
00:51:30 Override Class Declarations with Inline Styles
00:52:44 Override All Other Styles by using Important
00:55:02 Use Hex Code for Specific Colors
00:58:01 Use Hex Code to Mix Colors
01:01:13 Use Abbreviated Hex Code
01:03:40 Use RGB values to Color Elements
01:06:05 Use RGB to Mix Colors
01:08:58 Use CSS Variables to change several elements at once
01:11:15 Create a custom CSS Variable
01:12:10 Use a custom CSS Variable
01:14:30 Attach a Fallback value to a CSS Variable
01:16:43 Improve Compatibility with Browser Fallbacks
01:19:46 Inherit CSS Variables
01:23:08 Change a variable for a specific area
01:24:22 Use a media query to change a variable
01:27:33 Conclusion
Join Bytesized’s Discord server: https://bytesized.xyz/discord
Deploy your first serverless function with Cloudflare Workers! Watch my free Egghead.io course to get started: https://egghead.io/playlists/introduction-to-cloudflare-workers-5aa3?af=a54gwi
—
MY GEAR!
CAMERA https://geni.us/PAvvcAI
ONE AND DONE LENS https://geni.us/xKKIX
WIDE LENS FOR WALKING AROUND https://geni.us/rczDv
ON CAMERA MIC https://geni.us/ChI0U
THE BEST MIC FOR NARRATION https://geni.us/hT3zR8c
MIC ACTIVATOR (must-have for above mic) https://geni.us/8ABzGzA
USB INTERFACE https://geni.us/z1MZ
These are affiliate links – buying any of the gear I use with them will help support the channel. Thanks ♥️
—
🐦 Follow me on Twitter https://twitter.com/signalnerve
—
💛 BYTESIZED is a weekly newsletter for developers — join 4,000+ developers who read our email every Tuesday to stay in-the-know. Subscribe for free at https://bytesized.xyz!