"Firefox's CSS inspectors are so good... for CSS, Firefox is literally leaps and bounds above where Chrome and other browsers are."
"If you're trying to learn CSS, these types of things are lifesavers."
"If you are learning CSS, if you're getting into CSS, or you're just writing a lot of CSS... Firefox's dev tools are the place to be."
"Display flex is a way to structure your layout. There's also one called grid which is pretty powerful."
"CSS has a pretty simple syntax, but there are a lot of fundamental principles in how it works that catch people off guard, leading to confusion and frustration."
"The first two technologies that you're going to want to learn are always going to be HTML and CSS because these are the building blocks of the web."
"CSS stands for Cascading Style Sheets... CSS is a separate language that goes hand-in-hand with HTML and what we do is use CSS to style our web page and make them look even better."
"CSS Grid and Flexbox are probably the best additions to CSS."
"This course is designed to get you up and running with both of these, HTML and CSS, in no time so that pretty soon you can start making your own awesome websites."
"CSS cascades, in other words, this means that styles cascade down or are inherited from parent to child."
"Shadow DOM: self containment for encapsulated markup and styles."
"Responsive design in a nutshell: overriding and progressively changing."
"This is where we're going to add like the background color, which is going to be hexadecimal ff7979."
"JavaScript is simply the trigger that calls the CSS transition animation to run exactly when needed."
"Use Emmet for shorthand, dramatically speeds up HTML and CSS workflow."
"So each one of these little boxes is a flex container that is centering its own content vertically in that space."
"Grid is the only layout technique that establishes a relationship between the rows and columns. The grid is real."
"CSS properties for animations: transition and animation."
"So this is the right CSS selector to enter into my Google Tag Manager account."
"With these inline elements, you can just store them right next to each other in the file, and that's the difference between the two main display types in HTML: block display and inline display."
"We're going to build this layout using flexbox principles and elements."
"What's great about classes is that they allow you to use the same CSS styles on multiple HTML elements."
"Holy [__] I fell in love with Tailwind fast. It didn't feel like a component Library like this big opinionated thing forcing me to do stuff in a certain way. It was just CSS but easier to write."
"Bootstrap is a style system itself. A single class in Tailwind usually results in one line of code of CSS."
"With Tailwind, you're only using the things that you use. When you add a new class name in Tailwind or in your UI when you're using Tailwind, the Tailwind compiler sees that and it adds that Tailwind into the CSS file that gets compiled out."
"If you've been doing this for a while, like if you've been working with CSS for a while and you remember using floats, even far back as you know using tables for layouts, CSS Grid and Flexbox are a godsend."
"At the heart of innovation lies custom properties."
"Docs main grid - grid template columns: 1fr, 2fr"
"Most HTML elements have a set of default CSS that is applied to them."
"Once you see how easy it is to write and how logical and organized it can be, you'll never write plain CSS again."
"A CSS pre-compiler extends the normal CSS syntax and adds a bunch of new features."
"Variables in your CSS - just that alone is a reason to learn Less or Sass."
"Logic to CSS - that's what a CSS pre-compiler gives."
"Mix-ins in Less are like functions, simplifying CSS."
"Nest elements just like in HTML, making CSS more intuitive."
"Functions in Less: lighten and darken for dynamic styling."
"Automatically adjust text color based on background brightness."
"Stacking context defines like a new order stacking so it's like a new layer."
"CSS cheat sheet: a way for us to learn and add classes and IDs."
"IDs should always be unique, classes you can reuse."
"This is position static by default. Now I want these to be positioned absolute so I can move them around wherever I want within its element."
"Emmet provides shortcuts for common CSS properties."
"Simplify CSS styling with Emmet's shorthand notations."
"Flexbox is definitely one of those things that... can be very frustrating at times."
"Let's learn the fundamentals of flexbox and the really important parts."
"People complain about vertical centering being hard in CSS but look how easy that is. So so easy to do."
"Being confident with CSS and being able to understand what's going on boils down to one really important thing which is relationships."
"Now, if you don't know what this naming pattern that I'm following is, this is called bem convention of writing CSS class names, you can just Google it and read more about it."
"We're using a checkbox with the class of 'toggler' and that's how we're toggling it."
"We're using CSS transition to give us that effect."
"Let's set a transition on the opacity property."
"We're gonna add a transition on all properties."
"Position fixed: It's going to stay at the top all the time. Top 0, left 0, and we get rid of those little spaces."
"I try to help you fall in love with CSS and if I can't get you to fall in love with it, I'm hoping to at least get you to be a little bit less frustrated by it."
"If ever you're doing something like this and you're, this is because it's a custom property and with custom properties in Sass when we use variables it's going to keep this."
"Now, I just want to import that styles.css so this is going to import all of our styles."
"CSS variables - finally use variables in CSS."
"Flexbox completely takes away the mapping of your source to how things are rendered on the page."
"Create stunning designs and effects with modern CSS techniques."
"CSS variables make responsive design easier too."
"CSS variables enable you to set multiple properties at once."
"Now you can have all of this detail in your CSS animation by separating the types of transforms and applying them individually."
"That is, hands down, the biggest applause I've ever got for changing a bit of CSS."
"If you don't know about pseudo elements, they are the best."
"Simple yet effective: CSS tricks for a professional-looking layout."
"Flexbox has definitely made life easier for people that work with CSS."
"There's a running joke with CSS like how to center a div."
"Let's add a little bit of padding on the left and right."
"I hope you fall madly, deeply in love with CSS...or at least make you a little bit less frustrated with it."
"Our custom select works very similar to the normal drop down box, but ours is completely custom so we can style it however we want."
"And what we want it to look like is this okay so we're gonna go into our style sheet here and we're gonna go above our."
"CSS don't register property will allow us to animate custom properties opening up a lot of cool use cases."
"Bootstrap's really good, but when it comes to landing a job, honestly, I would really recommend you learn these two things: Flexbox and Grid CSS grid."
"You can do a lot of stuff with CSS if you introduce animations and stuff."
"You can do a little bit of interactivity with the visibility of the elements."
"Selectors are the things that we actually want to target on a web page."
"Box sizing border-box is going to save you a ton of issues."
"Take a look if you wonder how you can align that to the center you can add the text align Center and it's gonna move it straight there. It's perfect."
"If you want to take a div or a container or some sort and you want to position it in the middle, you can do a margin Auto."
"Let's also add a bit of margin between these, ten. Let's do one REM. Okay, perfect."
"Every element is a box, and a box will have a border, margins, paddings, and content."
"we can also do it like this where we specify a selector which is some sort of input or class or id and then we can specify the content itself"
"What is front-end development? If some of you hate CSS, maybe you should consider an architecture that allows you to focus on the back end and let other people work on the front end."
"Relative positioning moves an element relative to its normal position."
"CSS stands for Cascading Style Sheets, and it's a styling language."
"Remember, HTML defines the structure, and CSS defines the style of a web page."
"External CSS is written in a separate CSS file and then loaded via a link element in the document's head. This is the recommended way of loading CSS."
"The way CSS works is pretty simple: you tell the browser what elements you want to style and then you tell it how to style those elements."
"Type selectors will style all elements that have a certain node name."
"Class and ID selectors will style all the elements that have a specific class and, respectively, ID attribute."
"CSS selectors are used to tell the browser which elements to style."
"The background color CSS property sets the background color of an element."
"How do we get them to stack using CSS? Well, it's simple. We target the labels and we set the display property to block."
"CSS battles are a whole heck of a lot of fun."
"Nice little exploration of border radiuses."
"Let's create a basic website layout using HTML and CSS."
"Alright, everybody, that is an introduction to margins. In simple terms, it's the space around an element."
"All right, everybody, that is an introduction to the display property in CSS."
"CSS stands for cascading style sheets and this is going to be all the styles for your website."
"Learn how to use scss or SAS, it helps you structure your project better and create better overall CSS."
"I pretty much always add a little reset in my CSS."
"Let's build a simple, professional website using HTML, CSS, and a little bit of JavaScript."
"So, now that you know the basics of HTML and CSS, I'm going to teach you how to code in JavaScript."
"So because all of them are the same size I'm going to use one fr for each column fr is the fractional unit."
"The real best part of locally scoped custom properties is you're dealing with the parent and you can have as many pieces inside that are all being controlled with one nice simple selector."
"How do we use custom properties in a smarter way that leads to more maintainable projects and easier to deal with code bases?"
"This is really fun... wanting to learn about CSS Transformations, animations... create your own svgs."
"Inspired by a website, learn CSS transformations and animations."
"We can make them scoped to the component that they are defined in by adding a scoped attribute to the style element."
"Sass allows you to go beyond the natural capabilities of CSS."
"Sass makes your CSS more like an actual programming language."
"Variables allow us to do it in a much easier, more readable way."
"Nesting is one of the main reasons that I like to use sass."
"Inheritance or extending is another really cool feature of sass."
"Conditionals make sass more like an actual programming language."
"Type safe CSS with build time generated styles... Panda CSS is a CSS in JS solution that extracts the styles at build time instead of runtime, resulting in better performance."
"Type safe CSS is Panda's most significant advantage over Tailwind."
"Tailwind made CSS so much easier... it made CSS so much more fun for me."
"What future CSS am I looking forward to? Style queries are for me probably the one that I'm really looking forward to."
"I would personally use grid and not Flexbox. It's going to be a lot easier. That would be my solution."
"I don't think we need to be good at math to be good at CSS."
"The Box model consists of the content, the padding, the border, and the margin."
"If I were to ask you what is the size of a div, you would probably say that a div has a width of 300 pixels and a height of 100 pixels, like we defined in our CSS. However, this is wrong."
"Apply as many styles as you can to either your HTML element or your body element"
"To position elements without disturbing the DOM, use CSS and apply 'display: inline-block'."
"Border one pixel solid black. Set to a light gray color."
"Position sticky is less to do with the containing block itself and just looking at the parent."
"Start with the fundamentals of CSS: font styles, colors, margin, and padding."
"CSS Frameworks can save you a lot of time because they come with pre-existing classes and components that you can use to speed up your development."
"You want to make sure you learn enough CSS before you jump into a framework."
"Are you feeling overwhelmed by CSS animations?"
"So you can see it animate and animate and you get this really nice little transition all built with pure CSS for a fully responsive menu."
"The first thing that we need to do is take a bit of a deeper dive into CSS units."
"Percentages are mainly used for width. Because it's a percentage that's relative to the parent."
"The idea of having units that are relative to font size, it might sound a little bit complicated, but once you start playing around with them, it's really not that bad."
"Colors are properties we constantly have to use, and referencing them through variables makes our lives a million times easier."
"It's absolutely amazing what this can do, and this is with just CSS and HTML."
"I'm going to absolutely blow your mind with the CSS feature."
"So by initializing flex box, I can now use this command, which is justify content to center."
"...you'll probably never go back to writing normal CSS ever again just because it's so convenient."
"By using all of these things – Sass variables, mixins, functions – the end result is that you can achieve more compiled CSS by writing less source code."
"Definitely looks a lot more interesting."
"It's actually mostly just CSS apparently, but nonetheless we can make our windows look a lot more like this."
"Aligning items vertically inside of a container was nearly impossible, but with Flexbox, it's as easy as one line of CSS."
"For the most part, flex-grow, flex-shrink, and the different justify-content and align-items properties are all you really need in order to create dynamic and complex layouts."
"...there's a nice easy way to do that, we can do a locally scoped custom property..."
"Absolutely mind-blowing things that people can do with just some HTML and CSS."
"Better late than never, subgrid should rise quickly from here."
"I'm in love with subgrid, I'm so happy it's finally here."
"First, we want to prune unused styles, minify down the CSS, and compress it to be as small as possible, helping us get those small file sizes."
"Writing CSS is getting both easier and more powerful with cross browser support for container queries and has and nesting and so much other very exciting stuff."
"I help you learn how you can fall in love with CSS."
"A really fun project that covers a bunch of modern CSS technologies."
"Modern CSS allows us to do things that were literally impossible in the past."
"Min, max, and clamp are three amazing CSS functions that make writing CSS a lot easier."
"So if you don't know what Tailwind is, go check out tailwindcss.com. What are you doing? Because it's absolutely a banger way of writing your CSS."
"You can create a whole website without using a single class or ID."
"...this speaks to me in this hard to explain way. So this is a path that I'm really interested in exploring, and I think what excites me about it the most is that something that we hear about a lot from Tailwind users is, they almost feel like dirty writing CSS sometimes."
"I realized okay when I'm writing my CSS this way and I need to build some piece of UI most of the time I didn't even have to write CSS at all I could just build the thing I wanted to build using the existing pieces that I'd made."
"You can write CSS and then add things with plugins like prefixers, future CSS, or lint."
"If you want to have a table that has things such as passing in the colors and passing in the paddings etc without having to implement it all yourself in CSS, it'd be so much better to use something that already exists than to implement it yourself."
"The goal here is to make writing CSS the exception."
"I think what I should do to do that is card and set the flex property to one. So flex of one means each flex box child, which is each card, has the same ratio of dividing up the horizontal width with each other."
"This is the benefit of creating styles that you can reuse."
"...the color is also going to be whatever the value of this color variable is."
"And it's written me a new version of variables.css."
"Now all of the list items are green."
"Position sticky is like a marathon race. You need to know when you start, when you finish, and how far you have to go."
"Some people think that with things like calc, custom properties, and other modern CSS features that we don't really need SAS anymore."
"SAS is a lot more than math and variables, but other than the fancy things that it can do, it also plays really well with custom properties."
"CSS is growing up really fast these days."
"Despite `:has` only landing in browsers in 2022, it's already past 83 with their support only growing."
"Here at my channel I help you fall madly deeply in love with CSS."
"Let's get right into it by jumping into the `:is` pseudo class right here."
"Classes represent identifiers, like a name, and based on that name, we can style multiple elements the exact same way."
"Values are being passed down from parent to child, so if I set a value or a property on the body element, that property will be passed down to all of its children."
"That's exactly how CSS works, that's where the cascading word comes from."
"Classes allow us to reuse styles, and the concept of reusing is great because it saves time."
"JavaScript should do, but whenever it just comes to styling only then it seems like CSS should be enough to do the job."
"SVG: infinitely scalable and manipulatable with CSS."
"After flexbox, now we have the CSS grid."
"Recent CSS features radically change how we write CSS."
"I want to share with you five new CSS concepts."
"This is something that used to require tons of JavaScript and is now just able to be done in CSS."
"I hope you fall madly deeply in love with CSS and if I can't get you to fall in love with it I'm hoping to at least help you be a little bit less frustrated by it."
"Gradients, the name sort of hides the fact that they can do a lot of these really awesome things."
"There's more than what we just looked at that we can do from creating zigzag patterns to waves and a whole bunch more."
"Making it look exactly like a normal deck of cards while also having incredibly clean CSS code is very difficult."
"The key to the whole trick lies in this CSS rule: overflow:hidden."
"If you are interested in hearing more about Sass, you might like my video that I made recently about how to use the new `@use` and `@forward` rules with the new Sass syntax."
"I really love seeing this; it's really exciting, especially for someone like me who's always talking about CSS itself."
"Putting CSS makes your website look a lot better."
"Flexbox is probably the best way that you can lay things out on either a horizontal or a vertical axis in CSS."
"CSS is evolving so fast with things like custom properties that are just absolutely amazing."
"I'm currently working on a course called BeyondCSS that's going to be diving into all of these things."
"The fastest way to get to first render on your page is HTML and CSS."
"This is looking great, it should, if we go into any kind of mobile view, yeah, we get a nice little responsive feature thanks to that CSS grid line that we had there."
"My channel is all about helping you fall in love with CSS."