Everything has its own learning curve, and web development is no exception. Developing for the web can be a number of things for the uninitiated: exciting, scary, challenging, difficult, wonderful, different and brilliant.
I’m sure that everyone has experienced the sensation of pure, unadulterated euphoria when they finally manage to solve a challenging problem. In cartoons, it’s often demonstrated by the little light bulb turning on above the character’s head. It’s quite a rush!
Sometimes though, the light bulb moment can lead one astray. Down the path to un-readable code, non-responsive websites and slow-loading images. Fear not, dear reader. In this post, I’ll detail the common mistakes new web developers make, how you can avoid making those mistakes yourself, and how to get back on the straight and narrow.
Naming things incorrectly
This may sound trivial, but naming things is one of the hardest things to do in web development. Trust me, every web developer has sat down, looked at a design and attempted to give everything its correct name.
An example: picture this example web-page. It has a header, a footer, and a content area. Sounds simple enough, you think. However, inside my content area, we have an image and some text sitting side by side. Below that first image and text, we have a second row of image and text, alternated right to left. This is where things start to get tricky.
Header
—
text – image (row 1)
image – text (row 2)
—
Footer
The chances are, you’d want to give CSS classes to each element in that web-page, so the text would have a CSS class of “text” or “content” and the image “image”. However, this doesn’t solve our alternation problem. So then you now add a second class to the second image, which may be something like “left”. This is where it gets tricky. Stop.
“left” is an extremely vague name. Does it mean the image is on the left, or the image is aligned to the left? The name of the “left” CSS class doesn’t actually specify anywhere that it applies only to an image, so could it align the text left? This is a problem. (And now breathe).
Of course, this is a high-level overview with no code example. This is so that hopefully everyone can grasp the basic concepts without feeling overwhelmed by a big chunk of HTML and CSS.
The way to fix this particular problem is to adopt what is known as a naming convention in your code. There are a few out there, including BEM, SMACSS, KISS, OOCSS. These are primarily CSS naming conventions, but they do often impact your HTML.
Old Code
Another problem new web developers may face is old code. A lot of the resources for web development are online now, but in schools and colleges across the country, children may be taught from a textbook that’s 10 years old. This means they may be learning old code which is no longer even supported in modern “evergreen” browsers.
The last thing you need is to start in a professional agency and start trying to use the HTML <center>, <blink> or <font> tag (both of which were removed from the language years ago!).
Copying and Pasting
I’m a firm believer in the kinaesthetic learning tree – that you learn by doing. Searching Google or Stack Overflow for an answer to a particularly hard problem is acceptable, even applauded. But it is often the case that if you do find the answer it comes with a nice chunk of code that does exactly what you need.
This presents, for me, a number of problems:
- How do I, as a junior developer, know exactly what that code is doing? Is it safe?
- Am I learning anything about how to solve my problem if I copy and paste that code into my project?
- Coding standards and naming conventions – the copied code may completely clash with the style of coding I’m writing, and my naming conventions.
As I said, searching for an answer is encouraged, however, once you find the answer then please do read the explanation attached to it, rather than simply going to copy and paste the supplied code. Ensure you know why it works the way it does and how it works. If you have to, you can make a note of how they solved the problem and the next time you experience the issue, you should be able to solve it without assistance.
“Works for Me”
Ah, those three little words which will infuriate every single client reading this blog post. Works. For. Me.
Every developer has uttered these words. Essentially this comes down to the fact that different people use computers and technology in general in different ways. The web developer knows exactly how their website was made, and thus how exactly it is designed to be used. Often, that’s exactly how we will use the website – meaning that it will always “Work for me”.
Instead of just dismissing a problem with “Works for Me”, investigate further. Use the website in a way it was not designed to work to see if you can replicate the issue. Hold it wrong.
Moving too fast
There’s a phrase I like to use, and I admit, I often over-use it. That phrase is “running before you can walk”. This means that you’re trying to tackle the more advanced aspects of web development (keyframes, animations) before you gain a fundamental understanding of the basic principles of web development (box model, floats).
I understand that the basics such as the box model, and floats may be boring and that making a button pulse with an animation is quite an exciting thing, especially if you are young. But trust me when I say that once you have nailed the basics down then nothing can hold you back with the advanced stuff, as if often requires a good understanding of the fundamentals.
Working too much
It’s very easy to lose track of time when you’re doing what you love. For me, that’s web development. As you can imagine most of my days simply fly by. Going to work doesn’t feel like going to work, and I learn something new every single day. However, I’ve been developing for the web for over 15 years, and I’m used to the pace.
It’s easier for newer web developers to burn themselves out. It’s important to remember that if you’re stuck on a problem that you can ask for help. If you keep banging your head against the same thing, maybe it’s time to pack it in for the day or move on to something else. It’s especially important to take a break every so often so that you do not burn yourself out.
I hope you’ve found this post informative and useful. Let us know if you have any questions you need answering in the comments.