level3

ButenkoT · ButenkoT · commit c382ecece9ea · 2016-09-10T01:06:41.000+10:00
diff --git a/README.md b/README.md
@@ -6,10 +6,13 @@ An introductory JavaScript workshop for beginners.
 
 - Css folder contains css files that are responsible for styles and how our project looks on the web.
 
+- img folder - a place where we can store images that we will use on our web-page
+
 - Js folder contains javaScript files that makes our project works, it defines content and make static page functional.
     It contains 2 files:
-    - _level1.js_ - basics with explanations(comments, variables, functions, if/else statements). Level 1
-    - _level2.js_ - more complex javaScript with explanations(arrays, loops, events). Level 2
+    - _level1.js_ - basics with explanations(comments, variables, functions, if/else statements).
+    - _level2.js_ - more complex javaScript with explanations(arrays, loops).
+    - _level3.js_ - html, css and how manipulate them with javaScript (events, selectors)
 
 - _index.html_ - a file that responsible for structure of our project.
 
diff --git a/js/level1.js b/js/level1.js
@@ -202,7 +202,8 @@
 
 
 
-////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-//Congratulations! You have finished Part 1 of JavaScript Basics! Stand up, stretch your legs, celebrate your achievement.//
-//Next step will be following up the instructions in advanced.js file.                                                    //
-////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////
+//Congratulations! You have finished Part 1 of JavaScript Basics!     //
+// Stand up, stretch your legs, celebrate your achievement.           //
+//Next step will be following up the instructions in level2.js file.  //
+////////////////////////////////////////////////////////////////////////
diff --git a/js/level2.js b/js/level2.js
@@ -209,3 +209,8 @@
 
 
 
+////////////////////////////////////////////////////////////////////////
+//Congratulations! You have finished Part 1 of JavaScript Basics!     //
+// Stand up, stretch your legs, celebrate your achievement.           //
+//Next step will be following up the instructions in level3.js file.  //
+////////////////////////////////////////////////////////////////////////
diff --git a/js/level3.js b/js/level3.js
@@ -0,0 +1,49 @@
+// Level 3
+
+/*
+   WooHoo, you got so far on your first day! Great! But we still have more things for you.
+   First of all, go to index.html file and replace our script from level2.js to current
+   file - level3.js
+ */
+
+/*
+    Here we will talk a bit more about HTML, CSS and how JS can interact with them.
+    So HTML - stands for Hyper Text Markup Language. It is a structure of the elements
+    on the page.
+
+    HTML:
+    As you noticed it is divided on elements that looks like that:
+    <header></header>, <p></p> etc - it is tags, each element on the page has opening
+    and closing tag (NOTE: some tags are self-closing like <img>). Whole html file is wrapped
+    in tag <html>, which contains of <head> and <body> tags. In <head> we keep different
+    meta information, title and link to css files. <Body> contains our actual content.
+    Tags has a set of names which you can find here http://htmldog.com/references/html/tags/
+
+    Any tag also can have different properties (<div class="settings"></div> - tag div
+    has a property class, that has name = 'settings').
+
+    CSS:
+    Stands for Cascading Style Sheets. CSS describes how HTML elements are to be
+    displayed on screen. As you can see in css file when we need to target any element
+    we can simply refer to the tag itself (footer{color: white;}), or to any property (class
+    via '.settings', id via '#logo' etc). The list of css properties is huge, you can check
+    on it here https://www.w3.org/TR/CSS21/propidx.html but don't worry, you don't need to
+    remember it all.
+    PS: difference between id and class is that tag with specific 'id' should be unique on
+    the page, but many tags can have same class within the same page. Use 'id' only if
+    you really need it!!
+ */
+
+/*
+    Phew, lot's of new things. But let's come back to javaScript and see how we can interact
+    with html.
+ */
+
+
+/*
+
+ */
+
+
+
+
