Hi, welcome to Intermediate Javascript: Building Frontend Components. The purpose of this course is to teach you how to apply the introductory HTML, CSS, and JavaScript that you’ve learned in order to build real-world components. The course will walk you through the process of building several complex components that you’ve likely encountered on popular websites. You’ll learn how to approach common frontend challenges, what questions to ask, how to design solutions once you’ve thought of them, how to debug and work with mistakes, and more. The ultimate goal is to empower you so that you can point to any part of a website and say, “I can build that.”
If you don’t know any HTML, CSS, or JavaScript, this course will be a bit difficult to follow, but not impossible. The target audience ranges from people who have gone through at least one introductory course on these topics (or at least, through JavaScript) to entry-level professionals who are looking to level up their front-end skills. If you’re completely new to the topic, I recommend taking one of the excellent courses on Educative before this one. If you’re feeling ambitious, however, complete beginners might be able to follow along by doing their own research on the aspects of the lessons that aren’t explained.
This course uses plain HTML, CSS, and JavaScript.
The path to becoming a good frontend engineer includes learning the fundamentals and knowing how to build things with plain JavaScript before adding on libraries and frameworks, which often obscure what you’re really doing. You won’t always be writing and reading code with the library you’ve specialized in, and learning how to build components in native JavaScript makes things seem a lot less like magic.
You’ll build five different components, and the chapters are meant to be taken in order. The reason for this is that in each chapter, the focus will be on the different aspects of frontend development while building off of what was covered in previous chapters. For example, an implementation detail might be explained in-depth in an earlier chapter, but in later chapters, it’ll be assumed you’ve already gotten enough exposure to it.
A lot of the working examples throughout this course will be self-contained in a tabbed iframe. Please spend time understanding each tab and the changes made.
If you’re following along, you’ll want to separate your HTML, CSS, and JavaScript into different files, and reference the CSS and JavaScript from your HTML page. It’s omitted from the examples because that’s how the library that helps display them works. So for example, if you have index.html, you’ll want to include after , something like , and just before the (the closing tag), something like <script src="./index.js"></script>. I encourage you to follow along with your own files, maybe even implementing pieces yourself before looking at the next example and comparing it.