wwcodemanila · reginaalyssa · Jun 26, 2020 · Mar 10, 2019 · Mar 10, 2019 · Jun 21, 2020
diff --git a/_media/arithmetic-operators.png b/_media/arithmetic-operators.png
diff --git a/_media/browser-console.png b/_media/browser-console.png
diff --git a/_media/browser-inspect-element.png b/_media/browser-inspect-element.png
diff --git a/_media/console-alert.png b/_media/console-alert.png
diff --git a/_media/console-log.png b/_media/console-log.png
diff --git a/_media/logical-operators.png b/_media/logical-operators.png
diff --git a/_media/string-replacement.png b/_media/string-replacement.png
diff --git a/_media/variable.png b/_media/variable.png
diff --git a/_sidebar.md b/_sidebar.md
@@ -2,17 +2,23 @@
   - [About Us](wwcodemanila/about.md)
   - [Study Groups](wwcodemanila/study_groups.md)
 
-- Introduction
-  - [JavaScript Study Group](README.md)
+- Web Fundamental Concepts
+  - [HTML, CSS, JavaScript: How They Work Together](contents/web/html_css_js.md)
+  - [A Recap of HTML and CSS](contents/web/html_css_recap.md)
 
-- Basic Concepts
-  - [How to Read This Guide](contents/starter_pack_guide.md)
-  - Web Fundamentals
-    - [HTML, CSS, JavaScript: How They Work Together](contents/html_css_js.md)
-    - [A Recap of HTML and CSS](contents/html_css_recap.md)
-  - Introduction to JavaScript
-    - [Language Features](contents/js_language_features.md)
-    - [Examples From the Web](contents/js_examples_from_the_web.md)
+- JavaScript Basics
+  - ["Hello, World!" Your First JS Code](contents/basics/hello_world.md)
+  - [JavaScript Code Structure](contents/basics/js_structure.md)
+
+- Data Types
+  - [Intro to Data Types and Variables](contents/data_types/overview_and_variables.md)
+  - [Data Types: Primitive Values](contents/data_types/primitives.md)
+  - [Data Types: Objects](contents/data_types/objects.md)
+
+- Operators
+  - [Logical Operators](contents/operators/logical.md)
+  - [Arithmetic Operators](contents/operators/arithmetic.md)
+  - [Comparison Operators](contents/operators/comparison.md)
 
 - Resources
   - [References](resources/references.md)
