Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Getting Started

In this lesson we'll start making our synthesizer by creating the basic HTML page and some JavaScript placeholders.

2.2 Getting Started

Okay, in order to make a synth in the browser, we'll need a web page. So create a directory for all your files and make an HTML file, called index.html. In here, we'll just add all the usual things a web page needs. Doc type, HTML tag. Head and body tags. Char sets and title. Let's call it Synthia. You can call your synth whatever you want. It's always nice to give something a name. We should add some basic styling. Create a main.css file in the root of your directory. Let's give our page a bit of color And the height here will need to be 100% so we can see that color. Let's change the default font, too. So let's reference a CSS file, like so. Let's see how it looks. Great. Let's head back to our HTML file. There we need a place in the page for our syth. And we don't want it all stuck at the top and side of the page. So let's put it in a container. Just create a dev with a class container. Okay, let's switch back to our CSS file to give that container a width. I'd say 600 pixels feels about right. We also need to give a margin of auto, so it sets in the middle of the page. Okay, what about JavaScript? We'll need a place for that. At the bottom of our HTML, let's reference a yet to be created file called synth.js, like so. Then we'll create this new file in the root of our document. We'll just log something to the console at the moment to make sure it's working. Okay, let's see what that looks like in the browser. Perfect. A nice big space ready for our masterpiece.

Back to the top