Have you ever wanted to learn web development, but didn’t know where to start? The path to learn web development can be very complex. It can be hard to choose what topic or technology you should begin with. The goal of this two-part article is to make this decision easier for you. Today, we discuss the fundamentals. We will focus on the basics, what you need to know get started. Then, we will go deeper. Let’s begin. Table of Contents It all starts with HTML and CSS Learn the easy first and get momentum Take HTML to the next level Take CSS to the next level Advanced HTML and CSS and necessary tools The question about sustainability JavaScript Closing thoughts on how to learn web development It all starts with HTML and CSS When you decide to learn web development, the best place to start is foundation of the web. In other words, the best starting point to learn web development is good old HTML and CSS. In a simple terms HTML allows you to take a piece content and turn it into a website. It is probably the easiest and simplest language the web understands. Next, there is the CSS. CSS helps you to style your website, make it look good. What is the best place to start with HTML and CSS? In the terms of HTML, focus not only on learning the correct syntax, but also on semantics. Meaning, immerse yourself in the for HTML5. Learn when is the best moment to use what element and how to use it correctly. Remember that, in HTML5, semantics matters a lot. documentation This may sound simple, but the reality might be different. Many web designers and developers will tell you that not all HTML and CSS is the same. There is writing HTML and CSS. Then, there is writing good, clean and valid HTML and CSS. A lot of people can do, and do, the first, a smaller number of people can do, and do, the other. Yes, even something that looks as easy as HTML and CSS can in reality be hard. This is probably one of the reasons why there is such a thing as CSS specialist. By the way, find a back-end developer who knows a bit of front-end stuff and ask him what he thinks about writing CSS. Chances are, he will not have the best experience and relationship with CSS. There is quite a big number of back-end developers who are somewhat hesitant to dip their toes the waters of the front-end. Learn the easy first and get momentum I’m not saying this to discourage you from your goal to learn web development. In a fact, I think that starting your learning path with HTML and CSS is good not only because these two are at the core of the web. There is reason for starting with HTML and CSS. This reason is that, as we discussed, these two languages, HTML being a and CSS being a , are easy. markup language style sheet language When you decide to learn web development, the next decision you have to make is what technologies will you learn and master. Some of these technologies can be more difficult to learn than others. As a result, your learning path can be longer, more complex and harder than learning path of someone else. What I want to say is that there will be times when you will second guess your decision and feel unsure. This is why it is good to start with something like HTML and CSS. These technologies offer easy and friendly introduction into web development. And, they can help you sustain your motivation and momentum in the beginning and help you achieve your first victories. Then, when you get to the more difficult topics, these small victories and success will give you enough energy and stamina to keep going. So, please, don’t listen to people who are trying to degrade or ridicule learning of HTML and CSS. Instead, use the simplicity of these languages as an opportunity to make your journey to learn web development easier. Remember, when you get deeper into web development, you will experience a lot of situations where you will recall those nice moments with HTML and CSS. Take HTML to the next level Let’s assume, just for a moment, that you passed this stage of your journey to learn web development. Is there some way how you can take your HTML and CSS to the next level? Yes, it is. In the terms of HTML, you can take a look at templating engines. Templating engines allow you to split your HTML code into smaller pieces or modules you can then reuse across your website. What does this mean in a real life? Imagine you are working on a website with, say, eight pages. Every page has its specific and unique content. However, there are some parts or components that are always the same. Some examples of these components can be a header, navigation, footer, sidebar, cookie bar and so on. The problem with HTML is that when you want to change one component, you have to change it on all pages. This may not be necessary. When you use templating engine, you can take the HTML code for these components and put it into small modules or partials. Then, when you decide to use specific partial, you don’t use the raw HTML anymore. Instead, you include the partial. It is a bit like adding a stylesheet via tag. When you decide to change the code in that partial that change will appear everywhere you included that partial. link In other words, you will no longer have to edit all eight pages to change the HTML. Instead, you change only one partial. Templating engine will take care of the rest of the work. How does it sound? You can also use variables. So, instead of writing one thing again and again, you write it once, as variable and use that variable instead. When you decide to change it, you will have to change only that variable. So, what are some HTML templating engines you can try to make your path to learn web development more interesting? The most popular at this moment are probably , , , now known as . My favorite templating engine is Handlebars. I like to use Handlebars any time some project has more than two pages. Basically in every project. It made my work 10x faster. Handlebars Mustache Nunchucks Jade Pug Take CSS to the next level Okay, that was about HTML. What about CSS? In the terms of CSS, there are tools called preprocessors we can use to make our work easier and faster. The biggest advantage of using a preprocessor is again the ability to split our code into smaller and reusable modules. For example, we can create a variable for a color, box-shadow, font, or anything else. Then, we use this variable anywhere we need. If we change the value of that variable, new value will appear everywhere the variable is used. So, when you decide to change a color for example, no longer will you have to change it on twenty places in your stylesheet. All you have to do is update the variable for that color. Preprocessor will take care of the rest of the work you would have to do otherwise. Variables aren’t the only advantage of preprocessors. Other advantages are things such as the ability to nest selectors, use functions and mixins, split code into reusable modules and more. Keep in mind that not every preprocessor offers the same features. Some preprocessors will offer more features and do more while other preprocessors will do less. It all depends on which one you choose. Four most popular are , , and . Sass Less PostCSS Stylus My favorite preprocessor is currently Sass. I’ve been using Sass for a couple of years, in literally every project. However, quite recently, I started thinking about switching to PostCSS. PostCSS has a significant amount of plugins developers can use as they need. And, number of plugins is increasing. This makes PostCSS more flexible and also more powerful than Sass. It is also faster and lighter. If you want to enhance your path to learn web development, the best thing to do is try these preprocessors on your own and see which one works for you. If you find you like one, go ahead and start using it. Otherwise, it is okay to use “vanilla” CSS. Remember that preprocessors are only enhancements. They are not required. This is also truth for HTML and templating engines. You don’t have to use any. Advanced HTML and CSS and necessary tools Since we are talking about enriching your path to learn web development with templating engines and preprocessors, there is one thing you have to know. It is not enough to learn how to implement and use any preprocessor. The problem is that browsers don’t understand the syntax of preprocessors. At least not yet. In other words, you have to always compile your code into plain CSS before you ship it. Fortunately, you don’t have to do this manually and rewrite your code into CSS. There are build tools, also called task runners, that will do this for you. Currently, the most popular build tools are and . Then, there are module bundlers such as . You can use these tools to compile your HTML templates and Sass, Less, PostCSS, etc. into plain HTML and CSS browser will understand. Gulp Grunt Webpack The biggest upside of using some build tool or module bundler is making your work faster. These tools can help you automate a number of tasks you would otherwise have to do manually. The downside is a little longer and more complex path to learn web development. Yes, all these tools require learning something new. However, it is worth it because when you learn what’s necessary, you will save a lot of time. My current setup is following: I am using Gulp as my main build tool for automating various tasks such as compiling HTML, CSS and JavaScript code. On bigger project, and projects built with React, I use Webpack, along with Gulp. At this moment, I am still hesitant to use Webpack on smaller web development projects. Now, it seems to me like an overkill. However, I am quite close to changing my mind. So, who knows. The question about sustainability Before we move to the final section, let’s think about one interesting question. Can the skills we just discussed help you learn web development enough for finding a well-paid job? Or, are these skills enough to build your own business? I believe that answer to both these question is yes. In a fact, there are people who decided to specialize only in one or two skills we discussed and they are doing quite well. One very good example is a consultant and front-end developer Harry Roberts. When you ask people on web design and development scene if they know Harry, many of them will answer positively. They will tell you that Harry is a specialist on everything related CSS. It is no surprise that he also runs a well-known blog about web design and web development called . However, this is just one case. CSS Wizardry So, is there any other evidence that it is possible to learn web development and focus purely on these fundamental skills and survive, even thrive? Again, my answer has to be yes. The best places to look for this evidence will be job boards, marketplaces and similar websites. Just search for CSS or JavaScript specialist or expert and wait for the results. I will bet that there will be at least few gigs. JavaScript We are in final part of this stage of your path to learn web development focused on basics. If you wanted something harder than HTML and CSS yet still fundamental if you want to learn web development, JavaScript is the right choice. It is the only language you can use natively in the browser. It is also the most popular language for both, front-end and back-end development, according to . StackOverflow survey When you decide to learn JavaScript you have to keep one thing in mind. It is a long learning path. Learning JavaScript is not like learning HTML or CSS, or some preprocessor. It is something different. Maybe this is why many people don’t like this language and often complain about how hard and bad it is. I believe that one reason behind these complains is that these people didn’t learn JavaScript properly. As I mentioned, JavaScript is more complex and requires more time to learn, not to mention to master. It is very likely that your path to learn web development, at least this part about fundamentals, will be mostly about learning JavaScript. Put into percentages, it will be like 20% of HTML and CSS and 80% of JavaScript. Well, maybe it will be closer to 10% and 90%. It depends on how fast you can learn. That being said, let me give you some good resources for the JavaScript-focused part of your curriculum to learn web development. The best place to start is a series of books by Kyle Simpson called You Don’t Know JS. If you read and learn from just these books, you will get almost all information you need to master JavaScript. And, the best thing? All these books are free to read and available on . GitHub Aside to this series, other great books about JavaScript I highly recommend to everyone are , and all written by the same author, Nicholas C. Zakas. Get through these books, in the order I mentioned them, and there will be nothing in JavaScript that might surprise you. Professional JavaScript for Web Developers Understanding ECMAScript 6 The Principles of Object-Oriented JavaScript If you get through the You Don’t Know JS books and books by Nicholas C. Zakas, you will know JavaScript from every side. Not only will you master the basics of JavaScript, you will push your journey to learn web development to new level. It will no longer be about learning JavaScript, but about mastering it. Seriously. You can’t absorb information in these books and don’t know something about JavaScript. Closing thoughts on how to learn web development This is it for this first part. I hope that those topics we discussed today will help you make the first steps on your journey to learn web development. Since the first steps are usually the hardest I wanted to make this article easy so anyone can follow it. As a result, maybe we didn’t go deep enough today to meet the needs and expectations of everyone. If so, don’t worry. It was just the beginning. In the next part, we will go much deeper than we did today. We will discuss topics such as frameworks, libraries, SEO, design and also supersets of JavaScript. Then, we will switch to the back-end and databases to make sure your journey to learn web development is complete, or full-stack. So, if you want to push your path to learn web development to more advanced stages, you will be satisfied. Thank you very much for your time. And, until next time, have a great day! . Did you like this article? Please subscribe Are you on social media? Let’s connect! You can find me on and . Twitter Dribbble Originally published at Alex Devero Blog .
![How to Build a Consistent Style Guide with React & styled-components [Pt. 2]](https://hackernoon.imgix.net/hn-images/1*vCMQhyrxYwZ-cFWlz8XuYg.jpeg?auto=format&fit=max&w=3840)
