Skip to content

Commit aca2023

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #206 from codeharborhub/dev-1
started JS Docs
2 parents 3486a7b + f7d94bf commit aca2023

File tree

5 files changed

+216
-10
lines changed

5 files changed

+216
-10
lines changed

‎absolute-beginners/frontend-beginner/index.mdx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: Frontend Development Roadmap 2026
33
sidebar_label: Frontend Beginner
4+
position: 1
45
description: "A step-by-step guide to becoming a frontend developer in 2026."
56
---
67

@@ -10,16 +11,10 @@ Welcome to **CodeHarborHub**! This guide is designed to take you from "Hello Wor
1011

1112
Here is the bird's-eye view of your journey. Don't worry about the jargon yet; we’ll break it down piece by piece.
1213

13-
```mermaid
14-
graph TD
15-
A[HTML] --> B[CSS]
16-
B --> C[JavaScript]
17-
C --> D[Git & GitHub]
18-
D --> E[npm & Tooling]
19-
E --> F[React]
20-
F --> G[Tailwind CSS]
21-
G --> H[Vitest]
14+
```mdx-code-block
15+
import DocCardList from '@theme/DocCardList';
2216
17+
<DocCardList />
2318
```
2419

2520
## 1. The Core Fundamentals (The "Big Three")

‎absolute-beginners/frontend-beginner/javascript/_category_.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "JavaScript",
3+
"position": 3,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "Getting started with JavaScript. This is the start of the most exciting part of the frontend journey. If HTML is the structure and CSS is the skin, JavaScript is the brain."
7+
}
8+
}

‎absolute-beginners/frontend-beginner/javascript/index.mdx‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎absolute-beginners/frontend-beginner/javascript/intro-to-js.mdx‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
---
2+
sidebar_position: 1
3+
title: "Hello JavaScript!"
4+
sidebar_label: Intro to JavaScript
5+
description: "The ultimate beginner's guide to starting your programming journey."
6+
---
7+
8+
Think of your favorite website. When you click a "Like" button and the heart turns red, or when you type in a search bar and suggestions pop up that is **JavaScript** in action.
9+
10+
### The Big Three: A Simple Analogy
11+
12+
If building a website is like building a house:
13+
1. **HTML** is the **Structure** (The walls, doors, and windows).
14+
2. **CSS** is the **Decoration** (The paint, wallpaper, and furniture).
15+
3. **JavaScript** is the **Electricity & Plumbing** (The lights that turn on when you flip a switch and the water that flows when you turn a tap).
16+
17+
## What is JavaScript, Exactly?
18+
19+
JavaScript is a **Programming Language**. It allows you to tell the browser (Chrome, Safari, Edge) to do specific tasks. It is the most popular language in the world because it is the only language that runs natively in every web browser.
20+
21+
### What can you do with it?
22+
23+
* **Make things move:** Create animations or sliders.
24+
* **Handle Data:** Calculate a math problem or process a form.
25+
* **Update Content:** Change text or images without refreshing the page.
26+
* **Listen:** "Wait" for the user to click, scroll, or type.
27+
28+
## Where Do We Write JavaScript?
29+
30+
You don't need fancy software to start. You just need a text editor and a browser. There are three ways to add JS to your site:
31+
32+
### 1. The Console (The Secret Playground)
33+
34+
Every browser has a hidden "Console" for developers to test code.
35+
* **Try it:** Right-click this page -> **Inspect** -> Click the **Console** tab.
36+
* Type `alert("Hello World");` and hit Enter.
37+
38+
### 2. Internal (The Script Tag)
39+
40+
You can write code directly inside your HTML file using the `<script>` tag.
41+
42+
```html
43+
<script>
44+
console.log("This code runs inside the HTML file!");
45+
</script>
46+
```
47+
48+
### 3. External (The Professional Way)
49+
50+
Just like CSS, we keep our JavaScript in its own file (e.g., `script.js`). This keeps our project clean.
51+
52+
> Create a file named `script.js` and link it at the very bottom of your HTML, just before the closing `</body>` tag.
53+
54+
**In your HTML (at the very bottom of the body):**
55+
56+
```html title="index.html"
57+
<body>
58+
<h1>Welcome to JS!</h1>
59+
60+
<script src="script.js"></script>
61+
</body>
62+
```
63+
64+
## Your First Tool: The Console
65+
66+
Before we build complex apps, we need a way to "talk" to the computer. We use the **Console**. Think of it as a private chat room between you and your code.
67+
68+
<LiteYouTubeEmbed
69+
id="BMFbW9giTuw"
70+
params="autoplay=1&autohide=1&showinfo=0&rel=0"
71+
title="How To Run JavaScript In Google Chrome | Chrome Developer Tools"
72+
poster="maxresdefault"
73+
webp
74+
/>
75+
76+
### Try This Right Now:
77+
78+
1. Open any website (like https://www.google.com).
79+
2. Right-click and select **Inspect**.
80+
3. Click the **Console** tab at the top.
81+
4. Type this exactly and hit Enter: `alert("I am a JavaScript Developer!");`
82+
83+
**What happened?** You just commanded the browser to take an action!
84+
85+
## Interactive Playground
86+
87+
Experiment with the code below. Try changing the text inside the quotes in the JS tab and see what happens when you click the button.
88+
89+
<CodePenEmbed
90+
title="Your First JS Interaction"
91+
penId="RNGwVxm"
92+
/>
93+
94+
95+
## The "Logic" of Programming
96+
97+
Learning JavaScript is like learning a **Recipe**. You have:
98+
99+
1. **Storage:** Storing ingredients (Variables).
100+
2. **Instructions:** What to do with them (Functions).
101+
3. **Choices:** What to do if something happens (If/Else statements).
102+
103+
## How JavaScript "Thinks"
104+
105+
Programming is just giving a list of instructions to a computer.
106+
107+
When you write JS, you are creating a "Recipe" for the browser to follow:
108+
109+
1. **Find** the button on the page.
110+
2. **Listen** for a click.
111+
3. **Run** a specific action when that click happens.
112+
113+
## Summary Checklist
114+
115+
* [x] I understand that JS adds **interactivity** (behavior).
116+
* [x] I know that `script.js` is the standard file name for JS.
117+
* [x] I learned how to open the **Browser Console**.
118+
* [x] I triggered my first `alert()`.
119+
* [x] I know how to find the **Developer Console**.
120+
* [x] I know that `<script src="...">` links an external file.
121+
* [x] I successfully ran an `alert()` or `console.log()`.
122+
123+
:::tip Did You Know?
124+
JavaScript was created in just **10 days** back in 1995! Today, it is the most popular programming language in the world, used by 98% of all websites.
125+
:::

‎absolute-beginners/frontend-beginner/javascript/variables.mdx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
sidebar_position: 2
3+
title: "Variables: Giving JS a Memory"
4+
sidebar_label: Variables
5+
description: "Learn how to store and manage data using let and const."
6+
---
7+
8+
Imagine you are moving into a new house. You have a lot of stuff, so you put your things into **boxes** and write **labels** on them (like "Kitchen Supplies" or "Books").
9+
10+
In JavaScript, a **Variable** is just a box with a label that holds a piece of information.
11+
12+
## How to Create a Variable
13+
14+
To create a variable, we use a keyword, give it a name, and assign a value to it using the `=` sign.
15+
16+
```javascript
17+
let playerName = "Ajay";
18+
let playerScore = 100;
19+
20+
```
21+
22+
### The Three Parts of a Variable:
23+
24+
1. **The Keyword:** (`let` or `const`) This tells the computer you are creating a new "box."
25+
2. **The Label (Name):** This is how you will refer to the data later.
26+
3. **The Value:** The actual data you are storing inside the box.
27+
28+
## `let` vs `const` (The Golden Rule)
29+
30+
In modern JavaScript (2026), we use two main keywords. Choosing the right one is very important!
31+
32+
### 1. `let` (The Changeable Box)
33+
34+
Use `let` when the information inside the box **will change** later (like a score in a game or a timer).
35+
36+
```javascript
37+
let score = 0;
38+
score = 10; // This is allowed!
39+
```
40+
41+
### 2. `const` (The Locked Box)
42+
43+
Short for "Constant." Use `const` for information that **should never change** (like your birthday or a fixed setting).
44+
*Pro Tip: If you aren't sure, use `const` first!*
45+
46+
```javascript
47+
const birthYear = 2000;
48+
birthYear = 2005; // ❌ ERROR! You can't change a constant.
49+
```
50+
51+
## Interactive Playground
52+
53+
Let's see how variables work in real-time. In this CodePen, we have a "Counter" app. One variable keeps track of the number!
54+
55+
<CodePenEmbed
56+
title="JS Variables Counter"
57+
penId="dPpyRGb"
58+
/>
59+
60+
### Challenge Tasks:
61+
62+
1. In the JS tab, look for `let count = 0;`. Change the `0` to `100`. Notice the starting number changes!
63+
2. Try changing the keyword `let` to `const`. Click the "Increase" button. Does it still work? (Hint: Check your console for an error!)
64+
65+
## Naming Rules (The "Dos and Don'ts")
66+
67+
You can't just name your variables anything. JavaScript has a few rules:
68+
69+
* **Do** use **camelCase**: Start with a small letter, and every new word starts with a Capital (e.g., `userProfilePicture`).
70+
* **Do** use descriptive names: `let price = 10;` is better than `let p = 10;`.
71+
* **Don't** start with a number: `let 1stPlace = "Gold";` will break your code.
72+
* **Don't** use spaces: `let user name = "Ajay";` is not allowed.
73+
74+
## Summary Checklist
75+
76+
* [x] I understand that a variable is a **container** for data.
77+
* [x] I know that `let` is for values that change.
78+
* [x] I know that `const` is for values that stay the same.
79+
* [x] I practiced naming variables using **camelCase**.

0 commit comments

Comments
 (0)