HTML and CSS for back-end developers

This article is an introduction to a series of other articles where I will demonstrate the right way to code HTML and CSS for back-end developers.
This is right the title of this article is HTML and CSS for back-end developers . but wait aren’t back-end developers supposed to know those technologies ? it may seem odd but most of back-end developers sucks at HTML and CSS .
I have worked with a lot with back-end developers and I have many friends in the web development industry . tones of those developers are moving to front-end development you know it’s a trend those days .
Back-end developers work so often on website / web application maybe for fun or just because their boss told them to .

to be honest most of those developers write html /css in a horrible ugly way , or they use a framework in most cases “bootstrap” with a crappy mark-up and horrible css .
to be more specific and to elaborate what I said I’m going to list some of the mistakes back-end developers put in their code.
HTML :
Placing Block elements within Inline elements :
in most usually they don’t understand the difference between a block and an inline element .
An HTML element is displayed as Block or as Inline by default. Block elements, such as divs and paragraphs, make up the structure of the document. Inline elements reside in these blocks, such as anchor and span tags. So you should never put blocks inside inline elements.
They use <br> tag to show a list or for displaying margins
1. vue<br/>
2. react<br/>
3. angular
dude if you want to show a list use the ul or ol tag (grrrr) .
They put style in the mark-up (inline-styling)
<h2 style=”color:red;”>Wrong</h2>
pretty much this is the most common mistake I see in their codes
They use deprecated HTML elements
old HTML tags and attributes which have been declared deprecated which aren’t supported by browsers anymore
here are some old HTML tags and attributes which have been declared deprecated by W3C consortium.
<basefont face=”Arial” size=”+1" color=”green”>Some text</basefont>
<center><img src=”pic.gif”></center>
<u>Underlined text</u>
<s>Strikethrough text</s>
<strike>Strikethrough text</strike>
<dir>
<menu>
Although modern browsers currently support them, they might not in future.
They forget to put the Doctype
The Doctype is very important because it helps the browsers and other developers to know what version of html you are using so for god sake start using it .
CSS :
CSS is one of the simplest web technologies over there , basically it’s just a set of properties you apply to HTML elements but developers still don’t write it well.
They use 0px insted of 0
let’s say you have div that you want to have a margin of 20px obviously you are going to write something like :
#selector{ margin : 20px;}
and you may face a another situation when you have an element that should not have margin you piece of shit would write
#selector{padding : 0px;}
well it’s not right because it’s the most stupid thing on earth .
They use color Names Instead of Hexadecimal
well because maybe they’re lazy enough or they don’t care ,they would end up writing another stupid piece of code
#selector{ background-color : red ;}
this might be a good or acceptable practice if browsers can read their minds and tell what kind of red they are talking about.dude for some reasons some people spent a lot of time and effort to come up with colors hex codes and rgb/rgba colors.
They don’t use css short hands
most of developers think that each side of a box — top, left, bottom, and right — must be styled and defined separately. that is why while reading a css file written by a backend developer you will notice something like
.class {
padding-left: 2opx;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 10px;
}
They ignore browser Compatibility
this is the most common css mistake a lot of web developers does not just the back-end developers .
You must know the fundamental differences in the way Internet Explorer renders a page, versus Firefox or chrome for example.
They don’t use generic classes
Many things should be styled globally like paragraph and heading styles for text as well as link styles. This will reduce the risk of mistakes and will also cut down on the amount of code in your stylesheet for example :
.pull-right { float : right}
Well ! that was it
That was all what I can remember about common html/css done by back-end developers , I couldn’t write all of them but I tried to summaries the most critical things that should be avoided.
As you know it’s not always enough to just mention the problem but we have to think and try to come up with solutions to those problem .that is why I’m gonna write every week an article about the basics and good practices of html and css to level up.
