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

• 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 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