What I Learned from doing a 5-Day Coding Challenge

Last week, I took part in organizing and doing a 5-Day Coding Challenge. The challenge focused on creating and submitting 1 HTML & CSS project a day. Each project could not contain any JS or JS frameworks.

Students of mine at Wild Code School Netherlands embraced the challenge with me. Over the course of a working week (Mon-Fri) we set upon tackling this. The purpose and idea behind the challenge were to:

1. Revisit the fundamentals of web development.
2. Get extra practice and deliver under a set deadline.
3. Motivate the creating of small projects for a developer’s portfolio.

The challenge followed suggestions provided by freeCodeCamp: https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/

Lessons From The Experience

After 5 days of delivering projects, I’ve looked back at my experience. I did use a lot of what I know on most of the projects. Despite my knowledge, I found myself learning and discovering new things. Below is a recap on the lessons learned:

Flexbox For The Win

I’m a huge fan of Flexbox and used this on most (if not all) of the 5 projects. It gives freedom to create complex layouts while using little declarations. This saves time and helped me create responsive pages without much effort.

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.row_reverse {
  flex-direction: row-reverse;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

Mobile Parallax Woes (background-attachment: fixed)

On day 4, I realized that “background-attachment: fixed” is a total fail on iOS mobile devices. After some digging around (StackOverflow), I found out that this is disabled.

Fixed backgrounds have huge repaint costs and destroy scrolling performance. Although, I’ve seen the case not being the same for Android.

.hero {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #ffffff;
  background-image: url("../img/mally-dev.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: top right;
}

This was a new and hard lesson learned. Most of the parallax effects I included in the projects used it. I’m looking forward to getting some time in the near future to fix this. It is something to consider when working on future projects.

Box-Shadows Give Depth

The box-shadow property can enhance the feel of web page elements. It can be used to add shadow effects both inside and outside an element. Using a comma can create multiple shadows.

.intro_text {
  text-align: center;
  padding: 5px;
  border: 1px solid var(--brand-black);
  width: 80%;
  background-color: var(--brand-white);
  box-shadow: 0.2em 0.5em 0 0 var(--brand-blue),
    inset 0.2em 0.5em 0 0 var(--brand-black);
}

@keyframes For Animation Control

Keyframe animations are similar to CSS transitions. They can be used to change the properties’ values. Unlike transitions, keyframes allow control of the in-between animation steps.

.hero h1::before {
  content: "FullStack Web Developer";
  animation: animate 5s alternate 0.8s linear infinite;
}

@keyframes animate {
  20% {
    content: "Hip Hop Nerd";
  }
  40% {
    content: "Coffee Lover";
  }
  60% {
    content: "Dancer";
  }
  80% {
    content: "Music Enthusiast";
  }
  100% {
    content: "World Citizen";
  }
}

This was good for creating text transformation animations for an element.

Collective > Solo

Doing this challenge was a good refresher. I learned a lot of new things that I previously didn’t take time to dive into. The fact that my students joined in on this challenge improved the experience. It created a true collective feeling between everyone on the campus. We all went through the same process and could relate to the problems others faced.

In circumstances where people got stuck or couldn’t move forward, help was offered. Ideas and tips were also shared between everyone who took part. In the end, comradery and the feeling of accomplishment were achieved.

Conclusion

Coding challenges are a great way to learn and re-learn concepts. The limitation of time also forces a habit of prioritization. In this case, the user stories help in creating a working structure for the developer.

This was definitely the case for me during the 5 days spent creating. After this past experience, I’m looking forward to attempting more challenges. It’s a good way for any developer at any stage of their career to polish and fine-tune their skills.

Feel free to check out the repo of the 5 Day Coding Challenge Week here: https://github.com/reMRKableDev/5-day-coding-challenge

I’ve documented my progress under the “mrk-progress” branch: https://github.com/reMRKableDev/5-day-coding-challenge/tree/mrk-progress

Check out everyone who took part in it so far here: https://github.com/reMRKableDev/5-day-coding-challenge/network/members