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.
- 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>
- 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>
- 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>
- 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>
-
<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>
- 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>
- 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😂
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;
}
Over qualifying selectors: Long selectors are difficult to maintain and harm performance.
/* WRONG */
main section article h2 {
color: blue;
}
/* CORRECT */
.article__title {
color: blue;
}
Desktop First: Work from smallest to largest design - not the other way around.
/* WRONG */
.containter {
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;
}
}
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;
}
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;
}
CSS before HTML: Write semantic and HTML with the correct content hierarchy before thinking of styles.
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;
}
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;
}
Removal.AI - [SPONSOR]
Remove background from multiple images in a single upload straight to your desktop using Bulk Photo Background Remover for Windows.
- ✅ Drag & Drop Multiple Images
- ✅ Optimize Product Images
- ✅ Select Your Background
- ✅ Set Your Output Size
- ✅ Exceptional Results
Visit -> Removal AI
Top comments (0)