JavaScript App from Scratch

A senior (and very kind) software engineer wisely told me,

"Just because you learned something once doesn't mean you'll remember it."

Words I fell back on recently so as not to feel so discouraged. I do not remember what I learned two weeks ago, let alone two months ago. But that doesn't have to be the story I tell.

Setting up for a JavaScript app/project was like learning from scratch. My poor brain didn't even give me a boost.

For future-Anna-who-will-forget or for the rare gems reading (I appreciate you!), let's dig in to the steps for getting started.

JavaScript App - Getting Set Up

1) Make a new directory in your top-level project and cd into it. Name it what you wish - here I use drumkit but use beast-mode or whatever makes sense for your project.

mkdir drumkit
cd drumkit

2) In the new folder, create a single HTML page for your application, and a folder to hold your JavaScript files.

touch index.html
mkdir src
touch src/index.js

3) Start with a single JavaScript file. Later, you can split your code into multiple files for organization.

touch src/index.js

4) In index.html, you need to add some HTML.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   Replace me with your glorious words! 
  </body>
</html>

5) Open this file in your browser to make sure things are working - run this command in your terminal:

open index.html

6) To get the JavaScript part of the project up and running, link the JavaScript file to your HTML page with a <script> tag:

<script src="src/index.js"></script>

7) To check that your JavaScript file is linked correctly, add a log statement, refresh, and view the result in the JavaScript console (in src/index.js).

console.log("testing...")

A thing of beauty, eh?

8) At this point in the game, I like to connect to a new repo in GitHub. Helps hold me accountable and gives me practice using GitHub.

And I still need to refer here for the steps:

Import a Project to Github

9) If you'll be creating your own styling, create your style.css file within the root directory (style.css).

Then, within the file index.html, link to it:

<link rel="stylesheet" href="style.css">

Let's take a look:

That should get you started beautifully.

The next steps will be up to, as you navigate through your own project and content.

Here's hoping this helps give you a boost. If you have other tips to add, I will happily read them - please add in the comments below!

Blog

JavaScript App from Scratch

Anna Wijetunga

Join Our Newsletter. No Spam, Only the good stuff.

Related