Skip to content

Commit cac6458

Browse files
committed
move instructions to website
1 parent 76b1674 commit cac6458

File tree

4 files changed

+2
-194
lines changed

4 files changed

+2
-194
lines changed

README.md

Lines changed: 2 additions & 194 deletions
Original file line numberDiff line numberDiff line change
@@ -1,195 +1,3 @@
1-
# CS 253 Assignment 0 – Web Programming Adventure ✈️ 🌎
1+
# CS 253 Assignment 0 – Web Programming Adventure ✈️
22

3-
| Points | Assigned | Due |
4-
|--------|----------|-----|
5-
| 60 | Monday, September 23 | Friday, October 5 at 5:00pm |
6-
7-
Welcome to the first assignment for [CS 253: Web Security](https://cs253.stanford.edu). ✨
8-
9-
For this assignment, you're going to be completing several command-line workshops to ensure you're up-to-speed on the basics of HTML, JavaScript, and Node.js. The HTML and JavaScript material should be review from [CS 142](https://cs142.stanford.edu), while the Node.js material may be a more bit challenging.
10-
11-
## Prepare
12-
13-
### Install Node.js and `npm`
14-
15-
Install [Node.js](https://nodejs.org/en/), a popular JavaScript runtime. Choose Node.js 12.
16-
17-
Node.js is a program that you install on your computer. With Node.js you can use the very popular programming language JavaScript to write software. JavaScript is usually used in a browser like Chrome or Firefox but with Node.js it is possible to do a lot more. Combined with other tools, Node.js allows you to write Desktop applications like Word or iTunes, Server applications like Apache, Network applications like Curl or even mobile applications for the iPhone or Android.
18-
19-
Confirm that Node.js was installed. Open your terminal and run this command:
20-
21-
```bash
22-
node --version
23-
```
24-
25-
Node.js comes bundled with `npm`, a package manager for installing Node.js packages.
26-
27-
Confirm that it was installed:
28-
29-
```bash
30-
npm --version
31-
```
32-
33-
If you have trouble getting Node.js installed, please come to office hours or [open an issue](https://github.com/stanford-web-security/discussion/issues) in the discussion repository.
34-
35-
### Get the starter code
36-
37-
Run this command, replacing `YOUR_SUNET_ID` with your SUNet ID (e.g. `feross`).
38-
39-
```bash
40-
git clone git@github.com:stanford-web-security/assign0-YOUR_SUNET_ID.git
41-
```
42-
43-
Enter the folder you just cloned with `git`:
44-
45-
```bash
46-
cd assign0-YOUR_SUNET_ID
47-
```
48-
49-
Install the necessary local dependencies with `npm`:
50-
51-
```bash
52-
npm install
53-
```
54-
55-
Install the workshops globally with this command:
56-
57-
```bash
58-
npm install -g learnyouhtml javascripting learnyounode
59-
```
60-
61-
The `-g` option installs these packages globally so that you can run them as a command in your terminal. After running this command, you'll have three new programs you can run from your terminal: `learnyouhtml`, `javascripting`, and `learnyounode`. We installed them this way so they would be easier to run since you're going to be running these commands a lot for this assignment.
62-
63-
### Use StandardJS code style
64-
65-
All the code you write for CS 253 must pass the [StandardJS](https://standardjs.com) linter. StandardJS enforces code quality, consistency, and catches several types of programmer errors.
66-
67-
You can check your code by running:
68-
69-
```bash
70-
npm run lint
71-
```
72-
73-
If no errors are printed by this command then no code style errors or programmer errors were detected.
74-
75-
If you have errors, you can automatically fix them most of the time by running:
76-
77-
```bash
78-
npm run lint-fix
79-
```
80-
81-
Now, let's start the assignment. I hope you're ready! 😁
82-
83-
## Part 1 – Learn You The HTML For Much Win! (11 points, 1 per exercise)
84-
85-
Run the following command:
86-
87-
```bash
88-
learnyouhtml
89-
```
90-
91-
You'll see the menu:
92-
93-
<img src="img/learnyouhtml.png" width=600>
94-
95-
Navigate the menu with the up & down arrow keys. Choose a challenge by hitting enter.
96-
97-
Whenever an exercise tells you to create a file, you should use the files we've already created for you in the `src/` folder. For example, the first file you need to edit is `src/learnyouhtml/index.html`. You can use any text editor you like to, whether it's `vim` or `emacs` or even a visual editor like [Sublime Text](https://www.sublimetext.com/) or [VS Code](https://code.visualstudio.com).
98-
99-
Complete all the exercises. There are 11 in total.
100-
101-
It's easiest if you switch into the `src/learnyouhtml` folder and do your work in there. Here's an example:
102-
103-
```bash
104-
cd src/learnyouhtml
105-
learnyouhtml # select an exercise to complete
106-
vim index.html # edit the file in your editor of choice
107-
learnyouhtml verify index.html # check that you did it correctly!
108-
```
109-
110-
If you get stuck, the web is your friend! You can quickly search for a topic and quickly refresh your memory. A good trick is to search for a concept along with the abbreviation `"mdn"`, short for [Mozilla Developer Network](https://developer.mozilla.org/en-US/) which is the best web resource for HTML and JavaScript APIs. So, for example if you want a refresher on how `<script>` tags work, you could search for `"script mdn"`.
111-
112-
When you're finished with all the exercises, go on to the next part.
113-
114-
## Part 2 – JavaScripting Adventure! (20 points, 1 per exercise)
115-
116-
Run the following command:
117-
118-
```bash
119-
javascripting
120-
```
121-
122-
You'll see the menu:
123-
124-
<img src="img/javascripting.png" width=600>
125-
126-
Complete all the exercises. There are 20 in total.
127-
128-
It's easiest if you switch into the `src/javascripting` folder and do your work in there. Here's an example:
129-
130-
```bash
131-
cd src/javascripting
132-
javascripting # select an exercise to complete
133-
vim introduction.js # edit the first file in your editor of choice
134-
javascripting verify introduction.js # check that you did it correctly!
135-
```
136-
137-
When you're finished with all the exercises, go on to the next part.
138-
139-
## Part 3 – Learn You The Node.js For Much Win! (26 points, 2 per exercise)
140-
141-
Run the following command:
142-
143-
```
144-
learnyounode
145-
```
146-
147-
You'll see the menu:
148-
149-
<img src="img/learnyounode.png" width=600>
150-
151-
Complete all the exercises. There are 13 in total.
152-
153-
Unlike Part 1 and Part 2, this part is likely to contain new material that you might not be familiar with. It is expected that you'll read the [Node.js documentation](https://nodejs.org/api/index.html), do web searches, and come to office hours if you're stuck. In the real world, programmers often have to learn topics quickly in a just-in-time manner to solve problems they encounter. This is good practice! If you get stuck, come to office hours or open an issue in the [discussion](https://github.com/stanford-web-security/discussion/issues) repository.
154-
155-
It's easiest if you switch into the `src/learnyounode` folder and do your work in there. Here's an example:
156-
157-
```bash
158-
cd src/learnyounode
159-
learnyounode # select an exercise to complete
160-
vim hello-world.js # edit the first file in your editor of choice
161-
learnyounode verify hello-world.js # check that you did it correctly!
162-
```
163-
164-
When you're finished with all the exercises, go on to the next part.
165-
166-
## Part 4 – Survey (3 points)
167-
168-
Your feedback matters a lot! This is a brand new course, so please help us improve by answering the survey questions in `src/SURVEY.md`. As a reward, enjoy some easy points!
169-
170-
## Submit
171-
172-
### Before you submit
173-
174-
Ensure that the sanity tests pass:
175-
176-
```bash
177-
npm test
178-
```
179-
180-
This command just runs a basic sanity test that ensures your project passes `npm run lint`, has the right folder structure, and doesn't have any blank required files. If `npm test` doesn't report any errors that doesn't necessarily mean that you've solved every exercise perfectly!
181-
182-
### The moment of truth
183-
184-
When you're ready to submit your work, run the commands:
185-
186-
```bash
187-
git commit -am 'submit'
188-
git push
189-
```
190-
191-
You should submit early and often! There's no downside to repeatedly submitting your assignment. In fact, each time you submit your code is committed and pushed to GitHub which ensures that if disaster strikes you'll have a backup of your work! 😅
192-
193-
## Questions?
194-
195-
Come to office hours or open an issue in the [discussion](https://github.com/stanford-web-security/discussion/issues) repository.
3+
Assignment instructions: https://web.stanford.edu/class/cs253/assign0

img/javascripting.png

-172 KB
Binary file not shown.

img/learnyouhtml.png

-89.4 KB
Binary file not shown.

img/learnyounode.png

-140 KB
Binary file not shown.

0 commit comments

Comments
 (0)