Back to exercises

Lessons

Youtube

Module 1

Working with text. Different text selectors (paragraphs, links, headings and lists) and introduction to spans. Setting text properties like fonts, text size, text spacing etc. Working with columns, styling the links and basic working with lists. Turning text into buttons.

Working with text. Different text selectors (paragraphs, links, headings and lists) and introduction to spans. Setting text properties like fonts, text size, text spacing etc. Working with columns, styling the links and basic working with lists. Turning text into buttons.

Lesson 1

Working with text
heading, link, ordered list, paragraph, span, text, unordered list
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!
Watch the lesson

Lesson 2

Styling paragraphs
font family, font size, letter spacing, line height, paragraph, text, text decoration, text transform
This lesson is all about paragraph styling – properties like font-family, font-size, color, line-height, text-transform, text-decoration, letter-spacing and more.
Watch the lesson

Lesson 3

Text columns and spans
column, column count, column gap, column rule, span
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.
Watch the lesson

Lesson 4

Styling links
active, cursor, disable, hover, link, pointer event, visited
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.
Watch the lesson

Lesson 5

Headings
heading
This lesson is about headings of different levels, from h1 to h6 and how to use basic text properties to style them.
Watch the lesson

Lesson 6

Lists
bullet list, list item, ol, ordered list, ul, unicode, unordered list
How to style ordered and unordered (or bullet) lists in CSS and change the bullets to something else and the markers for ordered lists.
Watch the lesson

Lesson 7

Buttons and spans
background color, border radius, button, label, link, span
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!
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!