js-intro-workshop
An introductory JavaScript workshop for beginners.
Slides
Check on slides, click here
Feedback
To leave feedback click here
How to use
If you are familiar with git, you can clone this repository to your machine.
If you don't know what git is, relax. You can easily download the folder on your machine - go to the 'releases' tab over the yellow line on the page and click the link 'Source code (zip)'. Unzip it (Extract) and open the folder, don't open files inside the .zip.
Start from the README.md file, then open js/level1.js.
To see the web-page in your browser, open index.html by double clicking on it, if you see
an option 'open in browser' then choose that. Preferably use Chrome, but Firefox and Safari will work as well.
Follow the instructions in js/level1.js and type code in your Text Editor (this is where your code lives and you can write, edit and delete code).
In order to see anything that you edit, you need to save the file and refresh the web page. The result of any console.log() statement will be in the browser console.
How to open the Browser Console
| Browser | Platform | Instruction |
|---|---|---|
| Chrome | Any | right-click the page and select Inspect, switch to Console tab in the developer tools |
| Chrome | Mac | press COMMAND + OPTION + J |
| Chrome | Windows | press CONTROL + SHIFT + J |
| Firefox | Any | right-click the page and select Inspect Element, switch to Console tab |
| Firefox | Mac | press COMMAND + OPTION + K |
| Firefox | Windows | press CONTROL + SHIFT + K |
| Safari | Mac | go to the menu bar and open Safari > Preferences > Advanced > and tick the box Show Develop Menu at the bottom, restart Safari, now you can right-click on the page and select Inspect Element to see the console. |
| Safari | Mac | press COMMAND + OPTION + C |
The console/developer tools will appear at the bottom or on the right side of the screen.
You can write JavaScript code directly here and see the result straight away, but as soon as you refresh the page all the code will be gone, this is why we use a Text Editor in order to save our code.
Structure
-
cssfolder - contains css files that are responsible for styles and how our project looks on the web. -
imgfolder - a place where we can store images that we will use on our web-page. -
jsfolder contains JavaScript files that makes our project work, it defines content and makes a static page functional. It contains 3 files: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 (selectors)
-
index.html- a file responsible for the structure of our project -
Readme.md- a file with explanations and any information about the project, how to run it, what it is for etc -
cheat-sheet.md- a file with a quick overlook for key namings and their explanations
Author
Tanya Butenko github: https://github.com/ButenkoT twitter: @ButenkoMe