How I learned CSS by creating a frog with HTML & CSS only

When I switched from a job in a purchasing department to front-end development at the beginning of this year, I didn’t know much about HTML or CSS. As I started out with CSS I came up with this project to practise on; creating a simple frog illustration with just code.

Here I will show the process of how I made a basic frog with HTML and CSS. It may not be the fastest or best way to accomplish this (or the prettiest frog for that matter), but I am also still a beginner, making mistakes, and there is plenty of room for improvement. This article is just to inspire and/or help new developers to get started and practising with CSS.

Different versions of the CSS frog

The head in HTML:

First things first, we need some HTML to style. The way the frog is set up is there is one main component, the whole frog, and then it splits between the head and the body. Around the head component I have added some silly extra parts as well, my frog happens to have an optional top hat, just because they are cool.

The head element has the face, each eye separately (with a pupil), optional sunglasses and a mouth (with a lip and a tongue). The body element is slightly more complicated, but we will get to that in a bit. This is the final version which will be covered in this article.

Note: All the elements are div’s and some are split into more than one div. Also, each element has at least one unique class and sometimes one or more generic classes to refrain from writing the same code twice. For example we have two eyes, but only one left eye. The look for the eye will mostly be the same for both, but the tilt and location will be different for each. At the end of this article there will be a link to a Codepen where you can find all the code.

//This is the frog's head 
 
<div class="tophattop">
    <div class="tophatbottom"></div>
  </div>
  <div id="head" class="frogface">
    <div class="sunglasses"></div>
    <div class="eye one">
      <div id=p upilOne class="pupil one "></div>
    </div>
    <div class="eye two">
      <div id=p upilTwo class="pupil two"></div>
    </div>
    <div class="frogmouth">
      <div id="mouth" class="froglip">
        <div id="tongue" class=""></div>
      </div>
    </div>
  </div>

The head with CSS:

With the basic HTML in place for the face we can start with the first styling rules. The outer-most element that will hold all the frog parts together will be styled with some height, width and positioning, to make sure we can position all the frog parts the correct way.

The two main subjects here with CSS are element positioning and shaping. The latter to make it look like a frog body-part and the other to make all the parts together look like a frog and not just a pile of green blobs. I will go into each of these subjects seperately and talk about some challenges that arose while building this frog. When I built this frog the first time, I didn’t shape everything first and then positioned them, but shaped and positioned each part on its own before continuing to the next. However, for this article it makes it easier to explain these two seperately.

Shaping: making the body parts. So now that we have a whole lot of empty div’s in our HTML, it is time to get some colors and shapes on that screen. I decided to make everything a fixed size, so it does not scale (at all) on resizing the browser window, but it does stay together nicely. For the face I chose a nice green color and set up my ‘frogface’ class with that as my background color. I made it 80px high and 200px wide as I wanted it to have a broad face. There, color and shape on screen with just 4 lines of CSS! But, it doesn’t really look like a face yet. To actually change our boxy frogface we just need one more setting, the border-radius. I’ve set mine to 45% to make the corners a lot rounder but not too far to be an oval.

For the eyes there is a parent div that will be the same color as the frog’s face and then a child div for the eye white and pupil. The pupils are a dark colored oval with a white solid border. The mouth is made of a dark oval with a smaller oval on top in frog-green. With all these elements made but without positioning you should have something similar to this wacky pile of frog parts:

Frog’s head, eyes and mouth without positioning

Positioning: putting the body-parts in the right place. To fix this weird mess all we need to do is set some positioning rules for the different parts. As each element has a unique class we can set the position for each element individually. To position the frog face, set the position to absolute, this will make it stay in that position all the time, no matter what other elements around it are doing. Having the eyes being a child div of the face, positioning them is quite easy. They will be set to absolute positioning as well and then placed somewhere along the top of the face. As they are childeren of the face, the top of the eyes will be at the top of the face. Which looks ridiculous. Set the top to about -25px and then set the left eye around 45px from the left, and the right eye 45px from the right. This will create an even space between the eyes and from the sides. If you like your frog eyes to be closer together, just increase the distance from the sides.

.frogface {
   position: absolute;
   left: 100px;
   background-color: #53b28f;
   height: 80px;
   width: 200px;
   border-radius: 45%;
   top: 40px;
   z-index: 2;
}
.eye {
    background-color: #53b28f;
    height: 55px;
    width: 45px;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
}
.eye.one {
    left: 45px;
    top: -25px;
}
.eye.two {
    right: 45px;
    top: -25px;
}
.pupil {
    background-color: #303332;
    height: 30px;
    width: 20px;
    border-radius: 50%;
    border-color: #fff;
    border-style: solid;
    border-width: 7px;
    position: absolute;
    z-index: 3;
}
.pupil.one {
    left: 5px;
    top: 2px;
    transform: rotate(-7deg);
}
.pupil.two {
    right: 5px;
    top: 2px;
    transform: rotate(7deg);
}

Putting all elements position on absolute will make this frog very stubbornly stay exactly where it is, perfect for trying out different sizes and experimenting. Also it requires minor simple math to calculate the center of the face and the space between elements if you’re a little OCD on symetry like I am.

With positioning added your frog’s head should look something like this:

This looks much better

The body in HTML:

Now, let’s continue with the body. This part was a bit more tricky, it has more parts and some parts are connected to each other (hands to arms for example). The biggest issue I had was because I wanted to create the frog with the lower half of the legs to be in front of the belly, while the parent element, the upperleg, was behind the body of the frog, just like a real frog sitting. I tried a couple of things with z-index (the value responsible for determining what element is in front of another) and ended up creating an ‘invisible’ leg. Without the invisible upperleg both parts of the legs would be either in front of or behind the body.

To prevent the left situation and keep the lower legs in front of the torso, the invisible legs on the right were created.

To keep everything together there is one main div for this section, the frog body div. Inside it there is the torso, legs, and arms, which were created with their childeren hands, lowerlegs and grandchilderen feet.

The body with CSS:

The shaping of the body elements is very similar to the face elements, with just different heights and border-radius to make the limbs. The positioning is complemented with some transformation rules, to rotate the limbs and make them tilted. Which I also already secretly used for the eyes, to make Bob (yes, it has a name) a little cuter.

Keep in mind that if the parent div is rotated, the childeren are automatically tilted in the same way. If you need them to ignore the tilt, just do the opposite of the transformation of the parent. For example my frog arm is rotated by 130degrees, if you’d like to make it appear as though the hand (child of the arm div) is not going in that same direction as the parent element but is pointing down, set the transform to -130degrees on the hand.

.frogarm.one {
    left: 40px;
    top: 180px;
    transform: rotate(130deg);
    -webkit-transform-origin: center top;
}
.froghand {
    background-color: #53b28f;
    position: absolute;
    height: 50px;
    width: 20px;
    top: 90px;
    border-radius: 50%;
}
.froghand.one {
    transform: rotate(30deg);
    left: 0px;
    width: 15px;
    background-color: #3f846b;
}

If all went well, your frog could look like this:

Bob!

Final note:

I know this is not the best looking illustrated frog, but I did learn a lot on positioning elements absolute, and on creating visuals from scratch, and it was way more fun than struggling with positioning random boxes on a page. If you’d like to see the HTML and CSS written to accomplish this, here is as promised, a link to the Codepen: https://codepen.io/Claudia413/pen/GEVgLz

After I made this frog I wanted to make it move on command and I wanted to be able to interact with it, so I went to learn more on CSS animations and Javascript. I might write another blog on how I animated Bob and added different interactions and styles. If you like you can already play with the (unfinished) code here: https://codepen.io/Claudia413/pen/zzgGRj