How I made my GitHub Page: HTML & CSS Part

Continuing from my last post , this part will cover how I coded my HTML and CSS. 
My GitHub Page:

A complete breakdown of my avatar

One of the biggest challenges for me on this project was coding the avatar. After attending Henri Helvetica’s lecture about web performance, I was challenged to make my site entirely image-free. That meant I had to use css to shape my avatar.

The first challenge was the avatar’s outward bezier curve on the neck. Border-radius only curves inward, and I had to somehow figure out a way for the bottom corners to make that funky outward curve. After much trial-and-error, I came up with a masking method. I made the bottom part of the head a bit longer, and created two divs that has bottom-border-radiuses on top.

The rest was pretty straightforward. I made sure that the elements stacked in correct order, and figured out whether they have to be relative or absolute positioning.

One cool little trick I learned is z-index, a sort of hackish way to bring an element forward. To bring any element to a front, all you have to do is change the positioning to relative, and set the z-index to 1. (-1 for pushing it back)

Next part, I will be covering Javascript!