How to Push Yourself to Create Better Websites?
At some point on your web developer journey, you will get in a habit of creating the same and easy websites over and over. Creating websites becomes a tedious task and sometimes a boring task. The thrill of creating something new or discovering something is gone.
This is a trap we all fall into. We fall in it because we want the easy way out. I know a few web developers that have been in the industry for several years but if you look at their work in the last 5 years every website looks exactly, the same, except they have different color palettes.
Besides wanting the easy way out, why do we fall into this trap? Because we don’t want to push ourselves, pushing yourself takes hard work and commitment. Pushing yourself involves facing new challenges, experimenting, and working on side projects on your free time.
I have been working with a client to create a website. I have created a prototype, I know how the website will look like but I haven’t received the content for the site yet. I decided to make a template for the site, when I get the content I can quickly add it to the template. Creating templates is an easy way to push yourself and it can be done on your free time; however, you will have to try new things and be ready to face challenges.
I have made several templates, but this template was not easy for me. For this template, I tried new things and I faced challenges, this template did push me, I can use what I learned to create better websites. If a project is not pushing you, think about what needs to be done to push yourself.
A major challenge I found on this template was making a responsive image slider. I tried using the FlexSlider plugin but it’s not responsive. I read the documentation to maybe figure out how to make it responsive. I found the issue but I needed JavaScript and I wasn’t too comfortable with my JavaScript skills. Even though the plan was to make a responsive image slider, the plans changed and I faced a new challenge, fitting an image to the height of the screen.
After reading the CSS documentation, I learned about the vh unit, that’s what I used to fit the image to the height of each device screen. Vh is the height relative to the viewport. Thanks to this template I now know about vh and I can use it on other projects. If this project didn’t push me I would have never looked at the CSS documentation.
This project was a great experience. I learned new CSS properties. I learned about having multiple values for the border property. I could apply the position property in various ways, this was a great tool for making each navigation item. The project gave me the opportunity to try new type of layouts.
Don’t be afraid of trying new things. Trying new things requires you to push yourself. Mistakes will be made but if you make them on your free time, you will have time to fix and learn from them. This is the place for experimenting.
When I first designed this site, I didn’t think about if I knew how to develop it, I just designed it. I got an idea for the phone navigation which carried over to the desktop version. This was something completely new to me and I didn’t know if I could develop it or if it was even possible to develop with basic CSS.
The navigation was challenging but after reading the CSS documentation thoroughly, I figured out how to develop it. The navigation is opened by clicking on the hamburger icon and the menu drops down. Each item in the navigation menu has a background picture with a black overlay and the text is centered. The feeling of accomplishment was really rewarding.
Almost everything in this template was new to me. From the new icon library used to the custom navigation menu. The feeling of accomplishment is rewarding, it feels great. I can’t wait until this site is finished and goes live. The template doesn’t end here, I want to push myself even further, I plan to add subtle animations using GreenSock animation platform. GSAP is a JavaScript platform that I am just learning but it might bring up challenges.
Pushing yourself requires hard work and commitment. The extra work is not always easy but it’s always rewarding. Don’t be afraid of change and learning. Each project that pushes you might have challenges, be ready to face the challenges but don’t be discouraged. The things you learn from each project will help you create better websites.
Links: