js-intro-workshop

KO | EN

gitlite — search

#typescript #ai-agents #deepseek-harness #dsh-plugin #open-source #ai #cli #dsh #claude-code #codex #developer-tools #react

js-intro-workshop

★ 54 Open GitHub ↗

An introductory workshop on JavaScript for beginners https://muses-code-js.github.io/js-intro-workshop/

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# js-intro-workshop

An introductory JavaScript workshop for beginners.

## Slides

Check on slides, click [here](https://goo.gl/5HNvxD)

## Feedback

To leave feedback click [here](https://docs.google.com/forms/d/e/1FAIpQLSdoOaviRIqsDPi1ZPTvTDVEzeQrSiEoDhsS0tmAIQZmkLkvxw/viewform?c=0&w=1)

## 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](https://github.com/ButenkoT)
twitter: [@ButenkoMe](https://twitter.com/ButenkoMe)

js-intro-workshop

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README