3 Things Learned Redesigning a Website

Desk with tools


The first website was created more than 5 months ago. I was fresh from the training and eager to get something up. I was happy with the results. But the more I looked at it, the more I wanted to change it. The journey towards the second site helped refresh some concepts as well as learn new ones, and it helped push me out of my comfort zone and made me a better developer.

Let’s Drop Some Knowledge

Documentation Can Be Scary — Bootstrap can be a one-size fit all, but it does not have to be. Upon my first couple of attempts to use it, I felt frustrated with its limitations. My limited knowledge of Bootstrap blinded me to its power. The scariest thing when trying to use any new framework is the documentation. This is one of the reasons that I shied away from using Foundations. The documentation was difficult and I just could not wrap my head around it. That story, however, is best left for another post.

Bootstrap was easier for me to pick up after I decided to read through the documentation. This is when it finally clicked. I could customize Bootstrap. There is a tab that allows you to “customize Bootstrap’s components, Less variables, and jQuery plugins to get your very own version”. This was awesome! The more I delved into the documentation, the more I realized that it was letting me unleash the true potential of Bootstrap. The take away — Documentation can be scary. The power obtained from it is worth the time and effort to decode it.

With JavaScript, The Impossible Becomes Possible — JavaScript can be scary. What exactly can you do with JavaScript? Googling the questions yields the following result: “an object-oriented computer programming language commonly used to create interactive effects within web browsers.” Basically, JavaScript allows you to make the app interactive. It allows you to get information from the site and to do things to the site. If you are familiar with Bootstrap, you are probably familiar with the struggle to make adjacent columns equal in height. Having adjacent columns with different heights on the same row can cause appearance issues.

Bootstrap Height Issues

This is a very well known problem. JavaScript provides the answer to this problem. Actually, it provides one way to address the problem. The web provides various resources to remedy this problem. Nicholas Cerminara wrote a great article on Scotch.io that provides different methods for solving this issue. The crazy part is that with a little ingenuity and a lot of persistence, you can solve this problem on your own. My simple solution involved getting the height of the bigger column and assigning it to the height of the smaller column using, you guessed it, JavaScript. The takeaway — Learning JavaScript can help you do things that you never thought were possible. All it takes is perseverance and jumping into the deep end of JS.

Trying New Things Will Make You a Better Developer — The one thing that has improved while doing this redesign is my ability to learn. I used my understanding of CSS to improve my ability to style the website. I have learned how to use SASS, which has sped up my ability to style the site. I used my knowledge of HTML to improved my understanding of Jade, a really easy to learn templating language focused on enabling quick HTML coding. I used the foundational knowledge of development to help move me to the next level as a developer. I am more confident in my ability to learn new complex frameworks and to create anything that I want. I feel like a kid with an endless supply of Legos. The only limit is my imagination. What will I build next?

coding-lego

Like this article?

Leave a comment

© 2022 All rights reserved

Made with ❤