diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md
index 0226992eec9..e6bf7fcd049 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md
@@ -1,6 +1,6 @@
---
id: bd7158d8c242eddfaeb5bd13
-title: Build a Personal Portfolio Webpage
+title: 製作一個個人作品集展示頁
challengeType: 14
forumTopicId: 301143
dashedName: build-a-personal-portfolio-webpage
@@ -8,34 +8,34 @@ dashedName: build-a-personal-portfolio-webpage
# --description--
-**Objective:** Build an app that is functionally similar to https://personal-portfolio.freecodecamp.rocks
+**目標：** 構建一個功能類似於 https://personal-portfolio.freecodecamp.rocks 的應用程序
-**User Stories:**
+**需求：**
-1. Your portfolio should have a welcome section with an `id` of `welcome-section`
-1. The welcome section should have an `h1` element that contains text
-1. Your portfolio should have a projects section with an `id` of `projects`
-1. The projects section should contain at least one element with a `class` of `project-tile` to hold a project
-1. The projects section should contain at least one link to a project
-1. Your portfolio should have a navbar with an id of `navbar`
-1. The navbar should contain at least one link that you can click on to navigate to different sections of the page
-1. Your portfolio should have a link with an id of `profile-link`, which opens your GitHub or freeCodeCamp profile in a new tab
-1. Your portfolio should have at least one media query
-1. The height of the welcome section should be equal to the height of the viewport
-1. The navbar should always be at the top of the viewport
+1. 你的作品集應該有一個 `id` 爲 `welcome-section` 的歡迎部分
+1. 歡迎部分應該有一個包含文本的 `h1` 元素
+1. 你的作品集應該有一個 `id` 爲 `projects` 的項目部分
+1. 項目部分應該包含至少一個 `class` 爲 `project-tile` 的元素來保存項目
+1. 項目部分應該包含至少一個項目的鏈接
+1. 你的作品集應該有一個 id 爲 `navbar` 的導航欄
+1. 導航欄應該至少包含一個鏈接，你可以點擊它來導航到頁面的不同部分
+1. 你的作品集應該有一個 id 爲 `profile-link` 的鏈接，在新標籤中打開你的 GitHub 或 freeCodeCodeCamp 個人主頁
+1. 你的作品集應該至少有一個媒體查詢
+1. 歡迎部分的高度應該等於視口的高度
+1. 導航欄應該始終位於視口的頂部
-Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
+完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！
# --hints--
-Your portfolio should have a "Welcome" section with an `id` of `welcome-section`.
+你的作品集應該有一個 `id` 爲 `welcome-section` 的歡迎部分。
```js
const el = document.getElementById('welcome-section')
assert(!!el);
```
-Your `#welcom-section` element should contain an `h1` element.
+你的 `#welcom-section` 元素應該包含一個 `h1` 元素。
```js
assert.isAbove(
@@ -45,7 +45,7 @@ assert.isAbove(
);
```
-You should not have any empty `h1` elements within `#welcome-section` element.
+在 `#welcome-section` 元素中，你不應該有任何空的 `h1` 元素。
```js
assert.isAbove(
@@ -56,14 +56,14 @@ assert.isAbove(
);
```
-You should have a "Projects" section with an `id` of `projects`.
+你應該有一個 `id` 爲 `projects` 的項目部分。
```js
const el = document.getElementById('projects')
assert(!!el);
```
-Your portfolio should contain at least one elment with a class of `project-tile`.
+你的作品集應該包含至少一個 class 爲 `project-tile` 的元素。
```js
assert.isAbove(
@@ -72,20 +72,20 @@ assert.isAbove(
);
```
-Your `#projects` element should contain at least one `a` element.
+你的 `#projects` 元素應該包含至少一個 `a` 元素。
```js
assert.isAbove(document.querySelectorAll('#projects a').length, 0);
```
-Your portfolio should have a navbar with an `id` of `navbar`.
+你的作品集應該有一個 `id` 爲 `navbar` 的導航欄。
```js
const el = document.getElementById('navbar');
assert(!!el);
```
-Your `#navbar` element should contain at least one `a` element whose `href` attribute starts with `#`.
+你的 `#navbar` 元素應該包含至少一個 `a` 元素，它的 `href` 屬性以 `#` 開頭。
```js
const links = [...document.querySelectorAll('#navbar a')].filter(
@@ -99,27 +99,27 @@ assert.isAbove(
);
```
-Your portfolio should have an `a` element with an `id` of `profile-link`.
+你的作品集應該有一個 `id` 爲 `profile-link` 的 `a` 元素。
```js
const el = document.getElementById('profile-link');
assert(!!el && el.tagName === 'A')
```
-Your `#profile-link` element should have a `target` attribute of `_blank`.
+你的 `#profile-link` 元素應該有一個值爲 `_blank` 的 `target` 屬性。
```js
const el = document.getElementById('profile-link');
assert(!!el && el.target === '_blank')
```
-Your portfolio should use at least one media query.
+你的作品集應該至少有一個媒體查詢。
```js
assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1);
```
-Your `#navbar` element should always be at the top of the viewport.
+你的 `#navbar` 元素應該始終位於視口的頂部。
```js
(async () => {
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
index 937c4482c93..862f9d6f0fd 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
@@ -1,6 +1,6 @@
---
id: 587d78af367417b2b2512b03
-title: Build a Survey Form
+title: 製作一個調查表格
challengeType: 14
forumTopicId: 301145
dashedName: build-a-survey-form
@@ -8,277 +8,277 @@ dashedName: build-a-survey-form
# --description--
-**Objective:** Build an app that is functionally similar to https://survey-form.freecodecamp.rocks
+**目標：** 構建一個功能類似於 https://survey-form.freecodecamp.rocks 的應用程序
-**User Stories:**
+**需求：**
-1. You should have a page title in an `h1` element with an `id` of `title`
-1. You should have a short explanation in a `p` element with an `id` of `description`
-1. You should have a `form` element with an `id` of `survey-form`
-1. Inside the form element, you are **required** to enter your name in an `input` field that has an `id` of `name` and a `type` of `text`
-1. Inside the form element, you are **required** to enter your email in an `input` field that has an `id` of `email`
-1. If you enter an email that is not formatted correctly, you will see an HTML5 validation error
-1. Inside the form, you can enter a number in an `input` field that has an `id` of `number`
-1. If you enter non-numbers in the number input, you will see an HTML5 validation error
-1. If you enter numbers outside the range of the number input, which are defined by the `min` and `max` attributes, you will see an HTML5 validation error
-1. For the name, email, and number input fields, you can see corresponding `label` elements in the form, that describe the purpose of each field with the following ids: `id="name-label"`, `id="email-label"`, and `id="number-label"`
-1. For the name, email, and number input fields, you can see placeholder text that gives a description or instructions for each field
-1. Inside the form element, you should have a `select` dropdown element with an `id` of `dropdown` and at least two options to choose from
-1. Inside the form element, you can select an option from a group of at least two radio buttons that are grouped using the `name` attribute
-1. Inside the form element, you can select several fields from a series of checkboxes, each of which must have a `value` attribute
-1. Inside the form element, you are presented with a `textarea` for additional comments
-1. Inside the form element, you are presented with a button with `id` of `submit` to submit all the inputs
+1. 你應該有一個 `id` 爲 `title` 的 `h1` 元素
+1. 你應該有一個 `id` 爲 `description` 的 `p` 元素
+1. 你應該有一個 `id` 爲 `survey-form` 的 `form` 元素
+1. 在表單元素內，你**需要**在 `input` 字段中輸入你的名字，該字段的 `id` 爲 `name`，`type` 爲 `text`
+1. 在表單元素內，你**需要**在 `input` 字段中輸入你的郵箱，該字段的 `id` 爲 `email`
+1. 如果你輸入了格式不正確的郵箱，你將會看見 HTML5 驗證錯誤信息
+1. 在表單中，你可以在 `input` 字段中輸入一個數字，該字段的 `id` 爲 `number`
+1. 如果你在數字輸入框內輸入非數字內容，你會看到 HTML5 驗證錯誤信息
+1. 如果你輸入的數字超出了範圍（使用 `min` 和 `max` 屬性定義），你將會看見 HTML5 驗證錯誤信息
+1. 表單中的名字、郵箱和數字輸入框需有對應的包含描述輸入框用途的 `label` 元素，id 應分別爲 `id="name-label"`、`id="email-label"` 和 `id="number-label"`
+1. 在表單中的名字、郵箱和數字輸入框中，你能看到各自的描述文字作爲佔位符
+1. 在表單元素內， 你應該有一個 `select` 下拉元素， `id` 爲 `dropdown`，它至少有兩個選項
+1. 在表單元素內， 你可以從至少兩個單選按鈕的組中選擇一個選項，該選項使用 `name` 屬性
+1. 在表單元素內，你可以從一系列複選框中選擇幾個字段，每個複選框都必須具有 `value` 屬性
+1. 在表單元素內，你會有一個 `textarea` 以獲取額外的評論
+1. 在表單元素內，你將收到一個按鈕，其 `id` 爲 `submit`，提交所有輸入
-Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
+完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！
# --hints--
-You should have an `h1` element with an `id` of `title`
+你應該有一個 `id` 爲 `title` 的 `h1` 元素。
```js
const el = document.getElementById('title')
assert(!!el && el.tagName === 'H1')
```
-Your `#title` should not be empty
+你的 `#title` 不應爲空。
```js
const el = document.getElementById('title')
assert(!!el && el.innerText.length > 0)
```
-You should have a `p` element with an `id` of `description`
+你應該有一個 `id` 爲 `description` 的 `p` 元素。
```js
const el = document.getElementById('description')
assert(!!el && el.tagName === 'P')
```
-Your `#description` should not be empty
+你的 `#description` 不應爲空。
```js
const el = document.getElementById('description')
assert(!!el && el.innerText.length > 0)
```
-You should have a `form` element with an `id` of `survey-form`
+你應該有一個 `id` 爲 `survey-form` 的 `form` 元素
```js
const el = document.getElementById('survey-form')
assert(!!el && el.tagName === 'FORM')
```
-You should have an `input` element with an `id` of `name`
+你應該有一個 `id` 爲 `name` 的 `input` 元素。
```js
const el = document.getElementById('name')
assert(!!el && el.tagName === 'INPUT')
```
-Your `#name` should have a `type` of `text`
+你的 `#name` 元素應該具有 `type` 爲 `text`。
```js
const el = document.getElementById('name')
assert(!!el && el.type === 'text')
```
-Your `#name` should require input
+你的 `#name` 元素應該需要輸入。
```js
const el = document.getElementById('name')
assert(!!el && el.required)
```
-Your `#name` should be a descedant of `#survey-form`
+你的 `#name` 元素應該是 `#survey-form` 元素的子元素。
```js
const el = document.querySelector('#survey-form #name')
assert(!!el)
```
-You should have an `input` element with an `id` of `email`
+你應該有一個 `id` 爲 `email` 的 `input` 元素
```js
const el = document.getElementById('email')
assert(!!el && el.tagName === 'INPUT')
```
-Your `#email` should have a `type` of `email`
+你的 `#email` 元素應該具有 `type` 爲 `email`。
```js
const el = document.getElementById('email')
assert(!!el && el.type === 'email')
```
-Your `#email` should require input
+你的 `#email` 元素應該需要輸入。
```js
const el = document.getElementById('email')
assert(!!el && el.required)
```
-Your `#email` should be a descedant of `#survey-form`
+你的 `#email` 元素應該是 `#survey-form` 元素的子元素。
```js
const el = document.querySelector('#survey-form #email')
assert(!!el)
```
-You should have an `input` element with an `id` of `number`
+你應該有一個 `id` 爲 `number` 的 `input` 元素。
```js
const el = document.getElementById('number')
assert(!!el && el.tagName === 'INPUT')
```
-Your `#number` should be a descedant of `#survey-form`
+你的 `#number` 元素應該是 `#survey-form` 元素的子元素。
```js
const el = document.querySelector('#survey-form #number')
assert(!!el)
```
-Your `#number` should have a `type` of `number`
+你的 `#number` 元素應該具有 `type` 爲 `number`。
```js
const el = document.getElementById('number')
assert(!!el && el.type === 'number')
```
-Your `#number` should have a `min` attribute with a numeric value
+你的 `#number` 應該有一個值爲數字的 `min` 屬性。
```js
const el = document.getElementById('number')
assert(!!el && el.min && isFinite(el.min))
```
-Your `#number` should have a `max` attribute with a numeric value
+你的 `#number` 應該有一個值爲數字的 `max` 屬性。
```js
const el = document.getElementById('number')
assert(!!el && el.max && isFinite(el.max))
```
-You should have a `label` element with an `id` of `name-label`
+你應該有一個 `id` 爲 `name-label` 的 `label` 元素。
```js
const el = document.getElementById('name-label')
assert(!!el && el.tagName === 'LABEL')
```
-You should have a `label` element with an `id` of `email-label`
+你應該有一個 `id` 爲 `email-label` 的 `label` 元素。
```js
const el = document.getElementById('email-label')
assert(!!el && el.tagName === 'LABEL')
```
-You should have a `label` element with an `id` of `number-label`
+你應該有一個 `id` 爲 `number-label` 的 `label` 元素。
```js
const el = document.getElementById('number-label')
assert(!!el && el.tagName === 'LABEL')
```
-Your `#name-label` should not be empty
+你的 `#name-label` 不應爲空。
```js
const el = document.getElementById('name-label')
assert(!!el && el.innerText.length > 0)
```
-Your `#email-label` should not be empty
+你的 `#email-label` 不應爲空。
```js
const el = document.getElementById('email-label')
assert(!!el && el.innerText.length > 0)
```
-Your `#number-label` should not be empty
+你的 `#number-label` 不應爲空。
```js
const el = document.getElementById('number-label')
assert(!!el && el.innerText.length > 0)
```
-Your `#name-label` should be a descedant of `#survey-form`
+你的 `#name-label` 元素應該是 `#survey-form` 元素的子元素。
```js
const el = document.querySelector('#survey-form #name-label')
assert(!!el)
```
-Your `#email-label` should be a descedant of `#survey-form`
+你的 `#email-label` 元素應該是 `#survey-form` 元素的子元素。
```js
const el = document.querySelector('#survey-form #email-label')
assert(!!el)
```
-Your `#number-label` should be a descedant of `#survey-form`
+你的 `#number-label` 元素應該是 `#survey-form` 元素的子元素。
```js
const el = document.querySelector('#survey-form #number-label')
assert(!!el)
```
-Your `#name` should have a `placeholder` attribute and value
+你的 `#name` 元素應該有 `placeholder` 屬性與佔位符文本。
```js
const el = document.getElementById('name')
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
```
-Your `#email` should have a `placeholder` attribute and value
+你的 `#email` 元素應該有 `placeholder` 屬性與佔位符文本。
```js
const el = document.getElementById('email')
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
```
-Your `#number` should have a `placeholder` attribute and value
+你的 `#number` 元素應該有 `placeholder` 屬性與佔位符文本。
```js
const el = document.getElementById('number')
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
```
-You should have a `select` field with an `id` of `dropdown`
+你應該有一個 `id` 爲 `dropdown` 的 `select` 元素。
```js
const el = document.getElementById('dropdown')
assert(!!el && el.tagName === 'SELECT')
```
-Your `#dropdown` should have at least two selectable (not disabled) `option` elements
+你的 `#dropdown` 應該至少有兩個可選擇（未禁用）`option` 元素。
```js
const els = document.querySelectorAll('#dropdown option:not([disabled])')
assert(els.length >= 2)
```
-Your `#dropdown` should be a descendant of `#survey-form`
+你的 `#dropdown` 元素應該是 `#survey-form` 元素的子元素。
```js
const el = document.querySelector('#survey-form #dropdown')
assert(!!el)
```
-You should have at least two `input` elements with a `type` of `radio` (radio buttons)
+你應該有至少兩個 `input` 元素，`type` 爲 `radio`（單選按鈕）。
```js
const els = document.querySelectorAll('input[type="radio"]')
assert(els.length >= 2)
```
-You should have at least two radio buttons that are descendants of `#survey-form`
+你至少應該有兩個單選按鈕，是 `#survey-form` 的子元素。
```js
const els = document.querySelectorAll('#survey-form input[type="radio"]')
assert(els.length >= 2)
```
-All your radio buttons should have a `value` attribute and value
+你所有的單選按鈕都應該有一個 `value` 屬性和值。
```js
const els1 = document.querySelectorAll('input[type="radio"]')
@@ -286,7 +286,7 @@ const els2 = document.querySelectorAll('input[type="radio"][value=""], input[typ
assert(els1.length > 0 && els2.length === 0)
```
-All your radio buttons should have a `name` attribute and value
+你所有的單選按鈕都應該有一個 `name` 屬性和值。
```js
const els1 = document.querySelectorAll('input[type="radio"]')
@@ -294,7 +294,7 @@ const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type
assert(els1.length > 0 && els2.length === 0)
```
-Every radio button group should have at least 2 radio buttons
+每個單選按鈕組應至少有 2 個單選按鈕。
```js
const radioButtons = document.querySelectorAll('input[type="radio"]');
@@ -316,14 +316,14 @@ groupKeys.forEach(key => {
assert(groupKeys.length > 0)
```
-You should have at least two `input` elements with a `type` of `checkbox` (checkboxes) that are descendants of `#survey-form`
+你應該至少有兩個 `input` 元素，`type` 爲 `checkbox`（複選框），它們是 `#survey-form` 的子元素。
```js
const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
assert(els.length >= 2)
```
-All your checkboxes inside `#survey-form` should have a `value` attribute and value
+你在 `#survey-form` 中的所有複選框都應該有 `value` 屬性和值。
```js
const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]')
@@ -331,28 +331,28 @@ const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][valu
assert(els1.length > 0 && els2.length === 0)
```
-You should have at least one `textarea` element that is a descendant of `#survey-form`
+你至少應該有一個 `textarea` 元素，它是 `#survey-form` 的子元素。
```js
const el = document.querySelector('#survey-form textarea')
assert(!!el)
```
-You should have an `input` or `button` element with an `id` of `submit`
+你應該有一個 `id` 爲 `submit` 的 `input` 或 `button` 元素。
```js
const el = document.getElementById('submit')
assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'))
```
-Your `#submit` should have a `type` of `submit`
+你的 `#submit` 元素應該具有 `type` 爲 `submit`
```js
const el = document.getElementById('submit')
assert(!!el && el.type === 'submit')
```
-Your `#submit` should be a descendant of `#survey-form`
+你的 `#submit` 元素應該是 `#survey-form` 元素的子元素。
```js
const el = document.querySelector('#survey-form #submit')
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md
index 6c433375ba7..178881da2ab 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md
@@ -1,6 +1,6 @@
---
id: 587d78b0367417b2b2512b05
-title: Build a Technical Documentation Page
+title: 製作一個技術文檔頁面
challengeType: 14
forumTopicId: 301146
dashedName: build-a-technical-documentation-page
@@ -8,45 +8,45 @@ dashedName: build-a-technical-documentation-page
# --description--
-**Objective:** Build an app that is functionally similar to https://technical-documentation-page.freecodecamp.rocks
+**目標：** 構建一個功能類似於 https://technical-documentation-page.freecodecamp.rocks 的應用程序
-**User Stories:**
+**需求：**
-1. You can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation)
-1. Within the `#main-doc` element, you can see several `section` elements, each with a class of `main-section`. There should be a minimum of five
-1. The first element within each `.main-section` should be a `header` element, which contains text that describes the topic of that section.
-1. Each `section` element with the class of `main-section` should also have an `id` that corresponds with the text of each `header` contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding `id="JavaScript_and_Java"`)
-1. The `.main-section` elements should contain at least ten `p` elements total (not each)
-1. The `.main-section` elements should contain at least five `code` elements total (not each)
-1. The `.main-section` elements should contain at least five `li` items total (not each)
-1. You can see a `nav` element with a corresponding `id="navbar"`
-1. The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation
-1. Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section`
-1. The `header` element in the `#navbar` must come before any link (`a`) elements in the navbar
-1. Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world")
-1. When you click on a navbar element, the page should navigate to the corresponding section of the `main-doc` element (e.g. If you click on a `nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id, and contains the corresponding header)
-1. On regular sized devices (laptops, desktops), the element with `id="navbar"` should be shown on the left side of the screen and should always be visible to the user
-1. Your technical documentation should use at least one media query
+1. 你能看見一個 `id="main-doc"` 的 `main`元素，它包含頁面的主要內容（技術文檔）。
+1. 在 `#main-doc` 元素內，我能看見至少 5 個 `section` 元素，每個元素都有一個 class 爲 `main-section`。 應存在至少 5 個這樣的元素。
+1. 每個 `.main-section` 中的第一個元素應該是 `header` 元素，其中包含描述該部分主題的文本。
+1. class 爲 `main-section` 的每個 `section` 元素應該有一個與包含在其中的每個 `header` 的文本相對應的 `id`。 所有空格都應該被替換爲下劃線（例如，包含標題 “JavaScript and Java” 的 section 應有一個相應的 `id="JavaScript_and_Java"`）。
+1. 所有 `.main-section` 元素總計（不是每個）包含至少 10 個 `p` 元素。
+1. 所有 `.main-section` 元素總計（不是每個）包含至少 5 個 `code` 元素。
+1. 所有 `.main-section` 元素總計（不是每個）包含至少 5 個 `li` 元素。
+1. 你能看見一個 `id="navbar"` 的 `nav` 元素。
+1. navbar 元素應包含一個 `header` 元素，其中包含描述技術文檔主題的文本。
+1. 此外，導航欄應包含 class 爲 `nav-link` 的鏈接元素（`a`）。 每個 class 爲 `main-section` 的元素都需要有一個。
+1. `#navbar` 中的 `header` 元素必須在任何鏈接 (`a`) 之前。
+1. class 爲 `nav-link` 的每個元素都應該包含每個 `section` 的 `header` 文本對應的文本（例如，如果你有一個 “Hello world” 部分/標題，你的導航欄應該有一個包含文本 “Hello world” 的元素）。
+1. 當你點擊一個 navbar 元素時，頁面應該導航到 `main-doc` 元素的相應部分（例如，如果你點擊包含文本 “Hello world” 的 `nav-link` 元素，頁面將導航到一個帶有對應 header 和 id 的 `section` 元素）。
+1. 在常規尺寸的設備上（筆記本電腦、臺式機），帶有 `id="navbar"` 的元素應該顯示在屏幕左側，並且始終對用戶可見。
+1. 你的技術文檔應該使用至少一個媒體查詢。
-Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
+完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！
# --hints--
-You should have a `main` element with an `id` of `main-doc`
+你應該有一個 `id` 爲 `main-doc` 的 `main` 元素。
```js
const el = document.getElementById('main-doc')
assert(!!el)
```
-You should have at least five `section` elements with a class of `main-section`
+你至少應該有 5 個 class 爲 `main-section` 的 `section` 元素。
```js
const els = document.querySelectorAll('#main-doc section')
assert(els.length >= 5)
```
-All of your `.main-section` elements should be `section` elements
+你所有的 `.main-section` 元素都應該是 `section` 元素。
```js
const els = document.querySelectorAll('.main-section')
@@ -56,14 +56,14 @@ els.forEach(el => {
assert(els.length > 0)
```
-You should have at least five `.main-section` elements that are descendants of `#main-doc`
+你至少應該有 5 個 `.main-section` 元素，它們是 `#main-doc` 的子元素。
```js
const els = document.querySelectorAll('#main-doc .main-section')
assert(els.length >= 5)
```
-The first child of each `.main-section` should be a `header` element
+每個 `.main-section` 的第一個子元素都應該是一個 `header` 元素。
```js
const els = document.querySelectorAll('.main-section')
@@ -73,7 +73,7 @@ els.forEach(el => {
assert(els.length > 0)
```
-None of your `header` elements should be empty
+你的 `header` 元素不應爲空。
```js
const els = document.querySelectorAll('header')
@@ -83,7 +83,7 @@ els.forEach(el => {
assert(els.length > 0)
```
-All of your `.main-section` elements should have an `id`
+你所有的 `.main-section` 元素都應該有 `id`。
```js
const els = document.querySelectorAll('.main-section')
@@ -93,7 +93,7 @@ els.forEach(el => {
assert(els.length > 0)
```
-Each `.main-section` should have an `id` that matches the text of its first child, having any spaces in the child's text replaced with underscores (`_`) for the id’s
+每個 `.main-section` 都應該有一個與其第一個子元素的文本匹配的 `id`，把子元素的文本中的空格都替換爲下劃線（`_`）用於 id。
```js
const els = document.querySelectorAll('.main-section')
@@ -104,49 +104,49 @@ els.forEach(el => {
assert(els.length > 0)
```
-You should have at least 10 `p` elements (total) within your `.main-section` elements
+在你的 `.main-section` 元素中應該至少有 10 個 `p` 元素（總計）。
```js
const els = document.querySelectorAll('.main-section p')
assert(els.length >= 10)
```
-You should have at least five `code` elements that are descendants of `.main-section` elements
+所有 `.main-section` 元素內總計應有至少 5 個 `code` 元素。
```js
const els = document.querySelectorAll('.main-section code')
assert(els.length >= 5)
```
-You should have at least five `li` elements that are descendants of `.main-section` elements
+所有 `.main-section` 元素內總計應有至少 5 個 `li` 元素。
```js
const els = document.querySelectorAll('.main-section li')
assert(els.length >= 5)
```
-You should have a `nav` element with an `id` of `navbar`
+你應該有一個 `id` 爲 `navbar` 的 `nav` 元素。
```js
const el = document.getElementById('navbar')
assert(!!el && el.tagName === 'NAV')
```
-Your `#navbar` should have exactly one `header` element within it
+你的 `#navbar` 應該只有一個 `header` 元素。
```js
const els = document.querySelectorAll('#navbar header')
assert(els.length === 1)
```
-You should have at least one `a` element with a class of `nav-link`
+你應該至少有一個 class 爲 `nav-link` 的 `a` 元素。
```js
const els = document.querySelectorAll('a[class="nav-link"]')
assert(els.length >= 1)
```
-All of your `.nav-link` elements should be anchor (`a`) elements
+你所有的 `.nav-link` 元素都應該是錨點（`a`）元素。
```js
const els = document.querySelectorAll('.nav-link')
@@ -156,7 +156,7 @@ els.forEach(el => {
assert(els.length > 0)
```
-All of your `.nav-link` elements should be in the `#navbar`
+你所有的 `.nav-link` 元素都應該在 `#navbar` 中。
```js
const els1 = document.querySelectorAll('.nav-link')
@@ -164,7 +164,7 @@ const els2 = document.querySelectorAll('#navbar .nav-link')
assert(els2.length > 0 && els1.length === els2.length)
```
-You should have the same number of `.nav-link` and `.main-section` elements
+你應該有相同數量的 `.nav-link` 和 `.main-section` 元素。
```js
const els1 = document.querySelectorAll('.main-section')
@@ -172,7 +172,7 @@ const els2 = document.querySelectorAll('.nav-link')
assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
```
-The `header` element in the `#navbar` should come before any link (`a`) elements also in the `#navbar`
+`#navbar` 中的 `header` 元素必須在 `#navbar` 中的任何鏈接 (`a`) 之前。
```js
const navLinks = document.querySelectorAll('#navbar a.nav-link');
@@ -188,7 +188,7 @@ navLinks.forEach((navLink) => {
assert(!!header)
```
-Each `.nav-link` should have text that corresponds to the `header` text of its related `section` (e.g. if you have a "Hello world" section/header, your `#navbar` should have a `.nav-link` which has the text "Hello world")
+每個 `.nav-link` 應該有與其相關 `section` 的 `header` 文本相對應的文本（例如，如果你有一個 “Hello world” 部分/標題，你的 `#navbar` 應該有一個 `.nav-link` 包含文本 “Hello world”）。
```js
const headerText = Array.from(document.querySelectorAll('.main-section')).map(el =>
@@ -201,7 +201,7 @@ const remainder = headerText.filter(str => linkText.indexOf(str) === -1)
assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0)
```
-Each `.nav-link` should have an `href` attribute that links to its corresponding `.main-section` (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id)
+每個 `.nav-link` 都應該有一個 `href` 屬性，該屬性鏈接到其對應的 `.main-section`（例如，如果你單擊包含文本 “Hello world” 的 `.nav-link` 元素，頁面導航到具有該 id 的 `section` 元素）。
```js
const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href'))
@@ -210,7 +210,7 @@ const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' +
assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0)
```
-Your `#navbar` should always be on the left edge of the window
+你的 `#navbar` 元素應該始終位於視口的頂部。
```js
const el = document.getElementById('navbar')
@@ -219,7 +219,7 @@ const left2 = el?.offsetLeft
assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15)
```
-Your Technical Documentation project should use at least one media query
+你的技術文檔項目應該使用至少一個媒體查詢。
```js
assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1);
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md
index 0226992eec9..9669041fc81 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md
@@ -1,6 +1,6 @@
---
id: bd7158d8c242eddfaeb5bd13
-title: Build a Personal Portfolio Webpage
+title: 制作一个个人作品集展示页
challengeType: 14
forumTopicId: 301143
dashedName: build-a-personal-portfolio-webpage
@@ -8,34 +8,34 @@ dashedName: build-a-personal-portfolio-webpage
# --description--
-**Objective:** Build an app that is functionally similar to https://personal-portfolio.freecodecamp.rocks
+**目标：** 构建一个功能类似于 https://personal-portfolio.freecodecamp.rocks 的应用程序
-**User Stories:**
+**需求：**
-1. Your portfolio should have a welcome section with an `id` of `welcome-section`
-1. The welcome section should have an `h1` element that contains text
-1. Your portfolio should have a projects section with an `id` of `projects`
-1. The projects section should contain at least one element with a `class` of `project-tile` to hold a project
-1. The projects section should contain at least one link to a project
-1. Your portfolio should have a navbar with an id of `navbar`
-1. The navbar should contain at least one link that you can click on to navigate to different sections of the page
-1. Your portfolio should have a link with an id of `profile-link`, which opens your GitHub or freeCodeCamp profile in a new tab
-1. Your portfolio should have at least one media query
-1. The height of the welcome section should be equal to the height of the viewport
-1. The navbar should always be at the top of the viewport
+1. 你的作品集应该有一个 `id` 为 `welcome-section` 的欢迎部分
+1. 欢迎部分应该有一个包含文本的 `h1` 元素
+1. 你的作品集应该有一个 `id` 为 `projects` 的项目部分
+1. 项目部分应该包含至少一个 `class` 为 `project-tile` 的元素来保存项目
+1. 项目部分应该包含至少一个项目的链接
+1. 你的作品集应该有一个 id 为 `navbar` 的导航栏
+1. 导航栏应该至少包含一个链接，你可以点击它来导航到页面的不同部分
+1. 你的作品集应该有一个 id 为 `profile-link` 的链接，在新标签中打开你的 GitHub 或 freeCodeCodeCamp 个人主页
+1. 你的作品集应该至少有一个媒体查询
+1. 欢迎部分的高度应该等于视口的高度
+1. 导航栏应该始终位于视口的顶部
-Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
+完成需求并通过下面的所有测试来完成这个项目。 赋予它你自己的个人风格。 编程愉快！
# --hints--
-Your portfolio should have a "Welcome" section with an `id` of `welcome-section`.
+你的作品集应该有一个 `id` 为 `welcome-section` 的欢迎部分。
```js
const el = document.getElementById('welcome-section')
assert(!!el);
```
-Your `#welcom-section` element should contain an `h1` element.
+你的 `#welcom-section` 元素应该包含一个 `h1` 元素。
```js
assert.isAbove(
@@ -45,7 +45,7 @@ assert.isAbove(
);
```
-You should not have any empty `h1` elements within `#welcome-section` element.
+在 `#welcome-section` 元素中，你不应该有任何空的 `h1` 元素。
```js
assert.isAbove(
@@ -56,14 +56,14 @@ assert.isAbove(
);
```
-You should have a "Projects" section with an `id` of `projects`.
+你应该有一个 `id` 为 `projects` 的项目部分。
```js
const el = document.getElementById('projects')
assert(!!el);
```
-Your portfolio should contain at least one elment with a class of `project-tile`.
+你的作品集应该包含至少一个 class 为 `project-tile` 的元素。
```js
assert.isAbove(
@@ -72,20 +72,20 @@ assert.isAbove(
);
```
-Your `#projects` element should contain at least one `a` element.
+你的 `#projects` 元素应该包含至少一个 `a` 元素。
```js
assert.isAbove(document.querySelectorAll('#projects a').length, 0);
```
-Your portfolio should have a navbar with an `id` of `navbar`.
+你的作品集应该有一个 `id` 为 `navbar` 的导航栏。
```js
const el = document.getElementById('navbar');
assert(!!el);
```
-Your `#navbar` element should contain at least one `a` element whose `href` attribute starts with `#`.
+你的 `#navbar` 元素应该包含至少一个 `a` 元素，它的 `href` 属性以 `#` 开头。
```js
const links = [...document.querySelectorAll('#navbar a')].filter(
@@ -99,27 +99,27 @@ assert.isAbove(
);
```
-Your portfolio should have an `a` element with an `id` of `profile-link`.
+你的作品集应该有一个 `id` 为 `profile-link` 的 `a` 元素。
```js
const el = document.getElementById('profile-link');
assert(!!el && el.tagName === 'A')
```
-Your `#profile-link` element should have a `target` attribute of `_blank`.
+你的 `#profile-link` 元素应该有一个值为 `_blank` 的 `target` 属性。
```js
const el = document.getElementById('profile-link');
assert(!!el && el.target === '_blank')
```
-Your portfolio should use at least one media query.
+你的作品集应该至少有一个媒体查询。
```js
assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1);
```
-Your `#navbar` element should always be at the top of the viewport.
+你的 `#navbar` 元素应该始终位于视口的顶部。
```js
(async () => {
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
index 937c4482c93..8bb4539fadd 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
@@ -1,6 +1,6 @@
---
id: 587d78af367417b2b2512b03
-title: Build a Survey Form
+title: 制作一个调查表格
challengeType: 14
forumTopicId: 301145
dashedName: build-a-survey-form
@@ -8,277 +8,277 @@ dashedName: build-a-survey-form
# --description--
-**Objective:** Build an app that is functionally similar to https://survey-form.freecodecamp.rocks
+**目标：** 构建一个功能类似于 https://survey-form.freecodecamp.rocks 的应用程序
-**User Stories:**
+**需求：**
-1. You should have a page title in an `h1` element with an `id` of `title`
-1. You should have a short explanation in a `p` element with an `id` of `description`
-1. You should have a `form` element with an `id` of `survey-form`
-1. Inside the form element, you are **required** to enter your name in an `input` field that has an `id` of `name` and a `type` of `text`
-1. Inside the form element, you are **required** to enter your email in an `input` field that has an `id` of `email`
-1. If you enter an email that is not formatted correctly, you will see an HTML5 validation error
-1. Inside the form, you can enter a number in an `input` field that has an `id` of `number`
-1. If you enter non-numbers in the number input, you will see an HTML5 validation error
-1. If you enter numbers outside the range of the number input, which are defined by the `min` and `max` attributes, you will see an HTML5 validation error
-1. For the name, email, and number input fields, you can see corresponding `label` elements in the form, that describe the purpose of each field with the following ids: `id="name-label"`, `id="email-label"`, and `id="number-label"`
-1. For the name, email, and number input fields, you can see placeholder text that gives a description or instructions for each field
-1. Inside the form element, you should have a `select` dropdown element with an `id` of `dropdown` and at least two options to choose from
-1. Inside the form element, you can select an option from a group of at least two radio buttons that are grouped using the `name` attribute
-1. Inside the form element, you can select several fields from a series of checkboxes, each of which must have a `value` attribute
-1. Inside the form element, you are presented with a `textarea` for additional comments
-1. Inside the form element, you are presented with a button with `id` of `submit` to submit all the inputs
+1. 你应该有一个 `id` 为 `title` 的 `h1` 元素
+1. 你应该有一个 `id` 为 `description` 的 `p` 元素
+1. 你应该有一个 `id` 为 `survey-form` 的 `form` 元素
+1. 在表单元素内，你**需要**在 `input` 字段中输入你的名字，该字段的 `id` 为 `name`，`type` 为 `text`
+1. 在表单元素内，你**需要**在 `input` 字段中输入你的邮箱，该字段的 `id` 为 `email`
+1. 如果你输入了格式不正确的邮箱，你将会看见 HTML5 验证错误信息
+1. 在表单中，你可以在 `input` 字段中输入一个数字，该字段的 `id` 为 `number`
+1. 如果你在数字输入框内输入非数字内容，你会看到 HTML5 验证错误信息
+1. 如果你输入的数字超出了范围（使用 `min` 和 `max` 属性定义），你将会看见 HTML5 验证错误信息
+1. 表单中的名字、邮箱和数字输入框需有对应的包含描述输入框用途的 `label` 元素，id 应分别为 `id="name-label"`、`id="email-label"` 和 `id="number-label"`
+1. 在表单中的名字、邮箱和数字输入框中，你能看到各自的描述文字作为占位符
+1. 在表单元素内， 你应该有一个 `select` 下拉元素， `id` 为 `dropdown`，它至少有两个选项
+1. 在表单元素内， 你可以从至少两个单选按钮的组中选择一个选项，该选项使用 `name` 属性
+1. 在表单元素内，你可以从一系列复选框中选择几个字段，每个复选框都必须具有 `value` 属性
+1. 在表单元素内，你会有一个 `textarea` 以获取额外的评论
+1. 在表单元素内，你将收到一个按钮，其 `id` 为 `submit`，提交所有输入
-Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
+完成需求并通过下面的所有测试来完成这个项目。 赋予它你自己的个人风格。 编程愉快！
# --hints--
-You should have an `h1` element with an `id` of `title`
+你应该有一个 `id` 为 `title` 的 `h1` 元素。
```js
const el = document.getElementById('title')
assert(!!el && el.tagName === 'H1')
```
-Your `#title` should not be empty
+你的 `#title` 不应为空。
```js
const el = document.getElementById('title')
assert(!!el && el.innerText.length > 0)
```
-You should have a `p` element with an `id` of `description`
+你应该有一个 `id` 为 `description` 的 `p` 元素。
```js
const el = document.getElementById('description')
assert(!!el && el.tagName === 'P')
```
-Your `#description` should not be empty
+你的 `#description` 不应为空。
```js
const el = document.getElementById('description')
assert(!!el && el.innerText.length > 0)
```
-You should have a `form` element with an `id` of `survey-form`
+你应该有一个 `id` 为 `survey-form` 的 `form` 元素
```js
const el = document.getElementById('survey-form')
assert(!!el && el.tagName === 'FORM')
```
-You should have an `input` element with an `id` of `name`
+你应该有一个 `id` 为 `name` 的 `input` 元素。
```js
const el = document.getElementById('name')
assert(!!el && el.tagName === 'INPUT')
```
-Your `#name` should have a `type` of `text`
+你的 `#name` 元素应该具有 `type` 为 `text`。
```js
const el = document.getElementById('name')
assert(!!el && el.type === 'text')
```
-Your `#name` should require input
+你的 `#name` 元素应该需要输入。
```js
const el = document.getElementById('name')
assert(!!el && el.required)
```
-Your `#name` should be a descedant of `#survey-form`
+你的 `#name` 元素应该是 `#survey-form` 元素的子元素。
```js
const el = document.querySelector('#survey-form #name')
assert(!!el)
```
-You should have an `input` element with an `id` of `email`
+你应该有一个 `id` 为 `email` 的 `input` 元素
```js
const el = document.getElementById('email')
assert(!!el && el.tagName === 'INPUT')
```
-Your `#email` should have a `type` of `email`
+你的 `#email` 元素应该具有 `type` 为 `email`。
```js
const el = document.getElementById('email')
assert(!!el && el.type === 'email')
```
-Your `#email` should require input
+你的 `#email` 元素应该需要输入。
```js
const el = document.getElementById('email')
assert(!!el && el.required)
```
-Your `#email` should be a descedant of `#survey-form`
+你的 `#email` 元素应该是 `#survey-form` 元素的子元素。
```js
const el = document.querySelector('#survey-form #email')
assert(!!el)
```
-You should have an `input` element with an `id` of `number`
+你应该有一个 `id` 为 `number` 的 `input` 元素。
```js
const el = document.getElementById('number')
assert(!!el && el.tagName === 'INPUT')
```
-Your `#number` should be a descedant of `#survey-form`
+你的 `#number` 元素应该是 `#survey-form` 元素的子元素。
```js
const el = document.querySelector('#survey-form #number')
assert(!!el)
```
-Your `#number` should have a `type` of `number`
+你的 `#number` 元素应该具有 `type` 为 `number`。
```js
const el = document.getElementById('number')
assert(!!el && el.type === 'number')
```
-Your `#number` should have a `min` attribute with a numeric value
+你的 `#number` 应该有一个值为数字的 `min` 属性。
```js
const el = document.getElementById('number')
assert(!!el && el.min && isFinite(el.min))
```
-Your `#number` should have a `max` attribute with a numeric value
+你的 `#number` 应该有一个值为数字的 `max` 属性。
```js
const el = document.getElementById('number')
assert(!!el && el.max && isFinite(el.max))
```
-You should have a `label` element with an `id` of `name-label`
+你应该有一个 `id` 为 `name-label` 的 `label` 元素。
```js
const el = document.getElementById('name-label')
assert(!!el && el.tagName === 'LABEL')
```
-You should have a `label` element with an `id` of `email-label`
+你应该有一个 `id` 为 `email-label` 的 `label` 元素。
```js
const el = document.getElementById('email-label')
assert(!!el && el.tagName === 'LABEL')
```
-You should have a `label` element with an `id` of `number-label`
+你应该有一个 `id` 为 `number-label` 的 `label` 元素。
```js
const el = document.getElementById('number-label')
assert(!!el && el.tagName === 'LABEL')
```
-Your `#name-label` should not be empty
+你的 `#name-label` 不应为空。
```js
const el = document.getElementById('name-label')
assert(!!el && el.innerText.length > 0)
```
-Your `#email-label` should not be empty
+你的 `#email-label` 不应为空。
```js
const el = document.getElementById('email-label')
assert(!!el && el.innerText.length > 0)
```
-Your `#number-label` should not be empty
+你的 `#number-label` 不应为空。
```js
const el = document.getElementById('number-label')
assert(!!el && el.innerText.length > 0)
```
-Your `#name-label` should be a descedant of `#survey-form`
+你的 `#name-label` 元素应该是 `#survey-form` 元素的子元素。
```js
const el = document.querySelector('#survey-form #name-label')
assert(!!el)
```
-Your `#email-label` should be a descedant of `#survey-form`
+你的 `#email-label` 元素应该是 `#survey-form` 元素的子元素。
```js
const el = document.querySelector('#survey-form #email-label')
assert(!!el)
```
-Your `#number-label` should be a descedant of `#survey-form`
+你的 `#number-label` 元素应该是 `#survey-form` 元素的子元素。
```js
const el = document.querySelector('#survey-form #number-label')
assert(!!el)
```
-Your `#name` should have a `placeholder` attribute and value
+你的 `#name` 元素应该有 `placeholder` 属性与占位符文本。
```js
const el = document.getElementById('name')
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
```
-Your `#email` should have a `placeholder` attribute and value
+你的 `#email` 元素应该有 `placeholder` 属性与占位符文本。
```js
const el = document.getElementById('email')
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
```
-Your `#number` should have a `placeholder` attribute and value
+你的 `#number` 元素应该有 `placeholder` 属性与占位符文本。
```js
const el = document.getElementById('number')
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
```
-You should have a `select` field with an `id` of `dropdown`
+你应该有一个 `id` 为 `dropdown` 的 `select` 元素。
```js
const el = document.getElementById('dropdown')
assert(!!el && el.tagName === 'SELECT')
```
-Your `#dropdown` should have at least two selectable (not disabled) `option` elements
+你的 `#dropdown` 应该至少有两个可选择（未禁用）`option` 元素。
```js
const els = document.querySelectorAll('#dropdown option:not([disabled])')
assert(els.length >= 2)
```
-Your `#dropdown` should be a descendant of `#survey-form`
+你的 `#dropdown` 元素应该是 `#survey-form` 元素的子元素。
```js
const el = document.querySelector('#survey-form #dropdown')
assert(!!el)
```
-You should have at least two `input` elements with a `type` of `radio` (radio buttons)
+你应该有至少两个 `input` 元素，`type` 为 `radio`（单选按钮）。
```js
const els = document.querySelectorAll('input[type="radio"]')
assert(els.length >= 2)
```
-You should have at least two radio buttons that are descendants of `#survey-form`
+你至少应该有两个单选按钮，是 `#survey-form` 的子元素。
```js
const els = document.querySelectorAll('#survey-form input[type="radio"]')
assert(els.length >= 2)
```
-All your radio buttons should have a `value` attribute and value
+你所有的单选按钮都应该有一个 `value` 属性和值。
```js
const els1 = document.querySelectorAll('input[type="radio"]')
@@ -286,7 +286,7 @@ const els2 = document.querySelectorAll('input[type="radio"][value=""], input[typ
assert(els1.length > 0 && els2.length === 0)
```
-All your radio buttons should have a `name` attribute and value
+你所有的单选按钮都应该有一个 `name` 属性和值。
```js
const els1 = document.querySelectorAll('input[type="radio"]')
@@ -294,7 +294,7 @@ const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type
assert(els1.length > 0 && els2.length === 0)
```
-Every radio button group should have at least 2 radio buttons
+每个单选按钮组应至少有 2 个单选按钮。
```js
const radioButtons = document.querySelectorAll('input[type="radio"]');
@@ -316,14 +316,14 @@ groupKeys.forEach(key => {
assert(groupKeys.length > 0)
```
-You should have at least two `input` elements with a `type` of `checkbox` (checkboxes) that are descendants of `#survey-form`
+你应该至少有两个 `input` 元素，`type` 为 `checkbox`（复选框），它们是 `#survey-form` 的子元素。
```js
const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
assert(els.length >= 2)
```
-All your checkboxes inside `#survey-form` should have a `value` attribute and value
+你在 `#survey-form` 中的所有复选框都应该有 `value` 属性和值。
```js
const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]')
@@ -331,28 +331,28 @@ const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][valu
assert(els1.length > 0 && els2.length === 0)
```
-You should have at least one `textarea` element that is a descendant of `#survey-form`
+你至少应该有一个 `textarea` 元素，它是 `#survey-form` 的子元素。
```js
const el = document.querySelector('#survey-form textarea')
assert(!!el)
```
-You should have an `input` or `button` element with an `id` of `submit`
+你应该有一个 `id` 为 `submit` 的 `input` 或 `button` 元素。
```js
const el = document.getElementById('submit')
assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'))
```
-Your `#submit` should have a `type` of `submit`
+你的 `#submit` 元素应该具有 `type` 为 `submit`
```js
const el = document.getElementById('submit')
assert(!!el && el.type === 'submit')
```
-Your `#submit` should be a descendant of `#survey-form`
+你的 `#submit` 元素应该是 `#survey-form` 元素的子元素。
```js
const el = document.querySelector('#survey-form #submit')
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md
index 6c433375ba7..4d4b34d8539 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md
@@ -1,6 +1,6 @@
---
id: 587d78b0367417b2b2512b05
-title: Build a Technical Documentation Page
+title: 制作一个技术文档页面
challengeType: 14
forumTopicId: 301146
dashedName: build-a-technical-documentation-page
@@ -8,45 +8,45 @@ dashedName: build-a-technical-documentation-page
# --description--
-**Objective:** Build an app that is functionally similar to https://technical-documentation-page.freecodecamp.rocks
+**目标：** 构建一个功能类似于 https://technical-documentation-page.freecodecamp.rocks 的应用程序
-**User Stories:**
+**需求：**
-1. You can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation)
-1. Within the `#main-doc` element, you can see several `section` elements, each with a class of `main-section`. There should be a minimum of five
-1. The first element within each `.main-section` should be a `header` element, which contains text that describes the topic of that section.
-1. Each `section` element with the class of `main-section` should also have an `id` that corresponds with the text of each `header` contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding `id="JavaScript_and_Java"`)
-1. The `.main-section` elements should contain at least ten `p` elements total (not each)
-1. The `.main-section` elements should contain at least five `code` elements total (not each)
-1. The `.main-section` elements should contain at least five `li` items total (not each)
-1. You can see a `nav` element with a corresponding `id="navbar"`
-1. The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation
-1. Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section`
-1. The `header` element in the `#navbar` must come before any link (`a`) elements in the navbar
-1. Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world")
-1. When you click on a navbar element, the page should navigate to the corresponding section of the `main-doc` element (e.g. If you click on a `nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id, and contains the corresponding header)
-1. On regular sized devices (laptops, desktops), the element with `id="navbar"` should be shown on the left side of the screen and should always be visible to the user
-1. Your technical documentation should use at least one media query
+1. 你能看见一个 `id="main-doc"` 的 `main`元素，它包含页面的主要内容（技术文档）。
+1. 在 `#main-doc` 元素内，我能看见至少 5 个 `section` 元素，每个元素都有一个 class 为 `main-section`。 应存在至少 5 个这样的元素。
+1. 每个 `.main-section` 中的第一个元素应该是 `header` 元素，其中包含描述该部分主题的文本。
+1. class 为 `main-section` 的每个 `section` 元素应该有一个与包含在其中的每个 `header` 的文本相对应的 `id`。 所有空格都应该被替换为下划线（例如，包含标题 “JavaScript and Java” 的 section 应有一个相应的 `id="JavaScript_and_Java"`）。
+1. 所有 `.main-section` 元素总计（不是每个）包含至少 10 个 `p` 元素。
+1. 所有 `.main-section` 元素总计（不是每个）包含至少 5 个 `code` 元素。
+1. 所有 `.main-section` 元素总计（不是每个）包含至少 5 个 `li` 元素。
+1. 你能看见一个 `id="navbar"` 的 `nav` 元素。
+1. navbar 元素应包含一个 `header` 元素，其中包含描述技术文档主题的文本。
+1. 此外，导航栏应包含 class 为 `nav-link` 的链接元素（`a`）。 每个 class 为 `main-section` 的元素都需要有一个。
+1. `#navbar` 中的 `header` 元素必须在任何链接 (`a`) 之前。
+1. class 为 `nav-link` 的每个元素都应该包含每个 `section` 的 `header` 文本对应的文本（例如，如果你有一个 “Hello world” 部分/标题，你的导航栏应该有一个包含文本 “Hello world” 的元素）。
+1. 当你点击一个 navbar 元素时，页面应该导航到 `main-doc` 元素的相应部分（例如，如果你点击包含文本 “Hello world” 的 `nav-link` 元素，页面将导航到一个带有对应 header 和 id 的 `section` 元素）。
+1. 在常规尺寸的设备上（笔记本电脑、台式机），带有 `id="navbar"` 的元素应该显示在屏幕左侧，并且始终对用户可见。
+1. 你的技术文档应该使用至少一个媒体查询。
-Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
+完成需求并通过下面的所有测试来完成这个项目。 赋予它你自己的个人风格。 编程愉快！
# --hints--
-You should have a `main` element with an `id` of `main-doc`
+你应该有一个 `id` 为 `main-doc` 的 `main` 元素。
```js
const el = document.getElementById('main-doc')
assert(!!el)
```
-You should have at least five `section` elements with a class of `main-section`
+你至少应该有 5 个 class 为 `main-section` 的 `section` 元素。
```js
const els = document.querySelectorAll('#main-doc section')
assert(els.length >= 5)
```
-All of your `.main-section` elements should be `section` elements
+你所有的 `.main-section` 元素都应该是 `section` 元素。
```js
const els = document.querySelectorAll('.main-section')
@@ -56,14 +56,14 @@ els.forEach(el => {
assert(els.length > 0)
```
-You should have at least five `.main-section` elements that are descendants of `#main-doc`
+你至少应该有 5 个 `.main-section` 元素，它们是 `#main-doc` 的子元素。
```js
const els = document.querySelectorAll('#main-doc .main-section')
assert(els.length >= 5)
```
-The first child of each `.main-section` should be a `header` element
+每个 `.main-section` 的第一个子元素都应该是一个 `header` 元素。
```js
const els = document.querySelectorAll('.main-section')
@@ -73,7 +73,7 @@ els.forEach(el => {
assert(els.length > 0)
```
-None of your `header` elements should be empty
+你的 `header` 元素不应为空。
```js
const els = document.querySelectorAll('header')
@@ -83,7 +83,7 @@ els.forEach(el => {
assert(els.length > 0)
```
-All of your `.main-section` elements should have an `id`
+你所有的 `.main-section` 元素都应该有 `id`。
```js
const els = document.querySelectorAll('.main-section')
@@ -93,7 +93,7 @@ els.forEach(el => {
assert(els.length > 0)
```
-Each `.main-section` should have an `id` that matches the text of its first child, having any spaces in the child's text replaced with underscores (`_`) for the id’s
+每个 `.main-section` 都应该有一个与其第一个子元素的文本匹配的 `id`，把子元素的文本中的空格都替换为下划线（`_`）用于 id。
```js
const els = document.querySelectorAll('.main-section')
@@ -104,49 +104,49 @@ els.forEach(el => {
assert(els.length > 0)
```
-You should have at least 10 `p` elements (total) within your `.main-section` elements
+在你的 `.main-section` 元素中应该至少有 10 个 `p` 元素（总计）。
```js
const els = document.querySelectorAll('.main-section p')
assert(els.length >= 10)
```
-You should have at least five `code` elements that are descendants of `.main-section` elements
+所有 `.main-section` 元素内总计应有至少 5 个 `code` 元素。
```js
const els = document.querySelectorAll('.main-section code')
assert(els.length >= 5)
```
-You should have at least five `li` elements that are descendants of `.main-section` elements
+所有 `.main-section` 元素内总计应有至少 5 个 `li` 元素。
```js
const els = document.querySelectorAll('.main-section li')
assert(els.length >= 5)
```
-You should have a `nav` element with an `id` of `navbar`
+你应该有一个 `id` 为 `navbar` 的 `nav` 元素。
```js
const el = document.getElementById('navbar')
assert(!!el && el.tagName === 'NAV')
```
-Your `#navbar` should have exactly one `header` element within it
+你的 `#navbar` 应该只有一个 `header` 元素。
```js
const els = document.querySelectorAll('#navbar header')
assert(els.length === 1)
```
-You should have at least one `a` element with a class of `nav-link`
+你应该至少有一个 class 为 `nav-link` 的 `a` 元素。
```js
const els = document.querySelectorAll('a[class="nav-link"]')
assert(els.length >= 1)
```
-All of your `.nav-link` elements should be anchor (`a`) elements
+你所有的 `.nav-link` 元素都应该是锚点（`a`）元素。
```js
const els = document.querySelectorAll('.nav-link')
@@ -156,7 +156,7 @@ els.forEach(el => {
assert(els.length > 0)
```
-All of your `.nav-link` elements should be in the `#navbar`
+你所有的 `.nav-link` 元素都应该在 `#navbar` 中。
```js
const els1 = document.querySelectorAll('.nav-link')
@@ -164,7 +164,7 @@ const els2 = document.querySelectorAll('#navbar .nav-link')
assert(els2.length > 0 && els1.length === els2.length)
```
-You should have the same number of `.nav-link` and `.main-section` elements
+你应该有相同数量的 `.nav-link` 和 `.main-section` 元素。
```js
const els1 = document.querySelectorAll('.main-section')
@@ -172,7 +172,7 @@ const els2 = document.querySelectorAll('.nav-link')
assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
```
-The `header` element in the `#navbar` should come before any link (`a`) elements also in the `#navbar`
+`#navbar` 中的 `header` 元素必须在 `#navbar` 中的任何链接 (`a`) 之前。
```js
const navLinks = document.querySelectorAll('#navbar a.nav-link');
@@ -188,7 +188,7 @@ navLinks.forEach((navLink) => {
assert(!!header)
```
-Each `.nav-link` should have text that corresponds to the `header` text of its related `section` (e.g. if you have a "Hello world" section/header, your `#navbar` should have a `.nav-link` which has the text "Hello world")
+每个 `.nav-link` 应该有与其相关 `section` 的 `header` 文本相对应的文本（例如，如果你有一个 “Hello world” 部分/标题，你的 `#navbar` 应该有一个 `.nav-link` 包含文本 “Hello world”）。
```js
const headerText = Array.from(document.querySelectorAll('.main-section')).map(el =>
@@ -201,7 +201,7 @@ const remainder = headerText.filter(str => linkText.indexOf(str) === -1)
assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0)
```
-Each `.nav-link` should have an `href` attribute that links to its corresponding `.main-section` (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id)
+每个 `.nav-link` 都应该有一个 `href` 属性，该属性链接到其对应的 `.main-section`（例如，如果你单击包含文本 “Hello world” 的 `.nav-link` 元素，页面导航到具有该 id 的 `section` 元素）。
```js
const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href'))
@@ -210,7 +210,7 @@ const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' +
assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0)
```
-Your `#navbar` should always be on the left edge of the window
+你的 `#navbar` 元素应该始终位于视口的顶部。
```js
const el = document.getElementById('navbar')
@@ -219,7 +219,7 @@ const left2 = el?.offsetLeft
assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15)
```
-Your Technical Documentation project should use at least one media query
+你的技术文档项目应该使用至少一个媒体查询。
```js
assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1);
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
new file mode 100644
index 00000000000..d3d46ae2f43
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
@@ -0,0 +1,57 @@
+---
+id: 5f344fad8bf01691e71a30eb
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Finora, sei stato limitato per quanto riguarda la presentazione e l'aspetto del contenuto che hai creato. Per curare questa parte, dovresti creare un elemento `style` dentro l'elemento `head`.
+
+# --hints--
+
+Il codice dovrebbe avere un tag di apertura ``.
+
+```js
+assert(code.match(/<\/style\s*>/));
+```
+
+L'elemento `style` dovrebbe essere annidato nell'elemento `head`.
+
+```js
+assert(code.match(/[\w\W\s]*[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+--fcc-editable-region--
+
+
+ Cafe Menu
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md
index d74bcd62e5b..02a44f22333 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md
@@ -7,7 +7,7 @@ dashedName: step-14
# --description--
-Ora hai tre tipi di selettori con lo stesso stile. È possibile aggiungere lo stesso gruppo di stili a molti elementi separando i selettori con virgole in questo modo:
+Ora hai tre selettori di tipo con lo stesso stile. È possibile aggiungere lo stesso gruppo di stili a molti elementi separando i selettori con virgole in questo modo:
```css
selector1, selector2 {
@@ -15,11 +15,11 @@ selector1, selector2 {
}
```
-Usa un singolo tipo di selettore per centrare gli elementi `h1`, `h2` e `p` contemporaneamente.
+Usa un singolo selettore di tipo per centrare contemporaneamente gli elementi `h1`, `h2` e `p`.
# --hints--
-Dovresti usare un singolo tipo di selettore per tutti e tre gli elementi, `h1, h2, p`. Assicurati di utilizzare quell'ordine.
+Dovresti usare un singolo selettore di tipo per tutti e tre gli elementi, `h1, h2, p`. Assicurati di utilizzare quell'ordine.
```js
const hasSelector = new __helpers.CSSHelp(document).getStyle('h1, h2, p');
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md
index 2532ccf517e..f02193a45fd 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md
@@ -11,13 +11,13 @@ Ora che hai il CSS nel file `styles.css`, rimuovi l'elemento `style` e tutto il
# --hints--
-Non dovresti avere un elemento `style` nel tuo codice.
+Non dovresti avere un elemento `style` nel codice.
```js
assert(!code.match(/style/i));
```
-Non dovresti avere alcun selettore CSS nel tuo file HTML.
+Non dovresti avere alcun selettore CSS nel file HTML.
```js
(getUserInput) => {
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md
index bf52176ae92..ceae33dd34c 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md
@@ -7,46 +7,46 @@ dashedName: step-13
# --description--
-Nello step precedente, hai usato un selettore di tipo (type selector) per lo stile dell'elemento `h1`. Centra gli elementi `h2` e `p` con un nuovo selettore di tipo per ciascuno.
+Nello step precedente, hai usato un selettore di tipo (type selector) per agire sullo stile dell'elemento `h1`. Centra gli elementi `h2` e `p` con un nuovo selettore di tipo per ciascuno.
# --hints--
-Non dovresti cambiare il selettore esistente per `h1`.
+Non dovresti cambiare il selettore `h1` esistente.
```js
const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
assert(hasH1);
```
-Dovresti aggiungere un nuovo selettore per `h2`.
+Dovresti aggiungere un nuovo selettore `h2`.
```js
const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
assert(hasH2);
```
-Dovresti aggiungere un nuovo selettore per `p`.
+Dovresti aggiungere un nuovo selettore `p`.
```js
const hasP = new __helpers.CSSHelp(document).getStyle('p');
assert(hasP);
```
-I tuoi elementi `h1` dovrebbero avere una proprietà `text-align` di `center`.
+L'elemento `h1` dovrebbero avere una proprietà `text-align` con valore `center`.
```js
const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
assert(h1TextAlign === 'center');
```
-I tuoi elementi `h2` dovrebbero avere una prorpietà `text-align` di `center`.
+L'elemento `h2` dovrebbe avere una proprietà `text-align` con valore `center`.
```js
const h2TextAlign = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('text-align');
assert(h2TextAlign === 'center');
```
-I tuoi elementi `p` dovrebbero avere una prorpietà `text-align` di `center`.
+L'elemento `p` dovrebbe avere una proprietà `text-align` con valore `center`.
```js
const pTextAlign = new __helpers.CSSHelp(document).getStyle('p')?.getPropertyValue('text-align');
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
new file mode 100644
index 00000000000..7c3b51b5513
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
@@ -0,0 +1,77 @@
+---
+id: 5f3477aefa51bfc29327200b
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Hai impostato lo stile di tre elementi scrivendo del CSS all'interno dei tag dell'elemento `style`. Questo approccio funziona, ma poiché ci saranno molti altri stili, è meglio mettere tutti gli stili in un file separato e linkarlo.
+
+Abbiamo creato per te un file separato `styles.css` e cambiato la vista dell'editor su quel file. Puoi passare da un file all'altro usando le schede in cima all'editor.
+
+Inizia riscrivendo gli stili che hai creato all'interno del file `styles.css`. Assicurati di escludere i tag `style` di apertura e chiusura.
+
+# --hints--
+
+Il file `styles.css` dovrebbe avere il selettore di tipo `h1, h2, p`.
+
+```js
+(getUserInput) => {
+ assert(getUserInput('editableContents').replace(/[\s\n]*/g, "").match(/(h1|h2|p),(h1|h2|p),(h1|h2|p){/));
+}
+```
+
+Il selettore dovrebbe assegnare alla proprietà `text-align` il valore `center`.
+
+```js
+(getUserInput) => {
+ assert(getUserInput('editableContents').match(/text-align:\s*center;?/));
+}
+```
+
+Dovresti avere un solo selettore.
+
+```js
+(getUserInput) => {
+ assert(getUserInput('editableContents').match(/text-align:\s*center;?/)?.length === 1);
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Cafe Menu
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
index 8d60df3cbf3..351f084192b 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
@@ -7,11 +7,11 @@ dashedName: step-17
# --description--
-Ora è necessario collegare il file `styles.css` in modo che gli stili verranno applicati di nuovo. Annida un elemento `link` auto-chiudente nell'elemento `head`. Dagli un attributo `rel` con valore di `stylesheet`, un attributo `type` con valore di `text/css`, e un attributo `href` con valore `styles.css`.
+Ora è necessario collegare il file `styles.css` in modo che gli stili vengano applicati di nuovo. Annida un elemento `link` autoconcludente nell'elemento `head`. Dagli un attributo `rel` con valore di `stylesheet`, un attributo `type` con valore di `text/css`, e un attributo `href` con valore `styles.css`.
# --hints--
-Il tuo codice dovrebbe avere un elemento `link`.
+Il codice dovrebbe avere un elemento `link`.
```js
// link is removed -> if exists, replaced with style
@@ -25,31 +25,31 @@ Non dovresti cambiare l'elemento `head` esistente. Assicurati di non aver elimin
assert($('head').length === 1);
```
-Il tuo elemento `link` dovrebbe essere un elemento auto-chiudente.
+L'elemento `link` dovrebbe essere un elemento autoconcludente.
```js
assert(code.match(//i));
```
-Il tuo elemento `link` dovrebbe essere all'interno dell'elemento `head`.
+L'elemento `link` dovrebbe essere all'interno dell'elemento `head`.
```js
assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i))
```
-Il tuo elemento `link` dovrebbe avere un attributo `rel` con valore di `stylesheet`.
+L'elemento `link` dovrebbe avere un attributo `rel` con il valore `stylesheet`.
```js
assert(code.match(/rel=('|")stylesheet\1/i));
```
-Il tuo elemento `link` dovrebbe avere un attributo `type` con il valore `text/css`.
+L'elemento `link` dovrebbe avere un attributo `type` con il valore `text/css`.
```js
assert(code.match(/type=('|")text\/css\1/i));
```
-Il tuo elemento `link` dovrebbe avere un attributo `href` con un valore di `styles.css`.
+L'elemento `link` dovrebbe avere un attributo `href` con il valore `styles.css`.
```js
assert(code.match(/href=('|")styles.css\1/i));
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md
index f589185f60f..c328e5b0239 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md
@@ -7,7 +7,7 @@ dashedName: step-19
# --description--
-Il testoè di nuovo centrato quindi il collegamento al file CSS funziona. Aggiungi un altro stile al file che cambia la proprietà `background-color` in `brown` per l'elemento `body`.
+Il testo è di nuovo centrato, quindi il collegamento al file CSS funziona. Aggiungi al file un altro stile che cambia la proprietà `background-color` in `brown` per l'elemento `body`.
# --hints--
@@ -18,14 +18,14 @@ const hasBody = new __helpers.CSSHelp(document).getStyle('body');
assert(hasBody);
```
-Dovresti impostare la proprietà `background-color` su `brown`.
+Dovresti assegnare il valore `brown` alla proprietà `background-color`.
```js
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown');
assert(hasBackground);
```
-Il tuo elemento `body` dovrebbe avere uno sfondo marrone (`brown`).
+Lo sfondo dell'elemento `body` dovrebbe essere `brown`.
```js
const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md
new file mode 100644
index 00000000000..d5e1260805e
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md
@@ -0,0 +1,72 @@
+---
+id: 5f3477cbcb6ba47918c1da92
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Per far sì che lo stile della pagina sia simile su uno smatphone, su un desktop o un laptop, devi aggiungere un elemento `meta` con un attributo speciale `content`.
+
+Aggiungi il seguente codice all'interno dell'elemento `head`:
+
+```html
+
+```
+
+# --hints--
+
+Il codice dovrebbe avere due elementi `meta`.
+
+```js
+assert(code.match(//g).length === 2);
+```
+
+L'elemento `meta` dovrebbe avere un attributo `name` con il valore `viewport`.
+
+```js
+const meta = $('meta');
+assert(meta[0].outerHTML.match(/name=('|")viewport\1/) || meta[1].outerHTML.match(/name=('|")viewport\1/));
+```
+
+L'elemento `meta` dovrebbe avere un attributo `content` con il valore `width=device-width, initial-scale=1.0`.
+
+```js
+const meta = $('meta');
+assert(meta[0].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/) || meta[1].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+--fcc-editable-region--
+
+
+ Cafe Menu
+
+
+--fcc-editable-region--
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
+
+
+```
+
+```css
+h1, h2, p {
+ text-align: center;
+}
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md
new file mode 100644
index 00000000000..d432354f649
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md
@@ -0,0 +1,64 @@
+---
+id: 5f34a1fd611d003edeafd681
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Lo sfondo marrone rende difficile la lettura del testo. Cambia il colore dello sfondo dell'elemento `body` in `burlywood`, in modo che più semplice da leggere pur avendo un po' di colore.
+
+# --hints--
+
+Dovresti assegnare alla proprietà `background-color` il valore `burlywood`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
+assert(hasBackground);
+```
+
+L'elemento `body` dovrebbe avere uno sfondo `burlywood`.
+
+```js
+const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
+assert(bodyBackground === 'burlywood');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+body {
+ background-color: brown;
+}
+--fcc-editable-region--
+h1, h2, p {
+ text-align: center;
+}
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
new file mode 100644
index 00000000000..0264f90dff3
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
@@ -0,0 +1,74 @@
+---
+id: 5f356ed60785e1f3e9850b6e
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Ora è facile vedere che il testo è centrato all'interno dell'elemento `div`. Attualmente, la larghezza dell'elemento `div` è specificata in pixel (`px`). Cambia il valore della proprietà `width` in `80%`, per renderlo l'80% della larghezza del suo elemento genitore (`body`).
+
+# --hints--
+
+Dovresti assegnare alla proprietà `width` il valore `80%`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
+assert(hasWidth);
+```
+
+Dovresti assegnare alla proprietà `width` il valore `300px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
+assert(!hasWidth);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
+
+
+
+```
+
+```css
+body {
+ /*
+ background-color: burlywood;
+ */
+}
+
+h1, h2, p {
+ text-align: center;
+}
+--fcc-editable-region--
+div {
+ width: 300px;
+ background-color: burlywood;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
new file mode 100644
index 00000000000..5dec66da9f4
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
@@ -0,0 +1,79 @@
+---
+id: 5f356ed60a5decd94ab66986
+title: Step 23
+challengeType: 0
+removeComments: false
+dashedName: step-23
+---
+
+# --description--
+
+I commenti in CSS hanno quest'aspetto:
+
+```css
+/* comment here */
+```
+
+Nel foglio di stile, trasforma in un commento la riga contenente la proprietà `background-color` e il suo valore, in modo da poter vedere l'effetto dello stile del solo elemento `div`. In questo modo lo sfondo tornerà bianco di nuovo.
+
+# --hints--
+
+Dovresti trasformare in un commento la riga `background-color: burlywood;` del CSS.
+
+```js
+assert(code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i));
+```
+
+
+L'elemento `body` dovrebbe avere uno sfondo bianco.
+
+```js
+const bodyCSS = $('body').css('background-color');
+assert(bodyCSS === "rgba(0, 0, 0, 0)")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
+
+
+
+```
+
+```css
+body {
+--fcc-editable-region--
+ background-color: burlywood;
+--fcc-editable-region--
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+div {
+ width: 300px;
+}
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
new file mode 100644
index 00000000000..ae79cf9a257
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
@@ -0,0 +1,76 @@
+---
+id: 5f356ed63c7807a4f1e6d054
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Adesso, l'obiettivo è far sì che `div` non occupi l'intera larghezza della pagina. La proprietà CSS `width` è perfetta per questo. Crea un nuovo selettore di tipo nel foglio di stile che dà al tuo elemento `div` una larghezza di `300px`.
+
+# --hints--
+
+Dovresti avere un selettore di tipo `div`.
+
+```js
+const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
+assert(hasDiv);
+```
+
+Dovresti assegnare alla proprietà `width` il valore `300px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
+assert(hasWidth);
+```
+
+`div` dovrebbe avere una larghezza di 300px.
+
+```js
+const divWidth = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('width');
+assert(divWidth === '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+body {
+ background-color: burlywood;
+}
+
+h1, h2, p {
+ text-align: center;
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
new file mode 100644
index 00000000000..71c64d6bfe6
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
@@ -0,0 +1,74 @@
+---
+id: 5f356ed63e0fa262326eef05
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Ora cambia il colore di sfondo dell'elemento `div` in `burlywood`.
+
+# --hints--
+
+Dovresti assegnare alla proprietà `background-color` il valore `burlywood`.
+
+```js
+const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
+assert(hasBackgroundColor);
+```
+
+`div` dovrebbe avere uno sfondo burlywood.
+
+```js
+const divBackground = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color');
+assert(divBackground === 'burlywood');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
+
+
+
+```
+
+```css
+body {
+ /*
+ background-color: burlywood;
+ */
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+--fcc-editable-region--
+div {
+ width: 300px;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
new file mode 100644
index 00000000000..fc4d8a5118b
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
@@ -0,0 +1,83 @@
+---
+id: 5f356ed656a336993abd9f7c
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Il prossimo passo è centrare `div` orizzontalmente. Puoi farlo assegnando alle sue proprietà `margin-left` e `margin-right` il valore `auto`. Pensa al margine come spazio invisibile attorno a un elemento. Utilizzando queste due proprietà dei margini, centra l'elemento `div` all'interno dell'elemento `body`.
+
+# --hints--
+
+Dovresti assegnare alla proprietà `margin-left` il valore `auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-left'] === 'auto');
+assert(hasMargin);
+```
+
+Dovresti assegnare alla proprietà `margin-right` il valore `auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-right'] === 'auto');
+assert(hasMargin);
+```
+
+Dovresti assegnare alle proprietà `margin-left` e `margin-right` di `div` il valore `auto`.
+
+```js
+const divMarginRight = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-right');
+const divMarginLeft = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-left');
+assert(divMarginRight === 'auto');
+assert(divMarginLeft === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
+
+
+
+```
+
+```css
+body {
+ /*
+ background-color: burlywood;
+ */
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+--fcc-editable-region--
+div {
+ width: 80%;
+ background-color: burlywood;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
new file mode 100644
index 00000000000..992612a0c9b
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
@@ -0,0 +1,75 @@
+---
+id: 5f356ed69db0a491745e2bb6
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Per applicare lo stile della classe all'elemento `div`, aggiungi un attributo `class` al tag di apertura dell'elemento `div` e assegnagli il valore `menu`.
+
+# --hints--
+
+`div` dovrebbe ancora apparire. Assicurati di aver scritto correttamente il tag `
`.
+
+```js
+assert($('div').length === 1);
+```
+
+L'elemento `div` dovrebbe avere la classe `menu`.
+
+```js
+assert($('div').attr('class').includes('menu'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
+
+
+
+```
+
+```css
+body {
+ /*
+ background-color: burlywood;
+ */
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
new file mode 100644
index 00000000000..9db86e9318d
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -0,0 +1,77 @@
+---
+id: 5f356ed6cf6eab5f15f5cfe6
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+A differenza degli altri elementi di contenuto che hai utilizzato finora, l'elemento `div` è utilizzato principalmente per il design del layout. Aggiungi un elemento `div` all'interno dell'elemento `body` e poi sposta tutti gli altri elementi all'interno del nuovo elemento `div`.
+
+# --hints--
+
+Dovresti avere un tag di apertura `
`.
+
+```js
+assert(code.match(/
/i));
+```
+
+Dovresti avere un tag di chiusura `
`.
+
+```js
+assert(code.match(/<\/div>/i));
+```
+
+Non dovresti cambiare l'elemento `body` esistente. Assicurati di non aver eliminato il tag di chiusura.
+
+```js
+assert($('body').length === 1);
+```
+
+Il tag `div` dovrebbe essere annidato nell'elemento `body`.
+
+```js
+const div = $('div')[0];
+assert(div.parentElement.tagName === 'BODY');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+--fcc-editable-region--
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
+
+--fcc-editable-region--
+
+```
+
+```css
+body {
+ background-color: burlywood;
+}
+
+h1, h2, p {
+ text-align: center;
+}
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
new file mode 100644
index 00000000000..452339b2ed4
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
@@ -0,0 +1,86 @@
+---
+id: 5f35e5c4321f818cdc4bed30
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Sta prendendo un bell'aspetto. È ora di iniziare ad aggiungere alcune voci al menu. Aggiungi un elemento `article` vuoto sotto l'intestazione `Coffee`. Conterrà il gusto e il prezzo di ogni caffè offerto.
+
+# --hints--
+
+Dovresti avere un tag di apertura ``.
+
+```js
+assert(code.match(//i));
+```
+
+Dovresti avere un tag di chiusura ``.
+
+```js
+assert(code.match(/<\/article>/i));
+```
+
+Non dovresti modificare l'elemento `h2` esistente.
+
+```js
+assert($('h2').length === 1);
+```
+
+L'elemento `article` dovrebbe trovarsi dopo l'elemento `h2`.
+
+```js
+const article = $('article')[0];
+assert(article.previousElementSibling.tagName === 'H2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+--fcc-editable-region--
+
Coffee
+--fcc-editable-region--
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
new file mode 100644
index 00000000000..6e7fbe669a6
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
@@ -0,0 +1,92 @@
+---
+id: 5f35e5c44359872a137bd98f
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Dal momento che il prodotto principale del bar è il caffè, puoi utilizzare un'immagine con dei chicchi di caffè per lo sfondo della pagina.
+
+Elimina il commento e il suo contenuto all'interno del selettore di tipo `body`. Ora aggiungi una proprietà `background-image` e assegnale il valore `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`.
+
+# --hints--
+
+Dovresti rimuovere la proprietà `background-color` che avevi trasformato in un commento.
+
+```js
+assert(!code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i))
+```
+
+Il selettore `body` non dovrebbe avere commenti.
+
+```js
+assert(!code.match(/body\s*{\s*\/\*/i));
+```
+
+Dovresti assegnare alla proprietà `background-image` il valore `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-image'] === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`)
+assert(hasBackground)
+```
+
+L'elemento `body` dovrebbe avere un'immagine di sfondo con dei chicchi di caffè.
+
+```js
+const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-image');
+console.log(bodyBackground);
+assert(bodyBackground === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
+
+
+
+```
+
+```css
+body {
+--fcc-editable-region--
+ /*
+ background-color: burlywood;
+ */
+--fcc-editable-region--
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
new file mode 100644
index 00000000000..4ec8b077b54
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
@@ -0,0 +1,107 @@
+---
+id: 5f3c866d0fc037f7311b4ac8
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Ci siamo quasi, ma il prezzo non è rimasto sulla destra. Questo perché gli elementi `inline-block` occupano solo la larghezza del loro contenuto. Per distribuirli, aggiungi una proprietà `width` ai selettori di classe `flavor` e `price` col valore di `50%` per entrambi.
+
+# --hints--
+
+Dovresti assegnare alla proprietà `width` nel selettore `.flavor` il valore `50%`.
+
+```js
+const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
+assert(flavorWidth === '50%');
+```
+
+Dovresti assegnare alla proprietà `width` nel selettore `.price` il valore `50%`.
+
+```js
+const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
+assert(priceWidth === '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
French Vanilla
+
3.00
+
+
+
Caramel Macchiato
+
3.75
+
+
+
Pumpkin Spice
+
3.50
+
+
+
Hazelnut
+
4.00
+
+
+
Mocha
+
4.50
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+--fcc-editable-region--
+.flavor {
+ text-align: left;
+}
+
+.price {
+ text-align: right;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
new file mode 100644
index 00000000000..483489339bd
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
@@ -0,0 +1,128 @@
+---
+id: 5f3c866d5414453fc2d7b480
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Partendo al di sotto della coppia caffè/prezzo esistente, aggiungi i seguenti caffè e prezzi utilizzando elementi `article` con due elementi `p` annidati all'interno di ciascuno di essi. Come prima, il testo del primo elemento `p` dovrebbe contenere il gusto del caffè e il testo del secondo elemento `p` dovrebbe contenerne il prezzo.
+
+```bash
+Caramel Macchiato 3.75
+Pumpkin Spice 3.50
+Hazelnut 4.00
+Mocha 4.50
+```
+
+# --hints--
+
+Dovresti avere cinque elementi `article`.
+
+```js
+assert($('article').length === 5);
+```
+
+Ciascun elemento `article` dovrebbe avere due elementi `p`.
+
+```js
+const articles = $('article');
+assert(articles[0].children.length === 2);
+assert(articles[1].children.length === 2);
+assert(articles[2].children.length === 2);
+assert(articles[3].children.length === 2);
+assert(articles[4].children.length === 2);
+```
+
+Il primo elemento `article` dovrebbe avere degli elementi `p` con il testo `French Vanilla` e `3.00`.
+
+```js
+const children = $('article')[0].children;
+assert(children[0].innerText.match(/French Vanilla/i));
+assert(children[1].innerText.match(/3\.00/i));
+```
+
+Il secondo elemento `article` dovrebbe avere degli elementi `p` con il testo `Caramel Macchiato` e `3.75`.
+
+```js
+const children = $('article')[1].children;
+assert(children[0].innerText.match(/Caramel Macchiato/i));
+assert(children[1].innerText.match(/3\.75/i));
+```
+
+Il terzo elemento `article` dovrebbe avere degli elementi `p` con il testo `Pumpkin Spice` e `3.50`.
+
+```js
+const children = $('article')[2].children;
+assert(children[0].innerText.match(/Pumpkin Spice/i));
+assert(children[1].innerText.match(/3\.50/i));
+```
+
+Il quarto elemento `article` dovrebbe avere degli elementi `p` con il testo `Hazelnut` e `4.00`.
+
+```js
+const children = $('article')[3].children;
+assert(children[0].innerText.match(/Hazelnut/i));
+assert(children[1].innerText.match(/4\.00/i));
+```
+
+Il quinto elemento `article` dovrebbe avere degli elementi `p` con il testo `Mocha` e `4.50`.
+
+```js
+const children = $('article')[4].children;
+assert(children[0].innerText.match(/Mocha/i));
+assert(children[1].innerText.match(/4\.50/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+--fcc-editable-region--
+
+
French Vanilla
+
3.00
+
+--fcc-editable-region--
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
new file mode 100644
index 00000000000..68b1227058f
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
@@ -0,0 +1,88 @@
+---
+id: 5f3c866daec9a49519871816
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Gli elementi `article` spesso contengono più elementi che hanno informazioni correlate. In questo caso, conterrà il gusto del caffè e il prezzo corrispondente. Annida due elementi `p` all'interno dell'elemento`article`. Il testo del primo dovrebbe essere `French Vanilla`, e il testo del secondo `3.00`.
+
+# --hints--
+
+Non dovresti cambiare l'elemento `article` esistente.
+
+```js
+assert($('article').length === 1);
+```
+
+L'elemento `article` dovrebbe avere due elementi `p`.
+
+```js
+assert($('article').children('p').length === 2);
+```
+
+Il primo elemento `p` dovrebbe avere il testo `French Vanilla`.
+
+```js
+const firstP = $('article').children('p')[0];
+assert(firstP.innerText.match(/French Vanilla/i));
+```
+
+Il secondo elemento `p` dovrebbe avere il testo `3.00`.
+
+```js
+const secondP = $('article').children('p')[1];
+assert(secondP.innerText.match(/3\.00/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
new file mode 100644
index 00000000000..3d88b69e330
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
@@ -0,0 +1,117 @@
+---
+id: 5f3c866dbf362f99b9a0c6d0
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Gli elementi `p` sono annidati in un elemento `article` con l'attributo di classe `item`. Puoi agire sullo stile di tutti gli elementi `p` annidati in qualsiasi elemento con una classe chiamata `item` in questo modo:
+
+```css
+.item p { }
+```
+
+Usando il selettore qui sopra, aggiungi una proprietà `display` con valore `inline-block` in modo che gli elementi `p` si comportino come degli elementi `inline`.
+
+# --hints--
+
+Dovresti utilizzare il selettore `.item p`.
+
+```js
+const hasItemP = new __helpers.CSSHelp(document).getStyle('.item p');
+assert(hasItemP);
+```
+
+Dovresti assegnare alla proprietà `display` il valore `inline-block`.
+
+```js
+const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'inline-block');
+assert(hasDisplay);
+```
+
+Il selettore `.item p` dovrebbe avere una proprietà `display` con il valore `inline-block`.
+
+```js
+const itemPDisplay = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('display');
+assert(itemPDisplay === 'inline-block');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
French Vanilla
+
3.00
+
+
+
Caramel Macchiato
+
3.75
+
+
+
Pumpkin Spice
+
3.50
+
+
+
Hazelnut
+
4.00
+
+
+
Mocha
+
4.50
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.flavor {
+ text-align: left;
+}
+
+.price {
+ text-align: right;
+}
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
new file mode 100644
index 00000000000..1f7a20c7ee8
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
@@ -0,0 +1,111 @@
+---
+id: 5f3c866dd0d0275f01d4d847
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Beh, non ha funzionato. Agire sullo stile degli elementi `p` per renderli `inline-block` e metterli su righe di codice diverse crea uno spazio extra alla destra dell'elemento `p`, facendo passare il secondo alla riga successiva. Un modo per risolvere questo problema è quello di rendere la larghezza di ogni elemento `p` un po' inferiore al `50%`.
+
+Cambia il valore di `width` in `49%` per ogni classe per vedere cosa accade.
+
+# --hints--
+
+Dovresti assegnare alla proprietà `width` il valore `49%` nel selettore `.flavor`.
+
+```js
+const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
+assert(flavorWidth === '49%');
+```
+
+Dovresti assegnare alla proprietà `width` il valore `49%` nel selettore `.price`.
+
+```js
+const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
+assert(priceWidth === '49%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
French Vanilla
+
3.00
+
+
+
Caramel Macchiato
+
3.75
+
+
+
Pumpkin Spice
+
3.50
+
+
+
Hazelnut
+
4.00
+
+
+
Mocha
+
4.50
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+--fcc-editable-region--
+.flavor {
+ text-align: left;
+ width: 50%;
+}
+
+.price {
+ text-align: right;
+ width: 50%;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
new file mode 100644
index 00000000000..dd6e020e5ef
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
@@ -0,0 +1,108 @@
+---
+id: 5f3c866de7a5b784048f94b1
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Inizia ad assomigliare a quello che desideri, ma ora sarebbe bello se il gusto e il prezzo fossero sulla stessa riga. Gli elementi `p` sono elementi di blocco, quindi occupano l'intera larghezza dell'elemento genitore.
+
+Per averli sulla stessa riga, devi agire sullo stile degli elementi `p` e far sì che si comportino come elementi `inline`. Aggiungi un attributo `class` con il valore `item` al primo elemento `article` sotto l'intestazione `Coffee`.
+
+# --hints--
+
+Dovresti applicare la classe `item` all'elemento `article`.
+
+```js
+assert(code.match(//i))
+```
+
+Dovresti avere un solo elemento di classe `item`.
+
+```js
+assert($('.item').length === 1);
+```
+
+Il nuovo elemento `article` dovrebbe avere la classe `item`.
+
+```js
+assert($('article')[0].className === 'item');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+--fcc-editable-region--
+
Coffee
+
+
French Vanilla
+
3.00
+
+--fcc-editable-region--
+
+
Caramel Macchiato
+
3.75
+
+
+
Pumpkin Spice
+
3.50
+
+
+
Hazelnut
+
4.00
+
+
+
Mocha
+
4.50
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.flavor {
+ text-align: left;
+}
+
+.price {
+ text-align: right;
+}
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
new file mode 100644
index 00000000000..df7fe6debfb
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
@@ -0,0 +1,108 @@
+---
+id: 5f3cade94c6576e7f7b7953f
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Adesso prosegui e cambia le larghezze di entrambe le classi `flavor` e `price` in modo che abbiano di nuovo il valore `50%`.
+
+# --hints--
+
+Dovresti assegnare alla proprietà `width` il valore `50%` nel selettore `.flavor`.
+
+```js
+const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
+assert(flavorWidth === '50%');
+```
+
+Dovresti assegnare alla proprietà `width` il valore `50%` nel selettore `.price`.
+
+```js
+const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
+assert(priceWidth === '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
French Vanilla
3.00
+
+
+
Caramel Macchiato
+
3.75
+
+
+
Pumpkin Spice
+
3.50
+
+
+
Hazelnut
+
4.00
+
+
+
Mocha
+
4.50
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+--fcc-editable-region--
+.flavor {
+ text-align: left;
+ width: 49%;
+}
+
+.price {
+ text-align: right;
+ width: 49%;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
new file mode 100644
index 00000000000..4df05251dd8
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
@@ -0,0 +1,119 @@
+---
+id: 5f3cade9993019e26313fa8e
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Ora che sai che funziona, puoi cambiare gli altri elementi `article` e `p` per disporli come il primo set. Inizia aggiungendo la classe `item` agli altri elementi `article`.
+
+# --hints--
+
+Dovresti avere solo cinque elementi `article`.
+
+```js
+assert($('article').length === 5);
+```
+
+Dovresti avere solo cinque elementi `.item`.
+
+```js
+assert($('.item').length === 5);
+```
+
+Gli elementi `.item` dovrebbero essere gli elementi `article`.
+
+
+```js
+const articles = $('article');
+const items = $('.item');
+assert(articles[0] === items[0]);
+assert(articles[1] === items[1]);
+assert(articles[2] === items[2]);
+assert(articles[3] === items[3]);
+assert(articles[4] === items[4]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
French Vanilla
3.00
+
+--fcc-editable-region--
+
+
Caramel Macchiato
+
3.75
+
+
+
Pumpkin Spice
+
3.50
+
+
+
Hazelnut
+
4.00
+
+
+
Mocha
+
4.50
+
+--fcc-editable-region--
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor {
+ text-align: left;
+ width: 50%;
+}
+
+.price {
+ text-align: right;
+ width: 50%;
+}
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
new file mode 100644
index 00000000000..2e312783726
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
@@ -0,0 +1,114 @@
+---
+id: 5f3cade99dda4e6071a85dfd
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Tornerai a breve ad agire sullo stile del menu, intanto prosegui aggiungendo un secondo elemento `section` sotto il primo per visualizzare i dessert offerti dal bar.
+
+# --hints--
+
+Dovresti avere un tag di apertura `section`.
+
+```js
+assert(code.match(//ig).length === 2);
+```
+
+Dovresti avere un tag di chiusura `section`.
+
+```js
+assert(code.match(/<\/section>/ig).length === 2);
+```
+
+Non dovresti cambiare l'elemento `main` esistente.
+
+```js
+assert($('main').length === 1);
+```
+
+Il nuovo elemento `section` dovrebbe essere annidato nell'elemento `main`.
+
+```js
+assert($('main').children('section').length === 2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+--fcc-editable-region--
+
+
Coffee
+
+
French Vanilla
3.00
+
+
+
Caramel Macchiato
3.75
+
+
+
Pumpkin Spice
3.50
+
+
+
Hazelnut
4.00
+
+
+
Mocha
4.50
+
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor {
+ text-align: left;
+ width: 75%;
+}
+
+.price {
+ text-align: right;
+ width: 25%
+}
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
new file mode 100644
index 00000000000..6e44406eba0
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
@@ -0,0 +1,103 @@
+---
+id: 5f3cade9fa77275d9f4efe62
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Ha funzionato, ma c'è ancora un po' di spazio a destra del prezzo.
+
+Potresti continuare a provare diverse percentuali per le larghezze. Invece, puoi semplicemente spostare l'elemento `p` relativo al prezzo in modo che sia sulla stessa riga assicurandoti che non ci sia spazio tra di loro.
+
+# --hints--
+
+Gli elementi `p` non dovrebbero avere spazio tra di loro.
+
+```js
+assert(code.match(/Vanilla<\/p>
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor {
+ text-align: left;
+ width: 75%;
+}
+
+.price {
+ text-align: right;
+ width: 25%
+}
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md
index 0b951514ca5..af9442a92b3 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md
@@ -7,20 +7,20 @@ dashedName: step-46
# --description--
-Se riduci la larghezza dell'anteprima della pagina, noterai ad un certo punto, parte del testo a sinistra inizia ad andare sulla riga successiva. Questo perché la larghezza degli elementi `p` sul lato sinistro può occupare solo il `50%` dello spazio.
+Se riduci la larghezza dell'anteprima della pagina, a un certo punto, noterai che parte del testo a sinistra inizia ad andare sulla riga successiva. Questo perché la larghezza degli elementi `p` sul lato sinistro può occupare solo il `50%` dello spazio.
-Dal momento che sai che i prezzi sulla destra hanno significativamente meno caratteri, modifica la classe `flavor` così che abbia una proprietà `width` con valore `75%` e la classe `price` così che abbia una proprietà `width` con valore `25%`.
+Dal momento che sai che i prezzi sulla destra hanno molti meno caratteri, modifica la classe `flavor` così che abbia una proprietà `width` con valore `75%` e la classe `price` così che abbia una proprietà `width` con valore `25%`.
# --hints--
-Dovresti impostare la proprietà `width` a `75%` nel tuo selettore `.flavor`.
+Dovresti assegnare alla proprietà `width` il valore `75%` nel selettore `.flavor`.
```js
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
assert(flavorWidth === '75%');
```
-Dovresti impostare la proprietà `width` a `25%` nel tuo selettore `.price`.
+Dovresti assegnare alla proprietà `width` il valore `25%` nel selettore `.price`.
```js
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md
new file mode 100644
index 00000000000..3939b575444
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md
@@ -0,0 +1,119 @@
+---
+id: 5f716ad029ee4053c7027a7a
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Annida due elementi `p` all'interno dell'elemento `article`. Il testo del primo dovrebbe essere `Donut` e il testo del secondo `1.50`. Mettili entrambi sulla stessa riga assicurandoti che non ci sia spazio tra loro.
+
+# --hints--
+
+Non dovresti cambiare l'elemento `article` esistente.
+
+```js
+assert($('article').length === 6);
+```
+
+Il nuovo elemento `article` dovrebbe avere due elementi `p`.
+
+```js
+assert($('article').last().children('p').length === 2);
+```
+
+Il primo elemento `p` dovrebbe avere il testo `Donut`.
+
+```js
+assert($('article').last().children('p')[0].innerText.match(/Donut/i));
+```
+
+Il secondo elemento `p` dovrebbe avere il testo `1.50`.
+
+```js
+assert($('article').last().children('p')[1].innerText.match(/1\.50/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor {
+ text-align: left;
+ width: 75%;
+}
+
+.price {
+ text-align: right;
+ width: 25%
+}
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md
new file mode 100644
index 00000000000..f665c7def97
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md
@@ -0,0 +1,100 @@
+---
+id: 5f7691dafd882520797cd2f0
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Adesso, posiziona gli altri elementi `p` sulla stessa riga senza spazio tra di loro.
+
+# --hints--
+
+Non dovresti avere spazi tra gli elementi `p`.
+
+```js
+assert(!code.match(/<\/p>\s+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
French Vanilla
3.00
+
+--fcc-editable-region--
+
+
Caramel Macchiato
+
3.75
+
+
+
Pumpkin Spice
+
3.50
+
+
+
Hazelnut
+
4.00
+
+
+
Mocha
+
4.50
+
+--fcc-editable-region--
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor {
+ text-align: left;
+ width: 50%;
+}
+
+.price {
+ text-align: right;
+ width: 50%;
+}
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md
new file mode 100644
index 00000000000..cb54de83058
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md
@@ -0,0 +1,126 @@
+---
+id: 5f7692f7c5b3ce22a57788b6
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Per completare lo styling, aggiungi i nomi delle classi `flavor` e `price` a tutti i restanti elementi `p`.
+
+# --hints--
+
+Dovresti avere cinque elementi `.flavor`.
+
+```js
+assert($('.flavor').length === 5);
+```
+
+Dovresti avere cinque elementi `.price`.
+
+```js
+assert($('.price').length === 5);
+```
+
+Gli elementi `.flavor` dovrebbero essere gli elementi `p` con il testo `French Vanilla`, `Caramel Macchiato`, `Pumpkin Spice`, `Hazelnut` e `Mocha`.
+
+```js
+const p = $('p');
+const flavor = $('.flavor');
+assert(p[1] === flavor[0]);
+assert(p[3] === flavor[1]);
+assert(p[5] === flavor[2]);
+assert(p[7] === flavor[3]);
+assert(p[9] === flavor[4]);
+```
+
+Gli elementi `.price` dovrebbero essere gli elementi `p` con il testo `3.00`, `3.75`, `3.50`, `4.00`, e `4.50`.
+
+```js
+const p = $('p');
+const price = $('.price');
+assert(p[2] === price[0]);
+assert(p[4] === price[1]);
+assert(p[6] === price[2]);
+assert(p[8] === price[3]);
+assert(p[10] === price[4]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
French Vanilla
3.00
+
+--fcc-editable-region--
+
+
Caramel Macchiato
3.75
+
+
+
Pumpkin Spice
3.50
+
+
+
Hazelnut
4.00
+
+
+
Mocha
4.50
+
+--fcc-editable-region--
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor {
+ text-align: left;
+ width: 50%;
+}
+
+.price {
+ text-align: right;
+ width: 50%;
+}
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md
new file mode 100644
index 00000000000..6e71dd5594e
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md
@@ -0,0 +1,105 @@
+---
+id: 5f769541be494f25449b292f
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Usando la nuova classe `flavor` come selettore, assegna alla proprietà `text-align` il valore `left`.
+
+# --hints--
+
+Dovresti avere un selettore di classe `flavor`.
+
+```js
+const hasFlavor = new __helpers.CSSHelp(document).getStyle('.flavor');
+assert(hasFlavor);
+```
+
+Dovresti assegnare alla proprietà `text-align` il valore `left`.
+
+```js
+const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'left');
+assert(hasTextAlign);
+```
+
+Il selettore di classe `flavor` dovrebbe assegnare alla proprietà `text-align` il valore `left`.
+
+```js
+const flavorTextAlign = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('text-align');
+assert(flavorTextAlign === 'left');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
French Vanilla
+
3.00
+
+
+
Caramel Macchiato
+
3.75
+
+
+
Pumpkin Spice
+
3.50
+
+
+
Hazelnut
+
4.00
+
+
+
Mocha
+
4.50
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
new file mode 100644
index 00000000000..c7629f538d2
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
@@ -0,0 +1,102 @@
+---
+id: 5f76967fad478126d6552b0d
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Il prossimo passo è allineare il prezzo a destra. Aggiungi una classe chiamata `price` all'elemento `p` contenente il testo `3.00`.
+
+# --hints--
+
+Dovresti aggiungere la classe `price` all'elemento `p`.
+
+```js
+assert(code.match(//i));
+```
+
+Dovresti avere un solo elemento con la classe `price`.
+
+```js
+assert($('.price').length === 1);
+```
+
+La classe `price` dovrebbe essere nell'elemento `p` con il testo `3.00`.
+
+```js
+assert($('.price')[0].innerText.match(/3\.00/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
French Vanilla
+--fcc-editable-region--
+
3.00
+--fcc-editable-region--
+
+
+
Caramel Macchiato
+
3.75
+
+
+
Pumpkin Spice
+
3.50
+
+
+
Hazelnut
+
4.00
+
+
+
Mocha
+
4.50
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.flavor {
+ text-align: left;
+}
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md
new file mode 100644
index 00000000000..be37c0b6c63
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md
@@ -0,0 +1,106 @@
+---
+id: 5f769702e6e33127d14aa120
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Adesso allinea a destra il testo degli elementi con la classe `price`.
+
+# --hints--
+
+Dovresti avere un selettore di classe `price`.
+
+```js
+assert(code.match(/\.price\s*{/i));
+```
+
+Il selettore di classe `price` dovrebbe assegnare alla proprietà `text-align` il valore `right`.
+
+```js
+assert(code.match(/\.price\s*{\s*text-align:\s*right;?/i));
+```
+
+L'elemento `.price` dovrebbe essere allineato a destra.
+
+```js
+assert($('.price').css('text-align') === 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
French Vanilla
+
3.00
+
+
+
Caramel Macchiato
+
3.75
+
+
+
Pumpkin Spice
+
3.50
+
+
+
Hazelnut
+
4.00
+
+
+
Mocha
+
4.50
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.flavor {
+ text-align: left;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md
new file mode 100644
index 00000000000..4813f60f60b
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md
@@ -0,0 +1,120 @@
+---
+id: 5f7b87422a560036fd03ccff
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Per i due elementi `p` che hai appena aggiunto, aggiungi `dessert` come valore dell'attributo `class` del primo elemento `p`, e `price` come valore dell'attributo `class` del secondo elemento `p`.
+
+# --hints--
+
+Dovresti avere un elemento `p` con la classe `dessert`.
+
+```js
+assert($('.dessert').length === 1);
+```
+
+L'elemento `p` con il testo `Donut` dovrebbe avere la classe `dessert`.
+
+```js
+assert($('.dessert')[0].innerText.match(/donut/i));
+```
+
+L'elemento `p` con il testo `1.50` dovrebbe avere la classe `price`.
+
+```js
+assert($('.price').last().text().match(/1\.50/));
+```
+
+Non dovresti avere spazi tra i tuoi elementi `p`.
+
+```js
+assert(!code.match(/<\/p>\s+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
French Vanilla
3.00
+
+
+
Caramel Macchiato
3.75
+
+
+
Pumpkin Spice
3.50
+
+
+
Hazelnut
4.00
+
+
+
Mocha
4.50
+
+
+
+
Desserts
+
+--fcc-editable-region--
+
Donut
1.50
+--fcc-editable-region--
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor {
+ text-align: left;
+ width: 75%;
+}
+
+.price {
+ text-align: right;
+ width: 25%
+}
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md
new file mode 100644
index 00000000000..b24375f912c
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md
@@ -0,0 +1,104 @@
+---
+id: 5f7b88d37b1f98386f04edc0
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Sembra esserci qualcosa di sbagliato. Hai aggiunto il valore corretto dell'attributo `class` all'elemento `p` con il testo `Donut`, ma non hai definito un selettore per esso.
+
+Dal momento che il selettore di classe `flavor` ha già le proprietà che vuoi, puoi aggiungergli il nome della classe `dessert`.
+
+# --hints--
+
+Dovresti aggiungere il selettore `.dessert` al selettore `.flavor`.
+
+```js
+const selector = new __helpers.CSSHelp(document).getStyle('.flavor, .dessert') || new __helpers.CSSHelp(document).getStyle('.dessert, .flavor');
+assert(selector)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+