Things to learn to get into front-end development

Web development Front-end HTML CSS JavaScript
In this article, I wanted to talk about web development and the tools we use to create beautiful websites and web applications.

Understanding

Before you start learning anything, ask yourself, do you know what web development is? In case if you don't know:

Web development is one of the most popular areas in the IT industry, that is always in demand. As a web developer, your job is to provide high-quality code to make beautiful and reliable websites and web applications.

Typically, web developers are divided into front-end (client) and back-end (server) developers. In this article, I want to take a closer look at front-end technologies.

Your starting point

Front-end, as we already know, means the client side. What exactly does this mean? So, the front-end is everything that the user sees: pages, input elements, buttons, animations and other UI elements.

So, to build these elements we need some tools. Essentially, the front-end consists of 3 main technologies:

  • HTML
  • CSS
  • JavaScript

These technologies are core web technologies. Of course they are not the only ones, there are many other frameworks, but before we start learning about frameworks, we should familiarize ourselves with this trio.

HTML

HTML is a Hypertext Markup Language. Don't get it, right? I prefer to think of it as a language that we use to define the skeleton of out future website. This language is pretty easy so this is where you should start your learning journey. Let's take a look at the code example.

index.html 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page Title</title>
    </head>
    <body>
    <!-- Your code here -->
    </body>
</html>

Every HTML file should follow this structure in order to work properly.

In HTML we use things called "tags" that look like <tagname></tagname>. There is a huge number of different tags and you probably shouldn't try to learn them all at once because over time you will use different tags over and over again and end up remembering many of them as you work with them. Here is a complete list of existing HTML tags.

HTML tags always must be closed. There are 2 different types of tags - traditionals and self-closing tags. The difference between them is that traditional tags must have their open and close tags (example <body></body>), when self-closing tags are opened and closed within one tag like <img />.

Almost every HTML tag has what are called "attributes". These are properties of an HTML tag that can change the appearance, behavior, and accessibility of the tag. Some attributes can be used across different tags, such as the style="" attribute, that we can use on every tag to change it's look with CSS. But not every attribute can be used in every tag, always google what attributes a particular tag has.

Now let's look and explain our example:

  • <!DOCTYPE html> tells the browser that this is our document type. This example specifies that the document type is HTML 5, the most recent version of HTML.

  • <html></html> plays the role of a wrapper for our HTML elements.

  • <head></head> is the home for our meta data, links and scripts. We use this tag to link CSS and JavaScript files so that we can use them on our page. Metadata is data that represents information about our page, such as encoding, keywords, description, or, as in our structure, a title tag. We use the title tag to give our page the name that will appear in your browser tab.

  • <body></body> is where we are going to write our HTML code.

CSS

We use CSS (Cascading Style Sheets) to make our HTML elements look nice. To do this, you'll need to create a new CSS file, link it to your HTML file, and start styling.

To link your CSS file, all you need to do is use the <link/> tag in your HTML file. As we already know, we should do this in the <head> tag. Don't forget to add the rel="stylesheet" and href="/path/to/your/style.css" attributes to the <link/> tag!

index.html 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page Title</title>
        <link rel="stylesheet" href="/path/to/your/style.css" />
    </head>
    <body>
    <!-- Your code here -->
    </body>
</html>
Selectors

To apply styles, we need to write a selector. We use selectors to determine which HTML elements will be affected by our styles. There are many different selectors in CSS.

Here are some of the most commonly used:

Tag names

We write the name of the tag and our styles will affect every tag we specify. 

h1 {
    font-size: 32px;
}

In this example h1 is a selector. The font size of each h1 tag will be 32 pixels.

CSS classes

To write a CSS class we need to write a dot and the desired name of our class. These styles will only affect those elements that have that class name without a dot in the class="" attribute. One element can have multiple classes.

example.css 
.my-class {
    background-color: red;
}
example.html 
<div class="my-class">
    example
</div>

In this example every element with .my-class will be affected. Keep also in mind that these selectors can be combined. In the following example these styles will work only with div tags that have the my-class in classes. 

div.my-class {
    background-color: red;
}
Styles

After we wrote our selector we need to start styling. So, to style elements, all we need to do is write curly braces and then we write the property name and its value. Don't forget to divide them with a colon and put a semicolon at the end of each property.

In this example, we create a CSS class with a color property that we use to change the color of the text. And in our case, we change it to green. 

.my-heading {
    color: #3ebd49;
}

It's almost impossible to explain every style because there are so many of them. So, just like with HTML tags, you don't have to learn them all right now, just keep practicing. But again, here is a link to a list of all the CSS styles.

JavaScript

This is probably the hardest thing you need to learn to become a front-end dev, because unlike HTML and CSS, JavaScript is a real programming language and it will take much more time to learn.

We use JavaScript to add some functionality to our websites. To use JavaScript, you should create a new JS file and connect it to our HTML file, just like we did with CSS, but not quite.

To include your JS file, add a <script> tag right at the bottom of the <body> tag, and then add the src="" attribute to the tag. In this attribute you need to pass a path to your JS file.

index.html 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page Title</title>
        <link rel="stylesheet" href="/path/to/your/style.css" />
    </head>
    <body>
    <!-- Your code here -->
    <script src="/path/to/your/main.js"></script>
    </body>
</html>

And since JavaScript is a vast topic, we won't talk about it in this article, so stay tuned for future articles! Or you could use this resource as well.

In conclusion

In this article we saw only the tip of a huge iceberg called web development. Now you have some idea about the technologies that are used in the front-end. What's next? You should spend enough time learning HTML, CSS, and JavaScript while creating simple projects. Once you feel comfortable with these technologies, take a look at Bootstrap and ReactJS. But do not rush, take your time and have fun!

That's all for now. Thanks for reading and happy hacking!