10 Web-Dev Beginner Mistakes & How to avoid them

No Mobile-First Approach

When you’re starting to build website, you might be tempted to focus your design to the device you’re developing on — your PC or Notebook. But keep in mind — a huge amount of users are browsing the web on mobile devices. Don’t force them to view your website in a scaled down layout that is meant for your personal 24" screen. Incorporate an approach to support multiple screen sizes from the get go. If you’re new to the topic, try a CSS-Framework like bootstrap and find out, how their implementation is done (Hint: Google for media queries and css breakpoints). Understanding these will help you a lot to understand how responsive webdesign is done, and it will save you a lot of work compared to implementing it later.

Inconsistent Design

Choose a design and a structure that you can stick to. For example, build a basic layout that you can reuse on all of your sited. This could contain a header and a footer, as well as a sidebar or hamburger menu for mobile devices. The space in between can then be filled with page-specific content. This will help your users to focus on the main content of the site and not get confused by irrelevant stuff like navigation. The same goes for the style itself — choose a few colors and fonts that you reuse over the site. Oh, and don’t use Comic Sans.

Misuse HTML-Tags

Every HTML-Tag has its purpose. Make use of it! Don’t style buttons as links just because you can, they’re meant to perform actions on the current page. The same goes the other way around. Also, don’t use divs for everything — Of course, they”re handy and useful, but the semantic elements really help any users using screen readers or things like search engines to understand the structure of your website.

Ignore Naming Conventions & Web Standards

This might be a bit hard in the beginning, but it’s really worth your time to dig into the conventions of naming things in any programming language. This will help others, but also yourself when re-reading your code later. For example, don’t use camelCasing for HTML-IDs. It might be a bit of a struggle when you’re learning multiple languages at once, for example HTML + CSS + JavaScript, but really take your time for this one.

Always using the latest Tech

Did you already reimplement your app in this cool, new framework that just launched yesterday? No? Good! You don’t need to jump onto any new Hypetrain. This is especially big in the JavaScript-World. Learn something that interests you and stick to it for a bit. Of course, you can always try something new or ditch a Tool that doesn’t suite your needs anymore, but meet choices by requirements and not because something seems to be new and shiny. The same goes for website-builder-tools. Of course it’s easy to setup wordpress with a basic template and call yourself a developer. But this won’t get you to learn anything and you probably won’t be able to track down any issues on the site.

Only using “old” Tech

There’s also a counterpart on the last point: The dev world is evolving rapidly and so are the languages and tools you’ll be using. While in general, there’s no “old” tech as such, you should make sure that you’re not missing out on new language features such as HTML5 Media Elements, CSS techniques such as grid and flexbox and also newer features of the JavaScript-languages. You won’t learn anything wrong from getting your input from older resources, but you might be missing out on better, more simple ways on implementing the same thing.

Relying on Frameworks

A lot of tutorials on several topics start like this: “Install Bootstrap and jQuery, and also these 517 node modules” just to build a Hello-World-App. While these are generally useful when you’re trying to learn a specific framework, try to keep it simple when learning the basics. Stick to vanilla JS and CSS. As soon as you got the basics of these, you can step up to integrating stuff like JS-frameworks or preprocessors. In the end, they’re built to help you on implementing features, not to confuse you and overload your learning-stack.

Writing Code that should work

“I’ve tested that, it works on my machine.” — You probably heard that before, even if you’re not in the industry for too long. Always test your code on multiple browsers — make sure you know what kind of clients you’ll need to support and try to think of edge cases your app should handle. Errorhandling is a complex topic and you will get better at it, but at least trying to think of how you could break your own app is a great first step on preventing other people from actually doing it.

Not thinking about performance

Application performance is a big deal, especially when writing web applications. Your website is loading fast on your computer? That’s great! But probably, all the resources are on your machine too, right? I wonder if it will be the same speed on some guys smartphone in the middle of nowhere. There are a lot of small things you can work on, that in total will have a big impact. The biggest ones might be choosing the scale and format of assets (images, fonts, …), and minifiers for live-pages (ok, I said you shouldn’t overcomplicate your learning with frameworks, but keep this in mind for later!).

Commenting Everything

As you’re learning to code, you probably get told to comment your code. That’s alright — but use it thoughtfully. You don’t need to comment every line of your app. Instead, try to write your code in a way that you’ll be able to understand if you read it a week later. Of course, sometimes you’ll have some places commenting makes perfect sense, and there’s nothing wrong in doing so. But, as I said, don’t comment too much. The best way to find a good balance is to comment as little as possible, but as much as required.

Software Developer (C#, Java / Desktop, Web, Mobile, Games (VR)), Triathlete & Coach - mjurtz.com — Sign up to my newsletter: coding.mjurtz.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store