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 and simply start working through files starting from README.md file, after that jump to js/level1.js file.

If you don't know what git is, relax. You can download the folder on your machine - go to 'releases' tab over the yellow line on the page and download folder 'Source code (zip)'. Unzip it and start from README.md file, after jumping to js/level1.js file.

To open the web-page in your browser go to index.html file and double click on it, you will see an option 'open in browser'. Preferably use Chrome, but Firefox and Safari will work as well.

Follow the instructions in level1.js file and type code in your Text Editor (it is where your code lives and you can write, edit and delete code). In order to see anything that you console.log(), you need refresh the web page and the result will be in web console on the page (you can directly write javaScript code here as well and see the result straight away, but as soon as you refresh the page all the code will be gone, that is why we use Text Editor).

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

karimatthews / js-intro-workshop Goto Github PK