Learn Front-end Development As An Absolute Beginner

If you want to learn web development where do you even start, it’s hard to find right advice without suffering from information overload. That’s why I am writing this beginners guide, all you need is the basic of web development and a general explanation with some direction on where to go next.

Here are the steps that you can follow as a beginner to become a front-end developer.

Steps:

1. Basic concept of what is web development, how website works.
2. Difference between front-end vs back-end.
3. Usage of code editor
4. HTML, CSS
5. Javascript
6. Javascript frameworks
7. Package manager, build tools
8. Responsive design

I would recommend to follow first five steps in order and last three steps can be done in any order. Now, let’s take a deep dive into these steps.

How does website work:

Basically website is just a bunch of files that are stored on a machine called a server. Server is connected to the internet and you can load that website through a browser like Chrome from any device (eg Computer, phone).

The person’s browser is called the client. Every time you are on the internet you (client) are getting data from the server and sending data back to server. There are tons of websites that are all made by web developers. It can be for a small business or a personal blog and it can be a complex web app like Twitter, AirBnb, Youtube or Facebook.

Difference between Front-end & Back-end:

Frond-end and back-end define which part of the website you are working. Frond-end describe that you will be dealing mainly with the client side because it’s what user can see in the browser. On the other hand back-end is the part of the website which user cannot see but it handles mostly business logic, authentication and persistence of the data.

The best example to understand the difference is restaurant. Front-end web development is the section where customers can see and experience the restaurant like interior, seating and of course the food. Conversely, the back-end is the part where inventory and deliveries are managed and all the process to create the food.

Front-end and back-end web development serve differently but both are very important part of the website. If a person is involved in both front-end and back-end part of web development then it’s called full-stack developer.

Code editors:

The most essential tool that you will use while coding is the code editor or IDE (Integrated Development Environment). There are a lot of options but the most popular code editor amongst front-end developers is VS Code. It’s a more lightweight version of Visual Studio by Microsoft. It is fast, easy to use and the best part is that it is free 😉. You can customise it with themes and a lot of useful extensions that can increase your productivity as a web developer.

Other famous options include Sublime text, Vim and Atom. But if you are just getting started then the best option in my opinion is VS Code.

HTML/ CSS:

HTML and CSS are almost always the first thing you wanted to learn in front-end development. HTML, or HyperText Markup Language, is the foundation of all websites. It’s the main file type that is loaded in your browser when you look at a website. CSS, or Cascading Style Sheets, lets you style that HTML content so it looks nice and fancy.

The main building blocks of HTML/ CSS are

• HTML5 (Semantic elements, attributes, doctype etc)
• CSS (Colors, fonts and positioning)
• CSS custom properties
• CSS grid and Flexbox
• CSS transitions

Javascript:

JavaScript is a programming language that was designed to run in the browser. It is important to be able to make your website dynamic, meaning it will respond to different inputs from the user, or other sources.

The main building blocks of Javascript are

• Fundamentals (Variables, data types, functions, conditions etc)
• JSON (Javascript Object Notation)
• DOM (Document Object Model)
• Fetch API
• Modern JS (ES6)

Resources To Learn HTML/CSS & Javascript:

One of the best place I can recommend is freeCodeCamp. It is an online coding bootcamp which is totally free. It’s the best option because if you are a beginner and not sure if coding is for you then you can try this without any risk to see if you like it.

Udemy is another great option. It is an online learning platform with a lot of great courses. Some of them are listed below:

Build Responsive Websites with HTML5 and CSS3

The Complete JavaScript Course 2020: Build Real Projects!

JavaScript — The Complete Guide 2020 (Beginner + Advanced)

Youtube also offers tons of free video resources. Traversy Media is probably the best channel for beginners. FreeCodeCamp also has their YouTube channel which contain some in-depth courses like Learn JS for beginners.

In addition there are some websites that have great articles and other resources

• MDN
• CSS Tricks
• W3Schools

Front-end Framework (choose one):

After learning the basics of vanilla javascript you may want to learn one of javascript frameworks. They allow you to build powerful single page applications with interactive UIs. There are three main choices:

React: Created by Facebook | most popular | fairly easy to learn

• React the complete guide by Maximilian Schwarzmüller
• The complete react developer by Andrew Mead

Angular: Created by Google |used more in enterprise |steep learning curve

• Angular — The complete guide by Maximilian Schwarzmüller
• Angular crash course on YouTube

Vue: Created by Evan You | growing quickly | easiest to learn

• Vue — Full course for beginners on YouTube

Tools — Essential dev tools:

In addition to above mentioned technologies there are some other tools that you may be working with as a front-end developer.

Git (Version control) & Github: Version control system keeps track of every code change that you make in your project files. Git is the most popular open source version control system. GitHub is owned by Microsoft which can be used to store all your Git repositories.

• Online guides from GitHub
• Git crash course by Traversy media

Package managers are online collection of software. They are like plugins that you can use in your project instead of writing them from scratch.

• NPM (node package manager)
• Yarn

Both are popular and good options. You can read more in the article called An Absolute Beginner’s Guide to Using npm.

Build tools or JS module bundlers are tools front-end developers used to bundle JavaScript modules into a single JavaScript file that can be executed in the browser.

• Webpack is very powerful bundler and it is used with JS frameworks.
• Parcel is a new bundler and it comes with pre-configuration unlike webpack which require a lot of configuration.

Responsive design:

Responsive design means that your styles look good on all devices. The core practices of responsive design include:

• Viewport
• Media queries
• Fluid widths
• rem units over px
• Mobile first

For more detail on responsive design, check out this article.

Sass: It’s an extension of CSS that makes CSS more efficient and adds more functionality to standard CSS. With Sass, you can create your own modular, reusable CSS components to use in your projects. You can learn more in this video by Dev Ed.

Wow, that is a LOT to learn! But don’t try to learn everything at once, pick one skill at a time. Know that leaning web development is a long-term journey and just watching video of courses won’t make you an expert. Try to build actual websites and projects.

I hope this guide helps you get started learning web development. Thanks for reading!