DEV Community

Anna Wijetunga
Anna Wijetunga

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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?

Image showing browser with sample text and console message

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:

VS Code index.html showing build of page

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!

Top comments (0)