Will I be taught the concepts around how to make this penguin later in the course?

Hi all,

I am currently on this exercise: https://learn.freecodecamp.org/responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once

I would like to understand how to make a penguin like this myself, from scratch, using HTML and CSS.

I know I have already learnt at least a few of the concepts in previous exercises, but they have been isolated learning experiences and so I don’t think I could make a penguin like this from scratch myself.

Is it worth me digging into the code and using the internet to look all the concepts up, understand them and then make my own penguin?

Or will other exercises and modules later in the Free Code Camp curriculum cover this topic again in a way that will leave me able to make a penguin like this myself?


No. You won’t learn how to make penguins yourself later.

You will need to search it on your own to find out how to make them.

They are called CSS shapes.

I might suggest downloading the solution for this challenge, parsing out the HTML and CSS, and saving it into a (for example) codePen.

Then break it.

Remove everything but the outermost div (the .penguin), and see what happens.

Add in the next two nested divs (the .penguin-bottom and .penguin-top). Examine the CSS for those parts, see what effect adding them back in had, if any.

Then, one by one, add the nested elements back. Read up on the CSS used (particularly the CSS shapes, as mentioned above).


Thanks for the advice guys. Much appreciated. Will do as advised :slight_smile: