📁 standards / frontend / README.md

CodeHarbor

WEB Development

You can see the standards for the code in the example structure in the GitHub Repo there you will find example files for HTML, CSS, JavaScript, and PHP.

The main IDE we will use is Visual Studio Code. Keep in mind, you should have it installed. You can install it from here.

After the setup, you should use this architecture (this will be updated soon):

+-- ProjectFolder/
|   +-- HTML Files (index.html, contact.html, etc.)
|   +-- assets/
    |   +-- images/
        |   +-- Images (random.png)
    |   +-- css/
        |   +-- CSS/SCSS Files (style.css)
    |   +-- js/
        |   +-- JavaScript Files (script.js)

Front-end

HTML

To start writing in Visual Studio Code, type ! and then press Tab. This will create the essentials for your new project.

If you prefer you can use this example(check for updates in the example HTML file):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A simple HTML document structure.">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
    <title>Document</title>

    <link rel="stylesheet" href="assets/styles.css">
</head>
<body>

</body>
</html>
Main HTML rules

Most of the HTML rules are written in the example HTML file. Here are more tips and rules:

  • If two HTML tags are on the same tabulation level, they should be separated via New Line.
  • Don`t be afraid to use more <div> or <span> to achieve the desired structure. These two are the tags you will use to create the main layout and separation in you HTML pages.
  • Use of semantic tags is a MUST. This will help the SEO(Search Engine Optimization) of the website. But not every semantic tag is useful. Here are the main semantic tags you should use:
  • The use of the <i> and <b> tags is not allowed due to them being too old you should use <em> and <strong> instead.
  • Learn which tags are BLOCK and which are INLINE and what is the difference. You can check here.

CSS

Selectors

In CSS, it is most important to learn how to use selectors properly. First, let's take a look at the hierarchy of the selectors:

description

As we can see, the weakest selectors are those for just the tag. They can be overruled by those for a class. Then those for a tag with a specified class, etc.

We won`t use ID for selectors. If you use ID you won't be able to use too many combinations of selectors, and it will be hard to overrule. There are special selectors, PSEUDO selectors. You can read more about them in w3schools, and we encourage you to exercise here.

BEM (Block Element Modifier)

Our HTML and CSS will be based on the BEM(Block Element Modifier) standard. What is BEM you can see here. A brief resume will be that every part of your website that can be reused should be called BLOCK. Every inner part of that element we will call ELEMENT, and every element that is a slightly changed version of the previous two will be MODIFIER.

For example, every button will be similar or the same on the website, with a few exceptions. This can remind us that this is a reusable element and therefore a BLOCK. Let's say that the class of all of the buttons will be:

.btn {}

But then we see the following example - the same button but in red. That would only mean one thing: the new button is a MODIFIER of the first one. We will need to add the new CSS to make it red. Here is how:

.btn .btn--red {}

And the last case is when we want to add, for example, an icon in the structure of the button. This will be an ELEMENT of the button. The selector would be something similar to this:

.btn .btn__icon {}
Colours

For the colours we will use the HEX format. Therefore, this will be a random colour: #12ae45. Important note is that white, black and grey or any other colours with repeating two values for a component should be shorter: #FFF = #FFFFFF, #000 = #000000, #A35 = #AA3355. Names of colours and RGB(r(0-255), g(0-255), b(0-255)) values are not welcome. For transparent colours we will use RGBA(r(0-255), g(0-255), b(0-255), a(0-1)).

Main CSS rules

We have many rules applying to CSS. Here are some of them:

  • We don`t use inline CSS!
  • We don`t use !important
  • We USE comments - in the beginning of a new BLOCK (Block Element Modifier), before BASICS, before RESET.
  • Every property should be on a new line and end with a semicolon.
  • Before the value of a property, we leave a space, and the same applies after the selector. Correctly written CSS should look like this:
.selector {
  width: 100vh;
  height: 100%;
  background-color: #fff;
}
  • We will use rem instead of px. If a value is equal to 0, we should
  • We always start the CSS file with "RESET". "RESET" is used to have the same properties throughout different browsers. Here is an example for basic "RESET":
/* reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

For more information on the box-sizing property, you can read here.

  • Then the "RESET" is followed by the BASICS. Here we set the basic or main properties for the whole website. Here is an example:
/* basic */

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    line-height: 1.2;
    color: #000;
    background-color: #fff;
}

h1 {
    font-size: 6rem;
}

h2 {}

h3 {}

h4 {}

h5 {}

h6 {}

First, the html tag - font-size: 62.5%; This makes 1rem equal to 10px, which helps us for fast calculations.

The properties in the body tag should be there no matter what. Then we have the h1 - h6 tags. When we have a page or a website we want to create, we can always see that there are many sizes of headings. We chose the six main and distribute the font-size through the different tags.

  • We use shorthand in CSS for almost everything. You can check the main examples here.