
Explore how the border property relates to the box model, using padding and color to create solid, dashed, and dotted borders; customize with border radius for rounded edges.
Explore outlines vs borders in the CSS box model, how outlines sit outside the border, and how they can change content size, padding, and margins.
Discover how to use the percentage unit for font sizes, how the default root font size sets headings, and why pixel values stay fixed.
Master the css calc() function to combine units such as rtm, em, and pixels for responsive font sizes. Explore 1 rtm times 3.2 and view height minus pixels examples.
Master the CSS position property with an emphasis on relative positioning, using top, bottom, left, and right to nudge elements and explore overlaps while spacing remains preserved.
Create a blog preview section inside a container, apply a background image and white text, and style two buttons with hover opacity for a readable, responsive preview.
Build a complete footer section using a container layout, branding and typography details, and a dense navigation area with social icons and sponsor links.
Explore how CSS attribute selectors target elements by attributes like href and class, using operators for exact matches, begins with, ends with, and contains to create flexible, reusable styles.
Explore CSS pseudo classes by targeting first-child, last-child, and only-child elements with colon syntax, using h1 and div examples to color blue, red, and pink.
Explore CSS pseudo classes in periodic selectors, mastering how to target every second or third element with nth-child, nth-last-child, and nth-of-type, including first and last child behavior within containers.
Learn how to style form inputs with css pseudo-classes like hover, focus, active, and valid, including input types, placeholders, required and min-length rules, and pill-shaped submit buttons.
Master responsive CSS using media queries and breakpoints, including setting the viewport meta tag, to switch from three-column layouts to stacked layouts at defined widths such as 1200px and 800px.
Apply footer styling in CSS by setting uppercase text, a centered background image at 80% size, and a back-to-top link, with responsive tablet and phone layouts.
This course will take your CSS skills from the absolute basic to advanced. You'll learn everything you need to know to create complex layouts and elegant designs. During the course, we'll create 4 unique CSS projects, those projects will be covered in sections 6, 8, 10 and 12.
Course Map
Section 2) Basic CSS - This is the first real section of the course. This section starts off by assuming 0 knowledge of CSS. As so, I will start off by breaking down in detail the concept of a CSS rule and then move on to basic selectors. Before the end of this section you'll have all the skills necessary to alter and typographic and backgrounds elements of your web pages.
Section 3) The Box Model - This section will breakdown the CSS box model. The box model is perhaps the most important concept that a web developer must understand before they can start creating any sort of layouts. I'll also cover in this section how to set the height and width of HTML elements.
Section 4) CSS Units - Up until this section we'll have only used pixels for unit sizes. Pixels are great for some things, but not optimal for everything. This section will show you how you can use relative units to make your projects easier to maintain.
Section 5) Positioning - CSS positioning can be a pretty complex thing, but it doesn't have to be. This section will simplify many of the more complicated CSS properties. Most notably things like floats, absolute positioning, vertical align, etc. After this section, you'll have the tools to create nearly and layout you'll ever need to create.
Section 7) Advanced Selectors - CSS offers many different types of selectors and also allows combining those selectors to create an even more specific selection. This section will also introduce you to pseudo classes & pseudo elements.
Section 9) Responsive Design - This section is short, but super important for modern web design. After this section you'll be able to use CSS3 media queries to drastically alter the layout of your pages based off the size of the screen currently viewing it.
Section 11) Animations & Transitions - This section will breakdown CSS transitions and CSS key-frame animations. CSS transitions will give how hover effects a much smoother transition and can be a great way to add some life into your web pages. Key-frame animations are more about creating animations that play when the page loads. This section will also show you how to use the transform property.
Section 13) Bonus - The final section of the course will go over many of the more "fun" CSS concepts that didn't fit anywhere else in the course. Including CSS variables, Gradients, Shadows, Filter, and much more.
If you have any questions about the course, feel free to message me. I usually reply very quickly, if anything I'll get back to you as fast as possible.
I hope to see you in the course!