a site for beginner front-end web developers

Good Habits

All the good web design habits learned over the years

Indent, Indent, Indent!

The nicest thing you can do for yourself but especially others with your code is to make sure it's legible. There's nothing worse then trying to find a specific piece of code when it looks like this:

<div class="container-fluid text-center p-2">
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div class="container">
<h3>Warm Colors</h3>
</div>
<div class="container p-2">
<div class="warm-color1 p-2">.warm-color1 {background-color: hsla(8, 100%, 50%, 1);}</div>
<div class="warm-color2 p-2">.warm-color2 {background-color: hsla(15, 100%, 50%, 1);}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

It's much nicer and less time consuming to make sure the elements you want nested inside other elements look like they're inside other elements. To do this, indent each line of code properly:

|<div class="container-fluid text-center p-2">
|  |<div class="container">
|  |  |<div class="row">
|  |  |  |<div class="col">
|  |  |  |  |<div class="row">
|  |  |  |  |  |<div class="col">
|  |  |  |  |  |  |<div class="container">
|  |  |  |  |  |  |  <h3>Warm Colors</h3>
|  |  |  |  |  |  |</div>
|  |  |  |  |  |  |<div class="container p-2">
|  |  |  |  |  |  |  <div class="warm-color1 p-2">.warm-color1 {background-color: hsla(8, 100%, 50%, 1);}</div>
|  |  |  |  |  |  |  <div class="warm-color2 p-2">.warm-color2 {background-color: hsla(15, 100%, 50%, 1);}</div>
|  |  |  |  |  |  |</div>
|  |  |  |  |  |</div>
|  |  |  |  |</div>
|  |  |  |</div>
|  |  |</div>
|  |</div>
|</div>

If you follow the vertical lines from the begainning of each tag you'll find the begainning of that same closing tag bellow and all the elements (other tags) would be inside this vertical line. The most popular ways to add indents are to use the "space" key twice or "tab" key once (4 spaces). I prefer tabs. 😉

JavaScript tag location

Generally, JavaScript code can go inside of the document <head> section in order to keep them contained and out of the main content of your HTML document. However, if your script needs to run at a certain point within a page’s layout — like when using document.write to generate content — you should put it at the point where it should be called, usually within the <body> section.

Scripts that are small or that run only on one page can work fine within an HTML file, but for larger scripts or scripts that will be used on many pages, it is not a very effective solution because including it can become unwieldy or difficult to read and understand.

Semi-colons

inline html style

it's helpful to add an extra semi-colon at the end of your styles in case you need to add more

style="color: white;background-color: black;width: 25px;"

css

again, it's helpful to add an extra semi-colon at the end of your styles in case you need to add more

.btn {
 color: blue;
 background-color: white;
 width: 100px;
}

JavaScript

Although it's not always need, it's good practice to add a semi-colon at the end of statements

let button = document.getElementById('blueButton');
function main(){
 button.innerHTML = "Hola!";
 button.style.color = "blue;
}

Comments

html

<!-- -->

css

A one-line and multi-line comments starts with /* and end with */

JavaScript

A one-line comment starts with the # or //
A multi-line comment starts with /* and end with */

React (JSX)

For one-line & multi-line comments: start with the {/* and end with */}
For more info on React visit ReactJS.org

PHP

A one-line comment starts with the # or //
A multi-line comment starts with /* and end with */

SQL

Single line comments start with --
Multi-line comments start with /* and end with */ you can also use the /* */ to ignore part of a line(single line)

Consistant color definition style

There are 4 different ways in which you can add color to your web pages: Names, RGB values (RGBA for adding transparency), hexadecimal values, and HSL values (HSLA for adding transparency). It's good practice to stick with one method at least for each individual site for clarity. It makes no sense giving an element a background color of pink in one line of your css style sheet and then giving another element the same color background of #ffc2cc!

Grouping CSS styles together for tags/selectors

Shorten your CSS file by grouping specific tags/selectors that you'd like to manipulate together.
For example: instead of this

.btn {
 color: blue;
 background-color: white;
}

nav {
 background-color: white;
}

#main {
 background-color: white;
}

Do this

.btn {
 color: blue;
}

.btn, nav, #main {
 background-color: white;
}

Using semantic HTML elements and ARIA roles

Allow screen readers (visually-impaired Internet users) users to navigate your website more efficiently.
The role attribute is used to communicate information about the role of specific elements. role="presentation" allows a screen reader to skip markup elements that don’t directly contain useful information.
aria-label and other ARIA properties can be used to help users perceive information that is communicated visually but not through text. Example: add "aria-label='instagram link'" to your instagram link
The alt attribute should be added to every image element (and all other elements that support it) instead of aria-label. When used, its value should be a useful description of the image.
a11yproject.com/checklist

Make sure to use good Line Spacing, Tracking, and Kerning with your text!