Video lessons
Welcome to the course! We recommend watching all the lessons from one module first. Then, completing the exercises for that module before proceeding to the next one. Good luck and happy coding!
This lesson will introduce you to CSS and explain you what CSS is, when it is used and why it is useful for designers.
It’s time to learn about some basic terms used in CSS. Classes, IDs, selectors, paddings and margins, pseudoelements and pseudoclasses.
We will finally get to see how an actual CSS code looks like using a few simple lines. Then, you will be able to see CSS in action so that you can start with the exercises in the next module!
We will take a look at different types of text like paragraphs, links and headings. And some introduction to lists and spans so that you can style all kinds of text on your website!
This lesson is all about paragraph styling – properties like font-family, font-size, color, line-height, text-transform, text-decoration, letter-spacing and more.
You will learn how to split text into several columns and how to style those columns. Then, we will see how to style different parts of text (or words) using span and make them look differently than the rest of the text.
How to style the links using ‘a’ selector. We will take a look at the hover, active and visited states, pointer actions, cursor and how to disable a link.
This lesson is about headings of different levels, from h1 to h6 and how to use basic text properties to style them.
How to style ordered and unordered (or bullet) lists in CSS and change the bullets to something else and the markers for ordered lists.
How to turn a simple text link into a button using some background-color, border-radius and paddings. Then, we will use the same properties to style the spans so that they look like labels!
Basic styling of images in CSS. Set the width, height, border-radius for rounded corners, image border and control how the image fits into the frame using object-fit and aspect-ratio properties. Together with some basic filters and drop shadow effects!
How to set background image to divs using only CSS. Set the image source in url of the background-image property. Using background-repeat, background-position and background-size to adjust your background.
How to set a background color or background gradients for divs and other elements in CSS. Using rgba colors instead of hex values to control the transparency.
A cool feather gradient on an image using mask-image property and linear-gradients. You can control the direction and the exact gradient stops, as well as create the effect on one or both sides / edges of the image!
Learn basics of different displays in CSS – block, inline, inline-block, flex and grid! You will see how different displays control layout and elements organization and the typical properties that you can use for each of them.
Diving into display flex – flexible containers. You can organize your elements within a parent container next to each other or below each other and control the gaps using column-gap and row-gap and align-items and justify-content for vertical and horizontal alignment.
In this lesson, we will see the difference between visibility: hidden and display: none. We will also learn about different overflow settings and how it affects the visibility of the content that’s going outside of the parent frame, container or the screen.
One of the most used layout properties in CSS – position. The difference between position: static, relative, absolute, fixed and sticky. Correlation between absolute position of your element and the relative position of the parent element.
Using before and after pseudoelements to add icons, symbols, emojis or even images and other graphics to parent elements. Those can be text, list items, buttons etc.
In this lesson, we will add a color overlay to the background image of our container using an after pseudoelement. Using rgba background color enables you to set the transparency.
Changing the icon color using fill property in CSS. Applies in practice only if you are using a simple svg icon that’s placed using an svg tag.
If you are using more complex icons or illustrations that are still vectors and svg files but placed using an img tag, you can style them as any other image in CSS. However, the fill property won’t work anymore!
Practicing adding Font Awesome icons as pseudoelements for our text, buttons or any other element.
How to use display: inline-block or inline-flex for list items to create horizontal lists. Using list-style-type: none for your list to clear it from any formatting and remove the bullets first. Very useful for labels and tags or nav menu items!
With nth-childs, you can target first, second, third, last or any other element of a parent and apply different styling than the rest of the elements. You can also target individual elements of these nth-childs, for example a heading element of the third box in a parent container or a text color of the second link in a group of links.
Creating a highlighter text effect using span for best results. We are creating the effect using linear-gradient as a span background and creating hard stops between transparent colors and our highlighter color. Then, we will use percentages in this gradient to control the thickness of our line and where exactly the hard stop starts and finishes.
Using Unicode symbols, emojis and Font Awesome icons as custom bullets for unordered lists. We will also add custom graphics as our bullets using before pseudoelements and their background-image property for the most flexibility and control.
Advanced styling of ordered lists: list-style-position property, how to put numbers in squares or circles, how to use text-indent for the first line in multi-line list items. You will learn how to add a word like ‘Step’ or ‘Process’ before list item markers. And lastly, how to place these on a separate line above the list item text using display: block and before pseudoelements.
How to create a faded background image using a before pseudoelement and controling the transparency using its opacity. The text on top will stay untouched by this opacity settings. Then, we will see how to stack the elements by setting the z-index of this before pseudoelement to a negative value to push it to the back.
The number 1 tip when it comes to efficient CSS writing! Using root variables for applying changes globally. You can define any property as global and reference these variables for any element. Then you change those variables from a single place in your root definition!
Importance of em units for text and other elements, when you want them to be responsive to the font size. For example line height, paddings, bullet size etc. Em values are units relative to the current font size of the parent element. In short, 1em is equal to the current font size! So if you set the font size to be 20px, then 1em will be equal to 20px.
How to use other units like viewport width, viewport height, calculations and % units.
Use mix-blend-mode property to create different effects on an image, text or other elements that are placed on top of a background color. We will see how to use these effects on an image element, background image of a before pseudoelement and text.
Using auto margins to center the content or to push the elements to the left or right in a parent container, !important tag and how to use grid spans to create table-looking grids in CSS. And finally, how to create text that changes its font size based on the screen width using vw units, so that it is bigger on larger screens!
