< Back to portfolio

100 Days CSS

Tech stack: HTML, CSS, Gatsby, React

A couple of CSS creations from the 100 Days CSS challenge. I also made the website with Gatsby and React.

Code repository | Visit project

Two CSS creations

Compared to the standard 100 Days CSS challenge, all of these are:

  • Made responsive. If you change the size of the frame, the image should resize accordingly, nothing is a fixed size. For example with “095 pig drawing”, if you set the frame width to half the size, the image will shrink horizontally by half.
  • Utilise CSS custom properties (variables) for easy changes to various aspects of each frame. For example with 097 person, you can change the value of the “person-height” variable and the person will change to that height while still being centered in the frame.

Making them responsive was not too difficult. I just had to use relative sizes the majority of the time and to some maths to center things properly and properly calculate the relative sizes between different elements.

< Back to portfolio