Differences
This shows you the differences between two versions of the page.
|
se:labs:01 [2018/10/07 00:44] emilian.radoi [The Box Model] |
se:labs:01 [2023/10/10 01:12] (current) emilian.radoi [Feedback] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Lab 01 - Web Basics ====== | ====== Lab 01 - Web Basics ====== | ||
| + | |||
| + | **[[https://drive.google.com/file/d/10U06eHRDn0e0qfFdGXRvgmcUkJ0TmcxG/view?usp=sharing | Brief introduction video]]** | ||
| The web is the backbone of the internet, and the largest application platform today. This is all due to a core characteristic: | The web is the backbone of the internet, and the largest application platform today. This is all due to a core characteristic: | ||
| Line 208: | Line 210: | ||
| * **//GET//** - Requests a resource from the server (e.g. ''%%GET /index.html%%'') | * **//GET//** - Requests a resource from the server (e.g. ''%%GET /index.html%%'') | ||
| - | * **//PUT//** - Adds a new resource to the server (e.g. ''%%PUT /users/new%%'') | + | * **//POST//** - Adds a new resource to the server (e.g. ''%%POST /users/new%%'') |
| - | * **//POST//** - Edits a resource from the server (e.g. ''%%POST /users/ion%%'') | + | * **//PUT//** - Edits a resource from the server (e.g. ''%%PUT /users/ion%%'') |
| * **//DELETE//** - Deletes a resource from the server (e.g. ''%%DELETE /users/andrei%%'') | * **//DELETE//** - Deletes a resource from the server (e.g. ''%%DELETE /users/andrei%%'') | ||
| Line 457: | Line 459: | ||
| ===== JavaScript ===== | ===== JavaScript ===== | ||
| - | JavaScript is the programming language of the web. It runs in the browser, as well as on the server (as we'll see in the next days) and even on Arduino-like hardware. The syntax of JavaScript is very similar to C++, with a few small differences. Here's a small example: | + | JavaScript is the programming language of the web. It runs in the browser, as well as on the server, and even on Arduino-like hardware. The syntax of JavaScript is very similar to C++, with a few small differences. Here's a small example: |
| <code javascript> | <code javascript> | ||
| Line 481: | Line 483: | ||
| * You'll see a lot of code examples on the internet using ''%%var%%'' for variable declarations. We recommend that you use ''%%let%%''. If you want to learn more about the why, [[https://hackernoon.com/why-you-shouldnt-use-var-anymore-f109a58b9b70|read this great article from hackernoon.]] | * You'll see a lot of code examples on the internet using ''%%var%%'' for variable declarations. We recommend that you use ''%%let%%''. If you want to learn more about the why, [[https://hackernoon.com/why-you-shouldnt-use-var-anymore-f109a58b9b70|read this great article from hackernoon.]] | ||
| * You don't need any development environment to write JavaScript - you only need your browser and a simple text editor such as Notepad! Of course, a better text editor such as Visual Studio Code or Atom will improve your experience greatly. | * You don't need any development environment to write JavaScript - you only need your browser and a simple text editor such as Notepad! Of course, a better text editor such as Visual Studio Code or Atom will improve your experience greatly. | ||
| - | * Semicolons in JavaScript are optional. We recommend using something like [[https://github.com/sheerun/prettier-standard|prettier-standard]] paired with an editor such as [[https://code.visualstudio.com/|Visual Studio Code]] when developing in JavaScript | + | * Semicolons in JavaScript are optional. We recommend using something like [[https://github.com/sheerun/prettier-standard|prettier-standard]] paired with an editor such as [[https://code.visualstudio.com/|Visual Studio Code]] when developing in JavaScript. |
| - | We will delve deeper into JavaScript in the following days. | + | We will delve deeper into JavaScript in the lab. |
| === jQuery is not JavaScript === | === jQuery is not JavaScript === | ||
| A common mistake is to mix jQuery with JavaScript. This is caused by historic reasons and poor online documentation. What you need to know is that //jQuery is written **in** JavaScript//. It's just a library that provides extra APIs for interacting with the browser. In the early days of the internet, where each browser had a slightly different syntax, jQuery was necessary, but nowadays it's more of an impediment rather than a useful thing to use. | A common mistake is to mix jQuery with JavaScript. This is caused by historic reasons and poor online documentation. What you need to know is that //jQuery is written **in** JavaScript//. It's just a library that provides extra APIs for interacting with the browser. In the early days of the internet, where each browser had a slightly different syntax, jQuery was necessary, but nowadays it's more of an impediment rather than a useful thing to use. | ||
| + | |||
| + | ====== GitHub Pages ====== | ||
| + | |||
| + | [[https://pages.github.com/|GitHub Pages]] | ||
| + | |||
| + | [[https://guides.github.com/features/pages/|Getting started with GitHub Pages]] | ||
| + | |||
| + | ====== Tasks ====== | ||
| + | |||
| + | **Task 1** - Modify the //task.css// file from {{:se:labs:task1.zip|Task 1}} to make the human do something (e.g. jump). | ||
| + | |||
| + | **Task 2** - Create a personal page and host it using GitHub Pages. Here are two examples of personal pages: | ||
| + | * [[https://www.cosmindumitrache.com/|Example1]] | ||
| + | * [[https://juokaz.com/|Example2]] | ||
| + | |||
| + | ====== Feedback ====== | ||
| + | |||
| + | Please take a minute to fill in the **[[https://forms.gle/PNZYNNZFrVChLjag8 | feedback form]]** for this lab. | ||
