HTML, CSS and JavaScript are the basic components that you’ll need to create a website. I’ve also added 2 more skills as the cherry on top to bring your front end skills a little bit higher than the basic levels. If you want to become a front end developer and you don’t know where to start, start with the skills below (in that order!). To learn how to code, you’re going to have to code, a lot! 

HTML

HTML is the standard markup language for creating web applications. It is the backbone of websites you use everyday like Facebook, Amazon, Google, etc. It is the absolute foundation of front end development.

HTML is quite beginner-friendly with tons of support online and is used for static websites. 

First look at the structure of the web page and familiarize yourself with the HTML elements. If you’re completely unfamiliar with HTML, here’s the basic outline: 

<HTML>

The <html> element is the root of all the entire page. Occasionally you will see a <!DOCTYPE html> before the <html> tag. This is to declare that the document is an HTML5 document. 

<head>

The header element contains metadata about the HTML page. Metadata such as the page title can be declared here. You typically see the page title reflected on browser tabs, like this: 

The header can contain other information too such as references to other JavaScript libraries hosted on other websites, but that is beyond the scope of what you’d want to learn for now. 

<style>

The style element contains everything related to the look and feel of the webpage. If the font-size is too small? It’s in the style element. Any font styles or font colors are most likely in the style element. 

The style element is different from the other elements in that CSS classes are defined here. Understand basic CSS properties such as background-color, color, border, margin and padding. 

<body>

The body element is where everything else will go. Much like a Word document where you have Heading 1, Heading 2, etc, You have <h1>,  <h2> and so on and so forth. Understanding these fundamentals early will help you organize your HTML elements when you eventually start programming larger html pages.  

Take a look at the HTML code below. Copy and paste it into a text editor then open the file with Chrome browser. You can see how your code is displayed on a browser. Fiddle around with the code, change it up a little and see how the page renders it. 

<html>

<head>

<style>

.important {

 background-color: blue;

 color: white;

 border: 2px solid black;

 margin: 2px;

 padding: 2px;

}

</style>

</head>

<body>

<h1 class="important">This is a heading</h1>

<p class="important">This is a paragraph.</p>

<p id="important">This is another paragraph.</p>

</body>

</html>

CSS

CSS grid layout is a new feature in CSS3 that allows you to define how elements should be laid out within a container. This means that you can easily control how elements will appear on different screen sizes without having to write separate code for each size. 

In the example above, the CSS is usually declared in the <head> element. It is then nested in the <style> element. For more complex pages, there is a dedicated CSS file (.css) that is referenced in the <head> element. 

The FIRST thing you should learn about CSS is selectors. Selectors are a way for the CSS code to target certain elements in the HTML page. The most common selectors are the dot (.) selector and hash (#) selector.

Dot selector means you are targeting a class. In the example above, the class “important” can be selected as “.important”. 

The hash selector is used for names using the id selector. For example, targeting an element with id=important would be “#important”. 

You can also edit the html elements directly in Chrome using the inspect feature (F12). This is an excellent way to learn HTML since you can change the HTML elements on the fly and see the result immediately in the web page. 

JavaScript

JavaScript is an object-oriented programming language used to build interactive websites and web apps. 

I struggled a lot with JavaScript at the beginning because of the confusing syntax. Most of the fundamentals of JavaScript are event based and asynchronous. For example, some built-in JavaScript functions such as AJAX calls have asynchronous functions like “on()”. Meaning the function is waiting for a specific event in order to be called. 

If you’ve started to learn any programming languages, you can see that variables can have data types such as strings, int, char.

In JavaScript, I found out later on that functions can also be variables. And like all variables, functions can be passed into other functions as arguments (I know!).

JavaScript can be an absolute nightmare if you don’t know how to start learning. 

Everyone wants to master JavaScript and build something right away, so they start on Javascript frameworks like React and Angular. DO NOT do this. You will be confused because starting this way can become very complicated. 

Instead, start with vanilla JavaScript and JQuery (a JavaScript framework that is very common and has been around for a long time). I highly recommend W3Schools and start learning the basic concepts of Javascript. JavaScript and JQuery are very crucial for front end development.

Angular or React

Once you are comfortable with JavaScript and JQuery, move onto Angular or React. While both are JavaScript based, they are pretty different. Angular is a front end framework while React is a JavaScript library. 

Angular is made for building an entire web application and can incorporate complex functionalities like two-way binding and single-page. 

React is designed to create small UI components that can be used in any web application, such as Angular. 

I personally learned Angular first but from what I hear from other developers, React is much easier to learn. The learning curve is lower for React and gives you plenty of job opportunities as well.

No wrong choices here, just up to your personal preference. 

Responsive Design

Have you ever gone to a website on your phone and noticed it’s formatted a little bit differently than if you went on your computer? That’s responsive design and all websites have a mobile version and a desktop version. 

Responsive design is also responsible for changing the layout based on if you view a website in portrait or landscape orientation. Modern websites also resize dynamically based on the user’s screen resolution. Not everybody uses the same screen resolution so it’s important to make sure all resolutions are accounted for. 

Some believe that responsive design is a program or JavaScript library. Responsive design is purely HTML and CSS. If you’re using the latest HTML5 and CSS3, you are implementing responsive design. 

Wrapping it up

I hope that was helpful for you if you want to become a front developer. Learning each skill takes lots of time and practice. You don’t suddenly become a front end developer after you’ve breezed through these skills. 

Front end development skills aren’t acquired through courses or structured education. They’re acquired through problems you solve as you start your own project. Building your own web application is the best way to learn since you’re applying all of these skills at once. 

-Bao