10 HTML, CSS & JavaScript mistakes which are made by beginners 🫶

As a beginner in web development, it's easy to make mistakes when working with HTML, CSS, and JavaScript. Here are ten of the most common mistakes i did as an self-taught developer in my first weeks and how to avoid them:

1. Using invalid HTML tags:
Using invalid HTML tags or open/close typos can cause issues with the functionality of your website. For example, using

<center> 

instead of

<div text-align="center">

is invalid HTML. Validate your HTML with your IDE features or Plugins.

2. Incorrect use of semantic HTML elements:
Using the wrong HTML element can make your code less understandable for browsers and search engines. For example, using

<div>

instead of

<header>, <main>, <footer>

can affect accessibility and SEO. Use semantic HTML elements to improve your code's meaning and structure.

3. Inline styles:
Using inline styles can make your code harder to maintain and modify. For example, using

<p style="color: red;">

instead of a CSS class for styling text is not recommended. Instead, use external CSS files and classes to apply styles to your HTML elements.

4. Not designing for responsiveness:
Not designing for responsiveness can result in poor user experience on different devices. For example, not using CSS media queries to adjust the layout of your website for smaller screens is not recommended. Also start with mobile first, it's much harder to refactor from a desktop size down to mobile.

5. Overusing fonts and colors:
Overusing different fonts and colors can make your code harder to read and maintain. For example, using too many different font sizes or colors can make your CSS file bloated and harder to navigate. Instead, stick to a few consistent choices for your fonts and colors.

6. Choosing the wrong image format or resolution:
Using the wrong image format can affect the loading times and quality of your images. For example, using a PNG file for a photograph can result in a large file size and slow loading times. Use JPEG for photographs and PNG for graphics with transparency. You can also try WEBP a newer format for the web (thanks to @joelbonetr).

7. Not optimizing JavaScript files:
Not optimizing JavaScript files can affect the loading times of your website (modern frameworks can handle this for you). Use minified and combined JavaScript files to improve your website's performance.

8. Not commenting enough:
Not commenting enough can make it harder for you and others to understand your code later on (specially yourself if you jump back after some weeks or months). For example, not explaining the purpose of a complex function can make it harder to modify, understand (again) or debug. Use comments to explain your code and make it more readable.

9. Writing invalid CSS:
Writing invalid CSS can result in unexpected behavior on your website. For example, using an invalid selector like

<p color="red">

instead of a valid one like

p { color: red; }

can result in broken styles.

10. Not prioritizing accessibility:
Not prioritizing accessibility can make your website less usable for people with disabilities. For example, not using descriptive Alt attributes for images can make it harder for visually impaired users to understand the content. Use semantic HTML tags and test your website for accessibility using tools like Lighthouse. If you don't care about accessibility, you will block people to enjoy our 🏳️‍🌈 web.

Let me hear what typical mistakes you made in the beginning?

Cheers! Code healthy, happy an enjoy it ❤️.