Skip to main content

Command Palette

Search for a command to run...

HTML Structure

Updated
2 min readView as Markdown
HTML Structure
O

Hi, my name is oussama and i am a self-taught full stack javascript developer with interests in computers. I like the expend my knowledge and learn new things each day cause i always see the beauty in mystery.

frontend.webp

hello, i'm a self-taught full stack web developer and i am still learning new things it's so much fun. During my journey to learn different tools and technologies i made a lot of mistakes . let's back to when i started learning HTML and CSS the two essential languages to make a web page design.

At that time i was full of energy and passion to learn coding to the point the feeling of joy produced by that passion makes me blind to my mistakes, i didn't care about the quality of my code or its structure all i wanted to see is the amount code on the screen that's it and i was happy after a year i realized that i made a huge mistake by ignoring those basics when i took a look i saw a mess of a code literally a mess, i did't have a good understanding of the HTML structure i was just thinking that HTML is some tags one inside the other. But i realized that without a good structure of HTML code the web page will be trash, we all know that the HTML is the main structure of the web so the code should be build correctly to have a good maintenance over the website.

What i was doing is that only write a bunch of tags and style them with an ugly CSS code, i only cared about the look that's it , the classes names where a mistery like an old language which make it hard to recognize it

example-messycode.webp

the problem was that i didn't understand the BEM (Block Element Modifier) concept it's about giving each element a meaningful class so you don't get confused or any other developer who will read your code, i'll give an example

nesting-elements-within-block.webp

as you see the concept is to give each element a name that identify to which container class it belongs and its role in the block

that was a simple example, i leave some sources if you want to learn more about the BEM concept

Sources:

link1 => %[https://getbem.com/introduction/

link2 => %[https://css-tricks.com/bem-101/

At the end, what i wanted to say is that every new developer who is willing to learn a new technology should really focus on the basics and have a deep understanding of them before moving to anything else, with that you can do you work in the best way possible

and for the front-end developers don't underestimate the HTML language it's basic structure of the web so if it collapse the whole site will go with it

happy coding everyone

More from this blog

Oussama Chahidi's blog

17 posts