Web development includes several markup languages, the need to have basic programming skills, the ability to work with various technologies that are constantly updated. It’s easy to make a mistake somewhere. However, we can highlight the most common mistakes that beginners make. Their list does not change depending on the technology, so this list of tips will be relevant in a few years.
Next, we will look at the most common mistakes and how they can be avoided in the development or training process.
Mistakes at the learning stage
They are typical for completely novice developers who have recently started learning and have not yet started working on their projects. If you find these errors at the training stage and eliminate them, then the process will go faster and more productively.
Mistake 1: Study without a plan
Or with a plan that’s too vague. If you do not have an understanding of what and in what sequence to learn, then you will not be able to master web development (or it will take a very long time). First, decide what you need to study. Web development is a very broad field of activity that includes many technologies and several programming languages. It is very important for a beginner to “hook” on something that will become his base.
- 1-2 weeks study HTML – the theory of application, frequently used tags, examples of their use in real layout. In addition to studying the theory, you need to learn how to make the simplest HTML pages without styles. This will finally consolidate the knowledge of the necessary tags in further work.
- 2-3 weeks to master the basics of CSS and learn how to apply them to HTML layout. Here you need to understand what this or that style is responsible for, how to connect it, what properties it can take.
- 3-6 weeks, learn to make up more or less full-fledged pages. For example, watch tutorials on YouTube and try to repeat. Also try to lay out a few pages on your own, without tutorials. Here it is important to “fill your hand”.
- 6-8 weeks you study various functional additions: animation, work with forms and so on.
Mistake 2: Devoting too much time to learning
If you devote too much time to learning, there is a risk of worsening the quality of assimilation of the material. No need to think that if you study 10 hours a day, you can fully master web development in a month or two. Rather, you will either burn out, or you will not be able to fully assimilate the material after some time. Even if you really like the learning process, it is highly recommended not to give up on other things – the brain absorbs information better when it comes with short breaks, and not in a continuous stream.
If you feel that the learning process is not easy for you, take a break for a few days or reconsider your schedule. Effective learning doesn’t have to be uncomfortable. Don’t forget to give yourself a day off and a change of activity from time to time. In general, for comfortable learning, you need to allocate about 2-4 hours a day and take at least one day off per week.
Mistake 3: Underestimating Theory
In addition to practical skills, it would be nice to know more theory. This will help to more effectively learn new technologies and approaches to solving problems. For example, you can make up several page templates using video tutorials, but if you don’t know the theoretical foundations of HTML and CSS, then you won’t be able to make layout of some template on your own.
At the first stages of training, try to devote more time to theory, reinforcing it with practice. Learn the main tags, situations of their use, block layout options, find out more information about a particular technology. The main thing at the initial stage is to more or less clearly understand why you need this or that tool. When this understanding comes, it will be easier for you not only to fit the theoretical base to practical problems, which will make learning easier.
Mistake 4: Excessive perfectionism
It’s important to understand that you’re studying web development to get a job, not to get grades. It’s okay if you don’t complete any task perfectly – some of the material is usually fixed already in the process of working on real projects. If you have the opportunity to ask someone a question about a task you’re working on, then ask. Don’t be afraid to appear stupid or incompetent.
Errors at work
Now consider the mistakes that beginners make already while working on real projects, and not during training. Some of them are not critical, but still, it is better to try to avoid them.
Mistake 1: Ignoring other browsers
You develop a site and check it for performance in any one browser. Using one browser to check the correctness of the site is a common mistake. Usually, it is due to the fact that the developer simply does not want to bother – the page will still be displayed in any web browser. The only problem is that it can be displayed differently in different browsers, depending on what solutions were used during development.
You can avoid the error by simply testing the site being developed in different browsers. No need to look at how it will look in everyone – two or three popular options will suffice. There are also third-party services and tools that allow you to quickly see the behavior of the site in different working environments.
In most cases, it is not required to optimize the layout for a specific browser. However, some elements and technologies may only be supported with the addition of special prefixes. If during the check you saw that somewhere some element is displayed incorrectly, then just add the desired prefix to its CSS properties. There are not so many prefixes and it is easy to “google” them for each specific case.
The situation is more complicated when a solution is not supported at all by some popular browser. This happens very rarely and only when the developer uses new technological solutions. If this happens, then you will have to look for another solution to implement your idea. It is not recommended to leave everything as it is, as the finished site may lose part of the potential audience because of this.
Mistake 2: Non-responsive pages
Responsiveness is a must for any site, meaning pages should look equally good on both smartphones and computers. They also need to adapt to window resizing. Both the designer and the coder should provide for this possibility. In this case, the developer is required to write scripts for the behavior of pages when the size and orientation of the window change.
During training for a web developer, the adaptability of the site needs to be allocated a separate block. When working with real projects, you need to check how they look on different screen sizes. Especially for this, browsers provide a developer tool in which you can set the desired resolution, page orientation, and even select a specific device for an accurate demonstration. For development tools, there are also special plugins that allow you to observe changes in real time, as well as get useful tips.
Mistake 3: Include too many libraries
Yes, third-party libraries can really make life much easier for a web developer. However, if you use too many of them, then you can get additional problems later:
- The build time of the project and the total size of the package will increase;
- User-side pages may take longer to load;
- Instability from one of the included libraries can lead to instability of the entire project;
- A site with a bunch of linked libraries is harder to maintain.
It is recommended to refuse to connect third-party libraries in cases where writing the necessary code on your own does not take much time. If you still need to connect a third-party library to the project, then pay attention to the following points:
- Release date of the last update. If it has not been updated for a long time, then this may mean that the library is no longer supported by the developer, which threatens with instability in the work of the site being developed.
- The reputation of the library among other developers. GitHub, for example, has a ratings and reviews system. Check them out before connecting.
- The list of restrictions imposed by the use of this library in development. Some third-party components that are connected to the site may impose restrictions on the use of other third-party services. If you include several libraries at once, then make sure that they do not conflict with each other.
Mistake 4: Not optimizing images
A high-quality image sometimes weighs several megabytes. When there are several such images on the site, the bandwidth drops seriously even for users with high-speed Internet. The user will not wait for the entire page to load and likely close the site. To avoid this, it is recommended to optimize images. It can be done using any more or less professional graphic editors or through special online services. In the course of optimization, the image quality deteriorates a little, but it is practically invisible to the eye. At the same time, the weight of the image is reduced significantly, which greatly speeds up the loading of the site and makes its work more stable.
An additional recommendation for vector graphics is to convert them to SVG format. In this format, it can be infinitely scaled without loss of quality, plus, the weight of the pictures is slightly reduced. SVG is great for logos, icons, simple illustrations. Read more about exporting SVG images from Figma in this article.
Mistake 5: Failure to Follow Web Standards
Web standards were introduced to make websites and applications more user-friendly and easier for developers to maintain. Usually, they concern interface elements. So, for example, in the upper part there should be a menu, and in the central part the main content, and the page itself should be scrolled from top to bottom. There are also generally accepted standards for developers that the user does not have to interact with. For example, each block on the page should be highlighted with a <div> tag.
Each development team or company may have its own additions to generally accepted standards. They are also important to consider in the process of work.
You can completely ignore web development standards only in very non-standard situations, for example, when you need to make a site that will scroll horizontally. However, even in this case, the developer will have to comply with most of the standards. If you completely abandon them, then the support of the finished product will be greatly complicated, and the development process too.
Mistake 6: Using CSS and JS in HTML Files
Writing scripts and styles is recommended to be written in separate files and connected directly to the HTML file. It is better to get a complex structure from separate files than a hodgepodge in one file with markup.
Mistake 7: Neglecting code formatting and comments
In some programming languages, such as Python, the number of spaces can affect the readability of a program. HTML, CSS, and JS do not require strict code formatting, but poorly formatted code is very difficult to read and work with. When working in a team or if you have to return to the project later, readability is one of the main requirements.
Here are some recommendations that can be highlighted to improve the readability of the code:
- Separate semantic blocks with an empty line;
- Inside a block or section in HTML, try to create a nested structure with spaces;
- Write meaningful comments on code blocks.
Comments are part of the documentation, so they need to be meaningful and understandable to other developers on the team. Needed to describe variables, functions, class names and actions performed by the program.
Mistake 8: Use Vanilla CSS
That is, standard CSS without any add-ons. Now almost all sites larger than one page are made using third-party preprocessors – Sass, Less, Stylus. They provide a number of advantages over regular CSS, such as allowing you to create more styles, write less code, maintain structure, provide convenient tools for working with variables and animation. Using, for example, Sass, you can also customize Bootstrap, since it is also written in Sass. The ability to set variables provides a convenient and quick change of styles if necessary.
True, to use preprocessors, you will have to spend time on their development, plus, connection to the project. The topic of preprocessors in CSS was discussed in detail in this article.
Mistakes in web development can occur at any stage and there is nothing to worry about. Some of them can be avoided, as they are very common, while others will have to be experienced. By eliminating them from your practice, you can become a more sought-after specialist, and it will become much easier for you to work.