Javascript
It's time to make things fun 😎
So far you dealt with static markup and declarative code: HTML and CSS.
They are similar in the way that you explain what you want, and then hand over to the browser the task of actually implementing your will.
And once you write the code, things won't change.
Ok, with CSS you learned about pseudoclasses that can be used to make some UI effects. Still, the animations that you put in place are always the same!
Welcome Javascript
With Javascript, you are finally dealing with a real programming language!
With Javascript you can:
- take decisions
- remember information
- automate repeating tasks
With Javascript you make a Web Page behave the way you want!
It's the first step into making a modern WebApp.
Setup your CodePen correctly
From now on, it may take you a while to write the correct code that you actually want to execute, and the "auto run" feature that we used so far in our CodePens may cause you pain.
IMPORTANT: Make sure you go through this tutorial and learn how to disable it:
👉 https://blog.codepen.io/documentation/editor/auto-updating-previews/
You can also re-run this video, it takes a quite deep demonstration of CodePen and you may find cool tricks in it:
Debug Your Code!
Once you step into Javascript you will eventually write something that just doesn't work. To me, it happens every single day.
It is therefore important to be able to find out what is not going as planned. Modern browsers like Chrome and Firefox help a lot with that, and here is a very good tutorial on how to use CodePen in debug mode: