...
Back to exercises

Lessons

Youtube

Module 6

Efficiency tips and tricks. Root variables, relative values (em), advanced custom lists. Using calc, margin: auto, tricks with pseudoelements, !important, grid spans and responsive text sizes.

Efficiency tips and tricks. Root variables, relative values (em), advanced custom lists. Using calc, margin: auto, tricks with pseudoelements, !important, grid spans and responsive text sizes.

Lesson 1

Root variables
global, root variable
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!
Watch the lesson

Lesson 2

Em units
em unit, relative unit, responsive
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.
Watch the lesson

Lesson 3

Other units - vw, vh, calc and %
calc, calculation, heading, relative unit, responsive, vh, viewport height, viewport width, vw
How to use other units like viewport width, viewport height, calculations and % units.
Watch the lesson

Lesson 4

Blend modes
background image, before, color overlay, image effect, mix blend mode, multiply, pseudoelement
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.
Watch the lesson

Lesson 5

Mixed tips
auto margin, center, display grid, grid span, important, margin, push, responsive, table, viewport width, vw
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!
Watch the lesson

General Instructions

Step One: What I will be making

First click on the green ‘What I will be making’ button. This is how your end result should look like.

Step Two: What I need

Next, click on the ‘What I need’ button to get some basic parameters to use in the code. Such as the font family, colors, image URLs etc. These are just recommendations. Use your own judgement for the rest of the values, such as paddings, margins, spacing and size.

Step Three: Read the given HTML code

You don’t need to know how to write HTML for these exercises. However, you WILL need to take a look at the ‘HTML’ code in the exercise. You can switch from HTML to CSS tab in the Codepen screen. Then read the built HTML code for each exercise to understand the structure and find the classes that are defined for the elements that you will be editing. Use those predefined classes to style them in CSS.

Step Four: Click on the ‘CSS’ tab and start coding

Click on the ‘CSS’ tab in the Codepen screen and start typing your CSS code here, just below the ‘Write CSS code here’ comment. You can also delete this comment if you wish.

For example, if a ‘div’ has a class “text-content” in HTML, you can then style this class in CSS tab. Just don’t forget to add a dot before calling a class out (.text-content)

You should see a live preview of the CSS code that you are editing in the ‘Result’ tab to the right of the Codepen screen.

Step Five: Check the solution with the CSS code

If you are stuck, click on the ‘Show me the code’ button. This will reveal the code that you can also completely copy and paste in the CSS tab of the exercise to see the result.

Or you can just go back to the lessons and watch them again.

Have fun and feel free to reach out!

Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.