A layout developer working on their first project may overlook some small flaws. Most of them aren't critical, but if ignored, they may carry over from project to project and ruin the overall result.

This article will help you fix the most common mistakes made by beginner layout developers.

Table-Based Layout

The essence of table-based layout is that the entire website is structured as a huge table. This technology was popular 10 years ago, before the development of CSS, and is now considered bad practice.

The code of a page laid out in this way will look very bulky. Other downsides of table-based layout include increased page load time, poor indexing, difficulty in adaptation and style management, as well as non-compliance with modern web development standards.

Missing Doctype Declaration

Don’t forget to tell the browser what version of HTML markup is used on the page. This is done using the DOCTYPE tag.

If the developer didn’t specify the page type at the beginning or used the wrong HTML version, the browser may display the page with errors.

In HTML5, the doctype declaration looks like this: <!DOCTYPE html>.

Invalid HTML and CSS File Names

To avoid issues with pages, styles, and links within the project, remember a few simple file naming rules:

Also, do not use transliteration, and try to keep names as short as possible, yet meaningful and understandable.

Misuse of Tags

Whether intentionally or not, even experienced developers often use some tags inappropriately. Let’s take a look at a few examples.

Not Using Semantic Tags

To make the HTML document more structured, HTML5 introduced new tags. They help to describe content more intelligently.

How can you navigate the structure of a document if the website header, navigation menu, and footer are all marked with the same <div> tag? That’s where semantic HTML5 tags like <header>, <nav>, <footer>, and others come into play. Using them helps browsers and search bots better understand your page, thereby improving its ranking in search engines.

Poor Class Naming

Class names, like HTML and CSS file names, should be meaningful and informative not just for you, but also for other developers. Avoid abbreviations, meaningless words, and never use Cyrillic characters.

Also, refer to the BEM methodology (Block-Element-Modifier). BEM allows you to create a tree-like document structure using general naming rules. For example, a hyphen ( - ) separates words in names, a single underscore ( _ ) separates a modifier name from a block name, and a double underscore ( __ ) separates an element name from a block name.

Using Block Elements Inside Inline Elements

Block and inline elements are two main types in HTML.

Block elements help structure the page. These include <div>, <p>, <ul>, <ol>, <h1>, etc.

Inline elements such as <span>, <a>, <strong> are used for text formatting and are usually placed inside block elements.

Block elements should not be placed inside inline ones. However, in HTML the element nesting is less strict, since elements are now grouped more by meaning and purpose rather than display type.

Ignoring Layout Details

The layout process begins with studying the design, usually created in Adobe Photoshop. It’s important to know how to use this software to avoid missing key design elements. For example, a PSD layout may have several layers with notes about how elements should look on hover or click. Don’t overlook such details, or you may end up creating a page that differs from the designer’s intent.

Deviating from Pixel Perfect

A seemingly obvious point, but one that even experienced developers sometimes forget. An HTML page should match the original design pixel for pixel. This is the essence of the Pixel Perfect technique.

Of course, there can be exceptions to this rule. If element sizes were changed, added, or removed during development, then it’s reasonable to adapt the layout accordingly and deviate from Pixel Perfect.

Using High-Resolution Images

If you overload a page with large images, its load time will significantly slow down — and users won’t like that.

Your task is to optimize all used images — reduce their size without losing quality. You can do this using special online tools, which we discussed in this article.

Not Resetting Default Browser CSS

Each browser has its own default styles for core HTML elements. If not reset, the same page may look different in different browsers.

To reset margins and paddings on all elements, use the CSS properties `margin` and `padding`.

You can also include a custom CSS file that ensures cross-browser consistency. One such file is Normalize.css, which you can find on the project website.

Not Validating the Page

There has never been a case where code validation did any harm to a developer. Use the W3C validator to find unnoticed small mistakes like an unclosed tag or missing line. To use this online tool, simply enter your website’s URL and press “Check”.

Valid code isn’t just about meeting standards — it’s also a key part of SEO optimization.

Not all the mistakes mentioned in this article are critical, but fixing them demonstrates your competence and a high level of professionalism.

Join the WAYUP coaching program “Web Layout Designer: Freelancer’s Code” where in just 2.5 months of training, you'll learn many work nuances in practice and complete your first projects. All your homework will be thoroughly checked by mentors, so you’ll correct all mistakes early and avoid them in the future.