The basics of front end development: how to get started
Development · Jun 1, 2017
People have always asked me how to get started in web development. More specifically, front end development, and every time I send them a bunch of links and tutorials so they can start learning.
A couple months ago, I read this article about How it feels to learn JavaScript in 2016 and it got me wondering if what I was sending them felt a bit like that article: a big ocean of options that doesn’t necessarily help them to get started.
Front End Development vs Back End Development
First things first, what’s the main difference between Front and Back End?
Let’s say we’ve built a house and we’ve got the foundation, plumbing, wiring structure and electricity. We’ll call this the Back End. The Back End builds the house foundation, or the operations that need to be performed and it returns data that’s requested. The house structure and electrical setup is very important, but how can we make good use of the electricity? If we don’t have a switch and a light bulb installed between the electricity and us, we won’t be able to have that interaction. This is where Front End comes in. Installing the switch and the bulbs ensures there is a way to interact with the electricity. In the same way, the Front End makes the interaction possible by making the experience simple and fast for the user.
The same principles would be applied the other way around, there would be no use for a switch if there’s no electricity running through the walls. Front End and Back End complement one another.
Let’s define each step with more details:
The structure of the house would describe the HTML, and the Back End would be the electrical circuit. We don’t see the circuits and the power running through the walls but we depend on it.
The CSS would represent the finishing of the house, such as adding the roof, the painting, windows and everything else the would make the house more accessible and beautiful.
Last thing would be the Javascript, which would make all the interactions possible. Turning the lights on and off, making the heating system and the alarm work, making the garage door open and everything else that requires interaction.
Front End 101
In order to get started, you’ll need a text editor. I recommend Sublime Text or Atom, because they’re free and both are pretty awesome. You have tons of plugins that can help you speed up your work and it’s all very straightforward. With that installed, let’s begin.
Please note that learning these sections in order is important, since the following section depends on the previous one.
HTML
HTML stands for Hypertext Markup Language and it’s basically the skeleton of your website.
With HTML, you’ll create the blocks of elements that your site will be made of.
Remember, there’s no such thing as programming in HTML. Programming requires logic and HTML is only markup.
CSS
CSS stands for Cascading Style Sheets and it’s the visual experience of your website. It communicates with your HTML by describing how the elements should be displayed on the page.
Here are good tutorials for learning HTML and CSS:
After feeling comfortable with how CSS works, the next step would be to start studying CSS preprocessors. Those are programs that convert one type of data into another type of data.
Sass and Less are examples of CSS preprocessors, which help the code being much more maintainable and scalable, bringing some useful features such as variables and functions.
Sass:
Less:
JAVASCRIPT
JavaScript is a client-side scripting language. What that means is that it will run on the user’s browser. JavaScript performs a series of actions, such as making the user interaction more dynamic, reacting to events and communicating with the Back End.
Note: JavaScript and Java are not the same thing. Even though they might share a similar name, they have nothing to do with each other. JavaScript is a client-side language and Java is a server-side language.
GIT
Okay, so we have all that code now, but where do we store it? I present to you Github.
Github is a website where you can create repositories to save your projects and store a history of all your changes, so you can easily go back in time if something goes wrong. It’s free for personal use and it’s just great. Also, it’s very important to learn how to work with it, since most of the companies use it.
With that, you can start learning the wonders of the Front End development universe, but there’s a lot more. Accessibility and SEO are some examples of very important topics that we have discussed before in our blog and you should consider when developing your projects.
And now that you know how to get started, here are a few useful links that might help you in the future whenever you want to learn anything new or stay up to date with new tech in the market.
If you feel like Front-End Development would be something you’d want to invest your time with, or maybe even other types of development, such as Back-End or Mobile development, check out these awesome places that offer coding courses:
Happy coding!
