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:
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!
Top comments (0)