A step-by-step guide to web development/building for beginners (Part 2)

Moving on to other front-end technologies. As mentioned before, HTML, CSS and JavaScript are the building blocks of frontend web development. In addition to them, there are some other tools that you may want to learn.

Package managers

Package managers are collections of online software, much of it open source. Each software component, called a package, is available for you to install and use in your own projects. You can think of them as plugins to be used instead of writing everything from scratch. You can use from the pre-installed utilities that others have already written.

Photo by Webstacks on Unsplash

The most popular package manager is called npm or Node Package Manager, but you can use another manager called Yarn. Both are good options to know about and use.

Build tools

Module packs and build tools like Webpack, Gulp or Parcel are another essential part of the front-end workflow. At a basic level, these tools perform tasks and process files. You can use it to compile your Sass files into CSS, transpile your ES6 JavaScript files into ES5 for better browser compatibility, run a local web server, and many other useful tasks.

Gulp, technically a task runner, has a number of npm packages that you can use to compile and process your files.

Webpack is a super powerful package that does everything Gulp is capable of. It’s widely used in JavaScript environments, especially the JavaScript frameworks (which we’ll get to in a moment). A downside to Webpack is that it requires a lot of configuration to get it working, which can be frustrating.

Parcel is a newer package like Webpack, but it comes preconfigured.
out of the box, so you can literally have it up and running in minutes.And you don’t have to worry as much about the setup.

Personally, I like to use Gulp for my own front-end workflows where I just want to compile my Sass and JavaScript files and not do much else.

Version Control

Version control (also known as source control) is a system that keeps track of every code change you make to your project files. You can even go back to a previous change if you make a mistake. It’s almost like having infinite save points to yourself and I can tell you it can be a huge lifesaver. The most popular version control system is an open source system called Git.Git lets you store all your files and change history in collections called repositories. You may also have heard of GitHub, an online hosting company owned by Microsoft, where you can store all your Git repositories.

Photo by Shalom de León on Unsplash

Once you have the frontend basics, there are a few more advanced skills you’ll want to learn. I recommend you check out: Sass, Responsive Design, and a JavaScript Framework.

Sass

Sass is a CSS extension that makes writing easier. It gives CSS a more intuitive and modular style and can be a really powerful tool. Sass lets you split your styles into multiple files for better organization, create variables to store colors and fonts, and use merges and wildcards to easily reuse styles. Even using just some of the basic features like nesting, you can write your styles faster and with less headache.

Responsive design

Responsive design ensures your styles look great on all devices: desktop, tablet and mobile. Key responsive design practices include using flexible element sizes and using media queries to use styles for specific devices and widths.

Photo by Taras Shypka on Unsplash

For example, instead of setting your content to a static width of 400 pixels, you can use a media query and set the content to 50% width on desktop and 100% width on mobile. as mobile traffic exceeds desktop traffic in many cases.

JavaScript Frameworks

Once you’ve mastered the basics of standard JavaScript, you may want to learn one of the JavaScript frameworks (especially if you want to become a full-stack JavaScript developer). These frameworks come with pre-built components that allow you to build applications faster than starting from scratch.

Currently, there are three main Javascript Frameworks :

1. React
2. Angular
3. Vue.

React

React (technically a library) was created by Facebook and is currently the most popular framework. You can start learning by visiting React.js

Angular

Angular was the first major framework and was developed by Google. It’s still very popular, although React has recently overtaken it. You can learn Angular on their website here.

Photo by Markus Winkler on Unsplash

Vue

Vue is a newer framework created by Evan You, a former Angular developer. Although smaller in use than React and Angular, it is growing rapidly and is also considered easy and fun. You can get it up and running on the Vue website here.

Which framework should you learn?

Now you might be wondering, “Okay, okay, which framework is the best? The truth is they are all good. In web development, there is almost never a single option that is 100% the best option for any person or situation.”

Your choice will most likely be dictated by your job or simply which one you prefer to wear. If your ultimate goal is to get a job, try researching which framework comes up most often in potential job postings.

Never worry too much about which framework to choose. It’s more important that you learn and understand the concepts behind it. Once you’ve learned one framework, it’s also easier to learn others (similar to programming languages).