Curriculum: JavaScript for web pages

Auf Deutsch »

Please note: The curriculum is a bit outdated as it contains animations implemented with JavaScript that would rather be implemented with CSS today. It used to be part 2 (day 2) of the JavaScript for absolute beginners workshop but is not actively being used any more.

The internet is powered with magic, or — as we like to call it — JavaScript.

Today, our goal is to learn how JavaScript can create and edit the content and appearance of a web page. When we use our awesome JavaScript power to change the content or its appearance, we can make text, shapes and pictures appear, disappear and move around. The content is HTML, and the appearance is described in CSS.

Tools

We will be using the Google Chrome browser again today, to take advantage of the console again, but today we will also be using more features of the Developer Tools.

Yesterday, we wrote all our programs directly in the web browser. Today, we will be writing a program using a text editor.

Code is just text, so any text editor will work, but most programmers prefer to use a code editor. Code editors have extra features, and make coding a lot more fun.

We will be using Sublime Text 2. If you don’t already have it installed, get it here:

Project

Over the course of the day, we will create a photo gallery. But before we do, we will play around with HTML and CSS so you can see how combined they make The Whole Internet, pretty much.

Resources

Keep your JavaScript cheat sheet open in a tab in your browser, and use it to look up the precise notation for something whenever you forget.

Our coaches are also always happy to answer questions. If at any point you feel confused or stuck, get our attention, and we will do our very best to un-confuse you.

Let’s go

→ To the first page.