15 beginner only HTML and CSS mistakes

15 beginner only HTML and CSS mistakes

Written by Rahul on Feb 16th, 2022 ・ Views ・ Report Post

Rahul Visit User Profile
Table of contents

I have rounded up some of the HTML and CSS Mistakes I've made and you don't have to. These are some beginner mistakes, don't judge meπŸ˜‚.

HTML MISTAKES

No matter what stack or framework you use, it all compiled to HTML in your browser. Therefore, it's important to make sure it's right! This list highlights top HTML mistake and how you can avoid them.

  1. Missing Doctype: The doctype declaration is not a tag but it informs the browser about the document type to expect. Every HTML page must have a doctype.
<!-- WRONG-->

<html>
  <head>
    <title>
      Title
    </title>
  </head> 

<!-- CORRECT -->
<!DOCTYPE html>
<html>
  <head>
    <title>
      Title
    </title>
  </head>

2. No closing tags: Apart from a few exceptions, most HTML tags need to have an opening and closing tag to work properly. Therefore, it's best practice to have closing tags for all HTML elements.

<!-- WRONG-->
<section>
  <ul>
    <li>
    <li>

<!-- CORRECT -->
<section>
  <ul>
    <li> </li>
    <li> </li>
  </ul>
<section>

3. Missing alt attributes: All images should have an alt attribute to describe them for SEO and assistive tech. Any decorational images should have empty alt attributes since they don't provide information.

<!-- WRONG -->
<img src="logo.svg" />

<article>
  <img src="logo-front">
  <h1>Coding is tough</h1>
</article>  

<!--CORRECT-->
<img src="logo.svg">

<article alt="" />
  <img src="logo-front" alt="Photo of coding guy from unsplash">
  <h1>Coding is tough</h1>
</article>

4. Incorrect architecture: Placing block element inside inline elements is incorrect architecture. For semantically correct HTML any inline elements should be nested inside block elements.

<!--WRONG-->

<a href="/article">
 <h1>Title</h1>
</a> 

<!--correct-->
<h1>
  <a href="/article">
   Title
  </a>
</h1>

5. <b> and <i> tags: While <b> and <i> will make text appear bold and italic respectively, they are only a visual aid. Use <strong> and <em> tags instead, so they are interpreted as important and emphasized by the browser.

<!--WRONG-->
<p>
  lorem ipsum <b>dolor sit</b> amet.
  lala lalal lala <i>lala</i> lala.
</p>
<!--CORRECT-->
<p>
  lorem ipsum <strong>dolor sit</strong> amet.
  lala lalal lala <em>lala</em> lala.
</p>

6. Incorrect use of ID: An ID is a unique identifier so you can't apply the same ID to multiple elements on the same page. That's not the case for classes through, so use classes for styling instead of IDs.

<!--WRONG-->
<article id="card-first">
  <h1>First Article</h1>
</article> 

<article id="card-second">
  <h1>Second Article</h1>
</article> 

<article id="card-third">
  <h1>Third Article</h1>
</article> 

<!--CORRECT-->
<article id="card-first" class="card">
  <h1>First Article</h1>
</article> 

<article class="card-second">
  <h1>Second Article</h1>
</article> 

<article class="card-third">
  <h1>Third Article</h1>
</article>

7. Missing NoScript: If you're using a JavaScript framework, you must include a noscript tag to display something if the user has disabled JavaScript. Otherwise, they will see a blank page.

<script>
  // YOUR JAVASCRIPT CODE HERE
</script>

<noscript>
  This website requires JavaScript to function correctlyπŸ˜‰. 
</noscript>

CSS MISTAKES

So here we go againπŸ˜‚

🀩 Our Amazing Sponsors πŸ‘‡
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

1. Not using CSS reset: Browsers have different defaults so use a CSS reset to bring them all in line.

* {
    box-sizing: border-box;
}

body {
    margin: 0; 
}

button, 
input, 
select, 
textarea {
    font-family: inherit; 
    font-size: 100%;
    line-height: 1.15;
    margin: 0; 
}

2. Over qualifying selectors: Long selectors are difficult to maintain and harm performance.

/* WRONG */
main section article h2 {
    color: blue;
}

/* CORRECT */
.article__title {
    color: blue;
}

3. Desktop First: Work from smallest to largest design - not the other way around.


/* WRONG */
.container {
    width: 980px;
    padding: 1em; 
}

@media (max-width: 979px) {
    .container {
        width 100%:
        padding: 0.5em; 
    }
}

/*CORRECT */

.container {
    width: 100%;
    max-width: 980px;
    padding: 0.5em; 
}

@media (max-width: 980px) {
    .container {
        padding: 1em; 
    }
}

4. Using absolute units: Use relative wherever possible (%, rem, fr, vw, vh) for scalable fluid layouts.

/* WRONG */
p {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 8px;
}

/* WRONG */
p {
    font-size: 1em;
    line-height: 1.25em;
    margin-bottom: 0..5rem;
}

5. No naming conventions: Use a convention (like BEM) to help with class naming and organizations. Read more about BEM Methadology.

/*WRONG*/
.title {
    font-size: 2rem;
}
.another-title {
    font-size: 1.5rem;
}
/*CORRECT*/
.hero__title {
    font-size: 2rem;
}
.card__title {
    font-size: 1.5rem;
}

6. CSS before HTML: Write semantic and HTML with the correct content hierarchy before thinking of styles.

7. Forgetting Accessibility: Check your colours are accessible and don't completely remove the focus styles.

/*WRONG*/
*:focus {
    outline: none;
}

/*correct*/
a:focus {
    outline: none; 
    background-color: #EE82EE;
}

8. Repetitive code: Break up repetitive CSS into smaller chunks that can be reused throughout your site.

/*WRONG*/

.article {
    background-color: #fff;
    border-radius: 1rem;
    width: 100%; 
    max-width: 540px;
}

.sidebar {
    background-color: #fff;
    border-radius: 1rem;
    width: 40%; 
}

/*CORRECT*/

.article {
    width: 100%; 
    max-width: 540px;
}

.sidebar {
    width: 40%
}

.card {
    background-color: #fff;
    border-radius: 1rem;
}

Thanks for reading.

Comments (1)