I’ve spent years in the field doing both front-end and back-end development work. I’ve sifted through quite a bit material, and I’ve made a lot of mistakes in regard to introductory learning. What I hope to do with this article is to provide you with an ordered list of recommended resources to help you progress in the correct order, and to provide you with some insight on the various technologies and terminologies used in the industry.
HTML
Learning HTML is the first step of your journey into most development fields. You cannot learn other topics without understanding HTML first. HTML stands for “Hyper-Text-Markup-Language" and is a way for you to setup a web page. It provides you the barebone elements to setup links, create layouts, load page resources and much more onto your page. Below are some resources I used to understand creating HTML pages back when I started:
- Khan Academy Intro to HTML - When I first started out, Khan Academy’s intro to HTML was an extremely helpful resource. Easy to follow and covers CSS basics as well.
- W3Schools - Before someone yells at me for listing W3Schools as a resource, its important to know that I don’t recommend using w3schools to learn the basics, but what they are is an extremely important reference to the different HTML elements available.
- Learning Lab Introduction to HTML - This is a newer course that I didn’t utilize when I started my career, but I absolutely recommend it due to its easy to understand materials and its coverage of GIT usage.
CSS
The next step of the learning process is to begin understanding CSS, or “Cascading Stylesheets”. CSS is responsible for giving your HTML page an appearance, or style. Adding page animations, page colors, background images, and font styles. Everything that gives a web page an appearance can be done with CSS. I’ve listed some resources below to help you learn some CSS basics:
- MDN CSS First Steps – The Mozilla Developer network references and tutorials are considered some of the best resources for experts and novices alike. This CSS tutorial is great for showing you not just the basics of CSS, but how it used, and how to utilize it. I absolutely recommend this resource.
- W3Schools CSS Tutorials - Again, use W3Schools for referential purposes. But I can’t help but list it as a great free resource.
- CSS Diner - A fun engaging way to learn CSS is with a small game to practice what you’ve learned. Give it a try.
- Flexbox Froggy - I literally used this game to understand the magic of flexbox. Flexbox allows for the easy alignment and positioning of elements. Give this one a shot.
JavaScript
Learning JavaScript is the next major step and will be A LOT to learn. Make no mistake, JavaScript is a full-blow programming language regardless of what you hear from others. JavaScript is responsible for controlling all interactivity on a webpage. Creating events when a user clicks on a button, loading data when a user scrolls on a page, almost every interactive behavior can be controlled by JavaScript. Below are some resources to get you started:
- MDN JS First Steps - Yet another MDN link. A fantastic resource to first learning the basics of JavaScript.
- Eloquent JavaScript - I consider this one of the most important books you can read about JavaScript. When I started, I thoroughly covered this book and cannot even begin to explain how important this reading material is. I want to stress that this book will at times be complex and difficult to understand, but if you do the chapter exercises, you will gain a powerful understanding of what JavaScript can do for you. Best of all, this book is completely free.
- CodeWars - A platform for completing user-created exercises and challenges. I used it to sharpen my JavaScript and C# skills over the years. I highly recommend it once you have already gained an understanding of JS.
The Next Steps
Once you’ve covered materials relating to HTML, CSS, JS and you feel you’re ready to move on to more advanced topics, here are some technologies you should look into and what they can do for you.
CSS Frameworks
Look into CSS frameworks and how they can help you structure your interfaces more quickly. CSS frameworks can help you create consistency in your designs and can provide UI elements that are commonplace in other user interfaces. The most popular CSS framework currently is Bootstrap and is used by many companies and projects around the globe.
The reason why I placed CSS frameworks as one of the later topics you should learn is that many new developers start learning CSS frameworks before they learn actual CSS. It is extremely important for you to understand the basics of CSS before you add frameworks on top.
JavaScript Libraries
A lot of people make the mistake of not learning enough vanilla JavaScript enough and relying on a library to do basic functions on a web page. Although there is nothing necessarily wrong with this, you have more to gain if you have a fuller understanding of native JavaScript before you start using popular libraries like jQuery or underscore.
CSS Preprocessors
CSS preprocessors add features to native CSS. Using a CSS preprocessor gives you the ability to use variables, style nesting, stylesheet includes to separate stylesheets into folder structures, style mixins and much more. Some popular preprocessors are: SASS, and LESS.
Truth be told, these tools simply add a layer of functionality on top of CSS. You can still use CSS with the exact same syntax, you just get extra features on top. So using these tools should be simple and easy to pick up.
Front-end Frameworks (React, Angular, Vue.js, etc.)
Front-end frameworks are all the rage these days. They are extremely valuable tools in helping to build single page applications and interfaces. It is absolutely not recommended diving into learning these front-end frameworks without an understanding of vanilla JavaScript beforehand. But regardless, once you have covered all the previous topics listed, learning a front-end framework can help make you a valuable addition to the industry, and I would recommend doing so.