|
1 | | -# CS 253 Assignment 0 – Web Programming Adventure ✈️ 🌎 |
| 1 | +# CS 253 Assignment 0 – Web Programming Adventure ✈️ |
2 | 2 |
|
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 |
0 commit comments