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.
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.
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.
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.
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.
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.)