A Fun Website Made In a Few Days

While interviewing for All Star Code they provided me with a coding challenge to create a full website from scratch in a matter of 4 days. Initially I built the website in the first two days, something very basic with React, and then was informed that the website needed to be built with just HTML, CSS, and vanilla JavaScript.

Well that start a mad dash to whip up a whole new website from scratch using the tips and tricks I learned way back in March of 2020 when I began my web development journey. What came of it was this delightful website about my cactus that sits right next to my desk while I code. I decided to get silly with it, and I rediscovered some of the tools I used to use that ultimately helped me become a better web developer.

There isn’t too much to mention about this site except for one specific thing that helped me a lot in making this: I basically made my own TailwindCSS in vanilla CSS.

/* Text Sizes */
.lead {
  font-size: 20px;
}

.sm {
  font-size: 1rem;
}

.md {
  font-size: 2rem;
}

.lg {
  font-size: 2.5rem;
}

.xl {
  font-size: 4rem;
}

.text-center {
  text-align: center;
}

/* Margin */
.my-1 {
  margin: 1rem 0;
}

.my-2 {
  margin: 1.5rem 0;
}

.my-3 {
  margin: 2rem 0;
}

.my-4 {
  margin: 3rem 0;
}

.my-5 {
  margin: 4rem 0;
}

.m-1 {
  margin: 1rem;
}

.m-2 {
  margin: 1.5rem;
}

.m-3 {
  margin: 2rem;
}

.m-4 {
  margin: 3rem;
}

.m-5 {
  margin: 4rem;
}

/* Padding */
.py-1 {
  padding: 1rem 0;
}

.py-2 {
  padding: 1.5rem 0;
}

.py-3 {
  padding: 2rem 0;
}

.py-4 {
  padding: 3rem 0;
}

.py-5 {
  padding: 4rem 0;
}

.p-1 {
  padding: 1rem;
}

.p-2 {
  padding: 1.5rem;
}

.p-3 {
  padding: 2rem;
}

.p-4 {
  padding: 3rem;
}

.p-5 {
  padding: 4rem;
}

@media (max-width: 768px) {
  .lg {
    font-size: 2rem;
  }
}

Sometimes you have to use that little bit of extra code to make your life a whole lot easier.