diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477aefa51bfc29327200b.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477aefa51bfc29327200b.md index 7cc171c99e3..459141ec5c0 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477aefa51bfc29327200b.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477aefa51bfc29327200b.md @@ -9,7 +9,7 @@ dashedName: step-14 You have styled three elements by writing CSS inside the `style` tags. This works, but since there will be many more styles, it's best to put all the styles in a separate file and link to it. -We have created a separate `styles.css` file for you and switched the editor view to that file. You can change between files with the tabs at the top of the editor. +A separate `styles.css` file has been created for you and the editor view has been switched to that file. You can change between files with the tabs at the top of the editor. Start by rewriting the styles you have created into the `styles.css` file. Make sure to exclude the opening and closing `style` tags. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb0367417b2b2512bed.md b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb0367417b2b2512bed.md index b86ef8425c7..3319bb6b71a 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb0367417b2b2512bed.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb0367417b2b2512bed.md @@ -18,7 +18,7 @@ During the development process, it is important to be able to check what’s goi Node is just a JavaScript environment. Like client side JavaScript, you can use the console to display useful debug information. On your local machine, you would see console output in a terminal. On Gitpod, a terminal is open at the bottom of the editor by default. -We recommend to keep the terminal open while working at these challenges. By reading the output in the terminal, you can see any errors that may occur. +It is recommended to keep the terminal open while working at these challenges. By reading the output in the terminal, you can see any errors that may occur. The server must be restarted after making changes to its files. @@ -26,7 +26,7 @@ You can stop the server from the terminal using `Ctrl + C` and start it using No For example, the `"start": "node server.js"` script would be run from the terminal using `npm run start`. -To implement server auto restarting on file save Node provides the `--watch` flag you can add to your start script `"start": "node --watch server.js"` or you can install an npm package like `nodemon`. We will leave this to you as an exercise. +To implement server auto restarting on file save Node provides the `--watch` flag you can add to your start script `"start": "node --watch server.js"` or you can install a npm package like `nodemon`. This will be left to you as an exercise. # --instructions-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb0367417b2b2512bee.md b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb0367417b2b2512bee.md index 1137f7c1500..66a056afefe 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb0367417b2b2512bee.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb0367417b2b2512bee.md @@ -8,9 +8,9 @@ dashedName: start-a-working-express-server # --description-- -In the first two lines of the file `myApp.js`, you can see how easy it is to create an Express app object. This object has several methods, and you will learn many of them in these challenges. One fundamental method is `app.listen(port)`. It tells your server to listen on a given port, putting it in running state. For testing reasons, we need the app to be running in the background so we added this method in the `server.js` file for you. +In the first two lines of the file `myApp.js`, you can see how easy it is to create an Express app object. This object has several methods, and you will learn many of them in these challenges. One fundamental method is `app.listen(port)`. It tells your server to listen on a given port, putting it in running state. For testing reasons, the app needs to be running in the background, so this method has been added in the `server.js` file for you. -Let’s serve our first string! In Express, routes takes the following structure: `app.METHOD(PATH, HANDLER)`. METHOD is an http method in lowercase. PATH is a relative path on the server (it can be a string, or even a regular expression). HANDLER is a function that Express calls when the route is matched. Handlers take the form `function(req, res) {...}`, where req is the request object, and res is the response object. For example, the handler +Let’s serve our first string! In Express, routes takes the following structure: `app.METHOD(PATH, HANDLER)`. METHOD is an HTTP method in lowercase. PATH is a relative path on the server (it can be a string, or even a regular expression). HANDLER is a function that Express calls when the route is matched. Handlers take the form `function(req, res) {...}`, where req is the request object, and res is the response object. For example, the handler ```js function(req, res) { @@ -24,7 +24,8 @@ will serve the string 'Response String'. Use the `app.get()` method to serve the string "Hello Express" to GET requests matching the `/` (root) path. Be sure that your code works by looking at the logs, then see the results in the preview if you are using Gitpod. -**Note:** All the code for these lessons should be added in between the few lines of code we have started you off with. +**Note:** All the code for these lessons should be added in between the few lines of code that have been +written for you. # --hints-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb0367417b2b2512bef.md b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb0367417b2b2512bef.md index b5b82c2769a..ecd750bb74f 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb0367417b2b2512bef.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb0367417b2b2512bef.md @@ -8,7 +8,7 @@ dashedName: serve-an-html-file # --description-- -You can respond to requests with a file using the `res.sendFile(path)` method. You can put it inside the `app.get('/', ...)` route handler. Behind the scenes, this method will set the appropriate headers to instruct your browser on how to handle the file you want to send, according to its type. Then it will read and send the file. This method needs an absolute file path. We recommend you to use the Node global variable `__dirname` to calculate the path like this: +You can respond to requests with a file using the `res.sendFile(path)` method. You can put it inside the `app.get('/', ...)` route handler. Behind the scenes, this method will set the appropriate headers to instruct your browser on how to handle the file you want to send, according to its type. Then it will read and send the file. This method needs an absolute file path. It's recommended that you use the Node global variable `__dirname` to calculate the path like this: ```js absolutePath = __dirname + '/relativePath/file.ext' @@ -16,7 +16,7 @@ absolutePath = __dirname + '/relativePath/file.ext' # --instructions-- -Send the `/views/index.html` file as a response to GET requests to the `/` path. If you view your live app, you should see a big HTML heading (and a form that we will use later…), with no style applied. +Send the `/views/index.html` file as a response to GET requests to the `/` path. If you view your live app, you should see a big HTML heading (and a form that you will use later…), with no style applied. **Note:** You can edit the solution of the previous challenge or create a new one. If you create a new solution, keep in mind that Express evaluates routes from top to bottom, and executes the handler for the first match. You have to comment out the preceding solution, or the server will keep responding with a string. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb0367417b2b2512bf0.md b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb0367417b2b2512bf0.md index 066b9e3c1ca..d3f778d52b7 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb0367417b2b2512bf0.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb0367417b2b2512bf0.md @@ -12,7 +12,7 @@ An HTML server usually has one or more directories that are accessible by the us In Express, you can put in place this functionality using the middleware `express.static(path)`, where the `path` parameter is the absolute path of the folder containing the assets. -If you don’t know what middleware is... don’t worry, we will discuss in detail later. Basically, middleware are functions that intercept route handlers, adding some kind of information. A middleware needs to be mounted using the method `app.use(path, middlewareFunction)`. The first `path` argument is optional. If you don’t pass it, the middleware will be executed for all requests. +If you don’t know what middleware is... don’t worry, this will be discussed in detail later. Basically, middleware are functions that intercept route handlers, adding some kind of information. A middleware needs to be mounted using the method `app.use(path, middlewareFunction)`. The first `path` argument is optional. If you don’t pass it, the middleware will be executed for all requests. # --instructions-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb1367417b2b2512bf1.md b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb1367417b2b2512bf1.md index c1e29c654dc..3c46c6e51e1 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb1367417b2b2512bf1.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb1367417b2b2512bf1.md @@ -10,7 +10,7 @@ dashedName: serve-json-on-a-specific-route While an HTML server serves HTML, an API serves data. A REST (REpresentational State Transfer) API allows data exchange in a simple way, without the need for clients to know any detail about the server. The client only needs to know where the resource is (the URL), and the action it wants to perform on it (the verb). The GET verb is used when you are fetching some information, without modifying anything. These days, the preferred data format for moving information around the web is JSON. Simply put, JSON is a convenient way to represent a JavaScript object as a string, so it can be easily transmitted. -Let's create a simple API by creating a route that responds with JSON at the path `/json`. You can do it as usual, with the `app.get()` method. Inside the route handler, use the method `res.json()`, passing in an object as an argument. This method closes the request-response loop, returning the data. Behind the scenes, it converts a valid JavaScript object into a string, then sets the appropriate headers to tell your browser that you are serving JSON, and sends the data back. A valid object has the usual structure `{key: data}`. `data` can be a number, a string, a nested object or an array. `data` can also be a variable or the result of a function call, in which case it will be evaluated before being converted into a string. +The first thing you will create is a simple API. Create a route that responds with JSON at the path `/json`. You can do it as usual, with the `app.get()` method. Inside the route handler, use the method `res.json()`, passing in an object as an argument. This method closes the request-response loop, returning the data. Behind the scenes, it converts a valid JavaScript object into a string, then sets the appropriate headers to tell your browser that you are serving JSON, and sends the data back. A valid object has the usual structure `{key: data}`. `data` can be a number, a string, a nested object or an array. `data` can also be a variable or the result of a function call, in which case it will be evaluated before being converted into a string. # --instructions-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb1367417b2b2512bf2.md b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb1367417b2b2512bf2.md index 4c5967276f1..397414eebd1 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb1367417b2b2512bf2.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb1367417b2b2512bf2.md @@ -14,7 +14,7 @@ The environment variables are accessible from the app as `process.env.VAR_NAME`. # --instructions-- -Let's add an environment variable as a configuration option. +For this challenge you should add an environment variable as a configuration option. Create a `.env` file in the root of your project directory, and store the variable `MESSAGE_STYLE=uppercase` in it. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb1367417b2b2512bf4.md b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb1367417b2b2512bf4.md index 60b5b08e27d..79f974bbd48 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb1367417b2b2512bf4.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb1367417b2b2512bf4.md @@ -21,7 +21,7 @@ app.get('/user', function(req, res, next) { }); ``` -This approach is useful to split the server operations into smaller units. That leads to a better app structure, and the possibility to reuse code in different places. This approach can also be used to perform some validation on the data. At each point of the middleware stack you can block the execution of the current chain and pass control to functions specifically designed to handle errors. Or you can pass control to the next matching route, to handle special cases. We will see how in the advanced Express section. +This approach is useful to split the server operations into smaller units. That leads to a better app structure, and the possibility to reuse code in different places. This approach can also be used to perform some validation on the data. At each point of the middleware stack you can block the execution of the current chain and pass control to functions specifically designed to handle errors. # --instructions-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb2367417b2b2512bf5.md b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb2367417b2b2512bf5.md index 5f2930665f2..a24909e80c9 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb2367417b2b2512bf5.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb2367417b2b2512bf5.md @@ -8,7 +8,7 @@ dashedName: get-route-parameter-input-from-the-client # --description-- -When building an API, we have to allow users to communicate to us what they want to get from our service. For example, if the client is requesting information about a user stored in the database, they need a way to let us know which user they're interested in. One possible way to achieve this result is by using route parameters. Route parameters are named segments of the URL, delimited by slashes (/). Each segment captures the value of the part of the URL which matches its position. The captured values can be found in the `req.params` object. +When building an API, you have to allow users to communicate to us what they want to get from our service. For example, if the client is requesting information about a user stored in the database, they need a way to let us know which user they're interested in. One possible way to achieve this result is by using route parameters. Route parameters are named segments of the URL, delimited by slashes (/). Each segment captures the value of the part of the URL which matches its position. The captured values can be found in the `req.params` object.
route_path: '/user/:userId/book/:bookId'
actual_request_URL: '/user/546/book/6754'
req.params: {userId: '546', bookId: '6754'}
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb2367417b2b2512bf8.md b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb2367417b2b2512bf8.md index d09b23642f8..153ec408627 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb2367417b2b2512bf8.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-node-and-express/587d7fb2367417b2b2512bf8.md @@ -8,11 +8,11 @@ dashedName: get-data-from-post-requests # --description-- -Mount a POST handler at the path `/name`. It’s the same path as before. We have prepared a form in the html frontpage. It will submit the same data of exercise 10 (Query string). If the body-parser is configured correctly, you should find the parameters in the object `req.body`. Have a look at the usual library example: +Mount a POST handler at the path `/name`. It’s the same path as before. A form has been prepared in the html frontpage. It will submit the same data of exercise 10 (Query string). If the body-parser is configured correctly, you should find the parameters in the object `req.body`. Have a look at the usual library example:
route: POST '/library'
urlencoded_body: userId=546&bookId=6754
req.body: {userId: '546', bookId: '6754'}
-Respond with the same JSON object as before: `{name: 'firstname lastname'}`. Test if your endpoint works using the html form we provided in the app frontpage. +Respond with the same JSON object as before: `{name: 'firstname lastname'}`. Test if your endpoint works using the html form provided in the app frontpage. Tip: There are several other http methods other than GET and POST. And by convention there is a correspondence between the http verb, and the operation you are going to execute on the server. The conventional mapping is: diff --git a/curriculum/challenges/english/25-front-end-development/workshop-npm-packages/587d7fb5367417b2b2512c03.md b/curriculum/challenges/english/25-front-end-development/workshop-npm-packages/587d7fb5367417b2b2512c03.md index adc3014ea45..d22fdad7c93 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-npm-packages/587d7fb5367417b2b2512c03.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-npm-packages/587d7fb5367417b2b2512c03.md @@ -8,7 +8,7 @@ dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-depende # --description-- -Similar to how the tilde we learned about in the last challenge allows npm to install the latest PATCH for a dependency, the caret (`^`) allows npm to install future updates as well. The difference is that the caret will allow both MINOR updates and PATCHes. +Similar to how the tilde you learned about in the last challenge allows npm to install the latest PATCH for a dependency, the caret (`^`) allows npm to install future updates as well. The difference is that the caret will allow both MINOR updates and PATCHes. Your current version of `@freecodecamp/example` should be `~1.2.13` which allows npm to install to the latest `1.2.x` version. If you were to use the caret (^) as a version prefix instead, npm would be allowed to update to any `1.x.x` version. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md b/curriculum/challenges/english/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md index a1a3c1321f5..1108ae1f99e 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md @@ -7,7 +7,7 @@ dashedName: step-23 # --description-- -Now we can add the horizontal spacing using `flex`. In your `p` selector, add a `display` property set to `flex` and a `justify-content` property set to `space-between`. +Now you can add the horizontal spacing using `flex`. In your `p` selector, add a `display` property set to `flex` and a `justify-content` property set to `space-between`. # --hints-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md index 38ec100fd5a..5a7a433c865 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md @@ -7,7 +7,7 @@ dashedName: step-10 # --description-- -It's time to test each of the functions. You can use any of the recipes for this, but let's start with `recipe1`. +It's time to test each of the functions. You can use any of the recipes for this, but this tutorial will start with `recipe1`. Create three new variables: `recipe1AverageRating`, `recipe1TotalIngredients`, and `recipe1DifficultyLevel`. Assign them the values by calling the corresponding function for each variable and passing in the appropriate `recipe1` property. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md index 6e051af223e..dc26e12dbee 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md @@ -7,7 +7,7 @@ dashedName: step-5 # --description-- -Before we move on, you should practice how to access properties from an object. +Before you move on, you should practice how to access properties from an object. You can use either dot (`.`) or bracket (`[]`) notation to do this. Here's an example: diff --git a/curriculum/challenges/english/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md b/curriculum/challenges/english/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md index 070dc57d065..b71fa4a9858 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md @@ -11,7 +11,7 @@ Margin is the area outside of the box, and can be used to control the space betw Here the bottom element has a larger top margin, pushing it further down the page. -Now that you quickly reviewed the CSS box model, let's get started on the Rothko painting. +Now that you quickly reviewed the CSS box model, it's time to get started on the Rothko painting. Remove the `` element.