Person stressed over a lot of books and information

Start Learning Front End Development in 2020

I know it can be frustrating not knowing where to start or how to begin learning to code. I'm going to give you some steps that you can take to get started. I'm not saying this is "the best" way to start by any means, but this is more or less how I got started and it worked really well for me. There's obviously going to be more to becoming a front-end developer. But this should get you on the right track! So without further a due let's dive into it!

1. Getting an Overview

I remember when I first thought about learning programming, from my perspective it looked so incredibly hard and I thought I'd have to learn a ton of math and do these complex calculations. But I didn't even know what I was looking at, It could've been AI development, IOS development or somebody trying to position something on a website. The point is that I wouldn't know the difference.

I think it's important to get a feeling for what's out there when it comes to technology. Knowing that within front-end development you're most likely only working with HTML5, CSS3, and JavaScript. Knowing that you don't have to learn things like Java, Python, PHP, Swift or Node (at least not in the beginning).

It can be quite overwhelming when you're standing outside looking in on this world of programming. But when you're able to separate all the things you don't have to learn at first from the things you need to learn, then it's really not that bad.

This comes down to learning the difference between front-end and back-end development.

2. Learning about Design

As a front-end developer, you are going to be working alongside designers, you're probably not going to design that much yourself. But it's important to at least have a foundation in design so you can better communicate and collaborate with the designers.

In the starting phase though, you're most likely making some kind of portfolio and there are some design basics that need to be in place for your projects to have that little extra and appeal to employers. It's also important to show potential employers that you know and care about accessibility as that's just getting more and more important these days.

This step can be done after step 3 and 4, but if you're not overly excited about the design part you might find it hard to unravel yourself from the grips of coding to do something you don't find that interesting. You will most likely pick up a few things about design while learning to code and doing research, but learning this comes much easier when you have a basic foundation in design. This is why I recommend learning the absolute basics of web design before starting to code.

2.1 Colors

Learn about the color wheel, color psychology, RGB and hex codes. Which colors should not be used together and which colors compliment each other? Learn the importance of contrast between the color of text and its background to make sure it's readable even for people that have impaired vision.

Web Content Accessibility Guidelines (WCAG) is the international guidelines for accessibility and should always be considered. You can read more about WCAG here.

2.2 Layout

Learning about layout design can be really beneficial when it comes to your portfolio as well. If you know how to use the layout to present information in a clear and logical way, you will be able to make it easier for the employer to find the information they are looking for. People don't like to go around looking for the information they want. If you know what your project is going to consist of, learn how to plan the layout of the project beforehand by looking into wireframes.

2.3 (optional) Gestalt Principles

If you find design interesting you can always dive deeper and look into things like Gestalt principles, which is a collection of psychological rules regarding how we as humans recognize patterns and shapes. With this knowledge, you can play some cool mind games with design and use these principles to your advantage. you can read more about Gestalt principles here.

3. Learning HTML

You now know more about design than most people do when they start coding. This is great for many reasons, now you can focus on learning how to actually put something up on the white screen. You will recognize contrast issues and you will have a clearer idea of where to place content (although you won't unlock that power until the next step).

What is HTML?

HTML stands for HyperText Markup Language and it is not a programming language per se, it's a markup language. It's used to structure content on the web. Like this blog post, it's made out of different elements; we have headlines, paragraphs, lists, and images. All these are defined in the HTML document in something that's called tags.

When somebody opens this page in their browser the browser will read the HTML document to know what it should display to the screen in terms of content. We define this in the HTML document of the page using HTML tags. HTML is nothing more than the structure, alone it can't do much, but together with CSS and JavaScript, there's little we can't do.

4. Learning CSS

CSS stands for Cascading Style Sheets and is used to style HTML elements by targeting them in one of the many ways possible. Learning CSS after HTML only makes sense because we need to have some HTML markup to have something to style with CSS.

This is where browser compatibility comes in, there are a bunch of ways to achieve the same thing in CSS, but some ways might not be compatible with all browsers (Internet Explorer in many cases). This is not super important to think about in the beginning, but you should keep it in the back of your mind so you know why your project looks different in another browser.

The thing I found most challenging in the beginning was understanding the CSS box model and placing content where I wanted it to be. Luckily there's a lot of information on the topic out there, so use it! Because we are browsing the web with devices in all shapes and sizes these days, it's important to learn responsive design and how to make your projects responsive to screen size.

You might come across something called SASS or LESS; these are just CSS preprocessors and they add some additional features that are not found in CSS (yet). I recommend learning CSS first before diving into SASS or LESS.

5. Make Stuff

Now you have the skills to make a lot of different things, you can try to make a website about yourself for example, or take another website and try to copy it. It's really important to practice consistently to get coding into your fingers and wrap your brain around the HTML and CSS syntax.

Learn where to find resources for your projects like fonts, images, graphics, and videos (blog post with some of these are coming). :)

6. Learn About the Web

When you have a project you want to put online, find out how that works.

  • How do you get a domain?
  • How does hosting work?
  • What is FTP and SFTP?
  • What happens behind the scenes when somebody is visiting your domain?

To get a full understanding of the web and how the browsers work you need to know these things.

This comes down to knowing how browsers and servers communicate with each other.

7. Pieces are coming together

When you reach this step you are probably ready to learn about JavaScript and how that fits into this world of HTML and CSS. I find JavaScript to be really fun to learn and experiment with. It's a huge language and there are so many things you can use JavaScript for.

I highly recommend learning the fundamentals of JavaScript before diving into Frameworks and Libraries like React, Angular or Vue (blog post about the fundamentals of JavaScript are coming soon!). :)

I hope you got some value out of this post. If you have any questions, feel free to send me a message via the contact form on this site.