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!