Creating page layouts is also an important stage when developing a service (website). At this stage, you should remember that layout pages should not only meet the visual design, but must be technically correct.
Beginner frontend developers, all interested in frontend and experienced developers are going to find the tips and tricks described in this article useful. Oftentimes, mistakes are made not only because there is a lack of knowledge, but also because there has been not enough attention.
This article presents mistakes, which are divided into two groups: HTML mistakes made when preparing the page layout and CSS mistakes made in the style files.
Common HTML Mistakes
1. Not specified or incorrectly declared DOCTYPE.
DOCTYPE tells the Web browser which HTML version your page is using. DOCTYPE must be specified for the browser to understand how it should interpret the current webpage. The keyword DOCTYPE must always be typed in uppercase. Learn more here.
2. Not closed tag
A common mistake is when the html tag is not closed (for example, </html>, </body>, </div>, etc.). This mistake occurs due to the lack of attention. Use plugins (packages) for text editors.
3. Javascript code
Javascript code must be entered in the <script> tags, specifying the type. I.e. it will be recorded as follows:
<script type=”text/javascript”></script>In HTML5, type is optional, the default value will be "text/javascript". Do not forget about the script tag.
The handler can be assigned using the DOM-element on feature. However, you shouldn’t overuse this option.
Js files should be included at the bottom of the page. You should include js files following the structure.
<script src="js/jquery.jplayer.js" loading="lazy" loading="lazy" loading="lazy"></script><script type="text/javascript"> plugin initialization </script><div class="jplayer"> </div>…<script src="js/owl.carousel.min.js" loading="lazy" loading="lazy" loading="lazy"></script><script type="text/javascript"> plugin initialization </script><div class="slider"> </div>4. There is no alt attribute for the image
The alt attribute is a required element for the img tag. alt sets the alternative text for the image.
5. Unique ID
Oftentimes, inexperienced developers add several elements with the same ID on the page.
<!-- Don’t use this code --><header id="header"> <div id="blockWithIdAndLogo" class=”large”></div> <div id="menu"></div> <div id="sliderWithForm"> <div id="slider"></div> </div></header>ID is sometimes overused (the fragment of the code is given below):
<!-- Don’t use this code --><div id="header"> <div id="item"></div> <div id="item"></div></div>ID is a unique identifier of the element. If you want to select several elements with the help of selector, then use classes. Another problem is that ID selector has more weight than the class selector. For example, the block #blockWithIdAndLogo with the class “large”. If the same properties are used for selectors and “large” must redefine the value for some of them, then this will lead you to use !important. (See CSS mistakes)
6. Using CSS styles. Don’t use the inline-style.
CSS styles can be added in several ways:
Connect an external file using the link element
Embed styles directly into the HTML document using the style element
Apply the inline-style
The inline-style is the style that is added to a specific HTML-element directly in the document with the help of HTML-attribute style (See the example below)
<!-- Don’t use this code --><p style=”color:#ff0000”>Creating details according to the sketch of the client</p>7. Don’t use <br/> to format the text
Among other HTML mistakes to avoid is a common mistake that occurs when formatting the text and that is adding spaces between blocks with the help of <p> </p> and <br/>. An example of incorrect spacing and text formatting is given below.
<!-- Don’t use this code --><p> </p><p> </p><p class="text-center">Creation of details according to the{} sketches of the client</p><!-- Don’t use this code --><p class="visible hidden-xs"> </p><p class="visible hidden-xs"> </p><p class="visible hidden-xs"> </p><!-- Don’t use this code --><h2>Creation <br/> <br/> of details according to the sketches <br/> <br/> of the client</h2>Another example of incorrect use of <br/> is lists formatting which gives the following structure:
<!-- Don’t use this code -->- Item 1<br/>- Item 2<br/>- Item 3<br/>- Item 4<br/>The correct structure of the list:
<ul> <li>Steve Jobs</li> <li>Bill Gates</li> <li>Linus Torvalds</li></ul>Don’t use <br>, because it will make text formatting complicated. Use margin property for spaces between elements.
8. Navigation markup
We format the menu like a list. See below the incorrect fragment of the code:
<!-- Don’t use this code --><nav class="b-main-page__sliderbar__menu"> <ul> <a href="#" class="sub-menu"> <li> <div class="toggle"> <span></span> </div> </li> </a> <a href="#" class='b-link b-link_menu'><li>Company</li></a> <div class="menu-point">•</div> <a href="#" class='b-link b-link_menu'><li>Equipment</li></a> <div class="menu-point">•</div> <a href="#" class='b-link b-link_menu'><li>Works</li></a> <div class="menu-point">•</div> <a href="#" class='b-link b-link_menu'><li>Products</li></a> <div class="menu-point">•</div> <a href="#" class='b-link b-link_menu'><li>Testimonials</li></a> <div class="menu-point">•</div> <a href="#" class='b-link b-link_menu'><li>Vacancy</li></a> <div class="menu-point">•</div> <a href="#" class='b-link b-link_menu'><li>Contact us</li></a> </ul></nav>First of all, only <li> should be placed inside <ul>. Secondly, avoid adding delimiters for menu (e.g. .menu-point) in HTML markup. It is better to use pseudo-elements. This will make your code more correct as well as more visual.
<nav class="menu"> <span class="toggle">Menu</span> <ul> <li><a href="#">Company</a></li> <li><a href="#">Equipment</a></li> <li><a href="#">Works</a></li> <li><a href="#">Products</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Vacancy</a></li> <li><a href="#">Contact us</a></li> </ul></nav>An example of non-adaptive menu codepen.io
Common CSS Mistakes
We are going to look at mistakes connected with CSS and lack of attention. We are also going to look at ways how to make the code more legible.
1. Priorities. !important
It is important to remember about priorities of selectors in CSS. The rules specified in the "style" attribute have the highest priority, then a selector with ID follows, after that a selector with the name of a class and finally a selector with the name of a tag. Learn more here. In this case, you can increase priority using !important, which overrides styles including inline-styles.
Property: value !importantWhen writing styles, it’s very important to take priorities into account, otherwise style files become oversaturated with !important.
/* Don’t use this code */.form { border-bottom: 1px solid #cdd0d4 !important; border-left: none !important; border-right: none !important; border-top: none !important; box-shadow: none !important; }.icon { font-size: 4em !important;}input[type="file"] { border: none !important; padding: 0 !important; box-shadow: none !important;}2. Class names
As it was mentioned above, classes are used in cases when you need to select a specific element or a group of elements. To assign a class to a selected tag, the class="class_name" attribute is used. See below an example of the incorrect class name.
<!-- Don’t use this code --><div class="right"> Text </div>.right { text-align: center;}Reading the markup, the text should be aligned to the right side according to the class name. However, the styles speak differently. This markup makes the code “unobvious”.
Name classes thoughtfully. Learn about methodologies such as BEM, OOCSS, SMACSS and others.
3. Grouping CSS properties/Shorthand notation
Shorthand in CSS is a convenient way to specify several other more specialized properties. Examples of shorthand notations are the shorthand property for font and the shorthand for controlling external and internal margins/padding, etc.
Let’s look at one example:
.single-comment { width: 100%; height: auto; border-top: 1px solid #efefef; border-bottom: 1px solid #efefef; border-left: 1px solid #efefef; border-right: 1px solid #efefef; position: relative; padding-left: 50px; padding-top: 20px; padding-bottom: 10px; padding-right: 50px; font-size: 13px; line-height: 16px;}Now, the same fragment of a class but with shorthand notation for border and padding. The code of the class “single-comment” has been reduced by 6 lines and, as a result, it has become less cumbersome.
.single-comment { width: 100%; height: auto; border: 1px solid #efefef; position: relative; padding: 20px 50px 10px; font-size: 13px; line-height: 16px;}However, you shouldn’t overuse shorthand notation, for example, in cases of background or redefining styles.
4. “Dirty code”
This point is always connected with the developer not being attentive. These fragments of the code (given below) are a result of editing the layout or the merging of git branches (when the developer doesn’t look into the conflicting places of CSS files).
.text { line-height: 24px; padding-left: 40px; /* … */ line-height: 35px;}Sometimes, you can even have a duplication of classes.
.blog-details .user-image a { border: none;}/* … */.blog-details .user-image a { border: none;}Before adding styles, check whether the necessary selector has been already added or the necessary properties for it. In this case, edit the current ones and don’t add the new ones.
You shouldn’t use long nested selectors. The example is given below:
.touch header .container .main-menu ul li.flexMenu-viewMore > a:hover:after { display: none;}If it’s possible, try to minimize the notation.
By following these recommendations and avoiding the mistakes described in this article, you will significantly improve the quality of your code, making it more readable, structured and productive.
