Lessons from the building process
You’ve built two simple components—an off-canvas menu and a modal window—so far. It’s a great start! What do you think? JavaScript isn’t that tough, eh? :)
Before continuing, let’s take a pause and examine two important lessons.
Lesson 1: You need to know HTML and CSS to use JavaScript properly
HTML and CSS skills are essential. If you don’t know HTML and CSS, nothing will come to your mind, because you need to write HTML and CSS before you write JavaScript.
If you’re weak in CSS, you might want to spend another 1/2 hour everyday to learn CSS. When you can build anything you see with CSS (and when you know what you can’t do with CSS), you’ll know when and how to use JavaScript.
But don’t worry if you are weak in CSS, at least not for the duration of this course. I will show you the CSS you need to build the 20 components.
Should I stop learning JavaScript and start learning CSS instead?
Nope. Not now. Focus on JavaScript since you’re here.
If you learn something halfway and stop, you wouldn’t internalize what’s important, which means to say you’ll forget it if you don’t use it for a while.
You don’t want to forget JavaScript, right?
Besides, you’ll learn the necessary CSS skills to build components in this course. Once you’re done learning JavaScript, you can work on your CSS again.
The best way to learn CSS
If you want to learn CSS, the best way is to create things. Pick anything and try to make it.
Just for your eyes only, I intend to make a CSS course to help you master CSS in 100 days after I’m done writing Learn JavaScript. You can pick up that course to supersede your CSS learning.
(Please please please don’t spread this publicly. I don’t want you to tell anyone yet because I haven’t made a public commitment to this course. I want to focus on Learn JavaScript right now).
Lesson 2: Write your HTML and CSS first before JavaScript
You give yourself a chance to see how a component works best if you write HTML and CSS first. You can mock (or fake) JavaScript functionality (like adding is-open
class) manually without writing a single line of JavaScript.
Once you’re done with mocking, adding JavaScript becomes an easy process—you know what to change, you know where to change it.
Always write HTML and CSS before JavaScript.
Lesson 3: Minimize changes
Introduce minimal JavaScript changes. Try to stick to one, at most two class changes if you can.