Back to exercises

Lessons

Youtube

Module 3

Layout, position and pseudoelements. Display properties, block, inline, inline-block, grid and flex. Margins and paddings. Visibility and overflow. Positioning of the elements: relative, absolute, fixed and sticky. More on pseudoelements (before and after, using pseudoelements for color overlays etc).

Layout, position and pseudoelements. Display properties, block, inline, inline-block, grid and flex. Margins and paddings. Visibility and overflow. Positioning of the elements: relative, absolute, fixed and sticky. More on pseudoelements (before and after, using pseudoelements for color overlays etc).

Lesson 1

Display
column gap, display block, display flex, display grid, grid template column, inline block display, layout
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.
Watch the lesson

Lesson 2

Display flex
align items, column, column gap, display flex, flex direction, justify content
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.
Watch the lesson

Lesson 3

Visibility, display: none and overflow
display none, overflow hidden, visibility hidden
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.
Watch the lesson

Lesson 4

Position
position absolute, position fixed, position relative, position sticky
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.
Watch the lesson

Lesson 5

Before and after pseudoelements
after, before, emoji, Font Awesome, icon, pseudoelement, symbol, unicode
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.
Watch the lesson

Lesson 6

Background overlay
after, background image, background overlay, pseudoelement, rgba, transparency, z index
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.
Watch the lesson

Contact

Any questions? We’d love to hear from you!
Contact us at support@cssgamelab.com or use the form below.

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!