diff --git a/contents/basics/hello_world.md b/contents/basics/hello_world.md
@@ -0,0 +1,70 @@
+## Overview
+
+For this tutorial, we will walk you through on the fundamentals of JavaScript as a language. We'll focus on building on your knowledge of the core concepts of JavaScript.
+
+## Hello, World!
+
+We begin learning JavaScript with the best-selling introduction to programming: **"Hello, World!"**. This is usually the first ever exercise when learning a new programming language. This exercise simply lets you output the words "Hello, World!" in the language you're learning.
+
+Mentioned earlier in [HTML, CSS, JavaScript: How They Work Together](contents/web/html_css_js.md) is how JavaScript mostly deals with bringing interaction to our websites. As such, it seems fit that we use a web browser to run our first line of JS code.
+
+### Console
+
+Begin by opening your preferred web browser. In the screenshot guides, we used Google Chrome.
+
+Right click on anywhere in your web browser and select the option to "Inspect" or "Inspect Element".
+
+![](../../_media/browser-inspect-element.png "Google Chrome - Inspect")
+
+This will open the Inspector where you can see details about the web page you're currently viewing. Open the tab "Console".
+
+![](../../_media/browser-console.png "Google Chrome - Console")
+
+Then, write your JS code by entering the following line to the console:
+
+```
+console.log("Hello, World!");
+```
+
+which should output something similar to what's shown below:
+
+![](../../_media/console-log.png "Console Log - Hello, World!")
+
+Now, let's look into what just happened. You just instructed your browser to print "Hello, World!" by placing this text inside the parenthesis for the function `console.log`. As its name suggests, it logs to the console whatever you want it to.
+
+### Alert
+
+Printing to the console is cool but normal visitors of a website won't really go to the trouble of checking "Inspect Element" to see what you logged in the console. However, you may have encountered an alert before.
+
+An alert is the pop up window that shows up on the top of your browser. The common reasons why this appears is to either
+
+1. warn you that what you're doing is not allowed or
+2. confirm if you're sure you want to proceed with a certain action.
+
+To try this out, enter the following in the console:
+
+```
+alert("Hello, World!);
+```
+
+![](../../_media/console-alert.png "Alert - Hello, World!")
+
+## Exercises
+
+1. Try to see what happens when you change the text "Hello, World!".
+
+```
+console.log("I can print anything here!");
+
+alert("This is a function call.");
+```
+
+2. What happens if you remove the quotation marks?
+
+3. Try printing numbers too! Did it work?
+
+## Wrap Up
+
+You just learned two different ways of printing "Hello, World!". `console.log` will come in handy later when debugging while `alert` can be used to show warnings to users of your site.
+
+More importantly though, you made a function call which we'll be learning more about later on. For now, it's a good observation to note that whatever we passed inside the parenthesis will be used by the function.
diff --git a/contents/basics/js_structure.md b/contents/basics/js_structure.md
@@ -0,0 +1 @@
+This page is still empty. We're still working on it!
diff --git a/contents/data_types/objects.md b/contents/data_types/objects.md
@@ -0,0 +1 @@
+This page is still empty, but it will cover Objects and Functions. Stay tuned!
diff --git a/contents/data_types/overview_and_variables.md b/contents/data_types/overview_and_variables.md
@@ -0,0 +1,45 @@
+## Overview
+
+In this section, we will give an overview of what data types are as well as a brief introduction to variables in JavaScript.
+
+## Data Types
+
+All values declared in JavaScript can be classified under a certain data type.
+
+Data types show us what kind of values we can use in our code as well as what kind of operations we can do on those values. They tell us the classifications and behavior of the different kinds of values that we can represent in our program.
+
+In JavaScript, almost all of the data types are **immutable**. This means they **cannot be modified or changed**. These kinds of data types are called **primitive values** or simply **primitives**. The exception to this are **objects (and functions)**, which can be modified.
+
+> As of writing this document, there are **9 data types** in defined in the ECMAScript standard.
+
+## Variables
+
+Before we learn about the different data types, let's take a look first into the concept of variables.
+
+A variable, like in Math, is used to represent something in our code. What is "something"? It could be any of the data types (which we'll learn more about later on).
+
+One common way to think about variables would be perhaps a box that you own and put values in. The usual way of declaring variables is using `let` followed by the name you want to call your variable. If you would like to assign a value to a variable, you use the `=` equals sign followed by the value you want to save to the variable you just declared.
+
+![](../../_media/variable.png "Variable Declaration")
+
+> Notice that there's a semicolon at the end of our variable declaration. We usually place semicolons (;) at the end of every line in JavaScript (except for code blocks). Although this isn't required and some developers choose to omit it from their code since JavaScript "assumes" where to place it if it's missing, we'll be consistently using semicolons for our examples.
+
+### Variable Names
+
+In general, there are two rules when it comes to naming your variables.
+
+1. You can only use a combination of letters (`a-z`, `A-Z`), numbers (`0-9`), and the symbols `$` and `_` for your variable name.
+2. You cannot have a number as the first character of your variable name.
+
+Also, multi-word variable names are usually written in `camelCase` where the next words begin with a capital letter, but you may come across some code that uses the `snake_case` where words are separated by the underscore symbol.
+
+> When declaring variable names, we usually try to be as descriptive as possible to make our code readable.
+
+### Exercises
+
+Test out different variable names to check whether they are valid variable names or not.
+
+1. Try doing `let 1apple;` on the console and see what happens. Did it show an error?
+2. Try out declaring a variable using your name `let <your first name here>;`. For example, in my case, I did `let reg;`. Did it show an error?
+3. Declare a variable using your first name and last name separated by a hyphen (`-`).
+4. Declare a variable using your first name and last name separated by an underscore (`_`).
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		This page is still empty. We're still working on it!
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		This page is still empty, but it will cover Objects and Functions. Stay tuned!