Back to exercises

Lessons

Youtube

Module 5

Selected chapters. Introduction to nth-childs (examples in lists, icon boxes, navigation menu etc). Further examples on pseudoelements. Custom bullet lists and custom icons as bullets. Customizing ordered lists. Advanced styling of background images with opacity.

Selected chapters. Introduction to nth-childs (examples in lists, icon boxes, navigation menu etc). Further examples on pseudoelements. Custom bullet lists and custom icons as bullets. Customizing ordered lists. Advanced styling of background images with opacity.

Lesson 1

Horizontal lists
horizontal list, inline block display, inline flex display, label, list style type, nav menu, unordered list
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!
Watch the lesson

Lesson 2

Nth-child
first child, last child, nth child
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.
Watch the lesson

Lesson 3

Highlighter text effect
background gradient, highlighter effect, line behind, linear gradient, span, text effect
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.
Watch the lesson

Lesson 4

Custom bullets
before, custom bullet, pseudoelement, unicode, unordered list
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.
Watch the lesson

Lesson 5

Custom ordered lists
before, custom ordered list, display block, number, process, pseudoelement, step, text indent
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.
Watch the lesson

Lesson 6

Faded background image
background image, before, faded image, opacity, pseudoelement, transparency, z index
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.
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!