Back to exercises

Lessons

Youtube

Module 0

Introduction to CSS. What is CSS, when it is used and why it is useful and the difference between CSS and HTML. Basic terminology in CSS, how it looks like and basic rules on writing CSS.

Introduction to CSS. What is CSS, when it is used and why it is useful and the difference between CSS and HTML. Basic terminology in CSS, how it looks like and basic rules on writing CSS.

Lesson 1

Introduction to CSS
intro, introduction
This lesson will introduce you to CSS and explain you what CSS is, when it is used and why it is useful for designers.
Watch the lesson

Lesson 2

Basic terminology in CSS
class, ID, margin, padding, pseudoclass, pseudoelement, selector, terminology
It’s time to learn about some basic terms used in CSS. Classes, IDs, selectors, paddings and margins, pseudoelements and pseudoclasses.
Watch the lesson

Lesson 3

How CSS looks like
CSS code
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!
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!