+
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
+
+
+
+ --fcc-editable-region--
+
+
+
+ --fcc-editable-region--
+
+
+
+
+ --fcc-editable-region--
+
+
+
+
+
+
+
+
+ --fcc-editable-region--
+
+
+
+ --fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region--
+
+
+
+
+ --fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region--
+
+
+
+ --fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region--
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region--
+
+
+
+ --fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region--
+
+
+
+
+
+ --fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region--
+
+
+
+ --fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `` or `
` or `
`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `` or `
` or `
Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. + +Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. + +It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Links video above. + +## --text-- + +What HTML tag is used to create a link? + +## --answers-- + +`` + +--- + +`` + +--- + +`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-b.md
new file mode 100644
index 00000000000..a138268c406
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-b.md
@@ -0,0 +1,54 @@
+---
+id: 637f703572c65bc8e73dfe35
+title: Links and Images Question B
+challengeType: 15
+dashedName: links-and-images-question-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- finally, add the following `h1` to the `body`: `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead: + + + +# --question-- + +## --assignment-- + +Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. + +--- + +Make an unordered shopping list of your favorite foods. + +--- + +Make an ordered list of todo’s you need to get done today. + +--- + +Make an unordered list of places you’d like to visit someday. + +--- + +Make an ordered list of your all time top 5 favorite video games or movies. + +## --text-- + +What HTML tag is used to create an unordered list? + +## --answers-- + +`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-question-j.md b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-question-j.md
new file mode 100644
index 00000000000..e496b6b12a8
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-question-j.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+title: Working with Text Question J
+challengeType: 15
+dashedName: working-with-text-question-j
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md b/curriculum/challenges/arabic/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
index 21cbf8fbc0c..d5ddb10d44a 100644
--- a/curriculum/challenges/arabic/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
+++ b/curriculum/challenges/arabic/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
@@ -22,8 +22,12 @@ When is an `ArgumentOutOfRangeException` exception thrown?
An `ArgumentOutOfRangeException` exception is thrown when an attempt is made to index an array outside the bounds of the array.
+---
+
An `ArgumentOutOfRangeException` exception is thrown when the value of an argument is outside the allowable range of values as defined by the method.
+---
+
An `ArgumentOutOfRangeException` exception is thrown when an attempt is made to store a value of one type in an array of another type.
## --video-solution--
diff --git a/curriculum/challenges/arabic/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md b/curriculum/challenges/arabic/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
index 6bf281aac6d..268034e01cb 100644
--- a/curriculum/challenges/arabic/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
+++ b/curriculum/challenges/arabic/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
@@ -30,9 +30,9 @@ Pass this exam to earn your Foundational C# with Microsoft Certification. Before
- You must complete the entire exam in one session.
- Exiting the exam at any point before you are finished, will result in the loss of your progress.
-- The exam consists of multiple-choice questions.
- There is no time limit, but your total time taken will be recorded.
-- Complete the exam and answer a sufficent number of question correctly to earn your certification.
+- The exam consists of 80 multiple-choice questions.
+- Complete the exam and correctly answer at least 70% of the questions to earn your certification.
# --instructions--
diff --git a/curriculum/challenges/arabic/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md b/curriculum/challenges/arabic/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md
new file mode 100644
index 00000000000..b2dda0bcbc7
--- /dev/null
+++ b/curriculum/challenges/arabic/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md
@@ -0,0 +1,46 @@
+---
+id: 5daa813381b9e3db6c126b43
+title: Step 1
+challengeType: 20
+dashedName: step-1
+---
+
+# --description--
+
+PYTHON
+
+Set the `hello` variable to "world". Then print the value.
+
+# --hints--
+
+The `hello` variable should equal "world".
+
+```js
+({ test: () => assert.equal(__userGlobals.get("hello"), "world") })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+one = 1
+hello = "goodbye"
+def a_function():
+ local_thing = "world"
+ print(local_thing)
+
+a_function()
+
+print(hello)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+one = 1
+hello = "world"
+print(hello)
+```
diff --git a/curriculum/challenges/arabic/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md b/curriculum/challenges/arabic/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md
new file mode 100644
index 00000000000..fa8c264ec48
--- /dev/null
+++ b/curriculum/challenges/arabic/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md
@@ -0,0 +1,40 @@
+---
+id: 64a5229b99ff0e8250cd9a72
+title: Step 2
+challengeType: 20
+dashedName: step-2
+---
+
+# --description--
+
+step 2 instructions
+
+# --hints--
+
+Test 1
+
+```js
+({ input: ["Beau", "Carnes"], test: () => {
+ assert.equal( "Beau", __userGlobals.get("name"));
+ assert.equal( "Carnes", __userGlobals.get("last_name"));
+ } })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+name = input('What is your name?')
+print('Hi ' + name)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+name = input('What is your name?')
+last_name = input('What is your last name?')
+print('Hi ' + name + ' ' + last_name)
+```
diff --git a/curriculum/challenges/arabic/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md b/curriculum/challenges/arabic/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md
new file mode 100644
index 00000000000..c5a956a064f
--- /dev/null
+++ b/curriculum/challenges/arabic/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md
@@ -0,0 +1,36 @@
+---
+id: 64b163c20e59cbd4a64940b0
+title: Step 3
+challengeType: 20
+dashedName: step-3
+---
+
+# --description--
+
+Create a function to add two numbers together.
+
+# --hints--
+
+Adding 3 and 5 should return 8.
+
+```js
+({ test: () => assert.equal(__userGlobals.get("add")(3,5), 8) })
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+def add(a, b):
+ return a + b
+```
diff --git a/curriculum/challenges/arabic/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md b/curriculum/challenges/arabic/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md
new file mode 100644
index 00000000000..c2982ad42b4
--- /dev/null
+++ b/curriculum/challenges/arabic/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md
@@ -0,0 +1,34 @@
+---
+id: 64b171849f925b0773aa434c
+title: Step 4
+challengeType: 20
+dashedName: step-4
+---
+
+# --description--
+
+Create an list of numbers from 1 to 3 and assign it to the variable `xs`.
+
+# --hints--
+
+`xs` should be the list `[1,2,3]`.
+
+```js
+({ test: () => assert.deepEqual(Array.from(__userGlobals.get("xs")), [1,2,3])})
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+xs = [1,2,3]
+```
diff --git a/curriculum/challenges/arabic/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md b/curriculum/challenges/arabic/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md
new file mode 100644
index 00000000000..04c38b6965c
--- /dev/null
+++ b/curriculum/challenges/arabic/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md
@@ -0,0 +1,40 @@
+---
+id: 64afc37bf3b37856e035b85e
+title: Upcoming Python Project
+challengeType: 20
+dashedName: upcoming-python-project
+---
+
+# --description--
+
+Python Project instructions
+
+# --hints--
+
+Test 1
+
+```js
+({ input: ["Beau", "Carnes"], test: () => {
+ assert.equal( "Beau", __userGlobals.get("name"));
+ assert.equal( "Carnes", __userGlobals.get("last_name"));
+ } })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+name = input('What is your name?')
+print('Hi ' + name)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+name = input('What is your name?')
+last_name = input('What is your last name?')
+print('Hi ' + name + ' ' + last_name)
+```
diff --git a/curriculum/challenges/chinese-traditional/00-certifications/upcoming-python-certification/upcoming-python-certification.yml b/curriculum/challenges/chinese-traditional/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
new file mode 100644
index 00000000000..71963dffb54
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
@@ -0,0 +1,10 @@
+---
+id: 64afc4e8f3b37856e035b85f
+title: Upcoming Python Certification
+certification: upcoming-python-certification
+challengeType: 7
+isPrivate: true
+tests:
+ -
+ id: 64afc37bf3b37856e035b85e
+ title: Upcoming Python Project
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
index ec25f602823..a43016f11e4 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
@@ -15,7 +15,7 @@ ul {
}
```
-Remove the default styling for the `.answers-list` items by settings its style to `none`, and remove the unordered list padding.
+Remove the default styling for the `.answers-list` items by setting its style to `none`, and remove the unordered list padding.
# --hints--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
index ac0d12b9cd8..fc78b715163 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
@@ -11,18 +11,39 @@ dashedName: step-14
# --hints--
-應該添加四個 `label` 元素。
+There should be three `fieldset` elements in total.
```js
-assert.equal(document.querySelectorAll('label')?.length, 4);
+assert.equal(document.querySelectorAll('fieldset')?.length, 3);
```
-應該在第一個 `fieldset` 內部添加四個 `label` 元素。
+The `fieldset` elements should all be direct children of the `form` element.
```js
-assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.length, 4);
+assert.equal(document.querySelectorAll('form > fieldset')?.length, 3);
```
+The four `label` elements should all be direct children of the first `fieldset` element. Make sure you close the `label` elements.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset:first-child > label')?.length, 4);
+```
+
+The last two `fieldset` elements should be empty.
+
+```js
+const LastTwoFieldsetElements = Array.from(document.querySelectorAll("form fieldset:not(fieldset:first-child)"));
+assert.isTrue(LastTwoFieldsetElements.filter((ele) => ele.innerHTML?.replace(/\s/g, ""))?.length === 0);
+```
+
+Make sure you close the `label` elements.
+
+```js
+assert.lengthOf(document.querySelector('fieldset')?.innerHTML?.match(/<\/label>/g), 4)
+```
+
+
+
# --seed--
## --seed-contents--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
index 90e9b23da46..327638c2d96 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
@@ -26,28 +26,28 @@ assert.equal(document.querySelectorAll('label input')?.length, 4);
應該將第一個 `input` 添加在 `label` 文字 `Enter Your First Name:` 後面，並在冒號後面加一個空格。
```js
-const query = /^Enter Your First Name:\s+/
+const query = /^Enter Your First Name:\s+/
+const query = /^Enter Your Last Name:\s+/
+const query = /^Enter Your Email:\s+/
+const query = /^Create a New Password:\s+/i));
+```
+
+Your `DOCTYPE` declaration should be at the beginning of your HTML.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*/i));
+```
+
+You should have an opening `html` tag with a `lang` attribute of `en`.
+
+```js
+assert(code.match(/
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead: + + + +# --question-- + +## --assignment-- + +Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. + +--- + +Make an unordered shopping list of your favorite foods. + +--- + +Make an ordered list of todo’s you need to get done today. + +--- + +Make an unordered list of places you’d like to visit someday. + +--- + +Make an ordered list of your all time top 5 favorite video games or movies. + +## --text-- + +What HTML tag is used to create an unordered list? + +## --answers-- + +`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-j.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-j.md
new file mode 100644
index 00000000000..e496b6b12a8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-j.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+title: Working with Text Question J
+challengeType: 15
+dashedName: working-with-text-question-j
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md b/curriculum/challenges/chinese-traditional/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
index 21cbf8fbc0c..d5ddb10d44a 100644
--- a/curriculum/challenges/chinese-traditional/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
+++ b/curriculum/challenges/chinese-traditional/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
@@ -22,8 +22,12 @@ When is an `ArgumentOutOfRangeException` exception thrown?
An `ArgumentOutOfRangeException` exception is thrown when an attempt is made to index an array outside the bounds of the array.
+---
+
An `ArgumentOutOfRangeException` exception is thrown when the value of an argument is outside the allowable range of values as defined by the method.
+---
+
An `ArgumentOutOfRangeException` exception is thrown when an attempt is made to store a value of one type in an array of another type.
## --video-solution--
diff --git a/curriculum/challenges/chinese-traditional/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md b/curriculum/challenges/chinese-traditional/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
index 6bf281aac6d..268034e01cb 100644
--- a/curriculum/challenges/chinese-traditional/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
+++ b/curriculum/challenges/chinese-traditional/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
@@ -30,9 +30,9 @@ Pass this exam to earn your Foundational C# with Microsoft Certification. Before
- You must complete the entire exam in one session.
- Exiting the exam at any point before you are finished, will result in the loss of your progress.
-- The exam consists of multiple-choice questions.
- There is no time limit, but your total time taken will be recorded.
-- Complete the exam and answer a sufficent number of question correctly to earn your certification.
+- The exam consists of 80 multiple-choice questions.
+- Complete the exam and correctly answer at least 70% of the questions to earn your certification.
# --instructions--
diff --git a/curriculum/challenges/chinese-traditional/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md b/curriculum/challenges/chinese-traditional/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md
new file mode 100644
index 00000000000..b2dda0bcbc7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md
@@ -0,0 +1,46 @@
+---
+id: 5daa813381b9e3db6c126b43
+title: Step 1
+challengeType: 20
+dashedName: step-1
+---
+
+# --description--
+
+PYTHON
+
+Set the `hello` variable to "world". Then print the value.
+
+# --hints--
+
+The `hello` variable should equal "world".
+
+```js
+({ test: () => assert.equal(__userGlobals.get("hello"), "world") })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+one = 1
+hello = "goodbye"
+def a_function():
+ local_thing = "world"
+ print(local_thing)
+
+a_function()
+
+print(hello)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+one = 1
+hello = "world"
+print(hello)
+```
diff --git a/curriculum/challenges/chinese-traditional/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md b/curriculum/challenges/chinese-traditional/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md
new file mode 100644
index 00000000000..fa8c264ec48
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md
@@ -0,0 +1,40 @@
+---
+id: 64a5229b99ff0e8250cd9a72
+title: Step 2
+challengeType: 20
+dashedName: step-2
+---
+
+# --description--
+
+step 2 instructions
+
+# --hints--
+
+Test 1
+
+```js
+({ input: ["Beau", "Carnes"], test: () => {
+ assert.equal( "Beau", __userGlobals.get("name"));
+ assert.equal( "Carnes", __userGlobals.get("last_name"));
+ } })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+name = input('What is your name?')
+print('Hi ' + name)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+name = input('What is your name?')
+last_name = input('What is your last name?')
+print('Hi ' + name + ' ' + last_name)
+```
diff --git a/curriculum/challenges/chinese-traditional/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md b/curriculum/challenges/chinese-traditional/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md
new file mode 100644
index 00000000000..c5a956a064f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md
@@ -0,0 +1,36 @@
+---
+id: 64b163c20e59cbd4a64940b0
+title: Step 3
+challengeType: 20
+dashedName: step-3
+---
+
+# --description--
+
+Create a function to add two numbers together.
+
+# --hints--
+
+Adding 3 and 5 should return 8.
+
+```js
+({ test: () => assert.equal(__userGlobals.get("add")(3,5), 8) })
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+def add(a, b):
+ return a + b
+```
diff --git a/curriculum/challenges/chinese-traditional/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md b/curriculum/challenges/chinese-traditional/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md
new file mode 100644
index 00000000000..c2982ad42b4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md
@@ -0,0 +1,34 @@
+---
+id: 64b171849f925b0773aa434c
+title: Step 4
+challengeType: 20
+dashedName: step-4
+---
+
+# --description--
+
+Create an list of numbers from 1 to 3 and assign it to the variable `xs`.
+
+# --hints--
+
+`xs` should be the list `[1,2,3]`.
+
+```js
+({ test: () => assert.deepEqual(Array.from(__userGlobals.get("xs")), [1,2,3])})
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+xs = [1,2,3]
+```
diff --git a/curriculum/challenges/chinese-traditional/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md b/curriculum/challenges/chinese-traditional/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md
new file mode 100644
index 00000000000..04c38b6965c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md
@@ -0,0 +1,40 @@
+---
+id: 64afc37bf3b37856e035b85e
+title: Upcoming Python Project
+challengeType: 20
+dashedName: upcoming-python-project
+---
+
+# --description--
+
+Python Project instructions
+
+# --hints--
+
+Test 1
+
+```js
+({ input: ["Beau", "Carnes"], test: () => {
+ assert.equal( "Beau", __userGlobals.get("name"));
+ assert.equal( "Carnes", __userGlobals.get("last_name"));
+ } })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+name = input('What is your name?')
+print('Hi ' + name)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+name = input('What is your name?')
+last_name = input('What is your last name?')
+print('Hi ' + name + ' ' + last_name)
+```
diff --git a/curriculum/challenges/chinese/00-certifications/upcoming-python-certification/upcoming-python-certification.yml b/curriculum/challenges/chinese/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
new file mode 100644
index 00000000000..71963dffb54
--- /dev/null
+++ b/curriculum/challenges/chinese/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
@@ -0,0 +1,10 @@
+---
+id: 64afc4e8f3b37856e035b85f
+title: Upcoming Python Certification
+certification: upcoming-python-certification
+challengeType: 7
+isPrivate: true
+tests:
+ -
+ id: 64afc37bf3b37856e035b85e
+ title: Upcoming Python Project
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
index 59eda513952..7b367805835 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
@@ -15,7 +15,7 @@ ul {
}
```
-Remove the default styling for the `.answers-list` items by settings its style to `none`, and remove the unordered list padding.
+Remove the default styling for the `.answers-list` items by setting its style to `none`, and remove the unordered list padding.
# --hints--
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
index 2d0630923e9..04953f47c10 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
@@ -11,18 +11,39 @@ dashedName: step-14
# --hints--
-应该添加四个 `label` 元素。
+There should be three `fieldset` elements in total.
```js
-assert.equal(document.querySelectorAll('label')?.length, 4);
+assert.equal(document.querySelectorAll('fieldset')?.length, 3);
```
-应该在第一个 `fieldset` 内部添加四个 `label` 元素。
+The `fieldset` elements should all be direct children of the `form` element.
```js
-assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.length, 4);
+assert.equal(document.querySelectorAll('form > fieldset')?.length, 3);
```
+The four `label` elements should all be direct children of the first `fieldset` element. Make sure you close the `label` elements.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset:first-child > label')?.length, 4);
+```
+
+The last two `fieldset` elements should be empty.
+
+```js
+const LastTwoFieldsetElements = Array.from(document.querySelectorAll("form fieldset:not(fieldset:first-child)"));
+assert.isTrue(LastTwoFieldsetElements.filter((ele) => ele.innerHTML?.replace(/\s/g, ""))?.length === 0);
+```
+
+Make sure you close the `label` elements.
+
+```js
+assert.lengthOf(document.querySelector('fieldset')?.innerHTML?.match(/<\/label>/g), 4)
+```
+
+
+
# --seed--
## --seed-contents--
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
index e4c351b01a1..1d9bec8925a 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
@@ -26,28 +26,28 @@ assert.equal(document.querySelectorAll('label input')?.length, 4);
应该将第一个 `input` 添加在 `label` 文字 `Enter Your First Name:` 后面，并在冒号后面加一个空格。
```js
-const query = /^Enter Your First Name:\s+/
+const query = /^Enter Your First Name:\s+/
+const query = /^Enter Your Last Name:\s+/
+const query = /^Enter Your Email:\s+/
+const query = /^Create a New Password:\s+/i));
+```
+
+Your `DOCTYPE` declaration should be at the beginning of your HTML.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*/i));
+```
+
+You should have an opening `html` tag with a `lang` attribute of `en`.
+
+```js
+assert(code.match(/
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead: + + + +# --question-- + +## --assignment-- + +Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. + +--- + +Make an unordered shopping list of your favorite foods. + +--- + +Make an ordered list of todo’s you need to get done today. + +--- + +Make an unordered list of places you’d like to visit someday. + +--- + +Make an ordered list of your all time top 5 favorite video games or movies. + +## --text-- + +What HTML tag is used to create an unordered list? + +## --answers-- + +`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-j.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-j.md
new file mode 100644
index 00000000000..e496b6b12a8
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-j.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+title: Working with Text Question J
+challengeType: 15
+dashedName: working-with-text-question-j
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md b/curriculum/challenges/chinese/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
index 21cbf8fbc0c..d5ddb10d44a 100644
--- a/curriculum/challenges/chinese/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
+++ b/curriculum/challenges/chinese/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
@@ -22,8 +22,12 @@ When is an `ArgumentOutOfRangeException` exception thrown?
An `ArgumentOutOfRangeException` exception is thrown when an attempt is made to index an array outside the bounds of the array.
+---
+
An `ArgumentOutOfRangeException` exception is thrown when the value of an argument is outside the allowable range of values as defined by the method.
+---
+
An `ArgumentOutOfRangeException` exception is thrown when an attempt is made to store a value of one type in an array of another type.
## --video-solution--
diff --git a/curriculum/challenges/chinese/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md b/curriculum/challenges/chinese/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
index 6bf281aac6d..268034e01cb 100644
--- a/curriculum/challenges/chinese/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
+++ b/curriculum/challenges/chinese/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
@@ -30,9 +30,9 @@ Pass this exam to earn your Foundational C# with Microsoft Certification. Before
- You must complete the entire exam in one session.
- Exiting the exam at any point before you are finished, will result in the loss of your progress.
-- The exam consists of multiple-choice questions.
- There is no time limit, but your total time taken will be recorded.
-- Complete the exam and answer a sufficent number of question correctly to earn your certification.
+- The exam consists of 80 multiple-choice questions.
+- Complete the exam and correctly answer at least 70% of the questions to earn your certification.
# --instructions--
diff --git a/curriculum/challenges/chinese/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md b/curriculum/challenges/chinese/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md
new file mode 100644
index 00000000000..b2dda0bcbc7
--- /dev/null
+++ b/curriculum/challenges/chinese/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md
@@ -0,0 +1,46 @@
+---
+id: 5daa813381b9e3db6c126b43
+title: Step 1
+challengeType: 20
+dashedName: step-1
+---
+
+# --description--
+
+PYTHON
+
+Set the `hello` variable to "world". Then print the value.
+
+# --hints--
+
+The `hello` variable should equal "world".
+
+```js
+({ test: () => assert.equal(__userGlobals.get("hello"), "world") })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+one = 1
+hello = "goodbye"
+def a_function():
+ local_thing = "world"
+ print(local_thing)
+
+a_function()
+
+print(hello)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+one = 1
+hello = "world"
+print(hello)
+```
diff --git a/curriculum/challenges/chinese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md b/curriculum/challenges/chinese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md
new file mode 100644
index 00000000000..fa8c264ec48
--- /dev/null
+++ b/curriculum/challenges/chinese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md
@@ -0,0 +1,40 @@
+---
+id: 64a5229b99ff0e8250cd9a72
+title: Step 2
+challengeType: 20
+dashedName: step-2
+---
+
+# --description--
+
+step 2 instructions
+
+# --hints--
+
+Test 1
+
+```js
+({ input: ["Beau", "Carnes"], test: () => {
+ assert.equal( "Beau", __userGlobals.get("name"));
+ assert.equal( "Carnes", __userGlobals.get("last_name"));
+ } })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+name = input('What is your name?')
+print('Hi ' + name)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+name = input('What is your name?')
+last_name = input('What is your last name?')
+print('Hi ' + name + ' ' + last_name)
+```
diff --git a/curriculum/challenges/chinese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md b/curriculum/challenges/chinese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md
new file mode 100644
index 00000000000..c5a956a064f
--- /dev/null
+++ b/curriculum/challenges/chinese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md
@@ -0,0 +1,36 @@
+---
+id: 64b163c20e59cbd4a64940b0
+title: Step 3
+challengeType: 20
+dashedName: step-3
+---
+
+# --description--
+
+Create a function to add two numbers together.
+
+# --hints--
+
+Adding 3 and 5 should return 8.
+
+```js
+({ test: () => assert.equal(__userGlobals.get("add")(3,5), 8) })
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+def add(a, b):
+ return a + b
+```
diff --git a/curriculum/challenges/chinese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md b/curriculum/challenges/chinese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md
new file mode 100644
index 00000000000..c2982ad42b4
--- /dev/null
+++ b/curriculum/challenges/chinese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md
@@ -0,0 +1,34 @@
+---
+id: 64b171849f925b0773aa434c
+title: Step 4
+challengeType: 20
+dashedName: step-4
+---
+
+# --description--
+
+Create an list of numbers from 1 to 3 and assign it to the variable `xs`.
+
+# --hints--
+
+`xs` should be the list `[1,2,3]`.
+
+```js
+({ test: () => assert.deepEqual(Array.from(__userGlobals.get("xs")), [1,2,3])})
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+xs = [1,2,3]
+```
diff --git a/curriculum/challenges/chinese/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md b/curriculum/challenges/chinese/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md
new file mode 100644
index 00000000000..04c38b6965c
--- /dev/null
+++ b/curriculum/challenges/chinese/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md
@@ -0,0 +1,40 @@
+---
+id: 64afc37bf3b37856e035b85e
+title: Upcoming Python Project
+challengeType: 20
+dashedName: upcoming-python-project
+---
+
+# --description--
+
+Python Project instructions
+
+# --hints--
+
+Test 1
+
+```js
+({ input: ["Beau", "Carnes"], test: () => {
+ assert.equal( "Beau", __userGlobals.get("name"));
+ assert.equal( "Carnes", __userGlobals.get("last_name"));
+ } })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+name = input('What is your name?')
+print('Hi ' + name)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+name = input('What is your name?')
+last_name = input('What is your last name?')
+print('Hi ' + name + ' ' + last_name)
+```
diff --git a/curriculum/challenges/espanol/00-certifications/upcoming-python-certification/upcoming-python-certification.yml b/curriculum/challenges/espanol/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
new file mode 100644
index 00000000000..71963dffb54
--- /dev/null
+++ b/curriculum/challenges/espanol/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
@@ -0,0 +1,10 @@
+---
+id: 64afc4e8f3b37856e035b85f
+title: Upcoming Python Certification
+certification: upcoming-python-certification
+challengeType: 7
+isPrivate: true
+tests:
+ -
+ id: 64afc37bf3b37856e035b85e
+ title: Upcoming Python Project
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
index f075a607c5f..642c41acd6a 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
@@ -15,7 +15,7 @@ ul {
}
```
-Remove the default styling for the `.answers-list` items by settings its style to `none`, and remove the unordered list padding.
+Remove the default styling for the `.answers-list` items by setting its style to `none`, and remove the unordered list padding.
# --hints--
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
index 2253a7a253c..3c4d0923b54 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
@@ -11,18 +11,39 @@ El primer `fieldset` contendrá los campos de nombre, email y contraseña. Empie
# --hints--
-Debes agregar cuatro elementos `label`.
+There should be three `fieldset` elements in total.
```js
-assert.equal(document.querySelectorAll('label')?.length, 4);
+assert.equal(document.querySelectorAll('fieldset')?.length, 3);
```
-Debes agregar los elementos `label` al primer `fieldset`.
+The `fieldset` elements should all be direct children of the `form` element.
```js
-assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.length, 4);
+assert.equal(document.querySelectorAll('form > fieldset')?.length, 3);
```
+The four `label` elements should all be direct children of the first `fieldset` element. Make sure you close the `label` elements.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset:first-child > label')?.length, 4);
+```
+
+The last two `fieldset` elements should be empty.
+
+```js
+const LastTwoFieldsetElements = Array.from(document.querySelectorAll("form fieldset:not(fieldset:first-child)"));
+assert.isTrue(LastTwoFieldsetElements.filter((ele) => ele.innerHTML?.replace(/\s/g, ""))?.length === 0);
+```
+
+Make sure you close the `label` elements.
+
+```js
+assert.lengthOf(document.querySelector('fieldset')?.innerHTML?.match(/<\/label>/g), 4)
+```
+
+
+
# --seed--
## --seed-contents--
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
index 9776b9b5792..7d88398a27b 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
@@ -26,28 +26,28 @@ assert.equal(document.querySelectorAll('label input')?.length, 4);
Debes agregar el primer `input` después del texto del `label` que es `Enter Your First Name:`, e incluye un espacio después de los dos puntos.
```js
-const query = /^Enter Your First Name:\s+/
+const query = /^Enter Your First Name:\s+/
+const query = /^Enter Your Last Name:\s+/
+const query = /^Enter Your Email:\s+/
+const query = /^Create a New Password:\s+/i));
+```
+
+Your `DOCTYPE` declaration should be at the beginning of your HTML.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*/i));
+```
+
+You should have an opening `html` tag with a `lang` attribute of `en`.
+
+```js
+assert(code.match(/
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead: + + + +# --question-- + +## --assignment-- + +Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. + +--- + +Make an unordered shopping list of your favorite foods. + +--- + +Make an ordered list of todo’s you need to get done today. + +--- + +Make an unordered list of places you’d like to visit someday. + +--- + +Make an ordered list of your all time top 5 favorite video games or movies. + +## --text-- + +What HTML tag is used to create an unordered list? + +## --answers-- + +`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-j.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-j.md
new file mode 100644
index 00000000000..e496b6b12a8
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-j.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+title: Working with Text Question J
+challengeType: 15
+dashedName: working-with-text-question-j
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md b/curriculum/challenges/espanol/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
index 21cbf8fbc0c..d5ddb10d44a 100644
--- a/curriculum/challenges/espanol/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
+++ b/curriculum/challenges/espanol/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
@@ -22,8 +22,12 @@ When is an `ArgumentOutOfRangeException` exception thrown?
An `ArgumentOutOfRangeException` exception is thrown when an attempt is made to index an array outside the bounds of the array.
+---
+
An `ArgumentOutOfRangeException` exception is thrown when the value of an argument is outside the allowable range of values as defined by the method.
+---
+
An `ArgumentOutOfRangeException` exception is thrown when an attempt is made to store a value of one type in an array of another type.
## --video-solution--
diff --git a/curriculum/challenges/espanol/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md b/curriculum/challenges/espanol/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
index 6bf281aac6d..268034e01cb 100644
--- a/curriculum/challenges/espanol/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
+++ b/curriculum/challenges/espanol/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
@@ -30,9 +30,9 @@ Pass this exam to earn your Foundational C# with Microsoft Certification. Before
- You must complete the entire exam in one session.
- Exiting the exam at any point before you are finished, will result in the loss of your progress.
-- The exam consists of multiple-choice questions.
- There is no time limit, but your total time taken will be recorded.
-- Complete the exam and answer a sufficent number of question correctly to earn your certification.
+- The exam consists of 80 multiple-choice questions.
+- Complete the exam and correctly answer at least 70% of the questions to earn your certification.
# --instructions--
diff --git a/curriculum/challenges/espanol/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md b/curriculum/challenges/espanol/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md
new file mode 100644
index 00000000000..b2dda0bcbc7
--- /dev/null
+++ b/curriculum/challenges/espanol/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md
@@ -0,0 +1,46 @@
+---
+id: 5daa813381b9e3db6c126b43
+title: Step 1
+challengeType: 20
+dashedName: step-1
+---
+
+# --description--
+
+PYTHON
+
+Set the `hello` variable to "world". Then print the value.
+
+# --hints--
+
+The `hello` variable should equal "world".
+
+```js
+({ test: () => assert.equal(__userGlobals.get("hello"), "world") })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+one = 1
+hello = "goodbye"
+def a_function():
+ local_thing = "world"
+ print(local_thing)
+
+a_function()
+
+print(hello)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+one = 1
+hello = "world"
+print(hello)
+```
diff --git a/curriculum/challenges/espanol/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md b/curriculum/challenges/espanol/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md
new file mode 100644
index 00000000000..fa8c264ec48
--- /dev/null
+++ b/curriculum/challenges/espanol/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md
@@ -0,0 +1,40 @@
+---
+id: 64a5229b99ff0e8250cd9a72
+title: Step 2
+challengeType: 20
+dashedName: step-2
+---
+
+# --description--
+
+step 2 instructions
+
+# --hints--
+
+Test 1
+
+```js
+({ input: ["Beau", "Carnes"], test: () => {
+ assert.equal( "Beau", __userGlobals.get("name"));
+ assert.equal( "Carnes", __userGlobals.get("last_name"));
+ } })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+name = input('What is your name?')
+print('Hi ' + name)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+name = input('What is your name?')
+last_name = input('What is your last name?')
+print('Hi ' + name + ' ' + last_name)
+```
diff --git a/curriculum/challenges/espanol/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md b/curriculum/challenges/espanol/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md
new file mode 100644
index 00000000000..c5a956a064f
--- /dev/null
+++ b/curriculum/challenges/espanol/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md
@@ -0,0 +1,36 @@
+---
+id: 64b163c20e59cbd4a64940b0
+title: Step 3
+challengeType: 20
+dashedName: step-3
+---
+
+# --description--
+
+Create a function to add two numbers together.
+
+# --hints--
+
+Adding 3 and 5 should return 8.
+
+```js
+({ test: () => assert.equal(__userGlobals.get("add")(3,5), 8) })
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+def add(a, b):
+ return a + b
+```
diff --git a/curriculum/challenges/espanol/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md b/curriculum/challenges/espanol/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md
new file mode 100644
index 00000000000..c2982ad42b4
--- /dev/null
+++ b/curriculum/challenges/espanol/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md
@@ -0,0 +1,34 @@
+---
+id: 64b171849f925b0773aa434c
+title: Step 4
+challengeType: 20
+dashedName: step-4
+---
+
+# --description--
+
+Create an list of numbers from 1 to 3 and assign it to the variable `xs`.
+
+# --hints--
+
+`xs` should be the list `[1,2,3]`.
+
+```js
+({ test: () => assert.deepEqual(Array.from(__userGlobals.get("xs")), [1,2,3])})
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+xs = [1,2,3]
+```
diff --git a/curriculum/challenges/espanol/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md b/curriculum/challenges/espanol/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md
new file mode 100644
index 00000000000..04c38b6965c
--- /dev/null
+++ b/curriculum/challenges/espanol/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md
@@ -0,0 +1,40 @@
+---
+id: 64afc37bf3b37856e035b85e
+title: Upcoming Python Project
+challengeType: 20
+dashedName: upcoming-python-project
+---
+
+# --description--
+
+Python Project instructions
+
+# --hints--
+
+Test 1
+
+```js
+({ input: ["Beau", "Carnes"], test: () => {
+ assert.equal( "Beau", __userGlobals.get("name"));
+ assert.equal( "Carnes", __userGlobals.get("last_name"));
+ } })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+name = input('What is your name?')
+print('Hi ' + name)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+name = input('What is your name?')
+last_name = input('What is your last name?')
+print('Hi ' + name + ' ' + last_name)
+```
diff --git a/curriculum/challenges/german/00-certifications/upcoming-python-certification/upcoming-python-certification.yml b/curriculum/challenges/german/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
new file mode 100644
index 00000000000..71963dffb54
--- /dev/null
+++ b/curriculum/challenges/german/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
@@ -0,0 +1,10 @@
+---
+id: 64afc4e8f3b37856e035b85f
+title: Upcoming Python Certification
+certification: upcoming-python-certification
+challengeType: 7
+isPrivate: true
+tests:
+ -
+ id: 64afc37bf3b37856e035b85e
+ title: Upcoming Python Project
diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md
index d4dc8242213..fc523af51f0 100644
--- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md
+++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md
@@ -8,7 +8,7 @@ dashedName: how-to-use-passport-strategies
# --description--
-In the `index.pug` file supplied, there is a login form. Es wird durch das Inline-JavaScript `if showLogin` ausgeblendet, wobei das Formular hinten eingerückt wird.
+In der bereitgestellten Datei `index.pug` befindet sich ein Anmeldeformular. Es wird durch das Inline-JavaScript `if showLogin` ausgeblendet, wobei das Formular hinten eingerückt wird.
Füge innerhalb des `res.render` dieser Seite dem Objekt eine neue Variable hinzu, `showLogin: true`. Wenn du deine Seite aktualisierst, solltest du das Formular sehen! Das Formular übermittelt **POST**-Anfragen an `/login`. Hier solltest du also die POST-Anfrage annehmen und den Nutzer authentifizieren.
@@ -24,7 +24,7 @@ Reiche deine Seite ein, wenn du davon ausgehst, alles richtig gemacht zu haben.
# --hints--
-All steps should be correctly implemented in `server.js`.
+Alle Schritte sollten in `server.js` korrekt implementiert sein.
```js
async (getUserInput) => {
diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md
index d50130085f6..6100c45a19e 100644
--- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md
+++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md
@@ -8,7 +8,7 @@ dashedName: implement-the-serialization-of-a-passport-user
# --description--
-You are not loading an actual user object since the database is not set up. Connect to the database once, when you start the server, and keep a persistent connection for the full life-cycle of the app. To do this, add your database's connection string (for example: `mongodb+srv://
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead: + + + +# --question-- + +## --assignment-- + +Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. + +--- + +Make an unordered shopping list of your favorite foods. + +--- + +Make an ordered list of todo’s you need to get done today. + +--- + +Make an unordered list of places you’d like to visit someday. + +--- + +Make an ordered list of your all time top 5 favorite video games or movies. + +## --text-- + +What HTML tag is used to create an unordered list? + +## --answers-- + +`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-j.md b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-j.md
new file mode 100644
index 00000000000..e496b6b12a8
--- /dev/null
+++ b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-j.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+title: Working with Text Question J
+challengeType: 15
+dashedName: working-with-text-question-j
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/german/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md b/curriculum/challenges/german/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
index 21cbf8fbc0c..d5ddb10d44a 100644
--- a/curriculum/challenges/german/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
+++ b/curriculum/challenges/german/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
@@ -22,8 +22,12 @@ When is an `ArgumentOutOfRangeException` exception thrown?
An `ArgumentOutOfRangeException` exception is thrown when an attempt is made to index an array outside the bounds of the array.
+---
+
An `ArgumentOutOfRangeException` exception is thrown when the value of an argument is outside the allowable range of values as defined by the method.
+---
+
An `ArgumentOutOfRangeException` exception is thrown when an attempt is made to store a value of one type in an array of another type.
## --video-solution--
diff --git a/curriculum/challenges/german/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md b/curriculum/challenges/german/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
index 6bf281aac6d..268034e01cb 100644
--- a/curriculum/challenges/german/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
+++ b/curriculum/challenges/german/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
@@ -30,9 +30,9 @@ Pass this exam to earn your Foundational C# with Microsoft Certification. Before
- You must complete the entire exam in one session.
- Exiting the exam at any point before you are finished, will result in the loss of your progress.
-- The exam consists of multiple-choice questions.
- There is no time limit, but your total time taken will be recorded.
-- Complete the exam and answer a sufficent number of question correctly to earn your certification.
+- The exam consists of 80 multiple-choice questions.
+- Complete the exam and correctly answer at least 70% of the questions to earn your certification.
# --instructions--
diff --git a/curriculum/challenges/german/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md b/curriculum/challenges/german/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md
new file mode 100644
index 00000000000..b2dda0bcbc7
--- /dev/null
+++ b/curriculum/challenges/german/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md
@@ -0,0 +1,46 @@
+---
+id: 5daa813381b9e3db6c126b43
+title: Step 1
+challengeType: 20
+dashedName: step-1
+---
+
+# --description--
+
+PYTHON
+
+Set the `hello` variable to "world". Then print the value.
+
+# --hints--
+
+The `hello` variable should equal "world".
+
+```js
+({ test: () => assert.equal(__userGlobals.get("hello"), "world") })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+one = 1
+hello = "goodbye"
+def a_function():
+ local_thing = "world"
+ print(local_thing)
+
+a_function()
+
+print(hello)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+one = 1
+hello = "world"
+print(hello)
+```
diff --git a/curriculum/challenges/german/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md b/curriculum/challenges/german/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md
new file mode 100644
index 00000000000..fa8c264ec48
--- /dev/null
+++ b/curriculum/challenges/german/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md
@@ -0,0 +1,40 @@
+---
+id: 64a5229b99ff0e8250cd9a72
+title: Step 2
+challengeType: 20
+dashedName: step-2
+---
+
+# --description--
+
+step 2 instructions
+
+# --hints--
+
+Test 1
+
+```js
+({ input: ["Beau", "Carnes"], test: () => {
+ assert.equal( "Beau", __userGlobals.get("name"));
+ assert.equal( "Carnes", __userGlobals.get("last_name"));
+ } })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+name = input('What is your name?')
+print('Hi ' + name)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+name = input('What is your name?')
+last_name = input('What is your last name?')
+print('Hi ' + name + ' ' + last_name)
+```
diff --git a/curriculum/challenges/german/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md b/curriculum/challenges/german/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md
new file mode 100644
index 00000000000..c5a956a064f
--- /dev/null
+++ b/curriculum/challenges/german/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md
@@ -0,0 +1,36 @@
+---
+id: 64b163c20e59cbd4a64940b0
+title: Step 3
+challengeType: 20
+dashedName: step-3
+---
+
+# --description--
+
+Create a function to add two numbers together.
+
+# --hints--
+
+Adding 3 and 5 should return 8.
+
+```js
+({ test: () => assert.equal(__userGlobals.get("add")(3,5), 8) })
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+def add(a, b):
+ return a + b
+```
diff --git a/curriculum/challenges/german/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md b/curriculum/challenges/german/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md
new file mode 100644
index 00000000000..c2982ad42b4
--- /dev/null
+++ b/curriculum/challenges/german/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md
@@ -0,0 +1,34 @@
+---
+id: 64b171849f925b0773aa434c
+title: Step 4
+challengeType: 20
+dashedName: step-4
+---
+
+# --description--
+
+Create an list of numbers from 1 to 3 and assign it to the variable `xs`.
+
+# --hints--
+
+`xs` should be the list `[1,2,3]`.
+
+```js
+({ test: () => assert.deepEqual(Array.from(__userGlobals.get("xs")), [1,2,3])})
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+xs = [1,2,3]
+```
diff --git a/curriculum/challenges/german/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md b/curriculum/challenges/german/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md
new file mode 100644
index 00000000000..04c38b6965c
--- /dev/null
+++ b/curriculum/challenges/german/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md
@@ -0,0 +1,40 @@
+---
+id: 64afc37bf3b37856e035b85e
+title: Upcoming Python Project
+challengeType: 20
+dashedName: upcoming-python-project
+---
+
+# --description--
+
+Python Project instructions
+
+# --hints--
+
+Test 1
+
+```js
+({ input: ["Beau", "Carnes"], test: () => {
+ assert.equal( "Beau", __userGlobals.get("name"));
+ assert.equal( "Carnes", __userGlobals.get("last_name"));
+ } })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+name = input('What is your name?')
+print('Hi ' + name)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+name = input('What is your name?')
+last_name = input('What is your last name?')
+print('Hi ' + name + ' ' + last_name)
+```
diff --git a/curriculum/challenges/italian/00-certifications/upcoming-python-certification/upcoming-python-certification.yml b/curriculum/challenges/italian/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
new file mode 100644
index 00000000000..71963dffb54
--- /dev/null
+++ b/curriculum/challenges/italian/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
@@ -0,0 +1,10 @@
+---
+id: 64afc4e8f3b37856e035b85f
+title: Upcoming Python Certification
+certification: upcoming-python-certification
+challengeType: 7
+isPrivate: true
+tests:
+ -
+ id: 64afc37bf3b37856e035b85e
+ title: Upcoming Python Project
diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md
index 6b21631081a..19af5ac694a 100644
--- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md
+++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md
@@ -23,7 +23,7 @@ Esegui i test per vedere l'output atteso per ogni metodo. Questi metodi devono e
# --hints--
-You should not change the function signature.
+Non dovresti cambiare la riga della dichiarazione della funzione.
```js
assert.match(code, /const\s+Person\s*=\s*function\s*\(\s*first\s*,\s*last\s*\)\s*{/);
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
index e85ce896745..3522de87e7a 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
@@ -11,18 +11,39 @@ Il primo elemento `fieldset` conterrà i campi nome, email e password. Inizia ag
# --hints--
-Dovresti aggiungere quattro elementi `label`.
+Ci dovrebbero essere tre elementi `fieldset` in totale.
```js
-assert.equal(document.querySelectorAll('label')?.length, 4);
+assert.equal(document.querySelectorAll('fieldset')?.length, 3);
```
-Dovresti aggiungere gli elementi `label` al primo `fieldset`.
+Gli elementi `fieldset` dovrebbero essere tutti figli diretti dell'elemento `form`.
```js
-assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.length, 4);
+assert.equal(document.querySelectorAll('form > fieldset')?.length, 3);
```
+I quattro elementi `label` dovrebbero essere tutti figli diretti del primo elemento `fieldset`. Assicurati di chiudere gli elementi `label`.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset:first-child > label')?.length, 4);
+```
+
+Gli ultimi due elementi `fieldset` dovrebbero essere vuoti.
+
+```js
+const LastTwoFieldsetElements = Array.from(document.querySelectorAll("form fieldset:not(fieldset:first-child)"));
+assert.isTrue(LastTwoFieldsetElements.filter((ele) => ele.innerHTML?.replace(/\s/g, ""))?.length === 0);
+```
+
+Assicurati di chiudere gli elementi `label`.
+
+```js
+assert.lengthOf(document.querySelector('fieldset')?.innerHTML?.match(/<\/label>/g), 4)
+```
+
+
+
# --seed--
## --seed-contents--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
index 7f559583945..e0e86613c18 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
@@ -26,28 +26,28 @@ assert.equal(document.querySelectorAll('label input')?.length, 4);
Dovresti aggiungere il primo `input` dopo il testo `Enter Your First Name:` dell'elemento `label` e includere uno spazio dopo i due punti.
```js
-const query = /^Enter Your First Name:\s+/
+const query = /^Enter Your First Name:\s+/
+const query = /^Enter Your Last Name:\s+/
+const query = /^Enter Your Email:\s+/
+const query = /^Create a New Password:\s+/i));
+```
+
+Your `DOCTYPE` declaration should be at the beginning of your HTML.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*/i));
+```
+
+You should have an opening `html` tag with a `lang` attribute of `en`.
+
+```js
+assert(code.match(/
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead: + + + +# --question-- + +## --assignment-- + +Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. + +--- + +Make an unordered shopping list of your favorite foods. + +--- + +Make an ordered list of todo’s you need to get done today. + +--- + +Make an unordered list of places you’d like to visit someday. + +--- + +Make an ordered list of your all time top 5 favorite video games or movies. + +## --text-- + +What HTML tag is used to create an unordered list? + +## --answers-- + +`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-j.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-j.md
new file mode 100644
index 00000000000..e496b6b12a8
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-j.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+title: Working with Text Question J
+challengeType: 15
+dashedName: working-with-text-question-j
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md b/curriculum/challenges/italian/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
index 21cbf8fbc0c..d5ddb10d44a 100644
--- a/curriculum/challenges/italian/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
+++ b/curriculum/challenges/italian/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
@@ -22,8 +22,12 @@ When is an `ArgumentOutOfRangeException` exception thrown?
An `ArgumentOutOfRangeException` exception is thrown when an attempt is made to index an array outside the bounds of the array.
+---
+
An `ArgumentOutOfRangeException` exception is thrown when the value of an argument is outside the allowable range of values as defined by the method.
+---
+
An `ArgumentOutOfRangeException` exception is thrown when an attempt is made to store a value of one type in an array of another type.
## --video-solution--
diff --git a/curriculum/challenges/italian/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md b/curriculum/challenges/italian/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
index 6bf281aac6d..268034e01cb 100644
--- a/curriculum/challenges/italian/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
+++ b/curriculum/challenges/italian/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
@@ -30,9 +30,9 @@ Pass this exam to earn your Foundational C# with Microsoft Certification. Before
- You must complete the entire exam in one session.
- Exiting the exam at any point before you are finished, will result in the loss of your progress.
-- The exam consists of multiple-choice questions.
- There is no time limit, but your total time taken will be recorded.
-- Complete the exam and answer a sufficent number of question correctly to earn your certification.
+- The exam consists of 80 multiple-choice questions.
+- Complete the exam and correctly answer at least 70% of the questions to earn your certification.
# --instructions--
diff --git a/curriculum/challenges/italian/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md b/curriculum/challenges/italian/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md
new file mode 100644
index 00000000000..b2dda0bcbc7
--- /dev/null
+++ b/curriculum/challenges/italian/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md
@@ -0,0 +1,46 @@
+---
+id: 5daa813381b9e3db6c126b43
+title: Step 1
+challengeType: 20
+dashedName: step-1
+---
+
+# --description--
+
+PYTHON
+
+Set the `hello` variable to "world". Then print the value.
+
+# --hints--
+
+The `hello` variable should equal "world".
+
+```js
+({ test: () => assert.equal(__userGlobals.get("hello"), "world") })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+one = 1
+hello = "goodbye"
+def a_function():
+ local_thing = "world"
+ print(local_thing)
+
+a_function()
+
+print(hello)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+one = 1
+hello = "world"
+print(hello)
+```
diff --git a/curriculum/challenges/italian/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md b/curriculum/challenges/italian/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md
new file mode 100644
index 00000000000..fa8c264ec48
--- /dev/null
+++ b/curriculum/challenges/italian/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md
@@ -0,0 +1,40 @@
+---
+id: 64a5229b99ff0e8250cd9a72
+title: Step 2
+challengeType: 20
+dashedName: step-2
+---
+
+# --description--
+
+step 2 instructions
+
+# --hints--
+
+Test 1
+
+```js
+({ input: ["Beau", "Carnes"], test: () => {
+ assert.equal( "Beau", __userGlobals.get("name"));
+ assert.equal( "Carnes", __userGlobals.get("last_name"));
+ } })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+name = input('What is your name?')
+print('Hi ' + name)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+name = input('What is your name?')
+last_name = input('What is your last name?')
+print('Hi ' + name + ' ' + last_name)
+```
diff --git a/curriculum/challenges/italian/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md b/curriculum/challenges/italian/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md
new file mode 100644
index 00000000000..c5a956a064f
--- /dev/null
+++ b/curriculum/challenges/italian/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md
@@ -0,0 +1,36 @@
+---
+id: 64b163c20e59cbd4a64940b0
+title: Step 3
+challengeType: 20
+dashedName: step-3
+---
+
+# --description--
+
+Create a function to add two numbers together.
+
+# --hints--
+
+Adding 3 and 5 should return 8.
+
+```js
+({ test: () => assert.equal(__userGlobals.get("add")(3,5), 8) })
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+def add(a, b):
+ return a + b
+```
diff --git a/curriculum/challenges/italian/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md b/curriculum/challenges/italian/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md
new file mode 100644
index 00000000000..c2982ad42b4
--- /dev/null
+++ b/curriculum/challenges/italian/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md
@@ -0,0 +1,34 @@
+---
+id: 64b171849f925b0773aa434c
+title: Step 4
+challengeType: 20
+dashedName: step-4
+---
+
+# --description--
+
+Create an list of numbers from 1 to 3 and assign it to the variable `xs`.
+
+# --hints--
+
+`xs` should be the list `[1,2,3]`.
+
+```js
+({ test: () => assert.deepEqual(Array.from(__userGlobals.get("xs")), [1,2,3])})
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+xs = [1,2,3]
+```
diff --git a/curriculum/challenges/italian/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md b/curriculum/challenges/italian/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md
new file mode 100644
index 00000000000..04c38b6965c
--- /dev/null
+++ b/curriculum/challenges/italian/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md
@@ -0,0 +1,40 @@
+---
+id: 64afc37bf3b37856e035b85e
+title: Upcoming Python Project
+challengeType: 20
+dashedName: upcoming-python-project
+---
+
+# --description--
+
+Python Project instructions
+
+# --hints--
+
+Test 1
+
+```js
+({ input: ["Beau", "Carnes"], test: () => {
+ assert.equal( "Beau", __userGlobals.get("name"));
+ assert.equal( "Carnes", __userGlobals.get("last_name"));
+ } })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+name = input('What is your name?')
+print('Hi ' + name)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+name = input('What is your name?')
+last_name = input('What is your last name?')
+print('Hi ' + name + ' ' + last_name)
+```
diff --git a/curriculum/challenges/japanese/00-certifications/upcoming-python-certification/upcoming-python-certification.yml b/curriculum/challenges/japanese/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
new file mode 100644
index 00000000000..71963dffb54
--- /dev/null
+++ b/curriculum/challenges/japanese/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
@@ -0,0 +1,10 @@
+---
+id: 64afc4e8f3b37856e035b85f
+title: Upcoming Python Certification
+certification: upcoming-python-certification
+challengeType: 7
+isPrivate: true
+tests:
+ -
+ id: 64afc37bf3b37856e035b85e
+ title: Upcoming Python Project
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
index df0e5658913..04ae9f3b191 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
@@ -15,7 +15,7 @@ ul {
}
```
-Remove the default styling for the `.answers-list` items by settings its style to `none`, and remove the unordered list padding.
+Remove the default styling for the `.answers-list` items by setting its style to `none`, and remove the unordered list padding.
# --hints--
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
index cf0669596da..ed61fab437e 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
@@ -11,18 +11,39 @@ dashedName: step-14
# --hints--
-`label` 要素を 4 つ追加する必要があります。
+There should be three `fieldset` elements in total.
```js
-assert.equal(document.querySelectorAll('label')?.length, 4);
+assert.equal(document.querySelectorAll('fieldset')?.length, 3);
```
-1 つ目の `fieldset` に `label` 要素を追加してください。
+The `fieldset` elements should all be direct children of the `form` element.
```js
-assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.length, 4);
+assert.equal(document.querySelectorAll('form > fieldset')?.length, 3);
```
+The four `label` elements should all be direct children of the first `fieldset` element. Make sure you close the `label` elements.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset:first-child > label')?.length, 4);
+```
+
+The last two `fieldset` elements should be empty.
+
+```js
+const LastTwoFieldsetElements = Array.from(document.querySelectorAll("form fieldset:not(fieldset:first-child)"));
+assert.isTrue(LastTwoFieldsetElements.filter((ele) => ele.innerHTML?.replace(/\s/g, ""))?.length === 0);
+```
+
+Make sure you close the `label` elements.
+
+```js
+assert.lengthOf(document.querySelector('fieldset')?.innerHTML?.match(/<\/label>/g), 4)
+```
+
+
+
# --seed--
## --seed-contents--
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
index 5224a6205a9..b292c226df8 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
@@ -26,28 +26,28 @@ assert.equal(document.querySelectorAll('label input')?.length, 4);
`label` のテキスト `Enter Your First Name:` の後に 1 つ目の `input` を追加し、コロンの後にはスペースを入れてください。
```js
-const query = /^Enter Your First Name:\s+/
+const query = /^Enter Your First Name:\s+/
+const query = /^Enter Your Last Name:\s+/
+const query = /^Enter Your Email:\s+/
+const query = /^Create a New Password:\s+/i));
+```
+
+Your `DOCTYPE` declaration should be at the beginning of your HTML.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*/i));
+```
+
+You should have an opening `html` tag with a `lang` attribute of `en`.
+
+```js
+assert(code.match(/
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead: + + + +# --question-- + +## --assignment-- + +Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. + +--- + +Make an unordered shopping list of your favorite foods. + +--- + +Make an ordered list of todo’s you need to get done today. + +--- + +Make an unordered list of places you’d like to visit someday. + +--- + +Make an ordered list of your all time top 5 favorite video games or movies. + +## --text-- + +What HTML tag is used to create an unordered list? + +## --answers-- + +`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-j.md b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-j.md
new file mode 100644
index 00000000000..e496b6b12a8
--- /dev/null
+++ b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-j.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+title: Working with Text Question J
+challengeType: 15
+dashedName: working-with-text-question-j
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- `
+
+---
+
+`
- `
+
+---
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/japanese/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md b/curriculum/challenges/japanese/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
index 21cbf8fbc0c..d5ddb10d44a 100644
--- a/curriculum/challenges/japanese/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
+++ b/curriculum/challenges/japanese/19-foundational-c-sharp-with-microsoft/debug-c-sharp-console-applications/guided-project-debug-and-handle-exceptions-in-a-c-sharp-console-application-using-visual-studio-code.md
@@ -22,8 +22,12 @@ When is an `ArgumentOutOfRangeException` exception thrown?
An `ArgumentOutOfRangeException` exception is thrown when an attempt is made to index an array outside the bounds of the array.
+---
+
An `ArgumentOutOfRangeException` exception is thrown when the value of an argument is outside the allowable range of values as defined by the method.
+---
+
An `ArgumentOutOfRangeException` exception is thrown when an attempt is made to store a value of one type in an array of another type.
## --video-solution--
diff --git a/curriculum/challenges/japanese/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md b/curriculum/challenges/japanese/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
index 6bf281aac6d..268034e01cb 100644
--- a/curriculum/challenges/japanese/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
+++ b/curriculum/challenges/japanese/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md
@@ -30,9 +30,9 @@ Pass this exam to earn your Foundational C# with Microsoft Certification. Before
- You must complete the entire exam in one session.
- Exiting the exam at any point before you are finished, will result in the loss of your progress.
-- The exam consists of multiple-choice questions.
- There is no time limit, but your total time taken will be recorded.
-- Complete the exam and answer a sufficent number of question correctly to earn your certification.
+- The exam consists of 80 multiple-choice questions.
+- Complete the exam and correctly answer at least 70% of the questions to earn your certification.
# --instructions--
diff --git a/curriculum/challenges/japanese/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md b/curriculum/challenges/japanese/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md
new file mode 100644
index 00000000000..b2dda0bcbc7
--- /dev/null
+++ b/curriculum/challenges/japanese/20-upcoming-python/learn-python-by-building-a-blackjack-game/5daa813381b9e3db6c126b43.md
@@ -0,0 +1,46 @@
+---
+id: 5daa813381b9e3db6c126b43
+title: Step 1
+challengeType: 20
+dashedName: step-1
+---
+
+# --description--
+
+PYTHON
+
+Set the `hello` variable to "world". Then print the value.
+
+# --hints--
+
+The `hello` variable should equal "world".
+
+```js
+({ test: () => assert.equal(__userGlobals.get("hello"), "world") })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+one = 1
+hello = "goodbye"
+def a_function():
+ local_thing = "world"
+ print(local_thing)
+
+a_function()
+
+print(hello)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+one = 1
+hello = "world"
+print(hello)
+```
diff --git a/curriculum/challenges/japanese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md b/curriculum/challenges/japanese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md
new file mode 100644
index 00000000000..fa8c264ec48
--- /dev/null
+++ b/curriculum/challenges/japanese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64a5229b99ff0e8250cd9a72.md
@@ -0,0 +1,40 @@
+---
+id: 64a5229b99ff0e8250cd9a72
+title: Step 2
+challengeType: 20
+dashedName: step-2
+---
+
+# --description--
+
+step 2 instructions
+
+# --hints--
+
+Test 1
+
+```js
+({ input: ["Beau", "Carnes"], test: () => {
+ assert.equal( "Beau", __userGlobals.get("name"));
+ assert.equal( "Carnes", __userGlobals.get("last_name"));
+ } })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+name = input('What is your name?')
+print('Hi ' + name)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+name = input('What is your name?')
+last_name = input('What is your last name?')
+print('Hi ' + name + ' ' + last_name)
+```
diff --git a/curriculum/challenges/japanese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md b/curriculum/challenges/japanese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md
new file mode 100644
index 00000000000..c5a956a064f
--- /dev/null
+++ b/curriculum/challenges/japanese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b163c20e59cbd4a64940b0.md
@@ -0,0 +1,36 @@
+---
+id: 64b163c20e59cbd4a64940b0
+title: Step 3
+challengeType: 20
+dashedName: step-3
+---
+
+# --description--
+
+Create a function to add two numbers together.
+
+# --hints--
+
+Adding 3 and 5 should return 8.
+
+```js
+({ test: () => assert.equal(__userGlobals.get("add")(3,5), 8) })
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+def add(a, b):
+ return a + b
+```
diff --git a/curriculum/challenges/japanese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md b/curriculum/challenges/japanese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md
new file mode 100644
index 00000000000..c2982ad42b4
--- /dev/null
+++ b/curriculum/challenges/japanese/20-upcoming-python/learn-python-by-building-a-blackjack-game/64b171849f925b0773aa434c.md
@@ -0,0 +1,34 @@
+---
+id: 64b171849f925b0773aa434c
+title: Step 4
+challengeType: 20
+dashedName: step-4
+---
+
+# --description--
+
+Create an list of numbers from 1 to 3 and assign it to the variable `xs`.
+
+# --hints--
+
+`xs` should be the list `[1,2,3]`.
+
+```js
+({ test: () => assert.deepEqual(Array.from(__userGlobals.get("xs")), [1,2,3])})
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+xs = [1,2,3]
+```
diff --git a/curriculum/challenges/japanese/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md b/curriculum/challenges/japanese/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md
new file mode 100644
index 00000000000..04c38b6965c
--- /dev/null
+++ b/curriculum/challenges/japanese/20-upcoming-python/upcoming-python-project/64afc37bf3b37856e035b85e.md
@@ -0,0 +1,40 @@
+---
+id: 64afc37bf3b37856e035b85e
+title: Upcoming Python Project
+challengeType: 20
+dashedName: upcoming-python-project
+---
+
+# --description--
+
+Python Project instructions
+
+# --hints--
+
+Test 1
+
+```js
+({ input: ["Beau", "Carnes"], test: () => {
+ assert.equal( "Beau", __userGlobals.get("name"));
+ assert.equal( "Carnes", __userGlobals.get("last_name"));
+ } })
+```
+
+# --seed--
+
+## --seed-contents--
+
+```py
+--fcc-editable-region--
+name = input('What is your name?')
+print('Hi ' + name)
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```py
+name = input('What is your name?')
+last_name = input('What is your last name?')
+print('Hi ' + name + ' ' + last_name)
+```
diff --git a/curriculum/challenges/portuguese/00-certifications/upcoming-python-certification/upcoming-python-certification.yml b/curriculum/challenges/portuguese/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
new file mode 100644
index 00000000000..382a0b9a038
--- /dev/null
+++ b/curriculum/challenges/portuguese/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
@@ -0,0 +1,10 @@
+---
+id: 64afc4e8f3b37856e035b85f
+title: Próxima certificação de Python
+certification: upcoming-python-certification
+challengeType: 7
+isPrivate: true
+tests:
+ -
+ id: 64afc37bf3b37856e035b85e
+ title: Próximo projeto de Python
diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md
index 2275743b452..0c120026cd7 100644
--- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md
+++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md
@@ -8,7 +8,7 @@ dashedName: sorted-union
# --description--
-Escreva uma função que recebe dois ou mais arrays e retorne um novo array de calores únicos na ordem do array original fornecido.
+Escreva uma função que recebe dois ou mais arrays e retorne um novo array de valores únicos na ordem do array original fornecido.
Em outras palavras, todos os valores presentes de todos os arrays devem ser incluídos na sua ordem original, mas sem valores duplicados no array final.
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
index 8c05d7bab3f..21a8a220c03 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
@@ -11,18 +11,39 @@ O primeiro `fieldset` terá os campos para nome, e-mail e senha. Comece adiciona
# --hints--
-Você deve criar quatro elementos `label`.
+Deve haver três elementos `fieldset` no total.
```js
-assert.equal(document.querySelectorAll('label')?.length, 4);
+assert.equal(document.querySelectorAll('fieldset')?.length, 3);
```
-Você deve adicionar quatro elementos `label` ao primeiro `fieldset`.
+Todos os elementos `fieldset` devem ser filhos diretos do elemento `form`.
```js
-assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.length, 4);
+assert.equal(document.querySelectorAll('form > fieldset')?.length, 3);
```
+Todos os quatro elementos `label` devem ser filhos diretos do primeiro elemento `fieldset`. Não se esqueça de fechar os elementos `label`.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset:first-child > label')?.length, 4);
+```
+
+Os dois últimos elementos `fieldset` devem estar vazios.
+
+```js
+const LastTwoFieldsetElements = Array.from(document.querySelectorAll("form fieldset:not(fieldset:first-child)"));
+assert.isTrue(LastTwoFieldsetElements.filter((ele) => ele.innerHTML?.replace(/\s/g, ""))?.length === 0);
+```
+
+Não se esqueça de fechar os elementos `label`.
+
+```js
+assert.lengthOf(document.querySelector('fieldset')?.innerHTML?.match(/<\/label>/g), 4)
+```
+
+
+
# --seed--
## --seed-contents--
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
index 316a90bf5f1..d849343d690 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
@@ -26,28 +26,28 @@ assert.equal(document.querySelectorAll('label input')?.length, 4);
Você deve adicionar o primeiro `input` após o texto `Enter Your First Name:` do elemento `label` e incluir um espaço depois dos dois-pontos.
```js
-const query = /^Enter Your First Name:\s+/
+const query = /^Enter Your First Name:\s+/
+const query = /^Enter Your Last Name:\s+/
+const query = /^Enter Your Email:\s+/
+const query = /^Create a New Password:\s+/i));
+```
+
+Your `DOCTYPE` declaration should be at the beginning of your HTML.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*/i));
+```
+
+You should have an opening `html` tag with a `lang` attribute of `en`.
+
+```js
+assert(code.match(/
fCC Cat Painting + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md new file mode 100644 index 00000000000..1757ddb08e0 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md @@ -0,0 +1,51 @@ +--- +id: 646c586be7180e40ddf74ff6 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Give your `body` element a `background-color` of `#c9d2fc`. + +# --hints-- + +You should have a `body` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` selector should have a `background-color` property set to `#c9d2fc`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(201, 210, 252)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + +``` + +```css +* { + box-sizing: border-box; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md new file mode 100644 index 00000000000..c605ff01e1d --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md @@ -0,0 +1,66 @@ +--- +id: 646c59e942f35541923104bf +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Back in your HTML, create a `main` element. Inside that `main` element, add a `div` element with the class `cat-head`. + +# --hints-- + +You should have a `main` element. + +```js +assert(document.querySelectorAll('main').length === 1); +``` + +You should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 1); +``` + +Your `div` element should have the class `cat-head`. + +```js +assert(document.querySelector('div')?.getAttribute('class') === 'cat-head'); +``` + +Your `div` element should be inside your `main` tag. + +```js +assert(document.querySelectorAll('main div').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md new file mode 100644 index 00000000000..81eb5c83f27 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md @@ -0,0 +1,79 @@ +--- +id: 646c5ace05e4be4211407935 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +To see the `cat-head` element, give it a linear gradient background with `#5e5e5e` at `85%` and `#45454f` at `100%`. + +You might not notice the difference between these two colors, but they are there. + +# --hints-- + +Your `.cat-head` selector should have a `background` property. + +```js +assert.match(code, /background:/) +``` + +Your `background` property should use the `linear-gradient` function. + +```js +assert.match(code, /background:\s*linear-gradient\(/) +``` + +Your `linear-gradient` function should set the first color to be `#5e5e5e` at `85%`. + +```js +assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%/) +``` + +Your `linear-gradient` function should set the second color to be `#45454f` at `100%`. + +```js +assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%,\s+#45454f\s+100%\);?/) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md new file mode 100644 index 00000000000..98afa6c6b3b --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md @@ -0,0 +1,77 @@ +--- +id: 646c5d7057c45f432fcdd46c +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Using a class selector, give the `.cat-head` element a width of `205px` and a height of `180px`. Also, give it a border of `1px solid #000` and a `border-radius` of `46%`. + +# --hints-- + +You should have a `.cat-head` selector. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')) +``` + +Your `.cat-head` selector should have a `width` set to `205px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.width === '205px'); +``` + +Your `.cat-head` selector should have a `height` set to `180px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.height === '180px') +``` + +Your `.cat-head` selector should have a `border` set to `1px solid #000`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.border === '1px solid rgb(0, 0, 0)') +``` + +Your `.cat-head` selector should have a `border-radius` set to `46%`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle(".cat-head")?.borderRadius === '46%') +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md new file mode 100644 index 00000000000..7c88ce9baa8 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md @@ -0,0 +1,78 @@ +--- +id: 646c5e727e56e743c9aed4a1 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +CSS positioning lets you set how you want an element to be positioned in the browser. It has a `position` property you can set to `static`, `absolute`, `relative`, `sticky` or `fixed`. + +Once you set the `position` property of the element, you can move the element around by setting a pixel or a percentage value for one or more of the `top`, `right`, `left`, or `bottom` properties. + +`static` is the default positioning for all elements. If you assign it to an element, you won't be able to move it around with `top`, `right`, `left`, or `bottom`. + +Give `.cat-head` a `position` property of `static`, then set the `top` and `left` properties to `100px` each. + + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `static`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'static') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + --fcc-editable-region-- + + --fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md new file mode 100644 index 00000000000..9c460caa45f --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md @@ -0,0 +1,80 @@ +--- +id: 646c5ffef5598d449b52ec12 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Now you should work on the cat's ears. There will be a right and a left ear, and inside each, there will be an inner ear. + +Inside your `.cat-head` element, create a `div` element with the class `cat-ears`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-head`. + +```js +assert(document.querySelectorAll('div.cat-head').length === 1); +``` + +You should create one `div` element inside your `.cat-head` element. + +```js +assert(document.querySelectorAll('.cat-head div').length === 1); +``` + +Your `div` element should have the class `cat-ears`. + +```js +assert(document.querySelectorAll('.cat-head div')[0]?.getAttribute('class') === 'cat-ears'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md new file mode 100644 index 00000000000..356b443cc39 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md @@ -0,0 +1,86 @@ +--- +id: 646ce8bb4b35544d501c7184 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Inside your `.cat-ears` element, create two `div` elements with the classes `cat-left-ear` and `cat-right-ear` respectively. + +# --hints-- + +You should not change the existing `div` element with the class `car-ears`. + +```js +assert(document.querySelectorAll('div.cat-ears').length === 1); +``` + +You should create two `div` elements inside your `.cat-ears` element. + +```js +assert(document.querySelectorAll('.cat-ears div').length === 2); +``` + +Your first `div` element should have the class `cat-left-ear`. + +```js +assert(document.querySelectorAll('.cat-ears div')[0]?.classList.contains('cat-left-ear')); +``` + +Your second `div` element should have the class `cat-right-ear`. + +```js +assert(document.querySelectorAll('.cat-ears div')[1]?.classList.contains('cat-right-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md new file mode 100644 index 00000000000..f868fcd598d --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md @@ -0,0 +1,83 @@ +--- +id: 646ce9d790d2a44de5f99e04 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Inside your `.cat-left-ear` element, create another `div` element with the class `cat-left-inner-ear`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-ear`. + +```js +assert(document.querySelectorAll('div.cat-left-ear').length === 1); +``` + +You should have a `div` element inside your `.cat-left-ear` element. + +```js +assert(document.querySelectorAll('.cat-left-ear div').length === 1); +``` + +Your `div` element should have the class `cat-left-inner-ear`. + +```js +assert(document.querySelectorAll('.cat-left-ear div')[0]?.classList.contains('cat-left-inner-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ ++ --fcc-editable-region-- +
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-i.md b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-i.md
new file mode 100644
index 00000000000..05765087c87
--- /dev/null
+++ b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-i.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+title: Working with Text Question I
+challengeType: 15
+dashedName: working-with-text-question-i
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
fCC Cat Painting + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md new file mode 100644 index 00000000000..1757ddb08e0 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md @@ -0,0 +1,51 @@ +--- +id: 646c586be7180e40ddf74ff6 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Give your `body` element a `background-color` of `#c9d2fc`. + +# --hints-- + +You should have a `body` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` selector should have a `background-color` property set to `#c9d2fc`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(201, 210, 252)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + +``` + +```css +* { + box-sizing: border-box; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md new file mode 100644 index 00000000000..c605ff01e1d --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md @@ -0,0 +1,66 @@ +--- +id: 646c59e942f35541923104bf +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Back in your HTML, create a `main` element. Inside that `main` element, add a `div` element with the class `cat-head`. + +# --hints-- + +You should have a `main` element. + +```js +assert(document.querySelectorAll('main').length === 1); +``` + +You should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 1); +``` + +Your `div` element should have the class `cat-head`. + +```js +assert(document.querySelector('div')?.getAttribute('class') === 'cat-head'); +``` + +Your `div` element should be inside your `main` tag. + +```js +assert(document.querySelectorAll('main div').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md new file mode 100644 index 00000000000..81eb5c83f27 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md @@ -0,0 +1,79 @@ +--- +id: 646c5ace05e4be4211407935 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +To see the `cat-head` element, give it a linear gradient background with `#5e5e5e` at `85%` and `#45454f` at `100%`. + +You might not notice the difference between these two colors, but they are there. + +# --hints-- + +Your `.cat-head` selector should have a `background` property. + +```js +assert.match(code, /background:/) +``` + +Your `background` property should use the `linear-gradient` function. + +```js +assert.match(code, /background:\s*linear-gradient\(/) +``` + +Your `linear-gradient` function should set the first color to be `#5e5e5e` at `85%`. + +```js +assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%/) +``` + +Your `linear-gradient` function should set the second color to be `#45454f` at `100%`. + +```js +assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%,\s+#45454f\s+100%\);?/) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md new file mode 100644 index 00000000000..98afa6c6b3b --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md @@ -0,0 +1,77 @@ +--- +id: 646c5d7057c45f432fcdd46c +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Using a class selector, give the `.cat-head` element a width of `205px` and a height of `180px`. Also, give it a border of `1px solid #000` and a `border-radius` of `46%`. + +# --hints-- + +You should have a `.cat-head` selector. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')) +``` + +Your `.cat-head` selector should have a `width` set to `205px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.width === '205px'); +``` + +Your `.cat-head` selector should have a `height` set to `180px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.height === '180px') +``` + +Your `.cat-head` selector should have a `border` set to `1px solid #000`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.border === '1px solid rgb(0, 0, 0)') +``` + +Your `.cat-head` selector should have a `border-radius` set to `46%`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle(".cat-head")?.borderRadius === '46%') +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md new file mode 100644 index 00000000000..7c88ce9baa8 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md @@ -0,0 +1,78 @@ +--- +id: 646c5e727e56e743c9aed4a1 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +CSS positioning lets you set how you want an element to be positioned in the browser. It has a `position` property you can set to `static`, `absolute`, `relative`, `sticky` or `fixed`. + +Once you set the `position` property of the element, you can move the element around by setting a pixel or a percentage value for one or more of the `top`, `right`, `left`, or `bottom` properties. + +`static` is the default positioning for all elements. If you assign it to an element, you won't be able to move it around with `top`, `right`, `left`, or `bottom`. + +Give `.cat-head` a `position` property of `static`, then set the `top` and `left` properties to `100px` each. + + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `static`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'static') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + --fcc-editable-region-- + + --fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md new file mode 100644 index 00000000000..9c460caa45f --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md @@ -0,0 +1,80 @@ +--- +id: 646c5ffef5598d449b52ec12 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Now you should work on the cat's ears. There will be a right and a left ear, and inside each, there will be an inner ear. + +Inside your `.cat-head` element, create a `div` element with the class `cat-ears`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-head`. + +```js +assert(document.querySelectorAll('div.cat-head').length === 1); +``` + +You should create one `div` element inside your `.cat-head` element. + +```js +assert(document.querySelectorAll('.cat-head div').length === 1); +``` + +Your `div` element should have the class `cat-ears`. + +```js +assert(document.querySelectorAll('.cat-head div')[0]?.getAttribute('class') === 'cat-ears'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md new file mode 100644 index 00000000000..356b443cc39 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md @@ -0,0 +1,86 @@ +--- +id: 646ce8bb4b35544d501c7184 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Inside your `.cat-ears` element, create two `div` elements with the classes `cat-left-ear` and `cat-right-ear` respectively. + +# --hints-- + +You should not change the existing `div` element with the class `car-ears`. + +```js +assert(document.querySelectorAll('div.cat-ears').length === 1); +``` + +You should create two `div` elements inside your `.cat-ears` element. + +```js +assert(document.querySelectorAll('.cat-ears div').length === 2); +``` + +Your first `div` element should have the class `cat-left-ear`. + +```js +assert(document.querySelectorAll('.cat-ears div')[0]?.classList.contains('cat-left-ear')); +``` + +Your second `div` element should have the class `cat-right-ear`. + +```js +assert(document.querySelectorAll('.cat-ears div')[1]?.classList.contains('cat-right-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md new file mode 100644 index 00000000000..f868fcd598d --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md @@ -0,0 +1,83 @@ +--- +id: 646ce9d790d2a44de5f99e04 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Inside your `.cat-left-ear` element, create another `div` element with the class `cat-left-inner-ear`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-ear`. + +```js +assert(document.querySelectorAll('div.cat-left-ear').length === 1); +``` + +You should have a `div` element inside your `.cat-left-ear` element. + +```js +assert(document.querySelectorAll('.cat-left-ear div').length === 1); +``` + +Your `div` element should have the class `cat-left-inner-ear`. + +```js +assert(document.querySelectorAll('.cat-left-ear div')[0]?.classList.contains('cat-left-inner-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md new file mode 100644 index 00000000000..deb18782568 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md @@ -0,0 +1,85 @@ +--- +id: 646ceae4d57c214e6b03576c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Inside your `.cat-right-ear` element, create another `div` element with the class `cat-right-inner-ear`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-right-ear`. + +```js +assert(document.querySelectorAll('div.cat-right-ear').length === 1); +``` + +You should have a `div` element inside your `.cat-right-ear` element. + +```js +assert(document.querySelectorAll('.cat-right-ear div').length === 1); +``` + +Your `div` element should have the class `cat-right-inner-ear`. + +```js +assert(document.querySelectorAll('.cat-right-ear div')[0]?.classList.contains('cat-right-inner-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md new file mode 100644 index 00000000000..ae13eae4db7 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md @@ -0,0 +1,95 @@ +--- +id: 646ceb843412c74edee27a79 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +You are going to make each ear look like a triangle. + +Using a class selector, give the `.cat-left-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`. + +# --hints-- + +You should have a `.cat-left-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')) +``` + +Your `.cat-left-ear` selector should have a `border-left` property set to `35px solid transparent` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderLeft === '35px solid transparent') +``` + +Your `.cat-left-ear` selector should have a `border-right` property set to `35px solid transparent` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderRight === '35px solid transparent') +``` + +Your `.cat-left-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderBottom === '70px solid rgb(94, 94, 94)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md new file mode 100644 index 00000000000..60b4d9ebfde --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md @@ -0,0 +1,92 @@ +--- +id: 646cecc9eb5c4f4f73dafd07 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Move the left ear into position by setting a position of `absolute`, a `top` of `-26px`, and a `left` of `-31px`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.position === 'absolute') +``` + +Your `.cat-left-ear` selector should have a `top` property set to `-26px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.top === '-26px') +``` + +Your `.cat-left-ear` selector should have a `left` property set to `-31px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.left === '-31px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md new file mode 100644 index 00000000000..a0b737ac3d9 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md @@ -0,0 +1,89 @@ +--- +id: 646cef0c2b98915094df7099 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Those edges are too sharp for an ear. So, set the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-left-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md new file mode 100644 index 00000000000..3bcd393bf42 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md @@ -0,0 +1,89 @@ +--- +id: 646cf1206cac5f51804f49cf +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +To position the left ear properly, you can use CSS transform to rotate it in a certain degree. + +The `transform` property allows you to modify the shape, position, and size of an element without changing the layout or affecting the surrounding elements. It has functions such as `translate()`, `rotate()`, `scale()`, `skew()`, and `matrix()`. + +Set the `transform` property to `rotate(-45deg)` and see what happens. + +# --hints-- + +You should set the `transform` property of your `.cat-left-ear` element to `rotate(-45deg)`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.transform === 'rotate(-45deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md new file mode 100644 index 00000000000..51bb049e2dd --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md @@ -0,0 +1,107 @@ +--- +id: 646cf2249f02ca5233d9af7c +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Now you can work on the right ear of the cat. You have the HTML for it already. + +Using a class selector, give the `.cat-right-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`. + +# --hints-- + +You should have a `.cat-right-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')) +``` + +Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent') +``` + +Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent') +``` + +Your `.cat-right-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '70px solid rgb(94, 94, 94)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md new file mode 100644 index 00000000000..dfce258d838 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md @@ -0,0 +1,104 @@ +--- +id: 646cf48d8f8e1f535a1821d3 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Move the right ear into position with a `position` property set to `absolute`, a `top` of `-26px`, and a `left` of `163px`. + +# --hints-- + +Your `.cat-right-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.position === 'absolute') +``` + +Your `.cat-right-ear` selector should have a `top` property set to `-26px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.top === '-26px') +``` + +Your `.cat-right-ear` selector should have a `left` property set to `163px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.left === '163px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md new file mode 100644 index 00000000000..d4525731d1f --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md @@ -0,0 +1,95 @@ +--- +id: 646cf6cbca98e258da65c979 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +As you did for the left ear, rotate the right ear at 45 degrees. + +# --hints-- + +You should set the `transform` property of your `.right-ear` element to `rotate(45deg)`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.transform === 'rotate(45deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md new file mode 100644 index 00000000000..bbd36a62759 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md @@ -0,0 +1,102 @@ +--- +id: 646cf88aa884405a11ea5bcc +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Remove the sharp border of the right ear by setting the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`. + +# --hints-- + +Your `.cat-right-ear` selector should have a `border-top-left-radius` property set to `90px`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-right-ear` selector should have a `border-top-right-radius` property set to `10px`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md new file mode 100644 index 00000000000..bb200fd1069 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md @@ -0,0 +1,102 @@ +--- +id: 646cfc2b8e6fe95c20a819d5 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The ears should always be placed above the part of the head it overlaps. You can do this with the `z-index` property. + +`z-index` is a property you can use to define the order of overlapping HTML elements. Any element with a higher `z-index` will always be positioned over an element with a lower `z-index`. + +To see `z-index` in action, set the `z-index`property of the left ear to `-1`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `z-index` of `-1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '-1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md new file mode 100644 index 00000000000..7f2be20c198 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md @@ -0,0 +1,100 @@ +--- +id: 646cfd853634255d02b64cc1 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +That's not the behavior you want. You should make the ears display over the head so the borders that overlap with them don't show. + +Instead of `-1`, set the `z-index` property of the left ear to `1`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `z-index` of `1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + --fcc-editable-region-- + z-index: -1; + --fcc-editable-region-- + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md new file mode 100644 index 00000000000..b892d61ca1d --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md @@ -0,0 +1,99 @@ +--- +id: 646cfde6ac612e5d60391f50 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Set the `z-index`property of the right ear to `1` so it always stays over the head. + +# --hints-- + +Your `.cat-right-ear` selector should have a `z-index` of `1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.zIndex === '1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + --fcc-editable-region-- + + --fcc-editable-region-- + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md new file mode 100644 index 00000000000..1d7411ad660 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md @@ -0,0 +1,121 @@ +--- +id: 646dd556d524bc61c0139bd6 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Most cats have different colors in their ear and the inner part of the same ear. You can implement the same too. That's why you defined a `div` element for both right and left inner ears a while ago. + +Using a class selector, give your `.cat-left-inner-ear` element a left and right border of `20px solid transparent` each. Also give it a bottom border of `40px solid #3b3b4f`. + +# --hints-- + +You should have a `.cat-left-inner-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')) +``` + +Your `.cat-left-inner-ear` selector should have a `border-left` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderLeft === '20px solid transparent') +``` + +Your `.cat-left-inner-ear` selector should have a `border-right` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderRight === '20px solid transparent') +``` + +Your `.cat-left-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md new file mode 100644 index 00000000000..8be0ea3110e --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md @@ -0,0 +1,118 @@ +--- +id: 646dd6f9caa862627dd87772 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Move the inner ear into position with a `position` property set to `absolute`, a `top` of `22px`, and a `left` of `-20px`. + +# --hints-- + +Your `.cat-left-inner-ear` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.position === 'absolute') +``` + +Your `.cat-left-inner-ear` selector should have a `top` property set to `22px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.top === '22px') +``` + +Your `.cat-left-inner-ear` selector should have a `left` property set to `-20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.left === '-20px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md new file mode 100644 index 00000000000..7e24c8e937c --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md @@ -0,0 +1,127 @@ +--- +id: 646dd7cfd0cfac630c1dd520 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +To remove all the pointed edges of the ear, set a bottom-right and bottom-left border radius of `40%` each, a top-left border radius of `90px`, and a top-right border radius of `10px`. + +# --hints-- + +Your `.cat-left-inner-ear` selector should have a `border-bottom-right-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottomRightRadius === '40%') +``` + +Your `.cat-left-inner-ear` selector should have a `border-bottom-left-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottomLeftRadius === '40%') +``` + +Your `.cat-left-inner-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-left-inner-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md new file mode 100644 index 00000000000..ba3b89e07d1 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md @@ -0,0 +1,132 @@ +--- +id: 646dd8c79ec23463a3d0e356 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +It's time to work on the right inner ear. Using a class selector, give your `.cat-right-inner-ear` element a left and right border of `20px solid transparent`. Also, give it a bottom border of `40px solid #3b3b4f`. + +# --hints-- + +You should have a `.cat-right-inner-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')) +``` + +Your `.cat-right-inner-ear` selector should have a `border-left` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderLeft === '20px solid transparent') +``` + +Your `.cat-right-inner-ear` selector should have a `border-right` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderRight === '20px solid transparent') +``` + +Your `.cat-right-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md new file mode 100644 index 00000000000..f48ba0bd881 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md @@ -0,0 +1,131 @@ +--- +id: 646dd9d9a729916460724f16 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Move the right inner ear into position with a `position` property set to `absolute`, a `top` of `22px` and a `left` of `-20px`. + +# --hints-- + +Your `.cat-right-inner-ear` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.position === 'absolute') +``` + +Your `.cat-right-inner-ear` selector should have a `top` property set to `22px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.top === '22px') +``` + +Your `.cat-right-inner-ear` selector should have a `left` property set to `-20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.left === '-20px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md new file mode 100644 index 00000000000..12d8b78a661 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md @@ -0,0 +1,140 @@ +--- +id: 646ddab8afd73764f5241bbf +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +As you did for the left inner ear, remove the sharp edges of the right inner ear by setting a bottom-right and bottom-left border radius of `40%`, a top-left border radius of `90px`, and a top-right border radius of `10px`. + +# --hints-- + +Your `.cat-right-inner-ear` selector should have a `border-bottom-right-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottomRightRadius === '40%') +``` + +Your `.cat-right-inner-ear` selector should have a `border-bottom-left-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottomLeftRadius === '40%') +``` + +Your `.cat-right-inner-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-right-inner-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md new file mode 100644 index 00000000000..5a2488dca6b --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md @@ -0,0 +1,147 @@ +--- +id: 646ddb61ff08366570cc5902 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +You will now start working on the cat's eyes. Like the ears, the eyes will have inner eyes. + +Create a `div` element with the class `cat-eyes`. Inside the `cat-eyes` element, create two `div` elements with the class `cat-left-eye` and `cat-right-eye` respectively. + +# --hints-- + +You should create a `div` element with the class `cat-eyes`. + +```js +assert(document.querySelectorAll('.cat-eyes').length === 1); +``` + +You should create two `div` elements inside the `.cat-eyes` element. + +```js +assert(document.querySelectorAll('.cat-eyes div').length === 2); +``` + +The first `div` element inside the `.cat-eyes` element should have the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('.cat-eyes div')[0].classList.contains('cat-left-eye')); +``` + +The second `div` element inside the `.cat-eyes` element should have the class `cat-right-eye`. + +```js +assert(document.querySelectorAll('.cat-eyes div')[1].classList.contains('cat-right-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md new file mode 100644 index 00000000000..9b995228d29 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md @@ -0,0 +1,144 @@ +--- +id: 646ddd3f9f97a0667b964bdb +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Inside the `.cat-left-eye` element, create another `div` element with the class `cat-left-inner-eye`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('div.cat-left-eye').length === 1); +``` + +You should have a `div` element inside your `.cat-left-eye` element. + +```js +assert(document.querySelectorAll('.cat-left-eye div').length === 1); +``` + +Your `div` element should have the class `cat-left-inner-eye`. + +```js +assert(document.querySelectorAll('.cat-left-eye div')[0]?.classList.contains('cat-left-inner-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md new file mode 100644 index 00000000000..5bad715a154 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md @@ -0,0 +1,146 @@ +--- +id: 646dddfb3a301c66ec513c56 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Inside the `.cat-right-eye` element, create another `div` element with the class `cat-right-inner-eye`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('div.cat-right-eye').length === 1); +``` + +You should have a `div` element inside your `.cat-right-eye` element. + +```js +assert(document.querySelectorAll('.cat-right-eye div').length === 1); +``` + +Your `div` element should have the class `cat-right-inner-eye`. + +```js +assert(document.querySelectorAll('.cat-right-eye div')[0]?.classList.contains('cat-right-inner-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md new file mode 100644 index 00000000000..9cf9b19e226 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md @@ -0,0 +1,154 @@ +--- +id: 646dde7dc20dc167489faa69 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Using a class selector, give your `.cat-left-eye` element a `width` of `30px` and a `height` of `40px`. Also, give it a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-left-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')) +``` + +Your `.cat-left-eye` selector should have a `width` set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.width === '30px') +``` + +Your `.cat-left-eye` selector should have a `height` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.height === '40px') +``` + +Your `.cat-left-eye` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md new file mode 100644 index 00000000000..45ed732e12d --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md @@ -0,0 +1,153 @@ +--- +id: 646ddf888632fa67f1180940 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Move the left eye into position with a `position` property of `absolute` a `top` of `54px`, and a `left` of `39px`. + +# --hints-- + +Your `.cat-left-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.position === 'absolute') +``` + +Your `.cat-left-eye` selector should have a `top` property set to `54px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.top === '54px') +``` + +Your `.cat-left-eye` selector should have a `left` property set to `39px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.left === '39px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md new file mode 100644 index 00000000000..38088bba67e --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md @@ -0,0 +1,150 @@ +--- +id: 646de5dc8988076a1d992afd +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +To make the left eye look like an eye, give it a border radius of `60%`. Also, using the transform property, rotate it at `25` degrees. + +# --hints-- + +Your `.cat-left-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.borderRadius === '60%') +``` + +Your `.cat-left-eye` selector should have a `transform` property set to `rotate(25deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.transform === 'rotate(25deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md new file mode 100644 index 00000000000..b9dc455e5b1 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md @@ -0,0 +1,167 @@ +--- +id: 646de6a97b50a86ac487de86 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Now you will work on the right eye by using the same approach. + +Using a class selector, give your `.cat-right-eye` element a width of `30px` and a height of `40px`. Also, give it a background color of `#000`. + +# --hints-- + +You should have a `.cat-right-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')) +``` + +Your `.cat-right-eye` selector should have a `width` set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.width === '30px') +``` + +Your `.cat-right-eye` selector should have a `height` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.height === '40px') +``` + +Your `.cat-right-eye` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md new file mode 100644 index 00000000000..1cae6709360 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md @@ -0,0 +1,165 @@ +--- +id: 646de7b64467e96b7d35b5cd +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Move the right eye into position with a `position` property of `absolute` a `top` of `54px`, and a `left` of `134px`. + +# --hints-- + +Your `.cat-right-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.position === 'absolute') +``` + +Your `.cat-right-eye` selector should have a `top` property set to `54px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.top === '54px') +``` + +Your `.cat-right-eye` selector should have a `left` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.left === '134px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md new file mode 100644 index 00000000000..b376c539f32 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md @@ -0,0 +1,162 @@ +--- +id: 646de8478d6f796bfbdccfb2 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +To make the right eye look like an eye, give it a border radius of `60%`. Also, using the transform property, rotate it at `-25` degrees. + +# --hints-- + +Your `.cat-right-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.borderRadius === '60%') +``` + +Your `.cat-right-eye` selector should have a `transform` property set to `rotate(-25deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.transform === 'rotate(-25deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md new file mode 100644 index 00000000000..74ba34db408 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md @@ -0,0 +1,178 @@ +--- +id: 646de8d204a3426c7d184372 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Those look like eyes, but you can still make them better. That's why you created two inner eyes `div` elements. + +Using a class selector, give your `.cat-left-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`. + +# --hints-- + +You should have a `.cat-left-inner-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')) +``` + +Your `.cat-left-inner-eye` selector should have a `width` set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.width === '10px') +``` + +Your `.cat-left-inner-eye` selector should have a `height` set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.height === '20px') +``` + +Your `.cat-left-inner-eye` selector should have a `background-color` set to `#fff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md new file mode 100644 index 00000000000..b0243121123 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md @@ -0,0 +1,187 @@ +--- +id: 646dea1c98c2426d43a705c3 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Move the left inner eye into position with a `position` property of `absolute`, a `top` of `8px`, and a `left` of `2px`. Also, give it a border radius of `60%` and rotate it at `10` degrees. + +# --hints-- + +Your `.cat-left-inner-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.position === 'absolute') +``` + +Your `.cat-left-inner-eye` selector should have a `top` property set to `8px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.top === '8px') +``` + +Your `.cat-left-inner-eye` selector should have a `left` property set to `2px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.left === '2px') +``` + +Your `.cat-left-inner-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.borderRadius === '60%') +``` + +Your `.cat-left-inner-eye` selector should have a `transform` property set to `10deg`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.transform === 'rotate(10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 10px; + height: 20px; + background-color: #fff; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md new file mode 100644 index 00000000000..1b344dc94cc --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md @@ -0,0 +1,187 @@ +--- +id: 646deb169847f86df0f95bfc +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Using a class selector, give your `.cat-right-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`. + +# --hints-- + +You should have a `.cat-right-inner-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')) +``` + +Your `.cat-right-inner-eye` selector should have a `width` set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.width === '10px') +``` + +Your `.cat-right-inner-eye` selector should have a `height` set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.height === '20px') +``` + +Your `.cat-right-inner-eye` selector should have a `background-color` set to `#fff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md new file mode 100644 index 00000000000..f7933f8c3dc --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md @@ -0,0 +1,198 @@ +--- +id: 646dec359bef3b7811fba5a6 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Move the right inner eye into position with a `position` of `absolute`, a `top` of `8px`, and a `left` of `18px`. Also, give it a border radius of `60%` and rotate it at `-5deg`. + +# --hints-- + +Your `.cat-right-inner-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.position === 'absolute') +``` + +Your `.cat-right-inner-eye` selector should have a `top` property set to `8px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.top === '8px') +``` + +Your `.cat-right-inner-eye` selector should have a `left` property set to `18px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.left === '18px') +``` + +Your `.cat-right-inner-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.borderRadius === '60%') +``` + +Your `.cat-right-inner-eye` selector should have a `transform` property set to `-5deg`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.transform === 'rotate(-5deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 10px; + height: 20px; + background-color: #fff; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md new file mode 100644 index 00000000000..143f0179cfe --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md @@ -0,0 +1,186 @@ +--- +id: 646dedbcba062079128b2ecc +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +It's time to work on the nose. In your HTML, create a `div` element with the class `cat-nose`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 12) +``` + +Your `div` element should have the class `cat-nose`. + +```js +assert(document.querySelectorAll('div')[11].classList.contains('cat-nose')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md new file mode 100644 index 00000000000..bf02b9cf8fc --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md @@ -0,0 +1,200 @@ +--- +id: 646def5e863abf7a14501421 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Using a class selector, give your `.cat-nose` element a left and right border of `15px solid transparent` each. Also give it a bottom border of `20px solid #442c2c`. + +# --hints-- + +You should have a `.cat-nose` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')) +``` + +Your `.cat-nose` selector should have a `border-left` property set to `15px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderLeft === '15px solid transparent') +``` + +Your `.cat-nose` selector should have a `border-right` property set to `15px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderRight === '15px solid transparent') +``` + +Your `.cat-nose` selector should have a `border-bottom` property set to `20px solid #442c2c`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottom === '20px solid rgb(68, 44, 44)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md new file mode 100644 index 00000000000..ef9238633b8 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md @@ -0,0 +1,200 @@ +--- +id: 646df03c8f79337ab46f148b +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Move the nose into position with a `position` property of `absolute`, a `top` of `108px`, and a `left` of `85px`. + +# --hints-- + +Your `.cat-nose` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.position === 'absolute') +``` + +Your `.cat-nose` selector should have a `top` property set to `108px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.top === '108px') +``` + +Your `.cat-nose` selector should have a `left` property set to `85px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.left === '85px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md new file mode 100644 index 00000000000..0318f9d7f46 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md @@ -0,0 +1,215 @@ +--- +id: 646df0cf26413a7b35e4b8b3 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Remove the sharp edges of the nose with border radius of `50%` each on the top-left, bottom-right, and bottom-left corners. Also, rotate it at 180 degrees. + +# --hints-- + +Your `.cat-nose` selector should have a `border-top-left-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderTopLeftRadius === '50%') +``` + +Your `.cat-nose` selector should have a `border-bottom-right-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottomRightRadius === '50%') +``` + +Your `.cat-nose` selector should have a `border-bottom-left-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottomLeftRadius === '50%') +``` + +Your `.cat-nose` selector should have a `transform` property set to `rotate(180deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.transform === 'rotate(180deg)') +``` + +You should not have a `border-top-right-radius` property in your `.cat-nose` selector. + +```js +assert(/border-top-right-radius:\s*\d+%;/.test(code) === false); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md new file mode 100644 index 00000000000..9d8231e174b --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md @@ -0,0 +1,203 @@ +--- +id: 646df1d1aa4ae57bdf1869c4 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Now you will start working on the mouth. There will be a right line and left line for the mouth. + +Create a `div` element with the class `cat-mouth`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 13) +``` + +Your `div` element should have the class `cat-mouth` + +```js +assert(document.querySelectorAll('div')[12].classList.contains('cat-mouth')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md new file mode 100644 index 00000000000..3ef80ee39bb --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md @@ -0,0 +1,217 @@ +--- +id: 646dffd8ce9ac77ec1906f2e +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Inside your `.cat-mouth` element, create a `div` element with the class `cat-mouth-line-left` and another `div` with the class `cat-mouth-line-right`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-mouth`. + +```js +assert(document.querySelectorAll('div.cat-mouth').length === 1); +``` + +You should have two `div` elements inside your `.cat-mouth` element. + +```js +assert(document.querySelectorAll('.cat-mouth div').length === 2); +``` + +The first `div` element inside the `.cat-mouth` element should have the class `cat-mouth-line-left`. + +```js +assert(document.querySelectorAll('.cat-mouth div')[0]?.classList.contains('cat-mouth-line-left')); +``` + +The second `div` element inside the `.cat-mouth` element should have the class `cat-mouth-line-right`. + +```js +assert(document.querySelectorAll('.cat-mouth div')[1]?.classList.contains('cat-mouth-line-right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md new file mode 100644 index 00000000000..a561360c7e9 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md @@ -0,0 +1,227 @@ +--- +id: 646f0417322c0e04983a5149 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Using a class selector, give your `.cat-mouth-line-left` element a `position` of `absolute`, a `top` of `88px` and a `left` of `74px`. This would move it into the right position. + +# --hints-- + +You should have a `cat-mouth-line-left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')) +``` + +Your `.cat-mouth-line-left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.position === 'absolute') +``` + +Your `.cat-mouth-line-left` selector should have a `top` property set to `88px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.top === '88px') +``` + +Your `.cat-mouth-line-left` selector should have a `left` property set to `74px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.left === '74px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + + --fcc-editable-region-- ++ +++ +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md new file mode 100644 index 00000000000..46ce69b8f2c --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md @@ -0,0 +1,214 @@ +--- +id: 646f08293804a30685533c6f +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Using the `transform` property, rotate the left mouth line at `170` degrees. + +# --hints-- + +Your `.cat-mouth-line-left` property should have a `transform` property set to `rotate(170deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.transform === 'rotate(170deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md new file mode 100644 index 00000000000..03853c3938b --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md @@ -0,0 +1,234 @@ +--- +id: 646f09293eb3230723a62f77 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Access your `.cat-mouth-line-right` element with a class selector, then move it into the right position with a `position` of `absolute`, a `top` of `88px` and a `left` of `91px`. + +# --hints-- + +You should have a `.cat-mouth-line-right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')) +``` + +Your `.cat-mouth-line-right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.position === 'absolute') +``` + +Your `.cat-mouth-line-right` selector should have a `top` property set to `88px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.top === '88px') +``` + +Your `.cat-mouth-line-right` selector should have a `left` property set to `91px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.left === '91px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md new file mode 100644 index 00000000000..2a01ed169d2 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md @@ -0,0 +1,221 @@ +--- +id: 646f0c9a1e3360092d1bbd33 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Rotate the right mouth line at `165` degrees. + +# --hints-- + +Your `.cat-mouth-line-left` property should have a `transform` property set to `rotate(165deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.transform === 'rotate(165deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md new file mode 100644 index 00000000000..3d75bf77a02 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md @@ -0,0 +1,231 @@ +--- +id: 646f0ce5737243098ad6e494 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +The last thing you will work on is the whiskers. There are going to be 6 of them, meaning there will be three on each side. + +Create a `div` element with the class `cat-whiskers`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 16) +``` + +Your div element should have the class `cat-whiskers`. + +```js +assert(document.querySelectorAll('div')[15].classList.contains('cat-whiskers')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md new file mode 100644 index 00000000000..6e28a86659a --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md @@ -0,0 +1,243 @@ +--- +id: 646f0ef13604420a8744f7d4 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Inside the `.cat-whiskers` element, create two `div` elements with the class `cat-whiskers-left` and `cat-whiskers-right`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-whiskers` + +```js +assert(document.querySelectorAll('div.cat-whiskers').length === 1) +``` + +You should have two `div` elements inside the `.cat-whiskers` element. + +```js +assert(document.querySelectorAll('.cat-whiskers div').length === 2) +``` + +The first `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-left`. + +```js +assert(document.querySelectorAll('.cat-whiskers div')[0].classList.contains('cat-whiskers-left')) +``` + +The second `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-right`. + +```js +assert(document.querySelectorAll('.cat-whiskers div')[1].classList.contains('cat-whiskers-right')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md new file mode 100644 index 00000000000..291e0fbd52d --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md @@ -0,0 +1,253 @@ +--- +id: 646f0f7c5933560af8e7e380 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Inside the `.cat-whiskers-left` element, create three `div` elements with the classes `cat-whisker-left-top`, `cat-whisker-left-middle`, and `cat-whisker-left-bottom`. + +# --hints-- + +You should not change the existing `div` element with class `cat-whiskers-left`. + +```js +assert(document.querySelectorAll('div.cat-whiskers-left').length === 1) +``` + +You should create three `div` elements inside your `.cat-whiskers-left` element. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div').length === 3) +``` + +The first `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-top`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[0].classList.contains('cat-whisker-left-top')) +``` + +The second `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-middle`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[1].classList.contains('cat-whisker-left-middle')) +``` + +The third `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-bottom`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[2].classList.contains('cat-whisker-left-bottom')) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ + --fcc-editable-region-- ++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md new file mode 100644 index 00000000000..820cbd44d12 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md @@ -0,0 +1,256 @@ +--- +id: 646f102bf87b350b593baa72 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Inside the `.cat-whiskers-right` element, create 3 `div` elements with the class `cat-whisker-right-top`, `cat-whisker-right-middle`, and `cat-whisker-right-bottom`. + +# --hints-- + +You should not change the existing `div` element with class `cat-whiskers-right`. + +```js +assert(document.querySelectorAll('div.cat-whiskers-right').length === 1) +``` + +You should create three `div` elements inside your `.cat-whiskers-right` element. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div').length === 3) +``` + +The first `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-top`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[0].classList.contains('cat-whisker-right-top')) +``` + +The second `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-middle`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[1].classList.contains('cat-whisker-right-middle')) +``` + +The third `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-bottom`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[2].classList.contains('cat-whisker-right-bottom')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ ++ --fcc-editable-region-- ++ ++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md new file mode 100644 index 00000000000..741c609e6b3 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md @@ -0,0 +1,254 @@ +--- +id: 646f107abb89d00bb99f387a +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Use a descendant selector to target the three `div` elements inside your `.cat-whiskers-left` element. Give it a `width` of `40px`, a `height` of `1px`, and a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-whiskers-left div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')) +``` + +Your `.cat-whiskers-left div` selector should have a `width` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.width === '40px') +``` + +Your `.cat-whiskers-left div` selector should have a `height` set to `1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.height === '1px') +``` + +Your `.cat-whiskers-left div` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md new file mode 100644 index 00000000000..b1c107c9c2e --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md @@ -0,0 +1,266 @@ +--- +id: 646f12da0b4c5d0ca162834a +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Using a class selector, move the `.cat-whisker-left-top` element into place with a `position` of `absolute`, a `top` of `120px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-top` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')) +``` + +Your `.cat-whisker-left-top` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.position === 'absolute') +``` + +Your `.cat-whisker-left-top` selector should have a `top` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.top === '120px') +``` + +Your `.cat-whisker-left-top` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md new file mode 100644 index 00000000000..9ae2339b4dc --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md @@ -0,0 +1,254 @@ +--- +id: 646f135eab69d90d0c6d4e9b +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Rotate the left top whisker at `10` degrees. + +# --hints-- + +Your `.cat-whisker-left-top` selector should have a `transform` property set to `rotate(10deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.transform === 'rotate(10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md new file mode 100644 index 00000000000..c0b941997a6 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md @@ -0,0 +1,273 @@ +--- +id: 646f159b2cffb21150b927cb +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Use a class selector to target the `.cat-whisker-left-middle` element. Then move it into place with a `position` property set to `absolute`, a `top` of `127px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-middle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')) +``` + +Your `.cat-whisker-left-middle` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.position === 'absolute') +``` + +Your `.cat-whisker-left-middle` selector should have a `top` property set to `127px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.top === '127px') +``` + +Your `.cat-whisker-left-middle` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md new file mode 100644 index 00000000000..0a537b0812d --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md @@ -0,0 +1,260 @@ +--- +id: 646f164bf100dd11d226161f +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Rotate the left middle whisker at 3 degrees. + +# --hints-- + +Your `.cat-whisker-left-middle` selector should have a `transform` property set to `rotate(3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.transform === 'rotate(3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md new file mode 100644 index 00000000000..651a9405914 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md @@ -0,0 +1,280 @@ +--- +id: 646f1764e2f1d212ba9785a7 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Using a class selector, move the `.cat-whisker-left-bottom` into position with a `position` of `absolute`, a `top` of `134px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-bottom` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')) +``` + +Your `.cat-whisker-left-bottom` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.position === 'absolute') +``` + +Your `.cat-whisker-left-bottom` selector should have a `top` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.top === '134px') +``` + +Your `.cat-whisker-left-bottom` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md new file mode 100644 index 00000000000..bc03c983374 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md @@ -0,0 +1,267 @@ +--- +id: 646f1802a09a171332e14630 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Rotate the left bottom whisker at `-3` degrees. + +# --hints-- + +Your `.cat-whisker-left-bottom` selector should have a `transform` property set to `rotate(-3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.transform === 'rotate(-3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md new file mode 100644 index 00000000000..e365b97d693 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md @@ -0,0 +1,287 @@ +--- +id: 646f4d6c42dc5f214f4e7444 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Now you will work on moving the right whiskers into place. Use class selector to target the `.cat-whisker-right-top` element and give it a `position` of `absolute`, a `top` of `120px`, and a `left` of `109px`. + +# --hints-- + +You should have a `.cat-whisker-right-top` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')) +``` + +Your `.cat-whisker-right-top` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.position === 'absolute') +``` + +Your `.cat-whisker-right-top` selector should have a `top` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.top === '120px') +``` + +Your `.cat-whisker-right-top` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md new file mode 100644 index 00000000000..9df724448e7 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md @@ -0,0 +1,274 @@ +--- +id: 646f4e46e81f7021d5fd9c1d +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Rotate the top-right whisker at -10 degrees. + +# --hints-- + +Your `.cat-whisker-right-top` selector should have a `transform` property set to `rotate(-1deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.transform === 'rotate(-10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md new file mode 100644 index 00000000000..2f79cbf9301 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md @@ -0,0 +1,294 @@ +--- +id: 646f4f6a14e3c522d130a0d2 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Use a class selector to target the `cat-whisker-right-middle` element, then move the right middle whisker into position with a `position` of `absolute`, a `top` of `127px`, and a `left` of `109px`. + +# --hints-- + +You should have a `.cat-whisker-right-middle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')) +``` + +Your `.cat-whisker-right-middle` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.position === 'absolute') +``` + +Your `.cat-whisker-right-middle` selector should have a `top` property set to `127px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.top === '127px') +``` + +Your `.cat-whisker-right-middle` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md new file mode 100644 index 00000000000..a7d861a1258 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md @@ -0,0 +1,281 @@ +--- +id: 646f4fe12b7985232bf475a5 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Rotate the right middle whisker at -3 degrees. + +# --hints-- + +Your `.cat-whisker-right-middle` selector should have a `transform` property set to `rotate(-3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.transform === 'rotate(-3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md new file mode 100644 index 00000000000..d0cf2b64a3f --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md @@ -0,0 +1,302 @@ +--- +id: 646f507e4d1cd323f17db4fc +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Use class selector to target the `.cat-whisker-right-bottom` element, then move it into place with a `position` of `absolute`, a `top` of `134px`, and a `left` of `109px`. + + +# --hints-- + +You should have a `.cat-whisker-right-bottom` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')) +``` + +Your `.cat-whisker-right-bottom` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.position === 'absolute') +``` + +Your `.cat-whisker-right-bottom` selector should have a `top` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.top === '134px') +``` + +Your `.cat-whisker-right-bottom` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md new file mode 100644 index 00000000000..3bf9207660e --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md @@ -0,0 +1,556 @@ +--- +id: 646f516dbfc1342495515625 +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Rotate the bottom-right whisker at 3 degrees. + +With this final step, your cat painting is now complete. + +# --hints-- + +Your `.cat-whisker-right-bottom` selector should have a `transform` property set to `rotate(3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.transform === 'rotate(3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +.cat-whisker-right-bottom { + position: absolute; + top: 134px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +# --solutions-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +.cat-whisker-right-bottom { + position: absolute; + top: 134px; + left: 109px; + transform: rotate(3deg); +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md new file mode 100644 index 00000000000..03ea4e8598b --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md @@ -0,0 +1,77 @@ +--- +id: 6476f5c17f99146071ee884c +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +You could see that nothing happens. The `.cat-head` element did not move despite setting a `top` and `left` of `100px` each. But that's not the case with `relative` positioning. + +When you use the `relative` value, the element is still positioned according to the normal flow of the document, but the `top`, `left`, `bottom`, and `right` values become active. + +Instead of `static`, give you `.cat-head` a position of `relative`, and leave both `top` and `left` properties as they are. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `relative`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'relative') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: static; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md new file mode 100644 index 00000000000..0c28f0f242e --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md @@ -0,0 +1,79 @@ +--- +id: 6476f7a4827bcc61682f2347 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +The next position property is `absolute`. When you use the `absolute` value for your `position` property, the element is taken out of the normal flow of the document, and then its position is determined by the `top`, `right`, `bottom`, and `left` properties. + +Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any pixel value. + + + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `absolute`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute') +``` + +Your `.cat-head` selector should have a `top` property set to any number in `px`. Make sure you add a semi-colon. + +```js +// assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '300px') +assert.match(code, /top:\s*\d{1,4}px;/) +``` + +Your `.cat-head` selector should have a `left` property set to any number in `px`. Make sure you add a semi-colon. + +```js +// assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '400px') +assert.match(code, /left:\s*\d{1,4}px;/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: relative; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md new file mode 100644 index 00000000000..85259f8c8bf --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md @@ -0,0 +1,70 @@ +--- +id: 6476fb7cbaafa36d65e9cf35 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +`fixed` is a `position` property value that lets you make an element fixed to the page no matter where the user scrolls to on the page. + +You'll have to do some more markups to see how `fixed` positioning works. In your HTML, create a `div` element with the class `box`. + +# --hints-- + +You should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 2); +``` + +Your `div` element should have the class `box`. + +```js +assert(document.querySelectorAll('div')[1]?.getAttribute('class') === 'box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + top: 300px; + left: 400px; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md new file mode 100644 index 00000000000..a8a137321fe --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md @@ -0,0 +1,101 @@ +--- +id: 6476fc5cf14b276e6d04e82a +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Use a class selector to give your `.box` element a width of `200px`, a height of `600px`, and a background color of `#000`. Also, give it a `position` of `absolute`, a `top` of `800px` and a `left` of `650px`. + +# --hints-- + +You should have a `.box` selector. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')) +``` + +Your `.box` selector should have a `width` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.width === '200px') +``` + +Your `.box` selector should have a `height` property set to `600px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.height === '600px') +``` + +Your `.box` selector should have a `background-color` property set to `#000`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +Your `.box` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.position === 'absolute') +``` + +Your `.box` selector should have a `left` property set to `650px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.left === '650px') +``` + +Your `.box` selector should have a `top` property set to `800px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.top === '800px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: relative; + top: 100px; + left: 100px; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md new file mode 100644 index 00000000000..bd1a9049d86 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md @@ -0,0 +1,85 @@ +--- +id: 6476fd4213318f6ee211028a +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Now replace the `position` property value of your `.cat-head` with `fixed`. Leave both `top` and `left` as they are. + +After that, scroll up and down to see how the `fixed` value works. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `fixed`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'fixed') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: relative; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 200px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md new file mode 100644 index 00000000000..1c8891e4304 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md @@ -0,0 +1,87 @@ +--- +id: 64770351e8586671ec0911f0 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +The last position property value is `sticky`. `sticky` positioning is a hybrid of `relative` and `fixed` positioning. It allows an element to **stick** to a specific position within its containing element or viewport, based on the scroll position. + +Change the value of the `position` property of `.cat-head` to `sticky`, set `top` to `0`, then remove `left` and its value. + +**Note**: To see how `sticky` works, you have to place a couple of texts before and after your `.cat-head` `div` element. If you scroll up after that, you'll see that the `.cat-head` gets stuck to the top and remains there. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `sticky`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'sticky') +``` + +Your `.cat-head` selector should have a `top` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px') +``` + +You should not have the `left` property and its value in your code. + +```js +assert.notMatch(code, /left:\s*100px;?/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: fixed; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 200px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md new file mode 100644 index 00000000000..a7597864564 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md @@ -0,0 +1,102 @@ +--- +id: 6477062778c85972eb648030 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +You should now center the cat head. + +Give the `.cat-head` element a position property set to `absolute`. Set a value of `0` for the `right`, `left`, `top`, `bottom` properties, then set its `margin` property on all sides to `auto`. That's one way to center an element vertically and horizontally using CSS positioning. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `absolute`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute') +``` + +Your `.cat-head` selector should have a `top` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px') +``` + +Your `.cat-head` selector should have a `left` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '0px') +``` + +Your `.cat-head` selector should have a `right` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.right === '0px') +``` + +Your `.cat-head` selector should have a `bottom` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.bottom === '0px') +``` + +Your `.cat-head` selector should have a `margin` property set to `auto`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.margin === 'auto') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: sticky; + top: 0; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md new file mode 100644 index 00000000000..806db219734 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md @@ -0,0 +1,73 @@ +--- +id: 647d821de0d97b3283c72b36 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Also, remove the `.box` CSS rule and its declarations because you don't need them anymore. + +# --hints-- + +You should remove the `.box` css rule and all its values. + +```js +assert.notMatch(code, /\.box\s*\{\s*width:\s*400px;\s*height:\s*600px;\s*background-color:\s*#000;\s*position:\s*absolute;\s*left:\s*650px;\s*top:\s*800px;?\s*\}\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md new file mode 100644 index 00000000000..6e039d20c5c --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md @@ -0,0 +1,48 @@ +--- +id: 647d855ac12cd436059acd39 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Use the universal selector to add `box-sizing: border-box;` to your CSS. This ensures elements include padding and border in their specified width and height. + +# --hints-- + +You should have the universal selector (`*`). + +```js +// assert.match(code, /\*\s*{\s*.*\s*}/) +assert(new __helpers.CSSHelp(document).getStyle('*')) +``` + +Your universal selector should have a `box-sizing` property set to `border-box`. + +```js +// assert.match(code, /\*\s*{\s*box-sizing:\s*border-box;?\s*}/) +assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md new file mode 100644 index 00000000000..a7a70f95a81 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md @@ -0,0 +1,74 @@ +--- +id: 649353647c44ef4867ab4935 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Remove the `div` element with class `box` because you don't need it anymore. + +# --hints-- + +You should remove the `div` element with class `box` + +```js +assert.notMatch(code, /fCC Cat Painting + + + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md new file mode 100644 index 00000000000..04963838659 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md @@ -0,0 +1,218 @@ +--- +id: 64a2687ef267e5934a2f93e3 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Using a descendant selector, select the two `div` elements inside the `div` with class `cat-mouth`. Give it a width of `30px`, a height of `50px`, and a border of `2px solid #000`. + +# --hints-- + +You should have a `.cat-mouth div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')) +``` + +Your `.cat-mouth div` selector should have a `width` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.width === '30px') +``` + +Your `.cat-mouth div` selector should have a `height` property set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.height === '50px') +``` + +Your `.cat-mouth div` selector should have a `border` property set to `2px solid #000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.border === '2px solid rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md new file mode 100644 index 00000000000..d46fbf6da0d --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md @@ -0,0 +1,212 @@ +--- +id: 64a26ac5540c5493f4641f10 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +You are going to make the two mouth lines into an elliptical shape. So, give the `.cat-mouth div` selector a border color of `black transparent transparent transparent` and a border radius of `190%/190px 150px 0 0`. + +# --hints-- + +Your `.cat-mouth div` selector should have a `border-color` property set to `black transparent transparent transparent`. + +```js +assert.match(code, /border-color:\s*black\s*(transparent)\s*\1\s*\1\s*;?/) +``` + +Your `.cat-mouth div` selector should have a `border-radius` property set to `190%/190px 150px 0 0`. + +```js +assert.match(code, /border-radius:\s*190%\/190px\s*150px\s*0\s*0\s*;?/) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md new file mode 100644 index 00000000000..4f3a8d2de51 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md @@ -0,0 +1,260 @@ +--- +id: 64a3bcbc83e574b58c8ed048 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +As you did in the previous step, use a descendant selector to target the three `div` elements inside your `.cat-whiskers-right` element. Give it a `width` of `40px`, a `height` of `1px`, and a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-whiskers-right div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')) +``` + +Your `.cat-whiskers-right div` selector should have a `width` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.width === '40px') +``` + +Your `.cat-whiskers-right div` selector should have a `height` set to `1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.height === '1px') +``` + +Your `.cat-whiskers-right div` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md index bbaa12eaf17..24e47ba8228 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md @@ -29,7 +29,7 @@ Your new `p` element should have three `span` elements. assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3); ``` -A `span` element should wrap the text `Sodium 360mg`. +A `span` element should wrap the text `Sodium 160mg`. ```js assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/)); diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md index 39c03960927..2861bf80b66 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -The text `* Daily Value %` should be aligned to the right. Create a `.right` selector and use the `justify-content` property to do it. +The text `% Daily Value *` should be aligned to the right. Create a `.right` selector and use the `justify-content` property to do it. # --hints-- diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md index 9422e15afaf..229b7eefc0e 100644 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md @@ -7,7 +7,7 @@ dashedName: step-25 # --description-- -To keep track of all of your spreadsheet's functions, delcare a `spreadsheetFunctions` object. Using destructuring syntax, set `sum`, `average`, and `median` as properties and values on the `spreadsheetFunctions` object. +To keep track of all of your spreadsheet's functions, declare a `spreadsheetFunctions` object. Using destructuring syntax, set `sum`, `average`, and `median` as properties and values on the `spreadsheetFunctions` object. # --hints-- diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md index f8bad487511..7404932cec7 100644 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md @@ -11,7 +11,7 @@ Inside the callback function, add a `console.log` with the value of `e.target.va Open the console, and make a selection from the teammates dropdown menu. You should see the value of that selection in the console. -`e.target.value` represents the value property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. +`e.target.value` represents the `value` property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. # --hints-- diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md b/curriculum/challenges/japanese/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md index 39441cd555d..8fc0d7b5e38 100644 --- a/curriculum/challenges/japanese/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md +++ b/curriculum/challenges/japanese/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md @@ -15,16 +15,16 @@ The website will consist of a main index page which will have links to a few rec 1. Your recipe page should include an `html` element with a `head` and `body` element as children. 1. You should have a `title` element within the `head` element with the text `The Odin Recipes`. 1. You should see an `h1` element that has the text `Creamy Chocolate Fudge`. -1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text. +1. You should see a related image with an `alt` attribute. 1. There should be an `h2` element with the text `Description` under the image. 1. You should see a couple of paragraphs under `Description` that describe the recipe. -1. There should be an `h2` element with the text `Ingredients` +1. There should be an `h2` element with the text `Ingredients`. 1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe. 1. Under the list of ingredients add another heading called `Steps`. 1. You should see an ordered list with a couple of steps needed to complete the recipe. -1. Under the steps there should be an `h2` element with the text `More Recipes` +1. Under the steps there should be an `h2` element with the text `More Recipes`. 1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within. -1. These anchor elements should have `href` attribute with the value set to `#` +1. These anchor elements should have `href` attribute with the value set to `#`. # --hints-- @@ -56,12 +56,12 @@ You should have a `h1` element within your `body` element that contains the text assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge'); ``` -You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text. +You should have an image with an `alt` attribute. ```js const img = document.querySelectorAll('IMG')[0]; -assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg') +assert(img && img.alt !='' && img.src != '') ``` You should have an `h2` element with the text `Description`. diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md new file mode 100644 index 00000000000..26dcaf81d51 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md @@ -0,0 +1,54 @@ +--- +id: 637f4e0e72c65bc8e73dfe1e +videoId: LGQuIIv2RVA +title: HTML Foundations Question A +challengeType: 15 +dashedName: html-foundations-question-a +--- + +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) + +## --text-- + +What are HTML tags? + +## --answers-- + +HTML tags tell the browser what content an element contains. + +--- + +HTML tags tell the browser when to load its content. + +--- + +HTML tags tell the browser what content the next element contains. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md new file mode 100644 index 00000000000..1fa04902849 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md @@ -0,0 +1,49 @@ +--- +id: 637f4e1672c65bc8e73dfe1f +title: HTML Foundations Question B +challengeType: 15 +dashedName: html-foundations-question-b +--- + +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `
`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --text-- + +What are the three parts of most HTML elements? + +## --answers-- + +An opening tag, self closing tag, and content. + +--- + +An opening tag, closing tag, and content. + +--- + +An opening tag, closing tag, and attribute. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md new file mode 100644 index 00000000000..79bd0197756 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md @@ -0,0 +1,54 @@ +--- +id: 637f4e1c72c65bc8e73dfe20 +title: HTML Foundations Question C +challengeType: 15 +dashedName: html-foundations-question-c +--- + +# --description-- + +To demonstrate an HTML boilerplate, you first need an HTML file to work with. + +Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`. + +You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files. + +To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file. + +It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems. + +## The DOCTYPE + +Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``. + +The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4: + +```html + +``` + +However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``. + +Open the `index.html` file created earlier in your text editor and add `` to the very first line. + +# --question-- +## --text-- + +What is the purpose of the `DOCTYPE` declaration? + +## --answers-- + +It tells the browser which version of HTML to use to render the document. + +--- + +It tells the browser that this document uses JavaScript. + +--- + +It tells the browser the title of the document. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md new file mode 100644 index 00000000000..d851163101c --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md @@ -0,0 +1,46 @@ +--- +id: 637f4e2872c65bc8e73dfe21 +title: HTML Foundations Question D +challengeType: 15 +dashedName: html-foundations-question-d +--- + +# --description-- + +After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it. + +This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document. + +Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so: + +```html + + + +``` + +## What is the lang attribute? +`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation. + +# --question-- + +## --text-- + +What is the `html` element? + +## --answers-- + +It is the root element in the document and tells the browser which version of HTML it should use. + +--- + +It is the root element in the document and all other elements should descend from it. + +--- + +It is the root element in the document and all other elements should come after it. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md new file mode 100644 index 00000000000..58e4fab1b96 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md @@ -0,0 +1,41 @@ +--- +id: 6374f208de18c50e48ba767b +title: HTML Foundations Question E +challengeType: 15 +dashedName: html-foundations-question-e +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --assignment-- + +Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. + +## --text-- + +Which of the following statements is true? + +## --answers-- + +CSS is used to create the basic structure of a webpage, and HTML is used to add style. + +--- + +HTML is used to create the basic structure of a webpage, and CSS is used to add style. + +--- + +HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. + + +## --video-solution-- + +2 + + diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md new file mode 100644 index 00000000000..80f5869cff5 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md @@ -0,0 +1,65 @@ +--- +id: 637f4e2f72c65bc8e73dfe22 +title: HTML Foundations Question F +challengeType: 15 +dashedName: html-foundations-question-f +--- + +# --description-- + +The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage. + +## The Charset Meta Element +You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: ``. + +Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser. + +## Title Element +Another element you should always include in the head of an HTML document is the `title` element: + +```html +
My First Webpage +``` + +The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. + +If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open. + +There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum. + +Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag: + + +```html + + + + + +My First Webpage + + +``` + +# --question-- + +## --text-- + +What is the purpose of the `head` element? + +## --answers-- + +The `head` element is used to display all elements that are displayed on the webpage. + +--- + +The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements. + +--- + +The `head` element is used to display the header content on top of the webpage. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md new file mode 100644 index 00000000000..16299d58648 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md @@ -0,0 +1,48 @@ +--- +id: 637f4e3672c65bc8e73dfe23 +videoId: V8UAEoOvqFg +title: HTML Foundations Question G +challengeType: 15 +dashedName: html-foundations-question-g +--- + +# --description-- + +The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. + +To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so: + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s brilliant Building your first web page video above. + +--- + +Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. + +--- + +Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML. + +## --text-- + +What is the purpose of the `body` element? + +## --answers-- + +This is where all important information about the webpage is displayed such as the `title` and `meta` tags. + +--- + +This is where you tell the browser how to render the webpage correctly. + +--- + +This is where all content will be displayed on the page such images, text, and links. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md new file mode 100644 index 00000000000..f99018d79de --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md @@ -0,0 +1,36 @@ +--- +id: 6376327e2724a688c04636e3 +title: HTML Foundations Question H +challengeType: 15 +dashedName: html-foundations-question-h +--- + +# --description-- + + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to add paragraphs of text on a webpage? + +## --answers-- + +CSS + +--- + +JavaScript + +--- + +HTML + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md new file mode 100644 index 00000000000..72ed091e603 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md @@ -0,0 +1,33 @@ +--- +id: 637633162724a688c04636e4 +title: HTML Foundations Question I +challengeType: 15 +dashedName: html-foundations-question-i +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to change the font and background color of a button? + +## --answers-- + +You should use CSS to change the background color and font of a button. + +--- + +You should use JavaScript to change the background color and font of a button. + +--- + +You should use HTML to change the background color and font of a button. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md new file mode 100644 index 00000000000..ebd30965da6 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md @@ -0,0 +1,34 @@ +--- +id: 637633672724a688c04636e5 +title: HTML Foundations Question J +challengeType: 15 +dashedName: html-foundations-question-j +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +What is the difference between HTML, CSS, and JavaScript? + +## --answers-- + +HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. + +--- + +CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. + +--- + +JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-a.md b/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-a.md new file mode 100644 index 00000000000..b4d237448f3 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-a.md @@ -0,0 +1,66 @@ +--- +id: 637f704072c65bc8e73dfe36 +videoId: tsEQgGjSmkM +title: Links and Images Question A +challengeType: 15 +dashedName: links-and-images-question-a +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named `odin-links-and-images`. + +- Within that directory, create a new file named `index.html`. + +- Fill in the usual HTML boilerplate. + +- Finally, add the following `h1` to the `body`: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. + +Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. + +It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Links video above. + +## --text-- + +What HTML tag is used to create a link? + +## --answers-- + +`` + +--- + +`` + +--- + +`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-b.md b/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-b.md
new file mode 100644
index 00000000000..a138268c406
--- /dev/null
+++ b/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-b.md
@@ -0,0 +1,54 @@
+---
+id: 637f703572c65bc8e73dfe35
+title: Links and Images Question B
+challengeType: 15
+dashedName: links-and-images-question-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- finally, add the following `h1` to the `body`: `
Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- +## --text-- + +What is an attribute? +## --answers-- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. + +--- + +An HTML attribute is used to tell the browser what the element contains. + +--- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-c.md b/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-c.md new file mode 100644 index 00000000000..8863b087456 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-c.md @@ -0,0 +1,55 @@ +--- +id: 637f703072c65bc8e73dfe34 +title: Links and Images Question C +challengeType: 15 +dashedName: links-and-images-question-c +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named `odin-links-and-images`. + +- Within that directory, create a new file named `index.html`. + +- Fill in the usual HTML boilerplate. + +- finally, add the following `h1` to the `body`: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --text-- + +What attribute tells links where to go to? + +## --answers-- + +`src` + +--- + +`href` + +--- + +`link` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-d.md b/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-d.md new file mode 100644 index 00000000000..37eebffbabf --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-d.md @@ -0,0 +1,112 @@ +--- +id: 637f702872c65bc8e73dfe33 +videoId: ta3Oxx7Yqbo +title: Links and Images Question D +challengeType: 15 +dashedName: links-and-images-question-d +--- + +# --description-- + + +Generally, there are two kinds of links you will create: + +- Links to pages on other websites on the internet + +- Links to pages located on your own websites + + +## Absolute Links +Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. + +You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. + +`https://www.theodinproject.com/about` + +## Relative Links +Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. + +Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. + +Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: + +```html + + + + +Odin Links and Images + + + +About Page
+ + +``` + +Back in the `index` page, add the following anchor element to create a link to the `about` page: + +```html + +Homepage
+ click me + + About + +``` + +Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. + +This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. + +But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. + +Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. + +Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. + +To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. + +```html + +Homepage
+ About + +``` + +Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. + +In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. + +```html + +Homepage
+ About + +``` + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML File Structure video above. + +## --text-- + +What is the difference between an absolute and a relative link? + +## --answers-- + +An absolute link is a link to another page on the current website. A relative link is a link to another website. + +--- + +An absolute link is a link to another website. A relative link is a link another page on the current website. + +--- + +There is no difference between absolute and relative links. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-e.md b/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-e.md new file mode 100644 index 00000000000..ae008078088 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-e.md @@ -0,0 +1,98 @@ +--- +id: 637f702372c65bc8e73dfe32 +videoId: 0xoztJCHpbQ +title: Links and Images Question E +challengeType: 15 +dashedName: links-and-images-question-e +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+``
+
+---
+
+``
+
+---
+
+`` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-f.md b/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-f.md new file mode 100644 index 00000000000..e1af2d6a659 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-f.md @@ -0,0 +1,93 @@ +--- +id: 637f701c72c65bc8e73dfe31 +title: Links and Images Question F +challengeType: 15 +dashedName: links-and-images-question-f +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `
` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-g.md b/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-g.md
new file mode 100644
index 00000000000..5bc84fa6c96
--- /dev/null
+++ b/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+title: Links and Images Question G
+challengeType: 15
+dashedName: links-and-images-question-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-h.md b/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-h.md
new file mode 100644
index 00000000000..71157081ae7
--- /dev/null
+++ b/curriculum/challenges/japanese/16-the-odin-project/top-links-and-images/links-and-images-question-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+title: Links and Images Question H
+challengeType: 15
+dashedName: links-and-images-question-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Read about the four main image formats that can be used on the web.
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+TIFF, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-a.md b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-a.md
new file mode 100644
index 00000000000..8698b62aca8
--- /dev/null
+++ b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Question A
+challengeType: 15
+dashedName: working-with-text-question-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua.
+
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ nisi ut aliquip ex ea commodo consequat.
+
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `` tag. + +Changing our example from before to use paragraph elements fixes the issue: + + + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. + +## --text-- + +How do you create a paragraph in HTML? + +## --answers-- + +`
This is a paragraph
` + +--- + +`This is a paragraph
` + +--- + +`This is a paragraph` + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-b.md b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-b.md new file mode 100644 index 00000000000..17d3c900359 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-b.md @@ -0,0 +1,39 @@ +--- +id: 637f4e5f72c65bc8e73dfe28 +title: Working With Text Question B +challengeType: 15 +dashedName: working-with-text-question-b +--- + +# --description-- + +Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. + +There are 6 different levels of headings starting from `` to `
`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. + +Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `
` tag. + + + +Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. + +# --question-- +## --text-- + +How many different levels of headings are there and what is the difference between them? + +## --answers-- + +There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. + +--- + +There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. + +--- + +There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-c.md b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-c.md new file mode 100644 index 00000000000..6ccf0e06658 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-c.md @@ -0,0 +1,47 @@ +--- +id: 637f4e6672c65bc8e73dfe29 +videoId: gW6cBZLUk6M +title: Working With Text Question C +challengeType: 15 +dashedName: working-with-text-question-c +--- + +# --description-- + +The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. + +You can use `strong` on its own: + + + +But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: + + + +Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Bold and Italic Text Video above. + +## --text-- + +What element should you use to make text bold and important? + +## --answers-- + +`This is an important message` + +--- + +`
This is an important message
` + +--- + +`This is an important message` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-d.md b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-d.md new file mode 100644 index 00000000000..e686b2698e0 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-d.md @@ -0,0 +1,38 @@ +--- +id: 637f4e6e72c65bc8e73dfe2a +title: Working With Text Question D +challengeType: 15 +dashedName: working-with-text-question-d +--- + +# --description-- + +The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. + +To use `em` on its own: + + +Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: + + + +# --question-- +## --text-- + +What element should you use to make text italicized to add emphasis? + +## --answers-- + +`This is an italic message` + +--- + +`This is an italic message` + +--- + +`This is an italic message ` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-e.md b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-e.md new file mode 100644 index 00000000000..a0a7ba2fda9 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-e.md @@ -0,0 +1,65 @@ +--- +id: 637f4e7972c65bc8e73dfe2b +title: Working With Text Question E +challengeType: 15 +dashedName: working-with-text-question-e +--- + +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the `body` element is the parent and the `p` is the child: + +```html + + + + +Lorem ipsum dolor sit amet.
+ + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: + +```html + + + + +Lorem ipsum dolor sit amet.
+Ut enim ad minim veniam.
+ + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship do two elements have if they are at the same level of nesting? + +## --answers-- + +The elements are each other's parents. + +--- + +The elements are each other's children. + +--- + +The elements are siblings. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-f.md b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-f.md new file mode 100644 index 00000000000..7d440cfab25 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-f.md @@ -0,0 +1,66 @@ +--- +id: 637f4e8072c65bc8e73dfe2c +title: Working With Text Question F +challengeType: 15 +dashedName: working-with-text-question-f +--- + +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the body element is the parent and the paragraph is the child: + +```html + + + + +Lorem ipsum dolor sit amet.
+ + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: + +```html + + + + +Lorem ipsum dolor sit amet.
+Ut enim ad minim veniam.
+ + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship does an element have with any nested element within it? + +## --answers-- + +The element within the other element is called the parent element. + +--- + +The element within the other element is called the child element. + +--- + +The element within the other element is called the sibling element. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-g.md b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-g.md new file mode 100644 index 00000000000..5f5d141fa46 --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-g.md @@ -0,0 +1,48 @@ +--- +id: 637f4e8772c65bc8e73dfe2d +title: Working With Text Question G +challengeType: 15 +dashedName: working-with-text-question-g +--- + +# --description-- + +HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. + +Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: + +```html +View the html to see the hidden comments
+ + + +Some paragraph text
+ + +``` + +# --question-- + +## --assignment-- + +To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. + +## --text-- + +How do you create HTML comments? + +## --answers-- + +`/* This is an HTML comment */` + +--- + +`` + +--- + +`<-- This is an HTML comment --!>` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-h.md b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-h.md new file mode 100644 index 00000000000..c20b4de097a --- /dev/null +++ b/curriculum/challenges/japanese/16-the-odin-project/top-working-with-text/working-with-text-question-h.md @@ -0,0 +1,65 @@ +--- +id: 637f4e3e72c65bc8e73dfe24 +videoId: kcHKFZBVtf4 +title: Working with Text Question H +challengeType: 15 +dashedName: working-with-text-question-h +--- + +# --description-- + +If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. + +Unordered lists are created using the `- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-i.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-i.md
new file mode 100644
index 00000000000..05765087c87
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-i.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+title: Working with Text Question I
+challengeType: 15
+dashedName: working-with-text-question-i
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
fCC Cat Painting + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md new file mode 100644 index 00000000000..1757ddb08e0 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md @@ -0,0 +1,51 @@ +--- +id: 646c586be7180e40ddf74ff6 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Give your `body` element a `background-color` of `#c9d2fc`. + +# --hints-- + +You should have a `body` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` selector should have a `background-color` property set to `#c9d2fc`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(201, 210, 252)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + +``` + +```css +* { + box-sizing: border-box; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md new file mode 100644 index 00000000000..c605ff01e1d --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md @@ -0,0 +1,66 @@ +--- +id: 646c59e942f35541923104bf +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Back in your HTML, create a `main` element. Inside that `main` element, add a `div` element with the class `cat-head`. + +# --hints-- + +You should have a `main` element. + +```js +assert(document.querySelectorAll('main').length === 1); +``` + +You should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 1); +``` + +Your `div` element should have the class `cat-head`. + +```js +assert(document.querySelector('div')?.getAttribute('class') === 'cat-head'); +``` + +Your `div` element should be inside your `main` tag. + +```js +assert(document.querySelectorAll('main div').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md new file mode 100644 index 00000000000..81eb5c83f27 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md @@ -0,0 +1,79 @@ +--- +id: 646c5ace05e4be4211407935 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +To see the `cat-head` element, give it a linear gradient background with `#5e5e5e` at `85%` and `#45454f` at `100%`. + +You might not notice the difference between these two colors, but they are there. + +# --hints-- + +Your `.cat-head` selector should have a `background` property. + +```js +assert.match(code, /background:/) +``` + +Your `background` property should use the `linear-gradient` function. + +```js +assert.match(code, /background:\s*linear-gradient\(/) +``` + +Your `linear-gradient` function should set the first color to be `#5e5e5e` at `85%`. + +```js +assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%/) +``` + +Your `linear-gradient` function should set the second color to be `#45454f` at `100%`. + +```js +assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%,\s+#45454f\s+100%\);?/) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md new file mode 100644 index 00000000000..98afa6c6b3b --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md @@ -0,0 +1,77 @@ +--- +id: 646c5d7057c45f432fcdd46c +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Using a class selector, give the `.cat-head` element a width of `205px` and a height of `180px`. Also, give it a border of `1px solid #000` and a `border-radius` of `46%`. + +# --hints-- + +You should have a `.cat-head` selector. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')) +``` + +Your `.cat-head` selector should have a `width` set to `205px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.width === '205px'); +``` + +Your `.cat-head` selector should have a `height` set to `180px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.height === '180px') +``` + +Your `.cat-head` selector should have a `border` set to `1px solid #000`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.border === '1px solid rgb(0, 0, 0)') +``` + +Your `.cat-head` selector should have a `border-radius` set to `46%`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle(".cat-head")?.borderRadius === '46%') +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md new file mode 100644 index 00000000000..7c88ce9baa8 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md @@ -0,0 +1,78 @@ +--- +id: 646c5e727e56e743c9aed4a1 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +CSS positioning lets you set how you want an element to be positioned in the browser. It has a `position` property you can set to `static`, `absolute`, `relative`, `sticky` or `fixed`. + +Once you set the `position` property of the element, you can move the element around by setting a pixel or a percentage value for one or more of the `top`, `right`, `left`, or `bottom` properties. + +`static` is the default positioning for all elements. If you assign it to an element, you won't be able to move it around with `top`, `right`, `left`, or `bottom`. + +Give `.cat-head` a `position` property of `static`, then set the `top` and `left` properties to `100px` each. + + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `static`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'static') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + --fcc-editable-region-- + + --fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md new file mode 100644 index 00000000000..9c460caa45f --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md @@ -0,0 +1,80 @@ +--- +id: 646c5ffef5598d449b52ec12 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Now you should work on the cat's ears. There will be a right and a left ear, and inside each, there will be an inner ear. + +Inside your `.cat-head` element, create a `div` element with the class `cat-ears`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-head`. + +```js +assert(document.querySelectorAll('div.cat-head').length === 1); +``` + +You should create one `div` element inside your `.cat-head` element. + +```js +assert(document.querySelectorAll('.cat-head div').length === 1); +``` + +Your `div` element should have the class `cat-ears`. + +```js +assert(document.querySelectorAll('.cat-head div')[0]?.getAttribute('class') === 'cat-ears'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md new file mode 100644 index 00000000000..356b443cc39 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md @@ -0,0 +1,86 @@ +--- +id: 646ce8bb4b35544d501c7184 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Inside your `.cat-ears` element, create two `div` elements with the classes `cat-left-ear` and `cat-right-ear` respectively. + +# --hints-- + +You should not change the existing `div` element with the class `car-ears`. + +```js +assert(document.querySelectorAll('div.cat-ears').length === 1); +``` + +You should create two `div` elements inside your `.cat-ears` element. + +```js +assert(document.querySelectorAll('.cat-ears div').length === 2); +``` + +Your first `div` element should have the class `cat-left-ear`. + +```js +assert(document.querySelectorAll('.cat-ears div')[0]?.classList.contains('cat-left-ear')); +``` + +Your second `div` element should have the class `cat-right-ear`. + +```js +assert(document.querySelectorAll('.cat-ears div')[1]?.classList.contains('cat-right-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md new file mode 100644 index 00000000000..f868fcd598d --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md @@ -0,0 +1,83 @@ +--- +id: 646ce9d790d2a44de5f99e04 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Inside your `.cat-left-ear` element, create another `div` element with the class `cat-left-inner-ear`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-ear`. + +```js +assert(document.querySelectorAll('div.cat-left-ear').length === 1); +``` + +You should have a `div` element inside your `.cat-left-ear` element. + +```js +assert(document.querySelectorAll('.cat-left-ear div').length === 1); +``` + +Your `div` element should have the class `cat-left-inner-ear`. + +```js +assert(document.querySelectorAll('.cat-left-ear div')[0]?.classList.contains('cat-left-inner-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md new file mode 100644 index 00000000000..deb18782568 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md @@ -0,0 +1,85 @@ +--- +id: 646ceae4d57c214e6b03576c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Inside your `.cat-right-ear` element, create another `div` element with the class `cat-right-inner-ear`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-right-ear`. + +```js +assert(document.querySelectorAll('div.cat-right-ear').length === 1); +``` + +You should have a `div` element inside your `.cat-right-ear` element. + +```js +assert(document.querySelectorAll('.cat-right-ear div').length === 1); +``` + +Your `div` element should have the class `cat-right-inner-ear`. + +```js +assert(document.querySelectorAll('.cat-right-ear div')[0]?.classList.contains('cat-right-inner-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md new file mode 100644 index 00000000000..ae13eae4db7 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md @@ -0,0 +1,95 @@ +--- +id: 646ceb843412c74edee27a79 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +You are going to make each ear look like a triangle. + +Using a class selector, give the `.cat-left-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`. + +# --hints-- + +You should have a `.cat-left-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')) +``` + +Your `.cat-left-ear` selector should have a `border-left` property set to `35px solid transparent` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderLeft === '35px solid transparent') +``` + +Your `.cat-left-ear` selector should have a `border-right` property set to `35px solid transparent` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderRight === '35px solid transparent') +``` + +Your `.cat-left-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderBottom === '70px solid rgb(94, 94, 94)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md new file mode 100644 index 00000000000..60b4d9ebfde --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md @@ -0,0 +1,92 @@ +--- +id: 646cecc9eb5c4f4f73dafd07 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Move the left ear into position by setting a position of `absolute`, a `top` of `-26px`, and a `left` of `-31px`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.position === 'absolute') +``` + +Your `.cat-left-ear` selector should have a `top` property set to `-26px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.top === '-26px') +``` + +Your `.cat-left-ear` selector should have a `left` property set to `-31px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.left === '-31px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md new file mode 100644 index 00000000000..a0b737ac3d9 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md @@ -0,0 +1,89 @@ +--- +id: 646cef0c2b98915094df7099 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Those edges are too sharp for an ear. So, set the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-left-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md new file mode 100644 index 00000000000..3bcd393bf42 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md @@ -0,0 +1,89 @@ +--- +id: 646cf1206cac5f51804f49cf +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +To position the left ear properly, you can use CSS transform to rotate it in a certain degree. + +The `transform` property allows you to modify the shape, position, and size of an element without changing the layout or affecting the surrounding elements. It has functions such as `translate()`, `rotate()`, `scale()`, `skew()`, and `matrix()`. + +Set the `transform` property to `rotate(-45deg)` and see what happens. + +# --hints-- + +You should set the `transform` property of your `.cat-left-ear` element to `rotate(-45deg)`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.transform === 'rotate(-45deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md new file mode 100644 index 00000000000..51bb049e2dd --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md @@ -0,0 +1,107 @@ +--- +id: 646cf2249f02ca5233d9af7c +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Now you can work on the right ear of the cat. You have the HTML for it already. + +Using a class selector, give the `.cat-right-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`. + +# --hints-- + +You should have a `.cat-right-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')) +``` + +Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent') +``` + +Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent') +``` + +Your `.cat-right-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '70px solid rgb(94, 94, 94)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md new file mode 100644 index 00000000000..dfce258d838 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md @@ -0,0 +1,104 @@ +--- +id: 646cf48d8f8e1f535a1821d3 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Move the right ear into position with a `position` property set to `absolute`, a `top` of `-26px`, and a `left` of `163px`. + +# --hints-- + +Your `.cat-right-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.position === 'absolute') +``` + +Your `.cat-right-ear` selector should have a `top` property set to `-26px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.top === '-26px') +``` + +Your `.cat-right-ear` selector should have a `left` property set to `163px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.left === '163px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md new file mode 100644 index 00000000000..d4525731d1f --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md @@ -0,0 +1,95 @@ +--- +id: 646cf6cbca98e258da65c979 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +As you did for the left ear, rotate the right ear at 45 degrees. + +# --hints-- + +You should set the `transform` property of your `.right-ear` element to `rotate(45deg)`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.transform === 'rotate(45deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md new file mode 100644 index 00000000000..bbd36a62759 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md @@ -0,0 +1,102 @@ +--- +id: 646cf88aa884405a11ea5bcc +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Remove the sharp border of the right ear by setting the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`. + +# --hints-- + +Your `.cat-right-ear` selector should have a `border-top-left-radius` property set to `90px`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-right-ear` selector should have a `border-top-right-radius` property set to `10px`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md new file mode 100644 index 00000000000..bb200fd1069 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md @@ -0,0 +1,102 @@ +--- +id: 646cfc2b8e6fe95c20a819d5 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The ears should always be placed above the part of the head it overlaps. You can do this with the `z-index` property. + +`z-index` is a property you can use to define the order of overlapping HTML elements. Any element with a higher `z-index` will always be positioned over an element with a lower `z-index`. + +To see `z-index` in action, set the `z-index`property of the left ear to `-1`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `z-index` of `-1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '-1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md new file mode 100644 index 00000000000..7f2be20c198 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md @@ -0,0 +1,100 @@ +--- +id: 646cfd853634255d02b64cc1 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +That's not the behavior you want. You should make the ears display over the head so the borders that overlap with them don't show. + +Instead of `-1`, set the `z-index` property of the left ear to `1`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `z-index` of `1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + --fcc-editable-region-- + z-index: -1; + --fcc-editable-region-- + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md new file mode 100644 index 00000000000..b892d61ca1d --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md @@ -0,0 +1,99 @@ +--- +id: 646cfde6ac612e5d60391f50 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Set the `z-index`property of the right ear to `1` so it always stays over the head. + +# --hints-- + +Your `.cat-right-ear` selector should have a `z-index` of `1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.zIndex === '1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + --fcc-editable-region-- + + --fcc-editable-region-- + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md new file mode 100644 index 00000000000..1d7411ad660 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md @@ -0,0 +1,121 @@ +--- +id: 646dd556d524bc61c0139bd6 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Most cats have different colors in their ear and the inner part of the same ear. You can implement the same too. That's why you defined a `div` element for both right and left inner ears a while ago. + +Using a class selector, give your `.cat-left-inner-ear` element a left and right border of `20px solid transparent` each. Also give it a bottom border of `40px solid #3b3b4f`. + +# --hints-- + +You should have a `.cat-left-inner-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')) +``` + +Your `.cat-left-inner-ear` selector should have a `border-left` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderLeft === '20px solid transparent') +``` + +Your `.cat-left-inner-ear` selector should have a `border-right` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderRight === '20px solid transparent') +``` + +Your `.cat-left-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md new file mode 100644 index 00000000000..8be0ea3110e --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md @@ -0,0 +1,118 @@ +--- +id: 646dd6f9caa862627dd87772 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Move the inner ear into position with a `position` property set to `absolute`, a `top` of `22px`, and a `left` of `-20px`. + +# --hints-- + +Your `.cat-left-inner-ear` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.position === 'absolute') +``` + +Your `.cat-left-inner-ear` selector should have a `top` property set to `22px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.top === '22px') +``` + +Your `.cat-left-inner-ear` selector should have a `left` property set to `-20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.left === '-20px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md new file mode 100644 index 00000000000..7e24c8e937c --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md @@ -0,0 +1,127 @@ +--- +id: 646dd7cfd0cfac630c1dd520 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +To remove all the pointed edges of the ear, set a bottom-right and bottom-left border radius of `40%` each, a top-left border radius of `90px`, and a top-right border radius of `10px`. + +# --hints-- + +Your `.cat-left-inner-ear` selector should have a `border-bottom-right-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottomRightRadius === '40%') +``` + +Your `.cat-left-inner-ear` selector should have a `border-bottom-left-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottomLeftRadius === '40%') +``` + +Your `.cat-left-inner-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-left-inner-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md new file mode 100644 index 00000000000..ba3b89e07d1 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md @@ -0,0 +1,132 @@ +--- +id: 646dd8c79ec23463a3d0e356 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +It's time to work on the right inner ear. Using a class selector, give your `.cat-right-inner-ear` element a left and right border of `20px solid transparent`. Also, give it a bottom border of `40px solid #3b3b4f`. + +# --hints-- + +You should have a `.cat-right-inner-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')) +``` + +Your `.cat-right-inner-ear` selector should have a `border-left` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderLeft === '20px solid transparent') +``` + +Your `.cat-right-inner-ear` selector should have a `border-right` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderRight === '20px solid transparent') +``` + +Your `.cat-right-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md new file mode 100644 index 00000000000..f48ba0bd881 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md @@ -0,0 +1,131 @@ +--- +id: 646dd9d9a729916460724f16 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Move the right inner ear into position with a `position` property set to `absolute`, a `top` of `22px` and a `left` of `-20px`. + +# --hints-- + +Your `.cat-right-inner-ear` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.position === 'absolute') +``` + +Your `.cat-right-inner-ear` selector should have a `top` property set to `22px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.top === '22px') +``` + +Your `.cat-right-inner-ear` selector should have a `left` property set to `-20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.left === '-20px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md new file mode 100644 index 00000000000..12d8b78a661 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md @@ -0,0 +1,140 @@ +--- +id: 646ddab8afd73764f5241bbf +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +As you did for the left inner ear, remove the sharp edges of the right inner ear by setting a bottom-right and bottom-left border radius of `40%`, a top-left border radius of `90px`, and a top-right border radius of `10px`. + +# --hints-- + +Your `.cat-right-inner-ear` selector should have a `border-bottom-right-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottomRightRadius === '40%') +``` + +Your `.cat-right-inner-ear` selector should have a `border-bottom-left-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottomLeftRadius === '40%') +``` + +Your `.cat-right-inner-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-right-inner-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md new file mode 100644 index 00000000000..5a2488dca6b --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md @@ -0,0 +1,147 @@ +--- +id: 646ddb61ff08366570cc5902 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +You will now start working on the cat's eyes. Like the ears, the eyes will have inner eyes. + +Create a `div` element with the class `cat-eyes`. Inside the `cat-eyes` element, create two `div` elements with the class `cat-left-eye` and `cat-right-eye` respectively. + +# --hints-- + +You should create a `div` element with the class `cat-eyes`. + +```js +assert(document.querySelectorAll('.cat-eyes').length === 1); +``` + +You should create two `div` elements inside the `.cat-eyes` element. + +```js +assert(document.querySelectorAll('.cat-eyes div').length === 2); +``` + +The first `div` element inside the `.cat-eyes` element should have the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('.cat-eyes div')[0].classList.contains('cat-left-eye')); +``` + +The second `div` element inside the `.cat-eyes` element should have the class `cat-right-eye`. + +```js +assert(document.querySelectorAll('.cat-eyes div')[1].classList.contains('cat-right-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md new file mode 100644 index 00000000000..9b995228d29 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md @@ -0,0 +1,144 @@ +--- +id: 646ddd3f9f97a0667b964bdb +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Inside the `.cat-left-eye` element, create another `div` element with the class `cat-left-inner-eye`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('div.cat-left-eye').length === 1); +``` + +You should have a `div` element inside your `.cat-left-eye` element. + +```js +assert(document.querySelectorAll('.cat-left-eye div').length === 1); +``` + +Your `div` element should have the class `cat-left-inner-eye`. + +```js +assert(document.querySelectorAll('.cat-left-eye div')[0]?.classList.contains('cat-left-inner-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md new file mode 100644 index 00000000000..5bad715a154 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md @@ -0,0 +1,146 @@ +--- +id: 646dddfb3a301c66ec513c56 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Inside the `.cat-right-eye` element, create another `div` element with the class `cat-right-inner-eye`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('div.cat-right-eye').length === 1); +``` + +You should have a `div` element inside your `.cat-right-eye` element. + +```js +assert(document.querySelectorAll('.cat-right-eye div').length === 1); +``` + +Your `div` element should have the class `cat-right-inner-eye`. + +```js +assert(document.querySelectorAll('.cat-right-eye div')[0]?.classList.contains('cat-right-inner-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md new file mode 100644 index 00000000000..9cf9b19e226 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md @@ -0,0 +1,154 @@ +--- +id: 646dde7dc20dc167489faa69 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Using a class selector, give your `.cat-left-eye` element a `width` of `30px` and a `height` of `40px`. Also, give it a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-left-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')) +``` + +Your `.cat-left-eye` selector should have a `width` set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.width === '30px') +``` + +Your `.cat-left-eye` selector should have a `height` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.height === '40px') +``` + +Your `.cat-left-eye` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md new file mode 100644 index 00000000000..45ed732e12d --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md @@ -0,0 +1,153 @@ +--- +id: 646ddf888632fa67f1180940 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Move the left eye into position with a `position` property of `absolute` a `top` of `54px`, and a `left` of `39px`. + +# --hints-- + +Your `.cat-left-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.position === 'absolute') +``` + +Your `.cat-left-eye` selector should have a `top` property set to `54px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.top === '54px') +``` + +Your `.cat-left-eye` selector should have a `left` property set to `39px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.left === '39px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md new file mode 100644 index 00000000000..38088bba67e --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md @@ -0,0 +1,150 @@ +--- +id: 646de5dc8988076a1d992afd +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +To make the left eye look like an eye, give it a border radius of `60%`. Also, using the transform property, rotate it at `25` degrees. + +# --hints-- + +Your `.cat-left-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.borderRadius === '60%') +``` + +Your `.cat-left-eye` selector should have a `transform` property set to `rotate(25deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.transform === 'rotate(25deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md new file mode 100644 index 00000000000..b9dc455e5b1 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md @@ -0,0 +1,167 @@ +--- +id: 646de6a97b50a86ac487de86 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Now you will work on the right eye by using the same approach. + +Using a class selector, give your `.cat-right-eye` element a width of `30px` and a height of `40px`. Also, give it a background color of `#000`. + +# --hints-- + +You should have a `.cat-right-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')) +``` + +Your `.cat-right-eye` selector should have a `width` set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.width === '30px') +``` + +Your `.cat-right-eye` selector should have a `height` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.height === '40px') +``` + +Your `.cat-right-eye` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md new file mode 100644 index 00000000000..1cae6709360 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md @@ -0,0 +1,165 @@ +--- +id: 646de7b64467e96b7d35b5cd +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Move the right eye into position with a `position` property of `absolute` a `top` of `54px`, and a `left` of `134px`. + +# --hints-- + +Your `.cat-right-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.position === 'absolute') +``` + +Your `.cat-right-eye` selector should have a `top` property set to `54px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.top === '54px') +``` + +Your `.cat-right-eye` selector should have a `left` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.left === '134px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md new file mode 100644 index 00000000000..b376c539f32 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md @@ -0,0 +1,162 @@ +--- +id: 646de8478d6f796bfbdccfb2 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +To make the right eye look like an eye, give it a border radius of `60%`. Also, using the transform property, rotate it at `-25` degrees. + +# --hints-- + +Your `.cat-right-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.borderRadius === '60%') +``` + +Your `.cat-right-eye` selector should have a `transform` property set to `rotate(-25deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.transform === 'rotate(-25deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md new file mode 100644 index 00000000000..74ba34db408 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md @@ -0,0 +1,178 @@ +--- +id: 646de8d204a3426c7d184372 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Those look like eyes, but you can still make them better. That's why you created two inner eyes `div` elements. + +Using a class selector, give your `.cat-left-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`. + +# --hints-- + +You should have a `.cat-left-inner-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')) +``` + +Your `.cat-left-inner-eye` selector should have a `width` set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.width === '10px') +``` + +Your `.cat-left-inner-eye` selector should have a `height` set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.height === '20px') +``` + +Your `.cat-left-inner-eye` selector should have a `background-color` set to `#fff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md new file mode 100644 index 00000000000..b0243121123 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md @@ -0,0 +1,187 @@ +--- +id: 646dea1c98c2426d43a705c3 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Move the left inner eye into position with a `position` property of `absolute`, a `top` of `8px`, and a `left` of `2px`. Also, give it a border radius of `60%` and rotate it at `10` degrees. + +# --hints-- + +Your `.cat-left-inner-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.position === 'absolute') +``` + +Your `.cat-left-inner-eye` selector should have a `top` property set to `8px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.top === '8px') +``` + +Your `.cat-left-inner-eye` selector should have a `left` property set to `2px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.left === '2px') +``` + +Your `.cat-left-inner-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.borderRadius === '60%') +``` + +Your `.cat-left-inner-eye` selector should have a `transform` property set to `10deg`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.transform === 'rotate(10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 10px; + height: 20px; + background-color: #fff; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md new file mode 100644 index 00000000000..1b344dc94cc --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md @@ -0,0 +1,187 @@ +--- +id: 646deb169847f86df0f95bfc +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Using a class selector, give your `.cat-right-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`. + +# --hints-- + +You should have a `.cat-right-inner-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')) +``` + +Your `.cat-right-inner-eye` selector should have a `width` set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.width === '10px') +``` + +Your `.cat-right-inner-eye` selector should have a `height` set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.height === '20px') +``` + +Your `.cat-right-inner-eye` selector should have a `background-color` set to `#fff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md new file mode 100644 index 00000000000..f7933f8c3dc --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md @@ -0,0 +1,198 @@ +--- +id: 646dec359bef3b7811fba5a6 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Move the right inner eye into position with a `position` of `absolute`, a `top` of `8px`, and a `left` of `18px`. Also, give it a border radius of `60%` and rotate it at `-5deg`. + +# --hints-- + +Your `.cat-right-inner-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.position === 'absolute') +``` + +Your `.cat-right-inner-eye` selector should have a `top` property set to `8px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.top === '8px') +``` + +Your `.cat-right-inner-eye` selector should have a `left` property set to `18px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.left === '18px') +``` + +Your `.cat-right-inner-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.borderRadius === '60%') +``` + +Your `.cat-right-inner-eye` selector should have a `transform` property set to `-5deg`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.transform === 'rotate(-5deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 10px; + height: 20px; + background-color: #fff; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md new file mode 100644 index 00000000000..143f0179cfe --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md @@ -0,0 +1,186 @@ +--- +id: 646dedbcba062079128b2ecc +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +It's time to work on the nose. In your HTML, create a `div` element with the class `cat-nose`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 12) +``` + +Your `div` element should have the class `cat-nose`. + +```js +assert(document.querySelectorAll('div')[11].classList.contains('cat-nose')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md new file mode 100644 index 00000000000..bf02b9cf8fc --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md @@ -0,0 +1,200 @@ +--- +id: 646def5e863abf7a14501421 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Using a class selector, give your `.cat-nose` element a left and right border of `15px solid transparent` each. Also give it a bottom border of `20px solid #442c2c`. + +# --hints-- + +You should have a `.cat-nose` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')) +``` + +Your `.cat-nose` selector should have a `border-left` property set to `15px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderLeft === '15px solid transparent') +``` + +Your `.cat-nose` selector should have a `border-right` property set to `15px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderRight === '15px solid transparent') +``` + +Your `.cat-nose` selector should have a `border-bottom` property set to `20px solid #442c2c`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottom === '20px solid rgb(68, 44, 44)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md new file mode 100644 index 00000000000..ef9238633b8 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md @@ -0,0 +1,200 @@ +--- +id: 646df03c8f79337ab46f148b +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Move the nose into position with a `position` property of `absolute`, a `top` of `108px`, and a `left` of `85px`. + +# --hints-- + +Your `.cat-nose` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.position === 'absolute') +``` + +Your `.cat-nose` selector should have a `top` property set to `108px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.top === '108px') +``` + +Your `.cat-nose` selector should have a `left` property set to `85px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.left === '85px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md new file mode 100644 index 00000000000..0318f9d7f46 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md @@ -0,0 +1,215 @@ +--- +id: 646df0cf26413a7b35e4b8b3 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Remove the sharp edges of the nose with border radius of `50%` each on the top-left, bottom-right, and bottom-left corners. Also, rotate it at 180 degrees. + +# --hints-- + +Your `.cat-nose` selector should have a `border-top-left-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderTopLeftRadius === '50%') +``` + +Your `.cat-nose` selector should have a `border-bottom-right-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottomRightRadius === '50%') +``` + +Your `.cat-nose` selector should have a `border-bottom-left-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottomLeftRadius === '50%') +``` + +Your `.cat-nose` selector should have a `transform` property set to `rotate(180deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.transform === 'rotate(180deg)') +``` + +You should not have a `border-top-right-radius` property in your `.cat-nose` selector. + +```js +assert(/border-top-right-radius:\s*\d+%;/.test(code) === false); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md new file mode 100644 index 00000000000..9d8231e174b --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md @@ -0,0 +1,203 @@ +--- +id: 646df1d1aa4ae57bdf1869c4 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Now you will start working on the mouth. There will be a right line and left line for the mouth. + +Create a `div` element with the class `cat-mouth`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 13) +``` + +Your `div` element should have the class `cat-mouth` + +```js +assert(document.querySelectorAll('div')[12].classList.contains('cat-mouth')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md new file mode 100644 index 00000000000..3ef80ee39bb --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md @@ -0,0 +1,217 @@ +--- +id: 646dffd8ce9ac77ec1906f2e +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Inside your `.cat-mouth` element, create a `div` element with the class `cat-mouth-line-left` and another `div` with the class `cat-mouth-line-right`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-mouth`. + +```js +assert(document.querySelectorAll('div.cat-mouth').length === 1); +``` + +You should have two `div` elements inside your `.cat-mouth` element. + +```js +assert(document.querySelectorAll('.cat-mouth div').length === 2); +``` + +The first `div` element inside the `.cat-mouth` element should have the class `cat-mouth-line-left`. + +```js +assert(document.querySelectorAll('.cat-mouth div')[0]?.classList.contains('cat-mouth-line-left')); +``` + +The second `div` element inside the `.cat-mouth` element should have the class `cat-mouth-line-right`. + +```js +assert(document.querySelectorAll('.cat-mouth div')[1]?.classList.contains('cat-mouth-line-right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md new file mode 100644 index 00000000000..a561360c7e9 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md @@ -0,0 +1,227 @@ +--- +id: 646f0417322c0e04983a5149 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Using a class selector, give your `.cat-mouth-line-left` element a `position` of `absolute`, a `top` of `88px` and a `left` of `74px`. This would move it into the right position. + +# --hints-- + +You should have a `cat-mouth-line-left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')) +``` + +Your `.cat-mouth-line-left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.position === 'absolute') +``` + +Your `.cat-mouth-line-left` selector should have a `top` property set to `88px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.top === '88px') +``` + +Your `.cat-mouth-line-left` selector should have a `left` property set to `74px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.left === '74px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + + --fcc-editable-region-- ++ +++ +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md new file mode 100644 index 00000000000..46ce69b8f2c --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md @@ -0,0 +1,214 @@ +--- +id: 646f08293804a30685533c6f +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Using the `transform` property, rotate the left mouth line at `170` degrees. + +# --hints-- + +Your `.cat-mouth-line-left` property should have a `transform` property set to `rotate(170deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.transform === 'rotate(170deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md new file mode 100644 index 00000000000..03853c3938b --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md @@ -0,0 +1,234 @@ +--- +id: 646f09293eb3230723a62f77 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Access your `.cat-mouth-line-right` element with a class selector, then move it into the right position with a `position` of `absolute`, a `top` of `88px` and a `left` of `91px`. + +# --hints-- + +You should have a `.cat-mouth-line-right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')) +``` + +Your `.cat-mouth-line-right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.position === 'absolute') +``` + +Your `.cat-mouth-line-right` selector should have a `top` property set to `88px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.top === '88px') +``` + +Your `.cat-mouth-line-right` selector should have a `left` property set to `91px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.left === '91px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md new file mode 100644 index 00000000000..2a01ed169d2 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md @@ -0,0 +1,221 @@ +--- +id: 646f0c9a1e3360092d1bbd33 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Rotate the right mouth line at `165` degrees. + +# --hints-- + +Your `.cat-mouth-line-left` property should have a `transform` property set to `rotate(165deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.transform === 'rotate(165deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md new file mode 100644 index 00000000000..3d75bf77a02 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md @@ -0,0 +1,231 @@ +--- +id: 646f0ce5737243098ad6e494 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +The last thing you will work on is the whiskers. There are going to be 6 of them, meaning there will be three on each side. + +Create a `div` element with the class `cat-whiskers`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 16) +``` + +Your div element should have the class `cat-whiskers`. + +```js +assert(document.querySelectorAll('div')[15].classList.contains('cat-whiskers')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md new file mode 100644 index 00000000000..6e28a86659a --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md @@ -0,0 +1,243 @@ +--- +id: 646f0ef13604420a8744f7d4 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Inside the `.cat-whiskers` element, create two `div` elements with the class `cat-whiskers-left` and `cat-whiskers-right`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-whiskers` + +```js +assert(document.querySelectorAll('div.cat-whiskers').length === 1) +``` + +You should have two `div` elements inside the `.cat-whiskers` element. + +```js +assert(document.querySelectorAll('.cat-whiskers div').length === 2) +``` + +The first `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-left`. + +```js +assert(document.querySelectorAll('.cat-whiskers div')[0].classList.contains('cat-whiskers-left')) +``` + +The second `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-right`. + +```js +assert(document.querySelectorAll('.cat-whiskers div')[1].classList.contains('cat-whiskers-right')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md new file mode 100644 index 00000000000..291e0fbd52d --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md @@ -0,0 +1,253 @@ +--- +id: 646f0f7c5933560af8e7e380 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Inside the `.cat-whiskers-left` element, create three `div` elements with the classes `cat-whisker-left-top`, `cat-whisker-left-middle`, and `cat-whisker-left-bottom`. + +# --hints-- + +You should not change the existing `div` element with class `cat-whiskers-left`. + +```js +assert(document.querySelectorAll('div.cat-whiskers-left').length === 1) +``` + +You should create three `div` elements inside your `.cat-whiskers-left` element. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div').length === 3) +``` + +The first `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-top`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[0].classList.contains('cat-whisker-left-top')) +``` + +The second `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-middle`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[1].classList.contains('cat-whisker-left-middle')) +``` + +The third `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-bottom`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[2].classList.contains('cat-whisker-left-bottom')) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ + --fcc-editable-region-- ++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md new file mode 100644 index 00000000000..820cbd44d12 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md @@ -0,0 +1,256 @@ +--- +id: 646f102bf87b350b593baa72 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Inside the `.cat-whiskers-right` element, create 3 `div` elements with the class `cat-whisker-right-top`, `cat-whisker-right-middle`, and `cat-whisker-right-bottom`. + +# --hints-- + +You should not change the existing `div` element with class `cat-whiskers-right`. + +```js +assert(document.querySelectorAll('div.cat-whiskers-right').length === 1) +``` + +You should create three `div` elements inside your `.cat-whiskers-right` element. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div').length === 3) +``` + +The first `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-top`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[0].classList.contains('cat-whisker-right-top')) +``` + +The second `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-middle`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[1].classList.contains('cat-whisker-right-middle')) +``` + +The third `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-bottom`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[2].classList.contains('cat-whisker-right-bottom')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ ++ --fcc-editable-region-- ++ ++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md new file mode 100644 index 00000000000..741c609e6b3 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md @@ -0,0 +1,254 @@ +--- +id: 646f107abb89d00bb99f387a +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Use a descendant selector to target the three `div` elements inside your `.cat-whiskers-left` element. Give it a `width` of `40px`, a `height` of `1px`, and a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-whiskers-left div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')) +``` + +Your `.cat-whiskers-left div` selector should have a `width` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.width === '40px') +``` + +Your `.cat-whiskers-left div` selector should have a `height` set to `1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.height === '1px') +``` + +Your `.cat-whiskers-left div` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md new file mode 100644 index 00000000000..b1c107c9c2e --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md @@ -0,0 +1,266 @@ +--- +id: 646f12da0b4c5d0ca162834a +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Using a class selector, move the `.cat-whisker-left-top` element into place with a `position` of `absolute`, a `top` of `120px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-top` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')) +``` + +Your `.cat-whisker-left-top` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.position === 'absolute') +``` + +Your `.cat-whisker-left-top` selector should have a `top` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.top === '120px') +``` + +Your `.cat-whisker-left-top` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md new file mode 100644 index 00000000000..9ae2339b4dc --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md @@ -0,0 +1,254 @@ +--- +id: 646f135eab69d90d0c6d4e9b +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Rotate the left top whisker at `10` degrees. + +# --hints-- + +Your `.cat-whisker-left-top` selector should have a `transform` property set to `rotate(10deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.transform === 'rotate(10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md new file mode 100644 index 00000000000..c0b941997a6 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md @@ -0,0 +1,273 @@ +--- +id: 646f159b2cffb21150b927cb +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Use a class selector to target the `.cat-whisker-left-middle` element. Then move it into place with a `position` property set to `absolute`, a `top` of `127px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-middle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')) +``` + +Your `.cat-whisker-left-middle` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.position === 'absolute') +``` + +Your `.cat-whisker-left-middle` selector should have a `top` property set to `127px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.top === '127px') +``` + +Your `.cat-whisker-left-middle` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md new file mode 100644 index 00000000000..0a537b0812d --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md @@ -0,0 +1,260 @@ +--- +id: 646f164bf100dd11d226161f +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Rotate the left middle whisker at 3 degrees. + +# --hints-- + +Your `.cat-whisker-left-middle` selector should have a `transform` property set to `rotate(3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.transform === 'rotate(3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md new file mode 100644 index 00000000000..651a9405914 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md @@ -0,0 +1,280 @@ +--- +id: 646f1764e2f1d212ba9785a7 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Using a class selector, move the `.cat-whisker-left-bottom` into position with a `position` of `absolute`, a `top` of `134px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-bottom` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')) +``` + +Your `.cat-whisker-left-bottom` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.position === 'absolute') +``` + +Your `.cat-whisker-left-bottom` selector should have a `top` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.top === '134px') +``` + +Your `.cat-whisker-left-bottom` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md new file mode 100644 index 00000000000..bc03c983374 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md @@ -0,0 +1,267 @@ +--- +id: 646f1802a09a171332e14630 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Rotate the left bottom whisker at `-3` degrees. + +# --hints-- + +Your `.cat-whisker-left-bottom` selector should have a `transform` property set to `rotate(-3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.transform === 'rotate(-3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md new file mode 100644 index 00000000000..e365b97d693 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md @@ -0,0 +1,287 @@ +--- +id: 646f4d6c42dc5f214f4e7444 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Now you will work on moving the right whiskers into place. Use class selector to target the `.cat-whisker-right-top` element and give it a `position` of `absolute`, a `top` of `120px`, and a `left` of `109px`. + +# --hints-- + +You should have a `.cat-whisker-right-top` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')) +``` + +Your `.cat-whisker-right-top` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.position === 'absolute') +``` + +Your `.cat-whisker-right-top` selector should have a `top` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.top === '120px') +``` + +Your `.cat-whisker-right-top` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md new file mode 100644 index 00000000000..9df724448e7 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md @@ -0,0 +1,274 @@ +--- +id: 646f4e46e81f7021d5fd9c1d +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Rotate the top-right whisker at -10 degrees. + +# --hints-- + +Your `.cat-whisker-right-top` selector should have a `transform` property set to `rotate(-1deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.transform === 'rotate(-10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md new file mode 100644 index 00000000000..2f79cbf9301 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md @@ -0,0 +1,294 @@ +--- +id: 646f4f6a14e3c522d130a0d2 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Use a class selector to target the `cat-whisker-right-middle` element, then move the right middle whisker into position with a `position` of `absolute`, a `top` of `127px`, and a `left` of `109px`. + +# --hints-- + +You should have a `.cat-whisker-right-middle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')) +``` + +Your `.cat-whisker-right-middle` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.position === 'absolute') +``` + +Your `.cat-whisker-right-middle` selector should have a `top` property set to `127px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.top === '127px') +``` + +Your `.cat-whisker-right-middle` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md new file mode 100644 index 00000000000..a7d861a1258 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md @@ -0,0 +1,281 @@ +--- +id: 646f4fe12b7985232bf475a5 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Rotate the right middle whisker at -3 degrees. + +# --hints-- + +Your `.cat-whisker-right-middle` selector should have a `transform` property set to `rotate(-3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.transform === 'rotate(-3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md new file mode 100644 index 00000000000..d0cf2b64a3f --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md @@ -0,0 +1,302 @@ +--- +id: 646f507e4d1cd323f17db4fc +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Use class selector to target the `.cat-whisker-right-bottom` element, then move it into place with a `position` of `absolute`, a `top` of `134px`, and a `left` of `109px`. + + +# --hints-- + +You should have a `.cat-whisker-right-bottom` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')) +``` + +Your `.cat-whisker-right-bottom` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.position === 'absolute') +``` + +Your `.cat-whisker-right-bottom` selector should have a `top` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.top === '134px') +``` + +Your `.cat-whisker-right-bottom` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md new file mode 100644 index 00000000000..3bf9207660e --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md @@ -0,0 +1,556 @@ +--- +id: 646f516dbfc1342495515625 +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Rotate the bottom-right whisker at 3 degrees. + +With this final step, your cat painting is now complete. + +# --hints-- + +Your `.cat-whisker-right-bottom` selector should have a `transform` property set to `rotate(3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.transform === 'rotate(3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +.cat-whisker-right-bottom { + position: absolute; + top: 134px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +# --solutions-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +.cat-whisker-right-bottom { + position: absolute; + top: 134px; + left: 109px; + transform: rotate(3deg); +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md new file mode 100644 index 00000000000..03ea4e8598b --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md @@ -0,0 +1,77 @@ +--- +id: 6476f5c17f99146071ee884c +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +You could see that nothing happens. The `.cat-head` element did not move despite setting a `top` and `left` of `100px` each. But that's not the case with `relative` positioning. + +When you use the `relative` value, the element is still positioned according to the normal flow of the document, but the `top`, `left`, `bottom`, and `right` values become active. + +Instead of `static`, give you `.cat-head` a position of `relative`, and leave both `top` and `left` properties as they are. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `relative`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'relative') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: static; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md new file mode 100644 index 00000000000..0c28f0f242e --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md @@ -0,0 +1,79 @@ +--- +id: 6476f7a4827bcc61682f2347 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +The next position property is `absolute`. When you use the `absolute` value for your `position` property, the element is taken out of the normal flow of the document, and then its position is determined by the `top`, `right`, `bottom`, and `left` properties. + +Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any pixel value. + + + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `absolute`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute') +``` + +Your `.cat-head` selector should have a `top` property set to any number in `px`. Make sure you add a semi-colon. + +```js +// assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '300px') +assert.match(code, /top:\s*\d{1,4}px;/) +``` + +Your `.cat-head` selector should have a `left` property set to any number in `px`. Make sure you add a semi-colon. + +```js +// assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '400px') +assert.match(code, /left:\s*\d{1,4}px;/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: relative; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md new file mode 100644 index 00000000000..85259f8c8bf --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md @@ -0,0 +1,70 @@ +--- +id: 6476fb7cbaafa36d65e9cf35 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +`fixed` is a `position` property value that lets you make an element fixed to the page no matter where the user scrolls to on the page. + +You'll have to do some more markups to see how `fixed` positioning works. In your HTML, create a `div` element with the class `box`. + +# --hints-- + +You should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 2); +``` + +Your `div` element should have the class `box`. + +```js +assert(document.querySelectorAll('div')[1]?.getAttribute('class') === 'box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + top: 300px; + left: 400px; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md new file mode 100644 index 00000000000..a8a137321fe --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md @@ -0,0 +1,101 @@ +--- +id: 6476fc5cf14b276e6d04e82a +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Use a class selector to give your `.box` element a width of `200px`, a height of `600px`, and a background color of `#000`. Also, give it a `position` of `absolute`, a `top` of `800px` and a `left` of `650px`. + +# --hints-- + +You should have a `.box` selector. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')) +``` + +Your `.box` selector should have a `width` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.width === '200px') +``` + +Your `.box` selector should have a `height` property set to `600px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.height === '600px') +``` + +Your `.box` selector should have a `background-color` property set to `#000`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +Your `.box` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.position === 'absolute') +``` + +Your `.box` selector should have a `left` property set to `650px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.left === '650px') +``` + +Your `.box` selector should have a `top` property set to `800px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.top === '800px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: relative; + top: 100px; + left: 100px; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md new file mode 100644 index 00000000000..bd1a9049d86 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md @@ -0,0 +1,85 @@ +--- +id: 6476fd4213318f6ee211028a +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Now replace the `position` property value of your `.cat-head` with `fixed`. Leave both `top` and `left` as they are. + +After that, scroll up and down to see how the `fixed` value works. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `fixed`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'fixed') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: relative; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 200px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md new file mode 100644 index 00000000000..1c8891e4304 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md @@ -0,0 +1,87 @@ +--- +id: 64770351e8586671ec0911f0 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +The last position property value is `sticky`. `sticky` positioning is a hybrid of `relative` and `fixed` positioning. It allows an element to **stick** to a specific position within its containing element or viewport, based on the scroll position. + +Change the value of the `position` property of `.cat-head` to `sticky`, set `top` to `0`, then remove `left` and its value. + +**Note**: To see how `sticky` works, you have to place a couple of texts before and after your `.cat-head` `div` element. If you scroll up after that, you'll see that the `.cat-head` gets stuck to the top and remains there. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `sticky`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'sticky') +``` + +Your `.cat-head` selector should have a `top` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px') +``` + +You should not have the `left` property and its value in your code. + +```js +assert.notMatch(code, /left:\s*100px;?/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: fixed; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 200px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md new file mode 100644 index 00000000000..a7597864564 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md @@ -0,0 +1,102 @@ +--- +id: 6477062778c85972eb648030 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +You should now center the cat head. + +Give the `.cat-head` element a position property set to `absolute`. Set a value of `0` for the `right`, `left`, `top`, `bottom` properties, then set its `margin` property on all sides to `auto`. That's one way to center an element vertically and horizontally using CSS positioning. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `absolute`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute') +``` + +Your `.cat-head` selector should have a `top` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px') +``` + +Your `.cat-head` selector should have a `left` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '0px') +``` + +Your `.cat-head` selector should have a `right` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.right === '0px') +``` + +Your `.cat-head` selector should have a `bottom` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.bottom === '0px') +``` + +Your `.cat-head` selector should have a `margin` property set to `auto`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.margin === 'auto') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: sticky; + top: 0; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md new file mode 100644 index 00000000000..806db219734 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md @@ -0,0 +1,73 @@ +--- +id: 647d821de0d97b3283c72b36 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Also, remove the `.box` CSS rule and its declarations because you don't need them anymore. + +# --hints-- + +You should remove the `.box` css rule and all its values. + +```js +assert.notMatch(code, /\.box\s*\{\s*width:\s*400px;\s*height:\s*600px;\s*background-color:\s*#000;\s*position:\s*absolute;\s*left:\s*650px;\s*top:\s*800px;?\s*\}\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md new file mode 100644 index 00000000000..6e039d20c5c --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md @@ -0,0 +1,48 @@ +--- +id: 647d855ac12cd436059acd39 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Use the universal selector to add `box-sizing: border-box;` to your CSS. This ensures elements include padding and border in their specified width and height. + +# --hints-- + +You should have the universal selector (`*`). + +```js +// assert.match(code, /\*\s*{\s*.*\s*}/) +assert(new __helpers.CSSHelp(document).getStyle('*')) +``` + +Your universal selector should have a `box-sizing` property set to `border-box`. + +```js +// assert.match(code, /\*\s*{\s*box-sizing:\s*border-box;?\s*}/) +assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md new file mode 100644 index 00000000000..a7a70f95a81 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md @@ -0,0 +1,74 @@ +--- +id: 649353647c44ef4867ab4935 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Remove the `div` element with class `box` because you don't need it anymore. + +# --hints-- + +You should remove the `div` element with class `box` + +```js +assert.notMatch(code, /fCC Cat Painting + + + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md new file mode 100644 index 00000000000..04963838659 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md @@ -0,0 +1,218 @@ +--- +id: 64a2687ef267e5934a2f93e3 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Using a descendant selector, select the two `div` elements inside the `div` with class `cat-mouth`. Give it a width of `30px`, a height of `50px`, and a border of `2px solid #000`. + +# --hints-- + +You should have a `.cat-mouth div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')) +``` + +Your `.cat-mouth div` selector should have a `width` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.width === '30px') +``` + +Your `.cat-mouth div` selector should have a `height` property set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.height === '50px') +``` + +Your `.cat-mouth div` selector should have a `border` property set to `2px solid #000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.border === '2px solid rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md new file mode 100644 index 00000000000..d46fbf6da0d --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md @@ -0,0 +1,212 @@ +--- +id: 64a26ac5540c5493f4641f10 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +You are going to make the two mouth lines into an elliptical shape. So, give the `.cat-mouth div` selector a border color of `black transparent transparent transparent` and a border radius of `190%/190px 150px 0 0`. + +# --hints-- + +Your `.cat-mouth div` selector should have a `border-color` property set to `black transparent transparent transparent`. + +```js +assert.match(code, /border-color:\s*black\s*(transparent)\s*\1\s*\1\s*;?/) +``` + +Your `.cat-mouth div` selector should have a `border-radius` property set to `190%/190px 150px 0 0`. + +```js +assert.match(code, /border-radius:\s*190%\/190px\s*150px\s*0\s*0\s*;?/) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md new file mode 100644 index 00000000000..4f3a8d2de51 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md @@ -0,0 +1,260 @@ +--- +id: 64a3bcbc83e574b58c8ed048 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +As you did in the previous step, use a descendant selector to target the three `div` elements inside your `.cat-whiskers-right` element. Give it a `width` of `40px`, a `height` of `1px`, and a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-whiskers-right div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')) +``` + +Your `.cat-whiskers-right div` selector should have a `width` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.width === '40px') +``` + +Your `.cat-whiskers-right div` selector should have a `height` set to `1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.height === '1px') +``` + +Your `.cat-whiskers-right div` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md index 1c89356cd4f..1ef312c4a0b 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md @@ -29,7 +29,7 @@ Il nuovo elemento `p` dovrebbe avere tre elementi `span`. assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3); ``` -Un elemento `span` dovrebbe racchiudere il testo `Sodium 360mg`. +A `span` element should wrap the text `Sodium 160mg`. ```js assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/)); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md index 304deebf5bd..4481570fadc 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -Il testo `* Daily Value %` dovrebbe essere allineato a destra. Crea un selettore `.right` e usa la proprietà `justify-content` per farlo. +Il testo `% Daily Value *` dovrebbe essere allineato a destra. Crea un selettore `.right` e usa la proprietà `justify-content` per farlo. # --hints-- diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496d80bc174a158c973080.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496d80bc174a158c973080.md index 40d5b6d8671..3079e36f15d 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496d80bc174a158c973080.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496d80bc174a158c973080.md @@ -7,59 +7,59 @@ dashedName: step-24 # --description-- -Using ternary syntax, check if `length` is even using your `isEven` function. If it is, return the average of the number at the `middle` index and the number after that. If it's odd, return the number at the `middle` index – you'll need to round the `middle` value up. +Usando la sintassi ternaria, controlla se `length` è pari usando la funzione `isEven`. Se lo è, restituisci la media del numero all'indice `middle` e il numero successivo. Se è dispari, restituisci il numero all'indice `middle` – dovrai arrotondare per eccesso il valore `middle`. # --hints-- -You should use the `return` keyword. +Dovresti usare la parola chiave `return`. ```js assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return/); ``` -You should call your `isEven()` function after your `return` keyword. +Dovresti chiamare la funzione `isEven()` dopo la parola chiave `return`. ```js assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(/); ``` -You should pass your `length` variable to your `isEven()` call. +Dovresti passare la variabile `length` alla chiamata `isEven()`. ```js assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)/); ``` -You should use ternary syntax to check the truthiness of your `isEven()` call. +Dovresti usare la sintassi ternaria per controllare la veridicità della chiamata `isEven()`. ```js assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?/); ``` -If the ternary is truthy, you should call your `average()` function. +Se il ternario è truthy, dovresti chiamare la funzione `average()`. ```js assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?\s*average\(/); ``` -You should pass an array to your `average()` function. +Dovresti passare un array alla funzione `average()`. ```js assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?\s*average\(\s*\[/); ``` -The first element of the array passed to `average()` should be the element at the `middle` index of your `sorted` array. +Il primo elemento dell'array passato a `average()` dovrebbe essere l'elemento all'indice `middle` dell'array `sorted`. ```js assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?\s*average\(\s*\[\s*sorted\[\s*middle\s*\]/); ``` -The first element of the array passed to `average()` should be the element at the `middle + 1` index of your `sorted` array. +Il primo elemento dell'array passato a `average()` dovrebbe essere l'elemento all'indice `middle + 1` dell'array `sorted`. ```js assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?\s*average\(\s*\[\s*sorted\[\s*middle\s*\]\s*,\s*sorted\[\s*middle\s*\+\s*1\s*\]\s*\]\)/); ``` -If the ternary is false, you should return the value of `sorted` at the `middle` index. Use `Math.ceil()` to round the `middle` value up. +Se il ternario è falsy, dovresti restituire il valore di `sorted` all'indice `middle`. Usa `Math.ceil()` per arrotondare per eccesso il valore `middle`. ```js assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?\s*average\(\s*\[\s*sorted\[\s*middle\s*\]\s*,\s*sorted\[\s*middle\s*\+\s*1\s*\]\s*\]\s*\)\s*:\s*sorted\[\s*Math\.ceil\(\s*middle\s*\)\s*\];?/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md index 9422e15afaf..e370b6536b6 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md @@ -7,65 +7,65 @@ dashedName: step-25 # --description-- -To keep track of all of your spreadsheet's functions, delcare a `spreadsheetFunctions` object. Using destructuring syntax, set `sum`, `average`, and `median` as properties and values on the `spreadsheetFunctions` object. +Per tenere traccia di tutte le funzioni del foglio di calcolo, dichiara un oggetto `spreadsheetFunctions`. Usando la sintassi di destrutturazione, imposta `sum`, `average` e `median` come proprietà e valori sull'oggetto `spreadsheetFunctions`. # --hints-- -You should declare a `spreadsheetFunctions` variable. +Dovresti dichiarare una variabile `spreadsheetFunctions`. ```js assert.match(code, /(?:const|let|var)\s+spreadsheetFunctions/); ``` -You should use `const` to declare your `spreadsheetFunctions` variable. +Dovresti usare `const` per dichiarare la variabile `spreadsheetFunctions`. ```js assert.match(code, /const\s+spreadsheetFunctions/); ``` -Your `spreadsheetFunctions` variable should be an object. +La variabile `spreadsheetFunctions` dovrebbe essere un oggetto. ```js assert.isObject(spreadsheetFunctions); ``` -Your `spreadsheetFunctions` object should have a `sum` property. +L'oggetto `spreadsheetFunctions` dovrebbe avere una proprietà `sum`. ```js assert.property(spreadsheetFunctions, "sum"); ``` -Your `sum` property should be your `sum` function. +La proprietà `sum` dovrebbe essere la tua funzione `sum`. ```js assert.equal(spreadsheetFunctions?.sum, sum); ``` -Your `spreadsheetFunctions` object should have an `average` property. +L'oggetto `spreadsheetFunctions` dovrebbe avere una proprietà `average`. ```js assert.property(spreadsheetFunctions, "average"); ``` -Your `average` property should be your `average` function. +La proprietà `average` dovrebbe essere la tua funzione `average`. ```js assert.equal(spreadsheetFunctions?.average, average); ``` -Your `spreadsheetFunctions` object should have a `median` property. +L'oggetto `spreadsheetFunctions` dovrebbe avere una proprietà `median`. ```js assert.property(spreadsheetFunctions, "median"); ``` -Your `median` property should be your `median` function. +La proprietà `median` dovrebbe essere la tua funzione `median`. ```js assert.equal(spreadsheetFunctions?.median, median); ``` -You should use destructuring syntax to assign your properties. +Dovresti usare la sintassi di destrutturazione per assegnare le tue proprietà. ```js const objectText = code.replace(/.*const\s*spreadsheetFunctions\s*=\s*\{([^}]*)}.*/s, "$1"); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496e9c6d7a2e189948e441.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496e9c6d7a2e189948e441.md index 45011711b45..4743bf69400 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496e9c6d7a2e189948e441.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496e9c6d7a2e189948e441.md @@ -7,35 +7,35 @@ dashedName: step-26 # --description-- -Now you can start using your spreadsheet functions. Begin by declaring an `update` arrow function. It should take an `event` parameter. +Ora puoi iniziare a usare le funzioni del tuo foglio di calcolo. Inizia dichiarando una funzione freccia `update`. Dovrebbe prendere un parametro `event`. # --hints-- -You should declare an `update` variable. +Dovresti dichiarare una variabile `update`. ```js assert.match(code, /(?:let|const|var)\s+update/); ``` -You should use `const` to declare your `update` variable. +Dovresti usare `const` per dichiarare la variabile `update`. ```js assert.match(code, /const\s+update/); ``` -Your `update` variable should be a function. +La variabile `update` dovrebbe essere una funzione. ```js assert.isFunction(update); ``` -Your `update` function should take an `event` parameter. +La funzione `update` dovrebbe prendere un parametro `event`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>/); ``` -Your `update` function should be empty. +La funzione `update` dovrebbe essere vuota. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*\}/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449749d20436c1f1dfadcf2.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449749d20436c1f1dfadcf2.md index 441a5da6cbb..365f712e0f6 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449749d20436c1f1dfadcf2.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449749d20436c1f1dfadcf2.md @@ -7,31 +7,31 @@ dashedName: step-27 # --description-- -In your `window.onload` function, you need to tell your `input` elements to call the `update` function when the value changes. You can do this by directly setting the `onchange` property. +Nella funzione `window.onload`, devi dire agli elementi `input` di chiamare la funzione `update` quando cambia il valore. Puoi farlo impostando direttamente la proprietà `onchange`. -Set the `onchange` property to be a reference to your `update` function. +Imposta la proprietà `onchange` come riferimento per la funzione `update`. # --hints-- -Your `window.onload` function should access the `onchange` property of the `input` element. +La funzione `window.onload` dovrebbe accedere alla proprietà `onchange` dell'elemento `input`. ```js assert.match(window.onload.toString(), /input\.onchange/); ``` -Your `window.onload` function should set the `onchange` property to `update`. +La funzione `window.onload` dovrebbe impostare la proprietà `onchange` su `update`. ```js assert.match(window.onload.toString(), /input\.onchange\s*=\s*update/); ``` -Your `window.onload` function should not call your `update` function. +La funzione `window.onload` non dovrebbe chiamare la funzione `update`. ```js assert.notMatch(window.onload.toString(), /update\(\s*\)/); ``` -Your `input` elements should all have your `update` function as the `onchange` property. +Gli elementi `input` dovrebbero avere tutti la funzione `update` come proprietà `onchange`. ```js const inputs = document.querySelectorAll('input'); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449755666005520330cec5b.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449755666005520330cec5b.md index 179b4592f0a..e484660ec29 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449755666005520330cec5b.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449755666005520330cec5b.md @@ -7,25 +7,25 @@ dashedName: step-28 # --description-- -Since your `update` event is running as a `change` event listener, the `event` argument will be a change event. +Poiché l'evento `update` è in esecuzione come un event listener `change`, l'argomento `event` sarà un evento change. -The `target` property of the change event represents the element that changed. Assign the `target` property to a new variable called `element`. +La proprietà `target` dell'evento change rappresenta l'elemento che è cambiato. Assegna la proprietà `target` a una nuova variabile chiamata `element`. # --hints-- -You should declare an `element` variable in your `update` function. +Dovresti dichiarare una variabile `element` nella funzione `update`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*(?:var|let|const)\s+element/); ``` -You should use `const` to declare your `element` variable. +Dovresti usare `const` per dichiarare la variabile `element`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element/); ``` -You should assign the `target` property of the `event` argument to your `element` variable. +Dovresti assegnare la proprietà `target` dell'argomento `event` alla variabile `element`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64497da4062602213ecf32e7.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64497da4062602213ecf32e7.md index aa40b2b445a..35c2e9edac4 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64497da4062602213ecf32e7.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64497da4062602213ecf32e7.md @@ -7,49 +7,49 @@ dashedName: step-29 # --description-- -Because the `change` event is triggering on an `input` element, the element will have a `value` property that represents the current value of the input. +Dato che l'evento `change` si attiva su un elemento `input`, l'elemento avrà una proprietà `value` che rappresenta il valore corrente dell'input. -Assign the `value` property of `element` to a new variable called `value`, and use `.replace()` to remove all whitespace. +Assegna la proprietà `value` di `element` a una nuova variabile chiamata `value` e utilizza `.replace()` per rimuovere tutti gli spazi. # --hints-- -You should declare a `value` variable after your `element` variable. +Dovresti dichiarare una variabile `value` dopo la variabile `element`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*(?:const|let|var)\s+value/); ``` -You should use `const` to declare your `value` variable. +Dovresti usare `const` per dichiarare la variabile `value`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value/); ``` -You should assign the `value` property of `element` to your `value` variable. +Dovresti assegnare la proprietà `value` di `element` alla variabile `value`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value/); ``` -You should call the `.replace()` method on the `value` property of the `element`. +Dovresti chiamare il metodo `.replace()` sulla proprietà `value` di `element`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(/); ``` -You should pass a regular expression to match whitespace to your `.replace()` method. Use the `\s` character class. +Dovresti passare al metodo `.replace()` un'espressione regolare che trovi gli spazi. Usa la classe di caratteri `\s`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\//); ``` -You should make your regular expression global. +Dovresti rendere globale l'espressione regolare. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\/g/); ``` -You should pass an empty string as your second argument to the `.replace()` method. +Dovresti passare una stringa vuota come secondo argomento al metodo `.replace()`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\/g\s*,\s*('|"|`)\1/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64497de936a2f322327e5c58.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64497de936a2f322327e5c58.md index d8123352375..6de5ce333b9 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64497de936a2f322327e5c58.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64497de936a2f322327e5c58.md @@ -7,23 +7,23 @@ dashedName: step-30 # --description-- -Now you need to check if the `value` does not include the `id` of the element. Create an `if` condition to do so. +Ora devi controllare se `value` non include l'`id` dell'elemento. Crea una condizione `if` a questo scopo. # --hints-- -You should create an `if` block. +Dovresti creare un blocco `if`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\/g\s*,\s*('|"|`)\1\s*\);?\s*if\s*\(/); ``` -Your `if` condition should check if `value` includes the `id` of the `element`. +La condizione `if` dovrebbe verificare se `value` include l'`id` di `element`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\/g\s*,\s*('|"|`)\1\s*\);?\s*if\s*\(\s*!value\.includes\(\s*element\.id\s*\)/); ``` -Your `if` block should be empty. +Il blocco `if` dovrebbe essere vuoto. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\/g\s*,\s*('|"|`)\1\s*\);?\s*if\s*\(\s*!value\.includes\(\s*element\.id\s*\)\s*\)\s*\{\s*\}/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64497e0e5e5a2c2329785af4.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64497e0e5e5a2c2329785af4.md index 94274ab2be7..7749d1edb36 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64497e0e5e5a2c2329785af4.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64497e0e5e5a2c2329785af4.md @@ -7,13 +7,13 @@ dashedName: step-31 # --description-- -Spreadsheet software typically uses `=` at the beginning of a cell to indicate a calculation should be used, and spreadsheet functions should be evaluated. +Il software di un foglio di calcolo utilizza tipicamente `=` all'inizio di una cella per indicare che si dovrebbe eseguire un calcolo o valutare funzioni del foglio di calcolo. -Update your `if` condition to also check if the first character of `value` is `=`. +Aggiorna la condizione `if` per controllare anche se il primo carattere di `value` è `=`. # --hints-- -Your `if` condition should also check if the first character of `value` is `=`. You may use `[0]`, `.startsWith()`, or `.charAt(0)`. +La condizione `if` dovrebbe anche controllare se il primo carattere di `value` è `=`. Puoi usare `[0]`, `.startsWith()` o `.charAt(0)`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\/g\s*,\s*('|"|`)\1\s*\);?\s*if\s*\(\s*(!value\.includes\(\s*element\.id\s*\)\s*&&\s*(?:value\[0\]\s*===\s*('|"|`)=\3|value\.charAt\(0\)\s*===\s*('|"|`)=\4|value\.startsWith\(('|"|`)=\5\))|(?:value\[0\]\s*===\s*('|"|`)=\6|value\.charAt\(0\)\s*===\s*('|"|`)=\7|value\.startsWith\(('|"|`)=\8\))\s*\|\|\s*!value\.includes\(\s*element\.id\s*\))\s*\)\s*\{\s*\}/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64497e764135bd24b7960dd3.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64497e764135bd24b7960dd3.md index 010d9566ada..958c9101efa 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64497e764135bd24b7960dd3.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64497e764135bd24b7960dd3.md @@ -7,49 +7,49 @@ dashedName: step-32 # --description-- -In order to run your spreadsheet functions, you need to be able to parse and evaluate the input string. This is a great time to use another function. +Per eseguire le funzioni del foglio di calcolo, è necessario essere in grado di elaborare e valutare la stringa di input. Questo è un ottimo momento per usare un'altra funzione. -Declare an `evalFormula` arrow function which takes the parameters `x` and `cells`. +Dichiara una funzione freccia `evalFormula` che prende i parametri `x` e `cells`. # --hints-- -You should declare an `evalFormula` variable. +Dovresti dichiarare una variabile `evalFormula`. ```js assert.match(code, /(?:let|const|var)\s*evalFormula/); ``` -You should use `const` to declare your `evalFormula` variable. +Dovresti usare `const` per dichiarare la variabile `evalFormula`. ```js assert.match(code, /const\s*evalFormula/); ``` -Your `evalFormula` variable should be a function. +La variabile `evalFormula` dovrebbe essere una funzione. ```js assert.isFunction(evalFormula); ``` -Your `evalFormula` function should use arrow syntax. +La funzione `evalFormula` dovrebbe utilizzare la sintassi freccia. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(/); ``` -Your `evalFormula` function should have `x` as the first parameter. +La funzione `evalFormula` dovrebbe avere `x` come primo parametro. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x/); ``` -Your `evalFormula` function should have `cells` as the second parameter. +La funzione `evalFormula` dovrebbe avere `cells` come secondo parametro. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>/); ``` -Your `evalFormula` function should be empty. +La funzione `evalFormula` dovrebbe essere vuota. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*}/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449842c6f6c84261075e4c9.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449842c6f6c84261075e4c9.md index 935aa053795..90bda251da2 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449842c6f6c84261075e4c9.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449842c6f6c84261075e4c9.md @@ -7,61 +7,61 @@ dashedName: step-33 # --description-- -In your `evalFormula`, declare an `idToText` arrow function which takes an `id` parameter. +In `evalFormula`, dichiara una funzione freccia `idToText` che prende un parametro `id`. -Your `idToText` function should return the result of calling `.find()` on the `cells` array with a callback function that takes an `cell` parameter and returns `cell.id === id`. +La funzione `idToText` dovrebbe restituire il risultato della chiamata `.find()` sull'array `cells` con una funzione callback che prende un parametro `cell` e restituisce `cell.id === id`. # --hints-- -You should declare an `idToText` variable in your `evalFormula` function. +Dovresti dichiarare una variabile `idToText` nella funzione `evalFormula`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*(?:const|let|var)\s+idToText/); ``` -You should use `const` to declare your `idToText` variable. +Dovresti usare `const` per dichiarare la variabile `idToText`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText/); ``` -Your `idToText` variable should be an arrow function. +La variabile `idToText` dovrebbe essere una funzione freccia. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?.*\)?\s*=>/); ``` -Your `idToText` function should have an `id` parameter. +La funzione `idToText` dovrebbe avere un parametro `id`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>/); ``` -You should assign `idToText` the result of calling the `.find()` method on your `cells` array. +Dovresti assegnare a `idToText` il risultato della chiamata del metodo `.find()` sull'array `cells`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(/); ``` -You should pass a callback function to your `.find()` method. Use arrow syntax. +Dovresti passare una funzione callback al metodo `.find()`. Usa la sintassi freccia. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?.*\)?\s*=>/); ``` -Your callback function should have a `cell` parameter. +La funzione callback dovrebbe avere un parametro `cell`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>/); ``` -Your callback function should use an implicit return. +La funzione callback dovrebbe utilizzare un return implicito. ```js assert.notMatch(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*\{/); ``` -Your callback function should return whether `cell.id` is strictly equal to `id`. +La funzione callback dovrebbe restituire se `cell.id` è strettamente uguale a `id`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64498473a17adc26ef0ecc2d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64498473a17adc26ef0ecc2d.md index dd56044e660..1c440fc3248 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64498473a17adc26ef0ecc2d.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64498473a17adc26ef0ecc2d.md @@ -7,11 +7,11 @@ dashedName: step-34 # --description-- -Your `idToText` function currently returns an `input` element. Update it to return the `value` of that `input` element. +La funzione `idToText` attualmente restituisce un elemento `input`. Aggiornala per restituire il `value` di quell'elemento `input`. # --hints-- -You should return the `value` property of the return value of the `.find()` method. +Dovresti restituire la proprietà `value` del valore di ritorno del metodo `.find()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449849b78f43527be1e8a98.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449849b78f43527be1e8a98.md index e27060dab09..cfbc8a555ca 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449849b78f43527be1e8a98.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449849b78f43527be1e8a98.md @@ -7,43 +7,43 @@ dashedName: step-35 # --description-- -You need to be able to match cell ranges in a formula. Cell ranges can look like `A1:B12` or `A3:A25`. You can use a regular expression to match these patterns. +Devi essere in grado di utilizzare gli intervalli di celle nelle formule. Gli intervalli di celle assomigliano a `A1:B12` o `A3:A25`. Puoi usare un'espressione regolare per trovare questi pattern. -Start by declaring a `rangeRegex` variable and assign it a regular expression that matches `A` through `J` (the range of columns in your spreadsheet). Use a capture group with a character class to achieve this. +Inizia dichiarando una variabile `rangeRegex` e assegnale un'espressione regolare che corrisponde all'intervallo da `A` a `J` (l'intervallo di colonne nel foglio di calcolo). A questo scopo usa un gruppo di acquisizione con una classe di caratteri. # --hints-- -You should declare a `rangeRegex` variable after your `idToText` function. +Dovresti dichiarare una variabile `rangeRegex` dopo la funzione `idToText`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*(?:var|let|const)\s+rangeRegex/); ``` -You should use `const` to declare your `rangeRegex` variable. +Dovresti usare `const` per dichiarare la variabile `rangeRegex`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex/); ``` -Your `rangeRegex` variable should be a regular expression. +La variabile `rangeRegex` dovrebbe essere un'espressione regolare. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/.*\/;?/); ``` -Your `rangeRegex` should use a capture group. +`rangeRegex` dovrebbe utilizzare un gruppo di acquisizione. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(.*\)\/;?/); ``` -Your `rangeRegex` should use a character class in the capture group. +`rangeRegex` dovrebbe utilizzare una classe di caratteri nel gruppo di acquisizione. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[.*\]\)\/;?/); ``` -Your `rangeRegex` should use a character class to match `A` through `J`. +`rangeRegex` dovrebbe usare una classe di caratteri per trovare i caratteri da `A` a `J`. ```js diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64498542cab69128ab24e4de.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64498542cab69128ab24e4de.md index 399ef9c1f26..243d87368eb 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64498542cab69128ab24e4de.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64498542cab69128ab24e4de.md @@ -7,43 +7,43 @@ dashedName: step-36 # --description-- -After matching a cell letter successfully, your `rangeRegex` needs to match the cell number. Cell numbers in your sheet range from `1` to `99`. +Dopo aver trovato la lettera di cella, `rangeRegex` deve trovare il numero di cella. I numeri di cella nel foglio vanno da `1` a `99`. -Add a capture group after your letter capture group. Your new capture group should match one or two digits – the first digit should be `1` through `9`, and the second digit should be `0` through `9`. The second digit should be optional. +Aggiungi un gruppo di acquisizione dopo il gruppo di acquisizione per le lettere. Il nuovo gruppo di acquisizione dovrebbe trovare una o due cifre: la prima cifra dovrebbe essere compresa tra `1` e `9` e la seconda cifra dovrebbe essere compresa tra `0` e `9`. La seconda cifra dovrebbe essere opzionale. # --hints-- -You should add a second capture group to your `rangeRegex`. +Dovresti aggiungere un secondo gruppo di acquisizione a `rangeRegex`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(.*\)\/;?/); ``` -Your second capture group should have a character class. +Il secondo gruppo di acquisizione dovrebbe avere una classe di caratteri. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[.*\]\??\)\/;?/); ``` -Your second capture group should have two character classes. +Il secondo gruppo di acquisizione dovrebbe avere due classi di caratteri. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[.*\]\[.*\]\??\)\/;?/); ``` -Your first new character class should match the digits `1` through `9`. +La prima nuova classe di caratteri dovrebbe corrispondere alle cifre da `1` a `9`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[.*\]\??\)\/;?/); ``` -Your second new character class should match the digits `0` through `9`. +La seconda classe di caratteri dovrebbe corrispondere alle cifre da `0` a `9`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\??\)\/;?/); ``` -Your second new character class should be optional. +La seconda nuova classe di caratteri dovrebbe essere opzionale. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/;?/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449860d84c9e22cbd7b497c.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449860d84c9e22cbd7b497c.md index d5dfb0a845e..f77318f9a89 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449860d84c9e22cbd7b497c.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449860d84c9e22cbd7b497c.md @@ -7,11 +7,11 @@ dashedName: step-37 # --description-- -Ranges are separated by a colon. After your two capture groups, your `rangeRegex` should look for a colon. +Gli intervalli sono separati da due punti. Dopo i due gruppi di acquisizione, `rangeRegex` dovrebbe cercare i due punti. # --hints-- -You should add a colon after your second capture group. +Dovresti aggiungere due punti dopo il secondo gruppo di acquisizione. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\/;?/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449863f592af72d9be0959e.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449863f592af72d9be0959e.md index b9aeec38582..54eba326262 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449863f592af72d9be0959e.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449863f592af72d9be0959e.md @@ -7,37 +7,37 @@ dashedName: step-38 # --description-- -After your `rangeRegex` finds the `:`, it needs to look for the same letter and number pattern as it did before. +Dopo che `rangeRegex` trova `:`, deve cercare lo stesso pattern di lettera e numero come in precedenza. -Copy your two existing capture groups and paste them after the colon. +Copia i due gruppi di acquisizione esistenti e incollali dopo i due punti. # --hints-- -You should add a third capture group to your `rangeRegex`, after the colon. +Dovresti aggiungere un terzo gruppo di acquisizione a `rangeRegex`, dopo i due punti. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(.*\)/); ``` -Your third capture group should use a character class. +Il terzo gruppo di acquisizione dovrebbe usare una classe di caratteri. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[.*\]\)/); ``` -Your third capture group should match the characters `A` through `J`. +Il terzo gruppo di acquisizione dovrebbe corrispondere ai caratteri da `A` a `J`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)/); ``` -You should add a fourth capture group to your `rangeRegex`. +Dovresti aggiungere un quarto gruppo di acquisizione a `rangeRegex`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(.*\)/); ``` -Your fourth capture group should match one or two digits. +Il quarto gruppo di acquisizione dovrebbe corrispondere a una o due cifre. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449874d5191562eb3313b3f.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449874d5191562eb3313b3f.md index da43051e048..fe395a433a5 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449874d5191562eb3313b3f.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449874d5191562eb3313b3f.md @@ -7,23 +7,23 @@ dashedName: step-39 # --description-- -Finally, make your `rangeRegex` global and case-insensitive. +Infine, rendi `rangeRegex` globale e insensibile alle maiuscole. # --hints-- -Your `rangeRegex` should be case-insensitive. +`rangeRegex` dovrebbe essere insensibile alle maiuscole. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/g?i/); ``` -Your `rangeRegex` should be global. +`rangeRegex` dovrebbe essere globale. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/i?g/); ``` -Your `rangeRegex` should be both global and case-insensitive. +`rangeRegex` dovrebbe essere globale e insensibile alle maiuscole. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449876e7aae0d2f8257a497.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449876e7aae0d2f8257a497.md index 7f3a18fcb33..fe4e9840c35 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449876e7aae0d2f8257a497.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6449876e7aae0d2f8257a497.md @@ -7,61 +7,61 @@ dashedName: step-40 # --description-- -Declare a `rangeFromString` arrow function that takes two parameters, `num1` and `num2`. The function should implicitly return the result of calling `range` with `num1` and `num2` as arguments. +Dichiara una funzione freccia `rangeFromString` che prende due parametri, `num1` e `num2`. La funzione dovrebbe restituire implicitamente il risultato della chiamata di `range` con `num1` e `num2` come argomenti. -To be safe, parse `num1` and `num2` into integers as you pass them into `range`. +Per essere sicuro, converti `num1` e `num2` in interi mentre li passi a `range`. # --hints-- -You should declare a `rangeFromString` variable after your `rangeRegex`. +Dovresti dichiarare una variabile `rangeFromString` dopo `rangeRegex`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*(?:var|let|const)\s+rangeFromString/); ``` -You should use `const` to declare your `rangeFromString` variable. +Dovresti usare `const` per dichiarare la variabile `rangeFromString`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString/); ``` -Your `rangeFromString` variable should be an arrow function. +La variabile `rangeFromString` dovrebbe essere una funzione freccia. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(?.*\)?\s*=>/); ``` -Your `rangeFromString` function should have `num1` as the first parameter. +La funzione `rangeFromString` dovrebbe avere `num1` come primo parametro. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(?\s*num1/); ``` -Your `rangeFromString` function should have `num2` as the second parameter. +La funzione `rangeFromString` dovrebbe avere `num2` come secondo parametro. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>/); ``` -Your `rangeFromString` function should use an implicit return. +La funzione `rangeFromString` dovrebbe utilizzare un return implicito. ```js assert.notMatch(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*\{/); ``` -Your `rangeFromString` function should return the result of calling your `range` function. +La funzione `rangeFromString` dovrebbe restituire il risultato della chiamata della funzione `range`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(/); ``` -You should call `parseInt` with `num1` as an argument and pass the result to the `range` call. +Dovresti chiamare `parseInt` con `num1` come argomento e passare il risultato alla chiamata di `range`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)/); ``` -You should call `parseInt` with `num2` as the argument and pass the result to the `range` call. +Dovresti chiamare `parseInt` con `num2` come argomento e passare il risultato alla chiamata di `range`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64498b085028fc30a58bb6a7.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64498b085028fc30a58bb6a7.md index d58c3fa4ce9..8dc28e2dad8 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64498b085028fc30a58bb6a7.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64498b085028fc30a58bb6a7.md @@ -7,35 +7,35 @@ dashedName: step-41 # --description-- -Declare a function `elemValue` which takes a `num` parameter. The function should be empty. +Dichiara una funzione `elemValue` che richiede un parametro `num`. La funzione dovrebbe essere vuota. # --hints-- -You should declare an `elemValue` variable after your `rangeFromString()` function. +Dovresti dichiarare una variabile `elemValue` dopo la funzione `rangeFromString()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*(?:var|let|const)\s+elemValue/); ``` -You should use `const` to declare your `elemValue` variable. +Dovresti usare `const` per dichiarare la variabile `elemValue`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue/); ``` -Your `elemValue` variable should be an arrow function. +La variabile `elemValue` dovrebbe essere una funzione freccia. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?.*\)?\s*=>/); ``` -Your `elemValue` function should have `num` as the only parameter. +La funzione `elemValue` dovrebbe avere `num` come unico parametro. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>/); ``` -Your `elemValue` function should be empty. +La funzione `elemValue` dovrebbe essere vuota. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*\}/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0889c6ff4baa46ac1c50.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0889c6ff4baa46ac1c50.md index 7c0c3e6d0e9..fbe9a1e82ba 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0889c6ff4baa46ac1c50.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0889c6ff4baa46ac1c50.md @@ -7,43 +7,43 @@ dashedName: step-42 # --description-- -In your `elemValue` function, declare a function called `inner` which takes a `character` parameter. +Nella funzione `elemValue`, dichiara una funzione chiamata `inner` che prende un parametro `character`. -Then, return your `inner` function. +Quindi, restituisci la funzione `inner`. # --hints-- -You should declare an `inner` variable. +Dovresti dichiarare una variabile `inner`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*(?:var|let|const)\s+inner/); ``` -You should use `const` to declare your `inner` variable. +Dovresti usare `const` per dichiarare la variabile `inner`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner/); ``` -Your `inner` variable should be an arrow function. +La variabile `inner` dovrebbe essere una funzione freccia. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?.*\)?\s*=>/); ``` -Your `inner` function should have `character` as the only parameter. +La funzione `inner` dovrebbe avere `character` come unico parametro. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>/); ``` -Your `inner` function should be empty. +La funzione `inner` dovrebbe essere vuota. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*\}/); ``` -You should explicitly return your `inner` function. +Dovresti restituire esplicitamente la funzione `inner`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*\};?\s*return\s+inner/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d09a07241aaab1e777080.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d09a07241aaab1e777080.md index b3a6c7e7d7b..977325fab4d 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d09a07241aaab1e777080.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d09a07241aaab1e777080.md @@ -7,23 +7,23 @@ dashedName: step-43 # --description-- -In your `inner` function, return the result of calling `idToText` with `character + num` as the argument. +Nella funzione `inner`, restituisci il risultato della chiamata di `idToText` con `character + num` come argomento. # --hints-- -Your `inner` function should use an explicit return. +La funzione `inner` dovrebbe utilizzare un return esplicito. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return/); ``` -Your `inner` function should return the result of calling your `idToText` function. +La funzione `inner` dovrebbe restituire il risultato della chiamata della funzione `idToText`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return\s+idToText\(/); ``` -You should pass `character + num` as the argument to your `idToText` function. +Dovresti passare `character + num` come argomento alla funzione `idToText`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return\s+idToText\(\s*character\s*\+\s*num\s*\);?\s*};?\s*return\s+inner/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0a022da7bcabf3e3aca3.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0a022da7bcabf3e3aca3.md index f5ba0ed6d12..d596365b9d2 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0a022da7bcabf3e3aca3.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0a022da7bcabf3e3aca3.md @@ -7,46 +7,46 @@ dashedName: step-44 # --description-- -The concept of returning a function within a function is called currying. This approach allows you to create a variable that holds a function to be called later, but with a reference to the parameters of the outer function call. +Il concetto di restituire una funzione all'interno di una funzione è chiamato currying. Questo approccio consente di creare una variabile che contiene una funzione da chiamare in seguito, ma con riferimento ai parametri della chiamata della funzione esterna. -For example: +Ad esempio: ```js const innerOne = elemValue(1); const final = innerOne("A"); ``` -`innerOne` would be your `inner` function, with `num` set to `1`, and `final` would have the value of the cell with the `id` of `A1`. This is possible because functions have access to all variables declared at their creation. This is called closure. +`innerOne` sarebbe la tua funzione `inner`, con `num` impostato a `1`, e `final` avrebbe il valore della cella con l'`id` di `A1`. Questo è possibile perché le funzioni hanno accesso a tutte le variabili dichiarate alla loro creazione. Ciò è detto closure (chiusura). -You'll get some more practice with this. Declare a function called `addCharacters` which takes a `character1` parameter. +Farai un po' di pratica su questo aspetto. Dichiara una funzione chiamata `addCharacters` che richiede un parametro `character1`. # --hints-- -You should declare an `addCharacters` variable. +Dovresti dichiarare una variabile `addCharacters`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return\s+idToText\(\s*character\s*\+\s*num\s*\);?\s*};?\s*return\s+inner;?\s*\}\s*(?:var|let|const)\s+addCharacters/); ``` -You should use `const` to declare your `addCharacters` variable. +Dovresti usare `const` per dichiarare la variabile `addCharacters`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return\s+idToText\(\s*character\s*\+\s*num\s*\);?\s*};?\s*return\s+inner;?\s*\}\s*const\s+addCharacters/); ``` -Your `addCharacters` variable should be an arrow function. +La variabile `addCharacters` dovrebbe essere una funzione freccia. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return\s+idToText\(\s*character\s*\+\s*num\s*\);?\s*};?\s*return\s+inner;?\s*\}\s*const\s+addCharacters\s*=\s*\(?.*\)?\s*=>/); ``` -Your `addCharacters` function should not use an implicit return. +La funzione `addCharacters` non dovrebbe usare un return implicito. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return\s+idToText\(\s*character\s*\+\s*num\s*\);?\s*};?\s*return\s+inner;?\s*\}\s*const\s+addCharacters\s*=\s*\(?.*\)?\s*=>\s*\{/); ``` -Your `addCharacters` function should have a `character1` parameter. +La funzione `addCharacters` dovrebbe avere un parametro `character1`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return\s+idToText\(\s*character\s*\+\s*num\s*\);?\s*};?\s*return\s+inner;?\s*\}\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0d20108440acc95a6b32.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0d20108440acc95a6b32.md index cd6f530d636..e37479bbb8a 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0d20108440acc95a6b32.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0d20108440acc95a6b32.md @@ -7,29 +7,29 @@ dashedName: step-45 # --description-- -In your `elemValue` function, you explicitly declared a function called `inner` and returned it. However, because you are using arrow syntax, you can implicitly return a function. For example: +Nella funzione `elemValue` hai esplicitamente dichiarato una funzione chiamata `inner` e l'hai restituita. Tuttavia, poiché stai usando la sintassi freccia, puoi restituire una funzione implicitamente. Ad esempio: ```js const curry = soup => veggies => {}; ``` -`curry` is a function which takes a `soup` parameter and returns a function which takes a `veggies` parameter. Using this syntax, update your `addCharacters` function to return an empty function which takes a `character2` parameter. +`curry` è una funzione che prende un parametro `soup` e restituisce una funzione che prende un parametro `veggies`. Utilizzando questa sintassi, aggiorna la funzione `addCharacters` per restituire una funzione vuota che richiede un parametro `character2`. # --hints-- -Your `addCharacters` function should use an implicit return. +La funzione `addCharacters` dovrebbe usare un return implicito. ```js assert.notMatch(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return\s+idToText\(\s*character\s*\+\s*num\s*\);?\s*};?\s*return\s+inner;?\s*\}\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\{/); ``` -Your `elemValue` function should return an arrow function which has a `character2` parameter. +La funzione `elemValue` dovrebbe restituire una funzione freccia che ha un parametro `character2`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return\s+idToText\(\s*character\s*\+\s*num\s*\);?\s*};?\s*return\s+inner;?\s*\}\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>/); ``` -Your inner arrow function should be empty. +La funzione freccia interna dovrebbe essere vuota. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return\s+idToText\(\s*character\s*\+\s*num\s*\);?\s*};?\s*return\s+inner;?\s*\}\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\{\s*\}/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0db5175974ad8633b71c.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0db5175974ad8633b71c.md index 31875191914..841f5f4eb49 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0db5175974ad8633b71c.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0db5175974ad8633b71c.md @@ -7,17 +7,17 @@ dashedName: step-46 # --description-- -Your inner functions can also return a function. Using the same arrow syntax, update your `addCharacters` function to return a third function which takes a `num` parameter. +Anche le funzioni interne possono restituire una funzione. Usando la stessa sintassi freccia, aggiorna la funzione `addCharacters` per restituire una terza funzione che richiede un parametro `num`. # --hints-- -Your inner arrow function should return another arrow function with a `num` parameter. +La funzione freccia interna dovrebbe restituire un'altra funzione freccia con un parametro `num`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return\s+idToText\(\s*character\s*\+\s*num\s*\);?\s*};?\s*return\s+inner;?\s*\}\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>/); ``` -Your inner-most arrow function should be empty. +La funzione freccia più interna dovrebbe essere vuota. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return\s+idToText\(\s*character\s*\+\s*num\s*\);?\s*};?\s*return\s+inner;?\s*\}\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*\{\s*\}/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0e4636e14eae2bb3b992.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0e4636e14eae2bb3b992.md index 1d41054a373..a4e18d77c76 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0e4636e14eae2bb3b992.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d0e4636e14eae2bb3b992.md @@ -7,29 +7,29 @@ dashedName: step-47 # --description-- -Now update your innermost function in the `addCharacters` chain to implicitly return the result of calling `charRange()` with `character1` and `character2` as the arguments. +Ora aggiorna la funzione più interna nella catena `addCharacters` per restituire implicitamente il risultato della chiamata `charRange()` con `character1` e `character2` come argomenti. # --hints-- -Your innermost function should use an implicit return. +La funzione più interna dovrebbe usare un return implicito. ```js assert.notMatch(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return\s+idToText\(\s*character\s*\+\s*num\s*\);?\s*};?\s*return\s+inner;?\s*\}\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*\{/); ``` -Your innermost function should return the result of calling `charRange()`. +La funzione più interna dovrebbe restituire il risultato della chiamata `charRange()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return\s+idToText\(\s*character\s*\+\s*num\s*\);?\s*};?\s*return\s+inner;?\s*\}\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(/); ``` -You should pass `character1` as the first argument to your `charRange()` call. +Dovresti passare `character1` come primo argomento alla chiamata `charRange()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return\s+idToText\(\s*character\s*\+\s*num\s*\);?\s*};?\s*return\s+inner;?\s*\}\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1/); ``` -You should pass `character2` as the second argument to your `charRange()` call. +Dovresti passare `character2` come secondo argomento alla chiamata `charRange()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{\s*const\s+inner\s*=\s*\(?\s*character\s*\)?\s*=>\s*\{\s*return\s+idToText\(\s*character\s*\+\s*num\s*\);?\s*};?\s*return\s+inner;?\s*\}\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1980018efaaec2b1c28b.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1980018efaaec2b1c28b.md index b5f8c3a18a7..93ce2a215ef 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1980018efaaec2b1c28b.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1980018efaaec2b1c28b.md @@ -7,29 +7,29 @@ dashedName: step-48 # --description-- -Use the same syntax as your `addCharacters` function to update your `elemValue` function. It should no longer declare `inner`, but should return the function implicitly. +Usa la stessa sintassi della funzione `addCharacters` per aggiornare la funzione `elemValue`. Non dovrebbe più dichiarare `inner`, ma dovrebbe restituire implicitamente la funzione. # --hints-- -Your `elemValue` function should use an implicit return. +La funzione `elemValue` dovrebbe utilizzare un return implicito. ```js assert.notMatch(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\{/); ``` -Your `elemValue` function should implicitly return an arrow function with a `character` parameter. +La funzione `elemValue` dovrebbe restituire implicitamente una funzione freccia con un parametro `character`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>/); ``` -Your inner arrow function should use an implicit return. +La funzione freccia interna dovrebbe usare un return implicito. ```js assert.notMatch(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*\{/); ``` -Your inner arrow function should return the result of calling `idToText()` with `character + num` as the argument. +La funzione freccia interna dovrebbe restituire il risultato della chiamata `idToText()` con `character + num` come argomento. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d19fc4705e4af65c3e688.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d19fc4705e4af65c3e688.md index 9b47d29ec54..0126443adf5 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d19fc4705e4af65c3e688.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d19fc4705e4af65c3e688.md @@ -7,17 +7,17 @@ dashedName: step-49 # --description-- -Your `addCharacters` function ultimately returns a range of characters. You want it to return an array of cell ids. Chain the `.map()` method to your `charRange()` call. Do not pass a callback function yet. +La funzione `addCharacters` alla fine restituisce un intervallo di caratteri. Vuoi che restituisca un array di id delle celle. Concatena il metodo `.map()` alla chiamata `charRange()`. Non passare ancora una funzione callback. # --hints-- -You should chain `.map()` to your `charRange()` call. +Dovresti concatenare il metodo `.map()` alla chiamata `charRange()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(/); ``` -You should not pass anything to your `.map()` call. +Non dovresti passare nulla alla chiamata `.map()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1b96dd7ea4b0061458bc.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1b96dd7ea4b0061458bc.md index 0be2bf866f9..97a54274550 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1b96dd7ea4b0061458bc.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1b96dd7ea4b0061458bc.md @@ -7,7 +7,7 @@ dashedName: step-50 # --description-- -You can pass a function reference as a callback parameter. A function reference is a function name without the parentheses. For example: +Puoi passare il riferimento a una funzione come parametro di callback. Un riferimento di funzione è un nome di funzione senza parentesi. Ad esempio: ```js const myFunc = (val) => `value: ${val}`; @@ -15,19 +15,19 @@ const array = [1, 2, 3]; const newArray = array.map(myFunc); ``` -The `.map()` method here will call the `myFunc` function, passing the same arguments that a `.map()` callback takes. The first argument is the value of the array at the current iteration, so `newArray` would be `[value: 1, value: 2, value: 3]`. +Il metodo `.map()` qui chiamerà la funzione `myFunc`, passando gli stessi argomenti che prende una callback di `.map()`. Il primo argomento è il valore dell'array all'iterazione corrente, quindi `newArray` sarebbe `[value: 1, value: 2, value: 3]`. -Pass a reference to your `elemValue` function as the callback to your `.map()` method. +Passa un riferimento alla funzione `elemValue` come callback del metodo `.map()`. # --hints-- -You should not call your `elemValue` function. +Non dovresti chiamare la funzione `elemValue`. ```js assert.notMatch(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\)\s*\)/); ``` -You should pass a reference to `elemValue` as the callback to your `.map()` method. +Dovresti passare un riferimento a `elemValue` come callback del metodo `.map()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1cadf0d96ab0b7e12da4.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1cadf0d96ab0b7e12da4.md index b051ce72f9d..de124cae777 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1cadf0d96ab0b7e12da4.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1cadf0d96ab0b7e12da4.md @@ -7,19 +7,19 @@ dashedName: step-51 # --description-- -Because `elemValue` returns a function, your `addChars` function ultimately returns an array of function references. You want the `.map()` method to run the inner function of your `elemValue` function, which means you need to call `elemValue` instead of reference it. Pass `num` as the argument to your `elemValue` function. +Poiché `elemValue` restituisce una funzione, la funzione `addChars` alla fine restituisce un array di riferimenti di funzione. Vuoi che il metodo `.map()` esegua la funzione interna della funzione `elemValue`, il che significa che devi chiamare `elemValue` invece di farvi riferimento. Passa `num` come argomento alla funzione `elemValue`. # --hints-- -You should call `elemValue()` in your `.map()` method. +Dovresti chiamare `elemValue()` nel metodo `.map()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(/); ``` -You should pass `num` to your `elemValue()` call. +Dovresti passare `num` alla chiamata `elemValue()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1d67f9261fb15a795588.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1d67f9261fb15a795588.md index 545bcf46f72..74c196ab75b 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1d67f9261fb15a795588.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1d67f9261fb15a795588.md @@ -7,29 +7,29 @@ dashedName: step-52 # --description-- -Declare a `rangeExpanded` variable and assign it the result of calling the `.replace()` method of your `x` parameter. Pass the `rangeRegex` variable as the argument. +Dichiara una variabile `rangeExpanded` e assegnale il risultato della chiamata del metodo `.replace()` sul parametro `x`. Passa la variabile `rangeRegex` come argomento. # --hints-- -You should declare a `rangeExpanded` variable. +Dovresti dichiarare una variabile `rangeExpanded`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*(?:let|var|const)\s+rangeExpanded/); ``` -You should use `const` to declare your `rangeExpanded` variable. +Dovresti usare `const` per dichiarare la variabile `rangeExpanded`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded/); ``` -You should assign the result of calling `.replace()` on `x` to your `rangeExpanded` variable. +Dovresti assegnare il risultato della chiamata `.replace()` su `x` alla variabile `rangeExpanded`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(/); ``` -You should pass `rangeRegex` as the argument to `.replace()`. +Dovresti passare `rangeRegex` come argomento a `.replace()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1e531042dfb24da1f032.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1e531042dfb24da1f032.md index 7eaca45c1ad..9b6c383bab4 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1e531042dfb24da1f032.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d1e531042dfb24da1f032.md @@ -7,19 +7,19 @@ dashedName: step-53 # --description-- -The second argument to the `.replace()` method does not have to be a string. You can instead pass a callback function to run more complex logic on the matched string. +Il secondo argomento del metodo `.replace()` non deve essere una stringa. Invece puoi passare una funzione callback per eseguire una logica più complessa sulla stringa che dà riscontro. -The callback function takes a few parameters. The first is the matched string. Pass an empty callback function to your `.replace()` call, and give it a `match` parameter. +La funzione callback prende alcuni parametri. Il primo è la stringa che dà riscontro. Passa una funzione callback vuota alla chiamata `.replace()` e dalle un parametro `match`. # --hints-- -You should pass an arrow function as the second argument to your `.replace()` method. +Dovresti passare una funzione freccia come secondo argomento al metodo `.replace()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(.*\)\s*=>\s*\{\s*\}\)/); ``` -Your arrow function should take a `match` parameter. +La funzione freccia dovrebbe prendere un parametro `match`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*match\s*\)\s*=>\s*\{\s*\}\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3141790b3cb337dd611a.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3141790b3cb337dd611a.md index e729cc223ff..31aa6113b2f 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3141790b3cb337dd611a.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3141790b3cb337dd611a.md @@ -7,31 +7,31 @@ dashedName: step-54 # --description-- -The callback function then has a parameter for each capture group in the regular expression. In your case, `rangeRegex` has four capture groups: the first letter, the first numbers, the second letter, and the second numbers. +La funzione callback ha un parametro per ogni gruppo di acquisizione nell'espressione regolare. Nel tuo caso, `rangeRegex` ha quattro gruppi di acquisizione: la prima lettera, il primo numero, la seconda lettera e il secondo numero. -Give your callback function four more parameters to match those capture groups: `char1`, `num1`, `char2`, and `num2`. `char` will be short for `character`. +Dai alla funzione callback altri quattro parametri corrispondenti a quei gruppi di acquisizione: `char1`, `num1`, `char2` e `num2`. `char` è l'abbreviazione di `character`. # --hints-- -You should pass `char1` as the second argument to your callback. +Dovresti passare `char1` come secondo argomento alla callback. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*match\s*,\s*char1/); ``` -You should pass `num1` as the third argument to your callback. +Dovresti passare `num1` come terzo argomento alla callback. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*match\s*,\s*char1\s*,\s*num1/); ``` -You should pass `char2` as the fourth argument to your callback. +Dovresti passare `char2` come quarto argomento alla callback. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*match\s*,\s*char1\s*,\s*num1\s*,\s*char2/); ``` -You should pass `num2` as the fifth argument to your callback. +Dovresti passare `num2` come quinto argomento alla callback. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d382c4d70ceb3dba1e830.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d382c4d70ceb3dba1e830.md index 76c1950e846..e927293a85e 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d382c4d70ceb3dba1e830.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d382c4d70ceb3dba1e830.md @@ -7,29 +7,29 @@ dashedName: step-55 # --description-- -Have your callback implicitly return the result of calling `rangeFromString()` with `num1` and `num2` as the arguments. +Fai in modo che la callback restituisca implicitamente il risultato della chiamata `rangeFromString()` con `num1` e `num2` come argomenti. # --hints-- -Your callback should use an implicit return. +La callback dovrebbe usare un return implicito. ```js assert.notMatch(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*\{/); ``` -Your callback should return the result of calling `rangeFromString()`. +La callback dovrebbe restituire il risultato della chiamata `rangeFromString()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(/); ``` -You should pass `num1` as the first argument to your `rangeFromString()` call. +Dovresti passare `num1` come primo argomento alla chiamata `rangeFromString()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1/); ``` -You should pass `num2` as the second argument to your `rangeFromString()` call. +Dovresti passare `num2` come secondo argomento alla chiamata `rangeFromString()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d386a685620b49db4be76.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d386a685620b49db4be76.md index ac10f535130..b470c77cc77 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d386a685620b49db4be76.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d386a685620b49db4be76.md @@ -7,17 +7,17 @@ dashedName: step-56 # --description-- -Call the `.map()` method on your `rangeFromString()` call, passing a reference to `addCharacters` as the callback function. +Chiama il metodo `.map()` sulla chiamata `rangeFromString()`, passando un riferimento ad `addCharacters` come funzione callback. # --hints-- -You should call the `.map()` method on your `rangeFromString()` call. +Dovresti chiamare il metodo `.map()` sulla chiamata `rangeFromString()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(/); ``` -You should pass a reference to `addCharacters` as the callback to your `.map()` method. +Dovresti passare un riferimento ad `addCharacters` come callback del metodo `.map()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d38c326f3c8b54023de38.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d38c326f3c8b54023de38.md index 993479b22a3..753d54b2e6d 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d38c326f3c8b54023de38.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d38c326f3c8b54023de38.md @@ -7,17 +7,17 @@ dashedName: step-57 # --description-- -`addCharacters` returns a function, so you'll want to call it. Pass `char1` as the argument. +`addCharacters` restituisce una funzione che dovrai chiamare. Passa `char1` come argomento. # --hints-- -You should call your `addCharacters()` function in your `.map()` method. +Dovresti chiamare la funzione `addCharacters()` nel metodo `.map()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*/); ``` -You should pass `char1` as the argument to your `addCharacters()` call. +Dovresti passare `char1` come argomento alla chiamata `addCharacters()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d38f906b94cb5fe6ce7de.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d38f906b94cb5fe6ce7de.md index 40d2718012d..ada0e516e5e 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d38f906b94cb5fe6ce7de.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d38f906b94cb5fe6ce7de.md @@ -7,23 +7,23 @@ dashedName: step-58 # --description-- -Your `addCharacters(char1)` is also returning a function, which returns another function. You need to make another function call to access that innermost function reference for the `.map()` callback. JavaScript allows you to chain function calls: +Anche `addCharacters(char1)` sta restituendo una funzione, che restituisce un'altra funzione. Devi effettuare un'altra chiamata di funzione per accedere al riferimento della funzione più interna per la callback di `.map()`. JavaScript ti permette di concatenare le chiamate di funzione: ```js myFunc(1)("hi"); ``` -Chain a function call to your `addCharacters(char1)` call, and pass `char2` as the argument. +Concatena una chiamata funzione alla chiamata `addCharacters(char1)` e passa `char2` come argomento. # --hints-- -You should chain a function call to your `addCharacters(char1)` call. +Dovresti concatenare una chiamata funzione alla chiamata `addCharacters(char1)`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(/); ``` -You should pass `char2` as the argument to your chained function call. +Dovresti passare `char2` come argomento alla chiamata di funzione concatenata. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3952f6af37b6a1c241c2.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3952f6af37b6a1c241c2.md index d2893b1aaaf..5f69a558882 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3952f6af37b6a1c241c2.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3952f6af37b6a1c241c2.md @@ -7,15 +7,15 @@ dashedName: step-59 # --description-- -Now that your `.map()` function is receiving the innermost function reference from `addCharacters`, it will properly iterate over the elements and pass each element as `n` to that function. +Ora che la funzione `.map()` sta ricevendo il riferimento della funzione più interna da `addCharacters`, itererà correttamente sugli elementi e passerà ogni elemento come `n` a quella funzione. -You'll notice that you are not using your `match` parameter. In JavaScript, it is common convention to prefix an unused parameter with an underscore `_`. You could also leave the parameter empty like so: `(, char1)` but it is often clearer to name the parameter for future readability. +Puoi notare che non stai usando il parametro `match`. In JavaScript, è convenzione comune prefissare un parametro inutilizzato con un trattino basso `_`. Puoi anche lasciare vuoto il parametro così: `(, char1)` ma è spesso più chiaro esplicitare il parametro per una questione di leggibilità. -Prefix your `match` parameter with an underscore. +Prefissa il parametro `match` con un trattino basso. # --hints-- -You should prefix your `match` parameter with an underscore. +Dovresti prefissare il parametro `match` con un trattino basso. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d39c156fe94b7482c3ab6.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d39c156fe94b7482c3ab6.md index 62616ff4ed8..d0567fd58a6 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d39c156fe94b7482c3ab6.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d39c156fe94b7482c3ab6.md @@ -7,53 +7,53 @@ dashedName: step-60 # --description-- -Declare a variable `cellRegex` to match cell references. It should match a letter from `A` to `J`, followed by a digit from `1` to `9`, and an optional digit from `0` to `9`. Make the regular expression case-insensitive and global. +Dichiara una variabile `cellRegex` corrispondente ai riferimenti delle celle. Dovrebbe corrispondere a una lettera da `A` a `J`, seguita da una cifra da `1` a `9` e una cifra opzionale da `0` a `9`. Rendi l'espressione regolare insensibile alle maiuscole e globale. # --hints-- -You should declare a `cellRegex` variable. +Dovresti dichiarare una variabile `cellRegex`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*(?:var|let|const)\s+cellRegex/); ``` -You should use `const` to declare your `cellRegex` variable. +Dovresti usare `const` per dichiarare la variabile `cellRegex`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex/); ``` -You should assign a regular expression to your `cellRegex` variables. +Dovresti assegnare un'espressione regolare alla variabile `cellRegex`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\//); ``` -Your regular expression should use a character class to match the characters from `A` to `J`. +L'espressione regolare dovrebbe usare una classe di caratteri per trovare i caratteri da `A` a `J`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]/); ``` -Your regular expression should use a character class to match the digits from `1` to `9`. +L'espressione regolare dovrebbe usare una classe di caratteri per trovare le cifre da `1` a `9`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]/); ``` -Your regular expression should use a character class to match the digits from `0` to `9`. +L'espressione regolare dovrebbe usare una classe di caratteri per trovare le cifre da `0` a `9`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]/); ``` -Your third character class should be optional. +La terza classe di caratteri dovrebbe essere opzionale. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?/); ``` -Your regular expression should be case-insensitive and global. +L'espressione regolare dovrebbe essere insensibile alle maiuscole e globale. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3b27cd3c56b875256301.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3b27cd3c56b875256301.md index b2e33396e30..bf2d4429613 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3b27cd3c56b875256301.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3b27cd3c56b875256301.md @@ -7,47 +7,47 @@ dashedName: step-61 # --description-- -Declare a `cellExpanded` variable and assign it the value of calling `.replace()` on your `rangeExpanded` variable. Pass it your `cellRegex` and an empty callback function. The callback function should take a `match` parameter. +Dichiara una variabile `cellExpanded` e assegnale il valore della chiamata `.replace()` sulla variabile `rangeExpanded`. Passale `cellRegex` e una funzione callback vuota. La funzione callback dovrebbe avere un parametro `match`. # --hints-- -You should declare a `cellExpanded` variable. +Dovresti dichiarare una variabile `cellExpanded`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*(var|let|const)\s+cellExpanded/); ``` -You should use `const` to declare your `cellExpanded` variable. +Dovresti usare `const` per dichiarare la variabile `cellExpanded`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded/); ``` -You should assign `cellExpanded` the result of calling the `.replace()` method of `rangeExpanded`. +Dovresti assegnare a `cellExpanded` il risultato della chiamata del metodo `.replace()` su `rangeExpanded`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(/); ``` -You should pass `cellRegex` as the first argument to your `.replace()` call. +Dovresti passare `cellRegex` come primo argomento alla chiamata `.replace()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex/); ``` -You should pass a callback function using arrow syntax as the second argument to your `.replace()` call. +Dovresti passare una funzione callback usando la sintassi freccia come secondo argomento alla chiamata `.replace()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*(?:match)?\s*\)?\s*=>/); ``` -Your callback function should have a `match` parameter. +La funzione callback dovrebbe avere un parametro `match`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>/); ``` -Your callback function should be empty. +La funzione callback dovrebbe essere vuota. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>\s*\{\s*\}/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3bc75fe0c9b972da3323.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3bc75fe0c9b972da3323.md index ad4c210898c..2f09fa67a25 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3bc75fe0c9b972da3323.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3bc75fe0c9b972da3323.md @@ -7,29 +7,29 @@ dashedName: step-62 # --description-- -Update your callback function to return the result of calling `idToText()` with `match` as the argument. Remember that your regular expression is case-insensitive, so you will need to call `toUpperCase()` on `match` before passing it to `idToText()`. +Aggiorna la funzione callback per restituire il risultato della chiamata `idToText()` con `match` come argomento. Ricorda che la tua espressione regolare è insensibile alle maiuscole, quindi dovrai chiamare `toUpperCase()` su `match` prima di passarlo ad `idToText()`. # --hints-- -Your callback function should use an implicit return. +La funzione callback dovrebbe utilizzare un return implicito. ```js assert.notMatch(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>\s*\{/); ``` -Your callback function should call `idToText()`. +La funzione callback dovrebbe chiamare `idToText()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>\s*idToText\(/); ``` -You should pass `match` to your `idToText()` call. +Dovresti passare `match` alla chiamata `idToText()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>\s*idToText\(\s*match\s*/); ``` -You should call the `.toUpperCase()` method of `match` as you pass it to `idToText()`. +Dovresti chiamare il metodo `.toUpperCase()` su `match` mentre lo passi a `idToText()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>\s*idToText\(\s*match\.toUpperCase\(\)\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3c146e10b0ba222bb2a7.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3c146e10b0ba222bb2a7.md index b3816a73b01..42c9f16eac8 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3c146e10b0ba222bb2a7.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3c146e10b0ba222bb2a7.md @@ -7,31 +7,31 @@ dashedName: step-63 # --description-- -In mathematics, an infix is a mathematical operator that appears between its two operands. For example, `1 + 2` is an infix expression. +In matematica, un infisso è un operatore matematico che compare tra i suoi due operandi. Ad esempio, `1 + 2` è un'espressione infissa. -To parse these expressions, you will need to map the symbols to relevant functions. Declare an `infixToFunction` variable, and assign it an empty object. +Per analizzare queste espressioni, è necessario mappare i simboli alle funzioni rilevanti. Dichiara una variabile `infixToFunction` e assegnale un oggetto vuoto. # --hints-- -You should declare an `infixToFunction` variable. +Dovresti dichiarare una variabile `infixToFunction`. ```js assert.match(code, /(?:const|let|var)\s+infixToFunction/); ``` -You should use `const` to declare your `infixToFunction` variable. +Dovresti usare `const` per dichiarare la variabile `infixToFunction`. ```js assert.match(code, /const\s+infixToFunction/); ``` -Your `infixToFunction` variable should be an object. +La variabile `infixToFunction` dovrebbe essere un oggetto. ```js assert.isObject(infixToFunction); ``` -Your `infixToFunction` object should be empty. +L'oggetto `infixToFunction` dovrebbe essere vuoto. ```js assert.lengthOf(Object.keys(infixToFunction), 0); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3d037872fbbae0a8ec0e.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3d037872fbbae0a8ec0e.md index 837aebe275a..d05441296d7 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3d037872fbbae0a8ec0e.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3d037872fbbae0a8ec0e.md @@ -7,51 +7,51 @@ dashedName: step-64 # --description-- -Object values do not have to be primitive types, like a string or a number. They can also be functions. +I valori degli oggetti non devono essere per forza tipi primitivi, come una stringa o un numero. Possono anche essere funzioni. -Give your `infixToFunction` object a `+` property. That property should be a function that takes an `x` and `y` parameter and implicitly returns the sum of those two parameters. +Dai all'oggetto `infixToFunction` una proprietà `+`. Tale proprietà dovrebbe essere una funzione che prende dei parametri `x` e `y` e restituisce implicitamente la loro somma. -Because `+` is not alphanumeric, you'll need to wrap it in quotes for your property. +Poiché `+` non è alfanumerico, dovrai inserirlo tra virgolette per la tua proprietà. # --hints-- -Your `infixToFunction` object should have a `+` property. +L'oggetto `infixToFunction` dovrebbe avere una proprietà `+`. ```js assert.property(infixToFunction, '+'); ``` -Your `+` property should be a function. +La proprietà `+` dovrebbe essere una funzione. ```js assert.isFunction(infixToFunction['+']); ``` -Your `+` function should use arrow syntax. +La funzione `+` dovrebbe utilizzare la sintassi freccia. ```js assert.match(code, /const\s+infixToFunction\s*=\s*\{\s*('|"|`)\+\1\s*:\s*\(/); ``` -Your `+` function should have `x` as its first parameter. +La funzione `+` dovrebbe avere `x` come primo parametro. ```js assert.match(code, /const\s+infixToFunction\s*=\s*\{\s*('|"|`)\+\1\s*:\s*\(\s*x/); ``` -Your `+` function should have `y` as its second parameter. +La funzione `+` dovrebbe avere `y` come secondo parametro. ```js assert.match(code, /const\s+infixToFunction\s*=\s*\{\s*('|"|`)\+\1\s*:\s*\(\s*x\s*,\s*y\s*\)/); ``` -Your `+` function should use an implicit return. +La funzione `+` dovrebbe utilizzare un return implicito. ```js assert.notMatch(code, /const\s+infixToFunction\s*=\s*\{\s*('|"|`)\+\1\s*:\s*\(\s*x\s*,\s*y\s*\)\s*\{/); ``` -Your `+` function should return the sum of `x` and `y`. +La funzione `+` dovrebbe restituire la somma di `x` e `y`. ```js assert.equal(infixToFunction['+'](1, 2), 3); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3d65be79c8bb9c7df9ff.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3d65be79c8bb9c7df9ff.md index a525cab6136..754a9a59284 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3d65be79c8bb9c7df9ff.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3d65be79c8bb9c7df9ff.md @@ -7,47 +7,47 @@ dashedName: step-65 # --description-- -Now create a `-` property that is a function that takes an `x` and `y` parameter and implicitly returns the result of subtracting `y` from `x`. +Ora crea una proprietà `-` che è una funzione che prende dei parametri `x` e `y` e restituisce implicitamente il risultato della sottrazione di `y` da `x`. # --hints-- -Your `infixToFunction` object should have a `-` property. +L'oggetto `infixToFunction` dovrebbe avere una proprietà `-`. ```js assert.property(infixToFunction, '-'); ``` -Your `-` property should be a function. +La proprietà `-` dovrebbe essere una funzione. ```js assert.isFunction(infixToFunction['-']); ``` -Your `-` function should use arrow syntax. +La funzione `-` dovrebbe utilizzare la sintassi freccia. ```js assert.match(code, /('|"|`)-\1\s*:\s*\(/); ``` -Your `-` function should have `x` as its first parameter. +La funzione `-` dovrebbe avere `x` come primo parametro. ```js assert.match(code, /('|"|`)-\1\s*:\s*\(\s*x/); ``` -Your `-` function should have `y` as its second parameter. +La funzione `-` dovrebbe avere `y` come secondo parametro. ```js assert.match(code, /('|"|`)-\1\s*:\s*\(\s*x\s*,\s*y\s*\)/); ``` -Your `-` function should use an implicit return. +La funzione `-` dovrebbe utilizzare un return implicito. ```js assert.notMatch(code, /('|"|`)-\1\s*:\s*\(\s*x\s*,\s*y\s*\)\s*\{/); ``` -Your `-` function should return the result of subtracting `y` from `x`. +La funzione `-` dovrebbe restituire il risultato della sottrazione di `y` da `x`. ```js assert.equal(infixToFunction['-'](1, 2), -1); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3d80c3b4aebc4103618e.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3d80c3b4aebc4103618e.md index 16e5f6e6860..7b2411fc6dc 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3d80c3b4aebc4103618e.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3d80c3b4aebc4103618e.md @@ -7,89 +7,89 @@ dashedName: step-66 # --description-- -Following the same pattern, add a property for multiplication `*` and division `/` with the appropriate functions. +Seguendo lo stesso modello, aggiungi una proprietà per la moltiplicazione `*` e la divisione `/` con le funzioni appropriate. # --hints-- -Your `infixToFunction` object should have a `*` property. +L'oggetto `infixToFunction` dovrebbe avere una proprietà `*`. ```js assert.property(infixToFunction, '*'); ``` -Your `*` property should be a function. +La proprietà `*` dovrebbe essere una funzione. ```js assert.isFunction(infixToFunction['*']); ``` -Your `*` function should use arrow syntax. +La funzione `*` dovrebbe utilizzare la sintassi freccia. ```js assert.match(code, /('|"|`)\*\1\s*:\s*\(/); ``` -Your `*` function should have `x` as its first parameter. +La funzione `*` dovrebbe avere `x` come primo parametro. ```js assert.match(code, /('|"|`)\*\1\s*:\s*\(\s*x/); ``` -Your `*` function should have `y` as its second parameter. +La funzione `*` dovrebbe avere `y` come secondo parametro. ```js assert.match(code, /('|"|`)\*\1\s*:\s*\(\s*x\s*,\s*y\s*\)/); ``` -Your `*` function should use an implicit return. +La funzione `*` dovrebbe utilizzare un return implicito. ```js assert.notMatch(code, /('|"|`)\*\1\s*:\s*\(\s*x\s*,\s*y\s*\)\s*\{/); ``` -Your `*` function should return the result of multiplying `x` by `y`. +La funzione `*` dovrebbe restituire il risultato della moltiplicazione di `x` per `y`. ```js assert.equal(infixToFunction['*'](2, 5), 10); ``` -Your `infixToFunction` object should have a `/` property. +L'oggetto `infixToFunction` dovrebbe avere una proprietà `/`. ```js assert.property(infixToFunction, '/'); ``` -Your `/` property should be a function. +La proprietà `/` dovrebbe essere una funzione. ```js assert.isFunction(infixToFunction['/']); ``` -Your `/` function should use arrow syntax. +La funzione `/` dovrebbe utilizzare la sintassi freccia. ```js assert.match(code, /('|"|`)\/\1\s*:\s*\(/); ``` -Your `/` function should have `x` as its first parameter. +La funzione `/` dovrebbe avere `x` come primo parametro. ```js assert.match(code, /('|"|`)\/\1\s*:\s*\(\s*x/); ``` -Your `/` function should have `y` as its second parameter. +La funzione `/` dovrebbe avere `y` come secondo parametro. ```js assert.match(code, /('|"|`)\/\1\s*:\s*\(\s*x\s*,\s*y\s*\)/); ``` -Your `/` function should use an implicit return. +La funzione `/` dovrebbe utilizzare un return implicito. ```js assert.notMatch(code, /('|"|`)\/\1\s*:\s*\(\s*x\s*,\s*y\s*\)\s*\{/); ``` -Your `/` function should return the result of dividing `x` by `y`. +La funzione `/` dovrebbe restituire il risultato della divisione di `x` per `y`. ```js assert.equal(infixToFunction['/'](10, 2), 5); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3da8501e15bcd355ba1d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3da8501e15bcd355ba1d.md index cc013f1dae7..b9c37ebd3e1 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3da8501e15bcd355ba1d.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3da8501e15bcd355ba1d.md @@ -7,65 +7,65 @@ dashedName: step-67 # --description-- -Now that you have your infix functions, you need a way to evaluate them. Declare an `infixEval` function which takes two parameters, `str` and `regex`. It should implicitly return the `.replace()` method of `str`, with `regex` and an empty callback as the arguments. +Ora che hai le funzioni infisse, hai bisogno di un modo per valutarle. Dichiara una funzione `infixEval` che richiede due parametri, `str` e `regex`. Dovrebbe implicitamente restituire il metodo `.replace()` di `str`, con `regex` e una callback vuota come argomenti. # --hints-- -You should declare an `infixEval` variable. +Dovresti dichiarare una variabile `infixEval`. ```js assert.match(code, /(?:var|let|const)\s+infixEval\s*=/); ``` -You should use `const` to declare your `infixEval` variable. +Dovresti usare `const` per dichiarare la variabile `infixEval`. ```js assert.match(code, /const\s+infixEval\s*=/); ``` -Your `infixEval` variable should be a function. +La variabile `infixEval` dovrebbe essere una funzione. ```js assert.isFunction(infixEval); ``` -Your `infixEval` function should use arrow syntax. +La funzione `infixEval` dovrebbe utilizzare la sintassi freccia. ```js assert.match(code, /const\s+infixEval\s*=\s*\(/); ``` -Your `infixEval` function should have `str` as its first parameter. +La funzione `infixEval` dovrebbe avere `str` come primo parametro. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str/); ``` -Your `infixEval` function should have `regex` as its second parameter. +La funzione `infixEval` dovrebbe avere `regex` come secondo parametro. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)/); ``` -Your `infixEval` function should use an implicit return. +La funzione `infixEval` dovrebbe utilizzare un return implicito. ```js assert.notMatch(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*\{/); ``` -Your `infixEval` function should return the result of calling the `.replace()` method on `str`. +La funzione `infixEval` dovrebbe restituire il risultato della chiamata del metodo `.replace()` su `str`. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(/); ``` -You should pass `regex` as the first argument to the `.replace()` method. +Dovresti passare `regex` come primo argomento al metodo `.replace()`. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(\s*regex/); ``` -You should pass an empty arrow function as the second argument to the `.replace()` method. +Dovresti passare una funzione freccia vuota come secondo argomento al metodo `.replace()`. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(\s*regex\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3e135ab3abbdbfe5c899.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3e135ab3abbdbfe5c899.md index a96beee9c4f..ff878151356 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3e135ab3abbdbfe5c899.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3e135ab3abbdbfe5c899.md @@ -7,43 +7,43 @@ dashedName: step-68 # --description-- -Your callback needs four parameters. `match`, `arg1`, `operator`, and `arg2`. +La funzione callback ha bisogno di quattro parametri. `match`, `arg1`, `operator` e `arg2`. -You will not be using the `match` parameter, so remember to prefix it. +Non utilizzerai il parametro `match`, quindi ricordati di prefissarlo. # --hints-- -Your callback function should have `match` as the first parameter. +La funzione callback dovrebbe avere `match` come primo parametro. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(\s*regex\s*,\s*\(\s*_?match/); ``` -Your `match` parameter should be prefixed with an underscore. +Il parametro `match` dovrebbe essere prefissato con un trattino basso. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(\s*regex\s*,\s*\(\s*_match/); ``` -Your callback function should have `arg1` as the second parameter. +La funzione callback dovrebbe avere `arg1` come secondo parametro. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(\s*regex\s*,\s*\(\s*_match\s*,\s*arg1/); ``` -Your callback function should have `operator` as the third parameter. +La funzione callback dovrebbe avere `operator` come terzo parametro. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(\s*regex\s*,\s*\(\s*_match\s*,\s*arg1\s*,\s*operator/); ``` -Your callback function should have `arg2` as the fourth parameter. +La funzione callback dovrebbe avere `arg2` come quarto parametro. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(\s*regex\s*,\s*\(\s*_match\s*,\s*arg1\s*,\s*operator\s*,\s*arg2\s*\)/); ``` -Your callback function should still be empty. +La funzione callback dovrebbe essere ancora vuota. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(\s*regex\s*,\s*\(\s*_match\s*,\s*arg1\s*,\s*operator\s*,\s*arg2\s*\)\s*=>\s*\{\s*\}\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3e64b15f92be6e61704e.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3e64b15f92be6e61704e.md index 935e885b98a..9fddfc79041 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3e64b15f92be6e61704e.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3e64b15f92be6e61704e.md @@ -7,25 +7,25 @@ dashedName: step-69 # --description-- -The `regex` you will be passing to your `infixEval` function will match two numbers with an operator between them. The first number will be assigned to `arg1` in the callback, the second to `arg2`, and the operator to `operator`. +La `regex` che passerai alla funzione `infixEval` troverà due numeri con un operatore tra di loro. Il primo numero sarà assegnato ad `arg1` nella callback, il secondo ad `arg2` e l'operatore a `operator`. -Have your callback function implicitly return the `operator` property of your `infixToFunction` object. Remember that `operator` is a variable which holds the property name, not the actual property name. +Fai in modo che la funzione callback restituisca implicitamente la proprietà `operator` dell'oggetto `infixToFunction`. Ricorda che `operator` è una variabile che contiene il nome della proprietà, ma non è il nome effettivo della proprietà. # --hints-- -Your callback should use an implicit return. +La callback dovrebbe usare un return implicito. ```js assert.notMatch(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(\s*regex\s*,\s*\(\s*_match\s*,\s*arg1\s*,\s*operator\s*,\s*arg2\s*\)\s*=>\s*\{/); ``` -Your callback function should access the `infixToFunction` object. +La funzione callback dovrebbe accedere all'oggetto `infixToFunction`. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(\s*regex\s*,\s*\(\s*_match\s*,\s*arg1\s*,\s*operator\s*,\s*arg2\s*\)\s*=>\s*infixToFunction/); ``` -Your callback function should use bracket notation to access the property of the `infixToFunction` object that matches the value of the `operator` argument. +La funzione callback dovrebbe utilizzare la notazione con parentesi per accedere alla proprietà dell'oggetto `infixToFunction` che corrisponde al valore dell'argomento `operator`. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(\s*regex\s*,\s*\(\s*_match\s*,\s*arg1\s*,\s*operator\s*,\s*arg2\s*\)\s*=>\s*infixToFunction\[\s*operator\s*\]\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3ee7b17ae3bf48610033.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3ee7b17ae3bf48610033.md index 70bf445b5cf..7a1abf11509 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3ee7b17ae3bf48610033.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3ee7b17ae3bf48610033.md @@ -7,23 +7,23 @@ dashedName: step-70 # --description-- -`infixToFunction[operator]` returns a function. Call that function directly, passing `arg1` and `arg2` as the arguments. +`infixToFunction[operator]` restituisce una funzione. Chiama questa funzione direttamente, passando `arg1` e `arg2` come argomenti. # --hints-- -Your callback function should return the result of calling `infixToFunction[operator]`. +La funzione callback dovrebbe restituire il risultato della chiamata di `infixToFunction[operator]`. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(\s*regex\s*,\s*\(\s*_match\s*,\s*arg1\s*,\s*operator\s*,\s*arg2\s*\)\s*=>\s*infixToFunction\[\s*operator\s*\]\(/); ``` -You should pass `arg1` as the first argument to your `infixToFunction[operator]` call. +Dovresti passare `arg1` come primo argomento alla chiamata di `infixToFunction[operator]`. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(\s*regex\s*,\s*\(\s*_match\s*,\s*arg1\s*,\s*operator\s*,\s*arg2\s*\)\s*=>\s*infixToFunction\[\s*operator\s*\]\(\s*arg1/); ``` -You should pass `arg2` as the second argument to your `infixToFunction[operator]` call. +Dovresti passare `arg2` come secondo argomento alla chiamata di `infixToFunction[operator]`. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(\s*regex\s*,\s*\(\s*_match\s*,\s*arg1\s*,\s*operator\s*,\s*arg2\s*\)\s*=>\s*infixToFunction\[\s*operator\s*\]\(\s*arg1\s*,\s*arg2\s*\)\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3f1fd12f76c02c823bb8.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3f1fd12f76c02c823bb8.md index 27f21057126..760c2459934 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3f1fd12f76c02c823bb8.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3f1fd12f76c02c823bb8.md @@ -7,19 +7,19 @@ dashedName: step-71 # --description-- -You have a slight bug. `arg1` and `arg2` are strings, not numbers. `infixToFunction['+']("1", "2")` would return `12`, which is not mathematically correct. +Hai un piccolo bug. `arg1` e `arg2` sono stringhe, non numeri. `infixToFunction['+']("1", "2")` restituisce `12`, che non è matematicamente corretto. -Wrap each of your `infixToFunction[operator]` arguments in a `parseFloat()` call. +Racchiudi ogni argomento di `infixToFunction[operator]` in una chiamata `parseFloat()`. # --hints-- -You should wrap `arg1` in a `parseFloat()` call. +Dovresti inserire `arg1` in una chiamata `parseFloat()`. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(\s*regex\s*,\s*\(\s*_match\s*,\s*arg1\s*,\s*operator\s*,\s*arg2\s*\)\s*=>\s*infixToFunction\[\s*operator\s*\]\(\s*parseFloat\(\s*arg1\s*\)\s*,/); ``` -You should wrap `arg2` in a `parseFloat()` call. +Dovresti inserire `arg2` in una chiamata `parseFloat()`. ```js assert.match(code, /const\s+infixEval\s*=\s*\(\s*str\s*,\s*regex\s*\)\s*=>\s*str\.replace\(\s*regex\s*,\s*\(\s*_match\s*,\s*arg1\s*,\s*operator\s*,\s*arg2\s*\)\s*=>\s*infixToFunction\[\s*operator\s*\]\(\s*parseFloat\(\s*arg1\s*\)\s*,\s*parseFloat\(\s*arg2\s*\)\s*\)\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3f718b5f8dc102cd528e.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3f718b5f8dc102cd528e.md index e8de07b79d4..1cc0258a61f 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3f718b5f8dc102cd528e.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d3f718b5f8dc102cd528e.md @@ -7,41 +7,41 @@ dashedName: step-72 # --description-- -Now that you can evaluate mathematical expressions, you need to account for order of operations. Declare a `highPrecedence` function that takes a `str` parameter. +Ora che puoi valutare le espressioni matematiche, devi considerare l'ordine delle operazioni. Dichiara una funzione `highPrecedence` che richiede un parametro `str`. # --hints-- -You should declare a `highPrecedence` variable. +Dovresti dichiarare una variabile `highPrecedence`. ```js assert.match(code, /(?:var|let|const)\s+highPrecedence/); ``` -You should use `const` to declare your `highPrecedence` variable. +Dovresti usare `const` per dichiarare la variabile `highPrecedence`. ```js assert.match(code, /const\s+highPrecedence/); ``` -Your `highPrecedence` variable should be a function. +La variabile `highPrecedence` dovrebbe essere una funzione. ```js assert.isFunction(highPrecedence); ``` -Your `highPrecedence` function should use arrow syntax. +La funzione `highPrecedence` dovrebbe utilizzare la sintassi freccia. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*(?:str)?\s*\)?\s*=>/); ``` -Your `highPrecedence` function should have a `str` parameter. +La funzione `highPrecedence` dovrebbe avere un parametro `str`. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>/); ``` -Your `highPrecedence` function should be empty. +La funzione `highPrecedence` dovrebbe essere vuota. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*}/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d404259f512c1a9e86ac1.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d404259f512c1a9e86ac1.md index 4e80c7f3964..4c686113d24 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d404259f512c1a9e86ac1.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d404259f512c1a9e86ac1.md @@ -7,73 +7,73 @@ dashedName: step-73 # --description-- -In your `highPrecedence` function, declare a `regex` variable. Assign it a regular expression that matches a number (including decimal numbers) followed by a `*` or `/` operator followed by another number. +Nella funzione `highPrecedence`, dichiara una variabile `regex`. Assegnale un'espressione regolare che corrisponde a un numero (compresi i numeri decimali) seguito da un operatore `*` o `/` seguito da un altro numero. -Each number, and the operator, should be in separate capture groups. +Ogni numero, e l'operatore, dovrebbero essere in gruppi di acquisizione separati. # --hints-- -You should declare a `regex` variable in your `highPrecedence` function. +Dovresti dichiarare una variabile `regex` nella funzione `highPrecedence`. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*(?:const|let|var)\s+regex/); ``` -You should use `const` to declare your `regex` variable. +Dovresti usare `const` per dichiarare la variabile `regex`. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex/); ``` -Your `regex` variable should be a regular expression. +La variabile `regex` dovrebbe essere un'espressione regolare. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\//); ``` -Your `regex` should use a capture group. +`regex` dovrebbe usare un gruppo di acquisizione. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(/); ``` -Your first capture group should use a character class. +Il primo gruppo di acquisizione dovrebbe usare una classe di caratteri. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[/); ``` -Your first capture group should match any digit or a period. Use the special `\d` character class. +Il primo gruppo di acquisizione dovrebbe trovare qualsiasi cifra o un punto. Usa la classe di caratteri speciale `\d`. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]/); ``` -Your first capture group should match the character class one or more times. +Il primo gruppo di acquisizione dovrebbe trovare la classe di caratteri una o più volte. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)/); ``` -Your `regex` should use a second capture group. +`regex` dovrebbe usare un secondo gruppo di acquisizione. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(/); ``` -Your second capture group should match a `*` or `/` operator. Use a character class in the capture group. +Il secondo gruppo di acquisizione dovrebbe trovare un operatore `*` o `/`. Usa una classe di caratteri nel gruppo di acquisizione. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\*\\\/|\\\/*)\]\)/); ``` -Your `regex` should use a third capture group. +`regex` dovrebbe utilizzare un terzo gruppo di acquisizione. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\*\\\/|\\\/*)\]\)\(/); ``` -Your third capture group should be the same as your first capture group. +Il terzo gruppo di acquisizione dovrebbe uguale al primo gruppo di acquisizione. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\*\\\/|\\\/*)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d40c543943ec250039682.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d40c543943ec250039682.md index 4973e069b9c..b4b09bfc491 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d40c543943ec250039682.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d40c543943ec250039682.md @@ -7,37 +7,37 @@ dashedName: step-74 # --description-- -Now that you have a regular expression to match multiplication or division, you can evaluate that expression. +Ora che hai un'espressione regolare per la moltiplicazione o la divisione, puoi valutare l'espressione. -Declare a `str2` variable and assign it the result of calling `infixEval` with `str` and `regex` as arguments. +Dichiara una variabile `str2` e assegnale il risultato della chiamata di `infixEval` con `str` e `regex` come argomenti. # --hints-- -You should declare a `str2` variable. +Dovresti dichiarare una variabile `str2`. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\*\\\/|\\\/*)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*(?:const|let|var)\s+str2/); ``` -You should use `const` to declare your `str2` variable. +Dovresti usare `const` per dichiarare la variabile `str2`. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\*\\\/|\\\/*)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2/); ``` -You should assign `str2` the result of calling your `infixEval` function. +Dovresti assegnare a `str2` il risultato della chiamata della funzione `infixEval`. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\*\\\/|\\\/*)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(/); ``` -You should pass `str` as the first argument to your `infixEval` call. +Dovresti passare `str` come primo argomento alla chiamata `infixEval`. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\*\\\/|\\\/*)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*str/); ``` -You should pass `regex` as the second argument to your `infixEval` call. +Dovresti passare `regex` come secondo argomento alla chiamata `infixEval`. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\*\\\/|\\\/*)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*str\s*,\s*regex\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d40fe4b7b50c30c2b4cd8.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d40fe4b7b50c30c2b4cd8.md index 01767a99e03..36eef7931bd 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d40fe4b7b50c30c2b4cd8.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d40fe4b7b50c30c2b4cd8.md @@ -7,43 +7,43 @@ dashedName: step-75 # --description-- -Your `infixEval` function will only evaluate the first multiplication or division operation, because `regex` isn't global. This means you'll want to use a recursive approach to evaluate the entire string. +La funzione `infixEval` valuterà solo la prima operazione di moltiplicazione o divisione, perché `regex` non è globale. Questo significa che dovrai usare un approccio ricorsivo per valutare l'intera stringa. -If `infixEval` does not find any matches, it will return the `str` value as-is. Using a ternary expression, check if `str2` is equal to `str`. If it is, return `str`, otherwise return the result of calling `highPrecedence()` on `str2`. +Se `infixEval` non trova nessuna corrispondenza, restituirà il valore `str` così com'è. Usando un'espressione ternaria, controlla se `str2` è uguale a `str`. Se lo è, restituisci `str`, altrimenti restituisci il risultato della chiamata `highPrecedence()` su `str2`. # --hints-- -Your `infixEval` function should use the `return` keyword. +La funzione `infixEval` dovrebbe utilizzare la parola chiave `return`. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\*\\\/|\\\/*)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*str\s*,\s*regex\s*\);?\s*return/); ``` -You should use the `return` keyword with a condition to check if `str` is equal to `str2`. +Dovresti usare la parola chiave `return` con una condizione per controllare se `str` è uguale a `str2`. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\*\\\/|\\\/*)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*str\s*,\s*regex\s*\);?\s*return\s+(?:str\s*===\s*str2|str2\s*===\s*str)/); ``` -You should use ternary syntax with your `return` statement. +Dovresti usare la sintassi ternaria con l'istruzione `return`. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\*\\\/|\\\/*)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*str\s*,\s*regex\s*\);?\s*return\s+(?:str\s*===\s*str2|str2\s*===\s*str)\s*\?/); ``` -If the ternary condition is true, you should return `str`. +Se la condizione ternaria è vera, dovresti restituire `str`. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\*\\\/|\\\/*)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*str\s*,\s*regex\s*\);?\s*return\s+(?:str\s*===\s*str2|str2\s*===\s*str)\s*\?\s*str/); ``` -If the ternary condition is false, you should return the result of calling `highPrecedence()`. +Se la condizione ternaria è falsa, dovresti restituire il risultato della chiamata `highPrecedence()`. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\*\\\/|\\\/*)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*str\s*,\s*regex\s*\);?\s*return\s+(?:str\s*===\s*str2|str2\s*===\s*str)\s*\?\s*str\s*:\s*highPrecedence\(/); ``` -You should pass `str2` to your `highPrecedence()` call. +Dovresti passare `str2` alla chiamata `highPrecedence()`. ```js assert.match(code, /const\s+highPrecedence\s*=\s*\(?\s*str\s*\)?\s*=>\s*{\s*const\s+regex\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\*\\\/|\\\/*)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*str\s*,\s*regex\s*\);?\s*return\s+(?:str\s*===\s*str2|str2\s*===\s*str)\s*\?\s*str\s*:\s*highPrecedence\(\s*str2\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d41e23b583fc3b8cc4579.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d41e23b583fc3b8cc4579.md index 7fe83fcacfb..7a3d730131e 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d41e23b583fc3b8cc4579.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d41e23b583fc3b8cc4579.md @@ -7,41 +7,41 @@ dashedName: step-76 # --description-- -Now you can start applying your function parsing logic to a string. Declare a function called `applyFunction`, which takes a `str` parameter. +Ora puoi iniziare ad applicare la logica della funzione a una stringa. Dichiara una funzione chiamata `applyFunction`, che richiede un parametro `str`. # --hints-- -You should declare an `applyFunction` variable. +Dovresti dichiarare una variabile `applyFunction`. ```js assert.match(code, /(?:var|let|const)\s+applyFunction\s*=/); ``` -You should use `const` to declare your `applyFunction` variable. +Dovresti usare `const` per dichiarare la variabile `applyFunction`. ```js assert.match(code, /const\s+applyFunction\s*=/); ``` -Your `applyFunction` variable should be a function. +La variabile `applyFunction` dovrebbe essere una funzione. ```js assert.isFunction(applyFunction); ``` -Your `applyFunction` function should use arrow syntax. +La funzione `applyFunction` dovrebbe utilizzare la sintassi freccia. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*(?:str)?\s*\)?\s*=>/); ``` -Your `applyFunction` function should have a `str` parameter. +La funzione `applyFunction` dovrebbe avere un parametro `str`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>/); ``` -Your `applyFunction` should be empty. +`applyFunction` dovrebbe essere vuota. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*\}/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d423fade4a9c4636acd13.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d423fade4a9c4636acd13.md index cbd2f59f0dc..34b31725c53 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d423fade4a9c4636acd13.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d423fade4a9c4636acd13.md @@ -7,29 +7,29 @@ dashedName: step-77 # --description-- -First you need to handle the higher precedence operators. Declare a `noHigh` variable, and assign it the result of calling `highPrecedence()` with `str` as an argument. +Per prima cosa devi gestire gli operatori con precedenza più alta. Dichiara una variabile `noHigh` e assegnale il risultato della chiamata `highPrecedence()` con `str` come argomento. # --hints-- -You should declare a `noHigh` variable. +Dovresti dichiarare una variabile `noHigh`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*(?:var|let|const)\s+noHigh\s*=/); ``` -You should use `const` to declare your `noHigh` variable. +Dovresti usare `const` per dichiarare la variabile `noHigh`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=/); ``` -You should assign `noHigh` the result of calling `highPrecedence()`. +Dovresti assegnare a `noHigh` il risultato della chiamata `highPrecedence()`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(/); ``` -You should pass `str` as the argument to your `highPrecedence()` call. +Dovresti passare `str` come argomento alla chiamata `highPrecedence()`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d42f58deb2fc52adc6611.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d42f58deb2fc52adc6611.md index 862ff6ebe14..87e8867f0ef 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d42f58deb2fc52adc6611.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d42f58deb2fc52adc6611.md @@ -7,73 +7,73 @@ dashedName: step-78 # --description-- -Now that you've parsed and evaluated the multiplication and division operators, you need to do the same with the addition and subtraction operators. +Ora che hai elaboraato e valutato gli operatori di moltiplicazione e divisione, devi fare lo stesso con gli operatori di addizione e sottrazione. -Declare an `infix` variable, and assign it a regular expression that matches a number (including decimal numbers) followed by a `+` or `-` operator followed by another number. +Dichiara una variabile `infix` e assegnale un'espressione regolare che corrisponde a un numero (compresi i numeri decimali) seguito da un operatore `+` o `-` seguito da un altro numero. # --hints-- -You should declare an `infix` variable. +Dovresti dichiarare una variabile `infix`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*(?:const|let|var)\s+infix\s*=/); ``` -You should use `const` to declare your `infix` variable. +Dovresti usare `const` per dichiarare la variabile `infix`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=/); ``` -Your `infix` variable should be a regular expression. +La variabile `infix` dovrebbe essere un'espressione regolare. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\//); ``` -Your `infix` regex should use a capture group. +L'espressione regolare `infix` dovrebbe usare un gruppo di acquisizione. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(/); ``` -Your first capture group should use a character class. +Il primo gruppo di acquisizione dovrebbe usare una classe di caratteri. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[/); ``` -Your first capture group should match one or more digits or decimal points. Use the `\d` character class. +Il primo gruppo di acquisizione dovrebbe corrispondere a una o più cifre o punti decimali. Usa la classe di caratteri `\d`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)/); ``` -Your `infix` regex should use a second capture group. +L'espressione regolare `infix` dovrebbe usare un secondo gruppo di acquisizione. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(/); ``` -Your second capture group should use a character class. +Il secondo gruppo di acquisizione dovrebbe usare una classe di caratteri. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[/); ``` -Your second capture group should match either the `+` or `-` operator. +Il secondo gruppo di acquisizione dovrebbe corrispondere all'operatore `+` o `-`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)/); ``` -Your `infix` regex should use a third capture group. +L'espressione regolare `infix` dovrebbe usare un terzo gruppo di acquisizione. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(/); ``` -Your third capture group should be the same as your first capture group. +Il terzo gruppo di acquisizione dovrebbe uguale al primo gruppo di acquisizione. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d43587d926bc5b6cb2e50.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d43587d926bc5b6cb2e50.md index b9387c25525..23e125b23f4 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d43587d926bc5b6cb2e50.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d43587d926bc5b6cb2e50.md @@ -7,35 +7,35 @@ dashedName: step-79 # --description-- -Declare a `str2` variable, and assign it the result of calling `infixEval()` with `noHigh` and `infix` as arguments. +Dichiara una variabile `str2` e assegnale il risultato della chiamata `infixEval()` con `noHigh` e `infix` come argomenti. # --hints-- -You should declare a `str2` variable. +Dovresti dichiarare una variabile `str2`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*(?:let|var|const)\s+str2/); ``` -You should use `const` to declare your `str2` variable. +Dovresti usare `const` per dichiarare la variabile `str2`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2/); ``` -You should assign `str2` the result of calling `infixEval()`. +Dovresti assegnare a `str2` il risultato della chiamata `infixEval()`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(/); ``` -You should pass `noHigh` as the first argument to `infixEval()`. +Dovresti passare `noHigh` come primo argomento a `infixEval()`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh/); ``` -You should pass `infix` as the second argument to `infixEval()`. +Dovresti passare `infix` come secondo argomento a `infixEval()`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d448479c8fdc8dcec868c.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d448479c8fdc8dcec868c.md index 521cb0a4b09..e5a93bcdd63 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d448479c8fdc8dcec868c.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d448479c8fdc8dcec868c.md @@ -7,25 +7,25 @@ dashedName: step-80 # --description-- -Declare a `functionCall` variable, and assign it this regular expression: `/([a-z]*)\(([0-9., ]*)\)(?!.*\()/i` +Dichiara una variabile `functionCall` e assegnale questa espressione regolare: `/([a-z]*)\(([0-9., ]*)\)(?!.*\()/i` -This expression will look for function calls like `sum(1, 4)`. +Questa espressione cercherà chiamate di funzioni come `sum(1, 4)`. # --hints-- -You should declare a `functionCall` variable. +Dovresti dichiarare una variabile `functionCall`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*(?:const|let|var)\s+functionCall\s*=/); ``` -You should use `const` to declare your `functionCall` variable. +Dovresti usare `const` per dichiarare la variabile `functionCall`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=/); ``` -You should assign `functionCall` the provided regular expression. +Dovresti assegnare a `functionCall` l'espressione regolare fornita. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d44da986f2bc9b72f5fe2.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d44da986f2bc9b72f5fe2.md index 7a4d6806f2b..49d6f3622a0 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d44da986f2bc9b72f5fe2.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d44da986f2bc9b72f5fe2.md @@ -7,59 +7,59 @@ dashedName: step-81 # --description-- -Declare a `toNumberList` function which takes an `args` parameter, and returns the result of splitting the `args` by commas, and mapping the resulting array to `parseFloat`. +Dichiara una funzione `toNumberList` che richiede un parametro `args` e restituisce il risultato della suddivisione di `args` secondo le virgole e mappa l'array risultante con `parseFloat`. # --hints-- -You should declare a `toNumberList` variable. +Dovresti dichiarare una variabile `toNumberList`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*(?:const|let|var)\s+toNumberList\s*=/); ``` -You should use `const` to declare your `toNumberList` variable. +Dovresti usare `const` per dichiarare la variabile `toNumberList`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=/); ``` -Your `toNumberList` variable should be an arrow function. +La variabile `toNumberList` dovrebbe essere una funzione freccia. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*(?:args)?\s*\)?\s*=>/); ``` -Your `toNumberList` function should have an `args` parameter. +La funzione `toNumberList` dovrebbe avere un parametro `args`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>/); ``` -Your `toNumberList` function should use an implicit return. +La funzione `toNumberList` dovrebbe utilizzare un return implicito. ```js assert.notMatch(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*\{/); ``` -Your `toNumberList` function should return the result of calling the `.split()` method of `args`. +La funzione `toNumberList` dovrebbe restituire il risultato della chiamata del metodo `.split()` su `args`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(/); ``` -You should split `args` on the `,` character. +Dovresti dividere `args` in corrispondenza del carattere `,`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)/); ``` -You should chain the `.map()` method to the `.split()` method. +Dovresti concatenare il metodo `.map()` al metodo `.split()`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(/); ``` -You should pass a reference to `parseFloat` as the callback to `.map()`. +Dovresti passare un riferimento a `parseFloat` come callback di `.map()`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d451c2e44afca71b67818.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d451c2e44afca71b67818.md index b2ee3df825b..63cb370b460 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d451c2e44afca71b67818.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d451c2e44afca71b67818.md @@ -7,41 +7,41 @@ dashedName: step-82 # --description-- -Declare an `apply` function that takes a `fn` and `args` parameter. +Dichiara una funzione `apply` che prende dei parametri `fn` e `args`. # --hints-- -You should declare an `apply` variable. +Dovresti dichiarare una variabile `apply`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*(?:var|let|const)\s+apply\s*=/); ``` -You should use `const` to declare your `apply` variable. +Dovresti usare `const` per dichiarare la variabile `apply`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=/); ``` -Your `apply` variable should be assigned an arrow function. +Alla variabile `apply` dovrebbe essere assegnata una funzione freccia. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(/); ``` -Your `apply` function should have `fn` as its first parameter. +La funzione `apply` dovrebbe avere `fn` come primo parametro. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn/); ``` -Your `apply` function should have `args` as its second parameter. +La funzione `apply` dovrebbe avere `args` come secondo parametro. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)/); ``` -Your `apply` function should be empty. +La funzione `apply` dovrebbe essere vuota. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*\{\s*\}/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4554721d43cb19a68bc4.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4554721d43cb19a68bc4.md index 5900d07b82b..a35c5bea2cd 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4554721d43cb19a68bc4.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4554721d43cb19a68bc4.md @@ -7,31 +7,31 @@ dashedName: step-83 # --description-- -The `fn` parameter will be the name of a function, such as `SUM`. Update `apply` to implicitly return the function found at the `fn` property of your `spreadsheetFunctions` object. +Il parametro `fn` sarà il nome di una funzione, come `SUM`. Aggiorna `apply` per restituire implicitamente la funzione trovata nella proprietà `fn` dell'oggetto `spreadsheetFunctions`. -Remember that `fn` might not be lowercase, so you'll need to convert it to a lowercase string. +Ricorda che `fn` potrebbe non essere in minuscolo, quindi dovrai convertirla in una stringa minuscola. # --hints-- -Your `apply` function should use an implicit return. +La funzione `apply` dovrebbe utilizzare un return implicito. ```js assert.notMatch(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*\{/); ``` -Your `apply` function should access the `spreadsheetFunctions` object. +La funzione `apply` dovrebbe accedere all'oggetto `spreadsheetFunctions`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions/); ``` -Your `apply` function should access the property of the `spreadsheetFunctions` object that matches the `fn` value. +La funzione `apply` dovrebbe accedere alla proprietà dell'oggetto `spreadsheetFunctions` che corrisponde al valore di `fn`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn/); ``` -Your `apply` function should call the `.toLowerCase()` method on `fn` in the property access. +La funzione `apply` dovrebbe chiamare il metodo `.toLowerCase()` su `fn` accedendo alla proprietà. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d45b739da5ecbf830c108.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d45b739da5ecbf830c108.md index 26b5d4cc9f9..e949c83afa5 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d45b739da5ecbf830c108.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d45b739da5ecbf830c108.md @@ -7,23 +7,23 @@ dashedName: step-84 # --description-- -Your `apply` function is returning the spreadsheet function, but not actually applying it. Update `apply` to call the function. Pass in the result of calling `toNumberList` with `args` as an argument. +La funzione `apply` sta restituendo la funzione del foglio di calcolo, ma non la sta applicando. Aggiorna `apply` in modo che chiami la funzione. Passale il risultato della chiamata di `toNumberList` con `args` come argomento. # --hints-- -Your `apply` function should call the `spreadsheetFunctions[fn.toLowerCase()]` function. +La funzione `apply` dovrebbe chiamare la funzione `spreadsheetFunctions[fn.toLowerCase()]`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(/); ``` -You should pass a `toNumberList()` call to your `spreadsheetFunctions[fn.toLowerCase()]` call. +Dovresti passare una chiamata `toNumberList()` alla chiamata `spreadsheetFunctions[fn.toLowerCase()]`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(/); ``` -You should pass `args` to your `toNumberList()` call. +Dovresti passare `args` alla chiamata `toNumberList()`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(\s*args\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d45ee725632cca2555146.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d45ee725632cca2555146.md index b44378895e2..52bfab4333e 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d45ee725632cca2555146.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d45ee725632cca2555146.md @@ -7,23 +7,23 @@ dashedName: step-85 # --description-- -Now your `applyFunction` needs to return a result. Return the result of calling the `.replace()` method on `str2`. Pass your `functionCall` regex and an empty callback. +Ora `applyFunction` deve restituire un risultato. Restituisci il risultato della chiamata del metodo `.replace()` su `str2`. Passale l'espressione regolare `functionCall` e una chiamata vuota. # --hints-- -Your `applyFunction` function should return the result of calling the `.replace()` method on `str2`. +La funzione `applyFunction` dovrebbe restituire il risultato della chiamata del metodo `.replace()` su `str2`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(\s*args\s*\)\);?\s*return\s+str2\.replace\(/); ``` -You should pass `functionCall` as the first argument to your `.replace()` call. +Dovresti passare `functionCall` come primo argomento alla chiamata `.replace()`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(\s*args\s*\)\);?\s*return\s+str2\.replace\(\s*functionCall/); ``` -You should pass an empty arrow function as the second argument to your `.replace()` call. +Dovresti passare una funzione freccia vuota come secondo argomento alla chiamata `.replace()`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(\s*args\s*\)\);?\s*return\s+str2\.replace\(\s*functionCall\s*,\s*\(\s*\)\s*=>\s*\{\s*\}/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4626420eeecd51f241c2.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4626420eeecd51f241c2.md index 07688aaca12..64abae6df30 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4626420eeecd51f241c2.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4626420eeecd51f241c2.md @@ -7,49 +7,49 @@ dashedName: step-86 # --description-- -Update the callback function to take `match`, `fn`, and `args` as parameters. It should implicitly return the result of checking whether `spreadsheetFunctions` has its own property of `fn`. +Aggiorna la funzione callback per accettare `match`, `fn` e `args` come parametri. Dovrebbe verificare se `spreadsheetFunctions` ha una proprietà `fn` e restituire implicitamente il risultato del controllo. -Remember to make `fn` lower case. +Ricordati di rendere `fn` in minuscolo. # --hints-- -Your callback function should have `match` as the first parameter. +La funzione callback dovrebbe avere `match` come primo parametro. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(\s*args\s*\)\);?\s*return\s+str2\.replace\(\s*functionCall\s*,\s*\(\s*match/); ``` -Your callback function should have `fn` as the second parameter. +La funzione callback dovrebbe avere `fn` come secondo parametro. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(\s*args\s*\)\);?\s*return\s+str2\.replace\(\s*functionCall\s*,\s*\(\s*match\s*,\s*fn/); ``` -Your callback function should have `args` as the third parameter. +La funzione callback dovrebbe avere `args` come terzo parametro. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(\s*args\s*\)\);?\s*return\s+str2\.replace\(\s*functionCall\s*,\s*\(\s*match\s*,\s*fn\s*,\s*args\s*\)\s*=>/); ``` -Your callback function should use an implicit return. +La funzione callback dovrebbe utilizzare un return implicito. ```js assert.notMatch(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(\s*args\s*\)\);?\s*return\s+str2\.replace\(\s*functionCall\s*,\s*\(\s*match\s*,\s*fn\s*,\s*args\s*\)\s*=>\s*\{/); ``` -Your callback function should return the result of calling the `.hasOwnProperty()` method on the `spreadsheetFunctions` object. +La funzione callback dovrebbe restituire il risultato della chiamata del metodo `.hasOwnProperty()` sull'oggetto `spreadsheetFunctions`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(\s*args\s*\)\);?\s*return\s+str2\.replace\(\s*functionCall\s*,\s*\(\s*match\s*,\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\.hasOwnProperty\(/); ``` -You should pass `fn` to the .`hasOwnProperty()` method. +Dovresti passare `fn` al metodo `hasOwnProperty()`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(\s*args\s*\)\);?\s*return\s+str2\.replace\(\s*functionCall\s*,\s*\(\s*match\s*,\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\.hasOwnProperty\(fn/); ``` -You should call the `.toLowerCase()` method on `fn`. +Dovresti chiamare il metodo `.toLowerCase()` su `fn`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(\s*args\s*\)\);?\s*return\s+str2\.replace\(\s*functionCall\s*,\s*\(\s*match\s*,\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\.hasOwnProperty\(fn\.toLowerCase\(\s*\)\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d467c6994f4ce0dc416a4.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d467c6994f4ce0dc416a4.md index 8d640506e46..3c8db8da835 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d467c6994f4ce0dc416a4.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d467c6994f4ce0dc416a4.md @@ -7,35 +7,35 @@ dashedName: step-87 # --description-- -Use the ternary operator to turn your `.hasOwnProperty()` call into the condition. If the object has the property, return the result of calling `apply` with `fn` and `args` as arguments. Otherwise, return `match`. +Usa l'operatore ternario per trasformare la chiamata `.hasOwnProperty()` nella condizione. Se l'oggetto possiede la proprietà, restituisci il risultato della chiamata di `apply` con `fn` e `args` come argomenti. Altrimenti, restituisci `match`. # --hints-- -Your callback function should use ternary syntax. +La funzione callback dovrebbe usare la sintassi ternaria. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(\s*args\s*\)\);?\s*return\s+str2\.replace\(\s*functionCall\s*,\s*\(\s*match\s*,\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\.hasOwnProperty\(fn\.toLowerCase\(\s*\)\s*\)\s*\?/); ``` -If the ternary condition is true, your callback function should return the result of calling `apply()`. +Se la condizione ternaria è vera, la funzione callback dovrebbe restituire il risultato della chiamata `apply()`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(\s*args\s*\)\);?\s*return\s+str2\.replace\(\s*functionCall\s*,\s*\(\s*match\s*,\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\.hasOwnProperty\(fn\.toLowerCase\(\s*\)\s*\)\s*\?\s*apply\(/); ``` -You should pass `fn` as the first argument to your `apply()` call. +Dovresti passare `fn` come primo argomento alla chiamata `apply()`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(\s*args\s*\)\);?\s*return\s+str2\.replace\(\s*functionCall\s*,\s*\(\s*match\s*,\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\.hasOwnProperty\(fn\.toLowerCase\(\s*\)\s*\)\s*\?\s*apply\(\s*fn/); ``` -You should pass `args` as the second argument to your `apply()` call. +Dovresti passare `args` come secondo argomento alla chiamata `apply()`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(\s*args\s*\)\);?\s*return\s+str2\.replace\(\s*functionCall\s*,\s*\(\s*match\s*,\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\.hasOwnProperty\(fn\.toLowerCase\(\s*\)\s*\)\s*\?\s*apply\(\s*fn\s*,\s*args\s*\)/); ``` -If the ternary is false, you should return `match`. +Se il ternario è falso, dovresti restituire `match`. ```js assert.match(code, /const\s+applyFunction\s*=\s*\(?\s*str\s*\)?\s*=>\s*\{\s*const\s+noHigh\s*=\s*highPrecedence\(\s*str\s*\);?\s*const\s+infix\s*=\s*\/\(\[(?:\\d\.|\.\\d)\]\+\)\(\[(?:\+-|-\+)\]\)\(\[(?:\\d\.|\.\\d)\]\+\)\/;?\s*const\s+str2\s*=\s*infixEval\(\s*noHigh\s*\,\s*infix\s*\);?\s*const\s+functionCall\s*=\s*\/\(\[a-z\]\*\)\\\(\(\[0-9\., \]\*\)\\\)\(\?!\.\*\\\(\)\/i;?\s*const\s+toNumberList\s*=\s*\(?\s*args\s*\)?\s*=>\s*args\.split\(\s*('|"|`),\1\s*\)\.map\(\s*parseFloat\s*\);?\s*const\s+apply\s*=\s*\(\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\[fn\.toLowerCase\(\)\]\(\s*toNumberList\(\s*args\s*\)\);?\s*return\s+str2\.replace\(\s*functionCall\s*,\s*\(\s*match\s*,\s*fn\s*,\s*args\s*\)\s*=>\s*spreadsheetFunctions\.hasOwnProperty\(fn\.toLowerCase\(\s*\)\s*\)\s*\?\s*apply\(\s*fn\s*,\s*args\s*\)\s*:\s*match/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d46c03e7d02cecb30f021.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d46c03e7d02cecb30f021.md index a01fe855aed..a69b884d605 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d46c03e7d02cecb30f021.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d46c03e7d02cecb30f021.md @@ -7,29 +7,29 @@ dashedName: step-88 # --description-- -Now you can start applying your function parser to your `evalFormula` logic. Declare a `functionExpanded` variable, and assign it the result of calling `applyFunction` with your `cellExpanded` string. +Ora puoi iniziare ad applicare la funzione parser alla logica di `evalFormula`. Dichiara una variabile `functionExpanded` e assegnale il risultato della chiamata di `applyFunction` con la stringa `cellExpanded`. # --hints-- -You should declare a `functionExpanded` variable. +Dovresti dichiarare una variabile `functionExpanded`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>\s*idToText\(\s*match\.toUpperCase\(\)\s*\)\);?\s*(?:const|let|var)\s+functionExpanded\s*=\s*/); ``` -You should use `const` to declare your `functionExpanded` variable. +Dovresti usare `const` per dichiarare la variabile `functionExpanded`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>\s*idToText\(\s*match\.toUpperCase\(\)\s*\)\);?\s*const\s+functionExpanded\s*=\s*/); ``` -You should assign the `functionExpanded` variable the result of calling your `applyFunction` function. +Dovresti assegnare alla variabile `functionExpanded` il risultato della chiamata della funzione `applyFunction`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>\s*idToText\(\s*match\.toUpperCase\(\)\s*\)\);?\s*(?:const|let|var)\s+functionExpanded\s*=\s*applyFunction\(/); ``` -You should pass `cellExpanded` to your `applyFunction` call. +Dovresti passare `cellExpanded` alla chiamata di `applyFunction`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>\s*idToText\(\s*match\.toUpperCase\(\)\s*\)\);?\s*(?:const|let|var)\s+functionExpanded\s*=\s*applyFunction\(\s*cellExpanded\s*\);?/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4717a689e1cfa232e357.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4717a689e1cfa232e357.md index 50e56cc4486..57f7b94e3d0 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4717a689e1cfa232e357.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4717a689e1cfa232e357.md @@ -7,49 +7,49 @@ dashedName: step-89 # --description-- -Like you did with your `highPrecedence()` function, your `evalFormula()` function needs to ensure it has evaluated and replaced everything. +Proprio come la funzione `highPrecedence()`, la funzione `evalFormula()` deve assicurare che tutto venga valutato e sostituito. -Use a ternary to check if `functionExpanded` is equal to the original string `x`. If it is, return `functionExpanded`, otherwise return the result of calling `evalFormula()` again with `functionExpanded` and `cells` as arguments. +Usa un ternario per controllare se `functionExpanded` è uguale alla stringa originale `x`. Se lo è, restituisci `functionExpanded`, altrimenti restituisci il risultato della chiamata `evalFormula()` di nuovo con `functionExpanded` e `cells` come argomenti. # --hints-- -Your `evalFormula` function should use the `return` keyword. +La funzione `evalFormula` dovrebbe utilizzare la parola chiave `return`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>\s*idToText\(\s*match\.toUpperCase\(\)\s*\)\);?\s*(?:const|let|var)\s+functionExpanded\s*=\s*applyFunction\(\s*cellExpanded\s*\);?\s*return/); ``` -Your `return` statement should check if `functionExpanded` is equal to `x`. +L'istruzione `return` dovrebbe controllare se `functionExpanded` è uguale a `x`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>\s*idToText\(\s*match\.toUpperCase\(\)\s*\)\);?\s*(?:const|let|var)\s+functionExpanded\s*=\s*applyFunction\(\s*cellExpanded\s*\);?\s*return\s*(?:functionExpanded\s*===\s*x|x\s*===\s*functionExpanded)/); ``` -Your `return` statement should use a ternary operator. +L'istruzione `return` dovrebbe utilizzare un operatore ternario. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>\s*idToText\(\s*match\.toUpperCase\(\)\s*\)\);?\s*(?:const|let|var)\s+functionExpanded\s*=\s*applyFunction\(\s*cellExpanded\s*\);?\s*return\s*(?:functionExpanded\s*===\s*x|x\s*===\s*functionExpanded)\s*\?/); ``` -If the ternary condition is true, your `evalFormula()` should return `functionExpanded`. +Se la condizione ternaria è vera, `evalFormula()` dovrebbe restituire `functionExpanded`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>\s*idToText\(\s*match\.toUpperCase\(\)\s*\)\);?\s*(?:const|let|var)\s+functionExpanded\s*=\s*applyFunction\(\s*cellExpanded\s*\);?\s*return\s*(?:functionExpanded\s*===\s*x|x\s*===\s*functionExpanded)\s*\?\s*functionExpanded/); ``` -If the ternary condition is false, your `evalFormula()` should return the result of calling `evalFormula()`. +Se la condizione ternaria è falsa, `evalFormula()` dovrebbe restituire il risultato della chiamata `evalFormula()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>\s*idToText\(\s*match\.toUpperCase\(\)\s*\)\);?\s*(?:const|let|var)\s+functionExpanded\s*=\s*applyFunction\(\s*cellExpanded\s*\);?\s*return\s*(?:functionExpanded\s*===\s*x|x\s*===\s*functionExpanded)\s*\?\s*functionExpanded\s*:\s*evalFormula\(/); ``` -You should pass `functionExpanded` as the first argument to your `evalFormula()` call. +Dovresti passare `functionExpanded` come primo argomento alla chiamata `evalFormula()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>\s*idToText\(\s*match\.toUpperCase\(\)\s*\)\);?\s*(?:const|let|var)\s+functionExpanded\s*=\s*applyFunction\(\s*cellExpanded\s*\);?\s*return\s*(?:functionExpanded\s*===\s*x|x\s*===\s*functionExpanded)\s*\?\s*functionExpanded\s*:\s*evalFormula\(\s*functionExpanded/); ``` -You should pass `cells` as the second argument to your `evalFormula()` call. +Dovresti passare `cells` come secondo argomento alla chiamata `evalFormula()`. ```js assert.match(code, /const\s*evalFormula\s*=\s*\(\s*x\s*,\s*cells\s*\)\s*=>\s*{\s*const\s+idToText\s*=\s*\(?\s*id\s*\)?\s*=>\s*cells\.find\(\s*\(?\s*cell\s*\)?\s*=>\s*(?:cell\.id\s*===\s*id|id\s*===\s*cell\.id)\s*\)\.value;?\s*const\s+rangeRegex\s*=\s*\/\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\):\(\[A-J\]\)\(\[1-9\]\[0-9\]\?\)\/(gi|ig);?\s*const\s+rangeFromString\s*=\s*\(\s*num1\s*,\s*num2\s*\)\s*=>\s*range\(\s*parseInt\(\s*num1\s*\)\s*,\s*parseInt\(\s*num2\s*\)\s*\);?\s*const\s+elemValue\s*=\s*\(?\s*num\s*\)?\s*=>\s*\(?\s*character\s*\)?\s*=>\s*idToText\(\s*character\s*\+\s*num\s*\);?\s*const\s+addCharacters\s*=\s*\(?\s*character1\s*\)?\s*=>\s*\(?\s*character2\s*\)?\s*=>\s*\(?\s*num\s*\)?\s*=>\s*charRange\(\s*character1\s*,\s*character2\s*\)\.map\(\s*elemValue\(\s*num\s*\)\s*\);?\s*const\s+rangeExpanded\s*=\s*x\.replace\(\s*rangeRegex\s*,\s*\(\s*_match\s*,\s*char1\s*,\s*num1\s*,\s*char2\s*,\s*num2\s*\)\s*=>\s*rangeFromString\(\s*num1\s*,\s*num2\s*\)\.map\(\s*addCharacters\s*\(\s*char1\s*\)\(\s*char2\s*\)\s*\)\s*\);?\s*const\s+cellRegex\s*=\s*\/\[A-J\]\[1-9\]\[0-9\]\?\/(gi|ig);?\s*const\s+cellExpanded\s*=\s*rangeExpanded\.replace\(\s*cellRegex\s*,\s*\(?\s*match\s*\)?\s*=>\s*idToText\(\s*match\.toUpperCase\(\)\s*\)\);?\s*(?:const|let|var)\s+functionExpanded\s*=\s*applyFunction\(\s*cellExpanded\s*\);?\s*return\s*(?:functionExpanded\s*===\s*x|x\s*===\s*functionExpanded)\s*\?\s*functionExpanded\s*:\s*evalFormula\(\s*functionExpanded\s*,\s*cells\s*\);?/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4769ba65f1d05ef6b634.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4769ba65f1d05ef6b634.md index c9b3155ab77..2b64f8064e9 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4769ba65f1d05ef6b634.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4769ba65f1d05ef6b634.md @@ -7,25 +7,25 @@ dashedName: step-90 # --description-- -Now your `update()` function can actually evaluate formulas. Remember that you wrote the `if` condition to check that a function was called. +Ora la funzione `update()` può effettivamente valutare le formule. Ricorda che hai scritto la condizione `if` per controllare che sia stata chiamata una funzione. -Inside your `if` statement, set the `value` of the `element` to be the result of your `evalFormula()` function. Do not pass any arguments yet. +All'interno dell'istruzione `if`, imposta il `value` di `element` come risultato della funzione `evalFormula()`. Non passare ancora alcun argomento. # --hints-- -You should update the `value` property of `element` in your `if` block. +Dovresti aggiornare la proprietà `value` di `element` nel blocco `if`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\/g\s*,\s*('|"|`)\1\s*\);?\s*if\s*\(\s*(!value\.includes\(\s*element\.id\s*\)\s*&&\s*(?:value\[0\]\s*===\s*('|"|`)=\3|value\.charAt\(0\)\s*===\s*('|"|`)=\4|value\.startsWith\(('|"|`)=\5\))|(?:value\[0\]\s*===\s*('|"|`)=\6|value\.charAt\(0\)\s*===\s*('|"|`)=\7|value\.startsWith\(('|"|`)=\8\))\s*\|\|\s*!value\.includes\(\s*element\.id\s*\))\s*\)\s*\{\s*element\.value/); ``` -You should assign the `value` property the result of calling your `evalFormula()` function. +Dovresti assegnare alla proprietà `value` il risultato della chiamata della funzione `evalFormula()`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\/g\s*,\s*('|"|`)\1\s*\);?\s*if\s*\(\s*(!value\.includes\(\s*element\.id\s*\)\s*&&\s*(?:value\[0\]\s*===\s*('|"|`)=\3|value\.charAt\(0\)\s*===\s*('|"|`)=\4|value\.startsWith\(('|"|`)=\5\))|(?:value\[0\]\s*===\s*('|"|`)=\6|value\.charAt\(0\)\s*===\s*('|"|`)=\7|value\.startsWith\(('|"|`)=\8\))\s*\|\|\s*!value\.includes\(\s*element\.id\s*\))\s*\)\s*\{\s*element\.value\s*=\s*evalFormula\(/); ``` -You should not pass any arguments to your `evalFormula()` call. +Non dovresti passare alcun argomento alla chiamata `evalFormula()`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\/g\s*,\s*('|"|`)\1\s*\);?\s*if\s*\(\s*(!value\.includes\(\s*element\.id\s*\)\s*&&\s*(?:value\[0\]\s*===\s*('|"|`)=\3|value\.charAt\(0\)\s*===\s*('|"|`)=\4|value\.startsWith\(('|"|`)=\5\))|(?:value\[0\]\s*===\s*('|"|`)=\6|value\.charAt\(0\)\s*===\s*('|"|`)=\7|value\.startsWith\(('|"|`)=\8\))\s*\|\|\s*!value\.includes\(\s*element\.id\s*\))\s*\)\s*\{\s*element\.value\s*=\s*evalFormula\(\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d47c8f58107d10f1e5106.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d47c8f58107d10f1e5106.md index 2b8ba01ca6f..b31eea3b10b 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d47c8f58107d10f1e5106.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d47c8f58107d10f1e5106.md @@ -7,23 +7,23 @@ dashedName: step-91 # --description-- -The first argument for your `evalFormula` call needs to be the contents of the cell (which you stored in `value`). However, the contents start with an `=` character to trigger the function, so you need to pass the substring of `value` starting at index `1`. +Il primo argomento della chiamata di `evalFormula` deve essere il contenuto della cella (che hai memorizzato in `value`). Tuttavia, il contenuto inizia con un carattere `=` per attivare la funzione, quindi è necessario passare la sotto-stringa di `value` a partire dall'indice `1`. # --hints-- -You should pass `value` as the first argument to your `evalFormula()` call. +Dovresti passare `value` come primo argomento alla chiamata `evalFormula()`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\/g\s*,\s*('|"|`)\1\s*\);?\s*if\s*\(\s*(!value\.includes\(\s*element\.id\s*\)\s*&&\s*(?:value\[0\]\s*===\s*('|"|`)=\3|value\.charAt\(0\)\s*===\s*('|"|`)=\4|value\.startsWith\(('|"|`)=\5\))|(?:value\[0\]\s*===\s*('|"|`)=\6|value\.charAt\(0\)\s*===\s*('|"|`)=\7|value\.startsWith\(('|"|`)=\8\))\s*\|\|\s*!value\.includes\(\s*element\.id\s*\))\s*\)\s*\{\s*element\.value\s*=\s*evalFormula\(\s*value/); ``` -You should call the `.slice()` method on the `value` argument. +Dovresti chiamare il metodo `.slice()` sull'argomento `value`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\/g\s*,\s*('|"|`)\1\s*\);?\s*if\s*\(\s*(!value\.includes\(\s*element\.id\s*\)\s*&&\s*(?:value\[0\]\s*===\s*('|"|`)=\3|value\.charAt\(0\)\s*===\s*('|"|`)=\4|value\.startsWith\(('|"|`)=\5\))|(?:value\[0\]\s*===\s*('|"|`)=\6|value\.charAt\(0\)\s*===\s*('|"|`)=\7|value\.startsWith\(('|"|`)=\8\))\s*\|\|\s*!value\.includes\(\s*element\.id\s*\))\s*\)\s*\{\s*element\.value\s*=\s*evalFormula\(\s*value\.slice\(/); ``` -You should pass the number `1` as the argument to your `.slice()` call. +Dovresti passare il numero `1` come argomento alla chiamata `.slice()`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\/g\s*,\s*('|"|`)\1\s*\);?\s*if\s*\(\s*(!value\.includes\(\s*element\.id\s*\)\s*&&\s*(?:value\[0\]\s*===\s*('|"|`)=\3|value\.charAt\(0\)\s*===\s*('|"|`)=\4|value\.startsWith\(('|"|`)=\5\))|(?:value\[0\]\s*===\s*('|"|`)=\6|value\.charAt\(0\)\s*===\s*('|"|`)=\7|value\.startsWith\(('|"|`)=\8\))\s*\|\|\s*!value\.includes\(\s*element\.id\s*\))\s*\)\s*\{\s*element\.value\s*=\s*evalFormula\(\s*value\.slice\(\s*1\s*\)\s*\);?/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4813c17b37d1e261a566.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4813c17b37d1e261a566.md index bfc7354c9b4..2a8fdb0688b 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4813c17b37d1e261a566.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4813c17b37d1e261a566.md @@ -7,23 +7,23 @@ dashedName: step-92 # --description-- -You can quickly get all cells from your page by getting the `#container` element by it's `id` and accessing the `children` property of the result. Pass that to your `evalFormula()` call as the second parameter. +Puoi ottenere rapidamente tutte le celle dalla pagina ottenendo l'elemento `#container` tramite il suo `id` e accedendo alla proprietà `children` del risultato. Passala alla chiamata `evalFormula()` come secondo parametro. # --hints-- -For the second parameter of your `evalFormula()` call, you should call the `.getElementById()` method of the `document` object. +Per il secondo parametro della chiamata `evalFormula()` dovresti chiamare il metodo `.getElementById()` dell'oggetto `document`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\/g\s*,\s*('|"|`)\1\s*\);?\s*if\s*\(\s*(!value\.includes\(\s*element\.id\s*\)\s*&&\s*(?:value\[0\]\s*===\s*('|"|`)=\3|value\.charAt\(0\)\s*===\s*('|"|`)=\4|value\.startsWith\(('|"|`)=\5\))|(?:value\[0\]\s*===\s*('|"|`)=\6|value\.charAt\(0\)\s*===\s*('|"|`)=\7|value\.startsWith\(('|"|`)=\8\))\s*\|\|\s*!value\.includes\(\s*element\.id\s*\))\s*\)\s*\{\s*element\.value\s*=\s*evalFormula\(\s*value\.slice\(\s*1\s*\)\s*,\s*document\.getElementById\(/); ``` -You should pass `container` as the argument to your `.getElementById()` call. +Dovresti passare `container` come argomento alla chiamata `.getElementById()`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\/g\s*,\s*('|"|`)\1\s*\);?\s*if\s*\(\s*(!value\.includes\(\s*element\.id\s*\)\s*&&\s*(?:value\[0\]\s*===\s*('|"|`)=\3|value\.charAt\(0\)\s*===\s*('|"|`)=\4|value\.startsWith\(('|"|`)=\5\))|(?:value\[0\]\s*===\s*('|"|`)=\6|value\.charAt\(0\)\s*===\s*('|"|`)=\7|value\.startsWith\(('|"|`)=\8\))\s*\|\|\s*!value\.includes\(\s*element\.id\s*\))\s*\)\s*\{\s*element\.value\s*=\s*evalFormula\(\s*value\.slice\(\s*1\s*\)\s*,\s*document\.getElementById\(\s*('|"|`)container\9\s*\)/); ``` -You should access the `children` property of the result of your `.getElementById()` call. +Dovresti accedere alla proprietà `children` del risultato della chiamata `.getElementById()`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\/g\s*,\s*('|"|`)\1\s*\);?\s*if\s*\(\s*(!value\.includes\(\s*element\.id\s*\)\s*&&\s*(?:value\[0\]\s*===\s*('|"|`)=\3|value\.charAt\(0\)\s*===\s*('|"|`)=\4|value\.startsWith\(('|"|`)=\5\))|(?:value\[0\]\s*===\s*('|"|`)=\6|value\.charAt\(0\)\s*===\s*('|"|`)=\7|value\.startsWith\(('|"|`)=\8\))\s*\|\|\s*!value\.includes\(\s*element\.id\s*\))\s*\)\s*\{\s*element\.value\s*=\s*evalFormula\(\s*value\.slice\(\s*1\s*\)\s*,\s*document\.getElementById\(\s*('|"|`)container\9\s*\)\.children\s*\);?/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d486aec20f7d2a581cc36.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d486aec20f7d2a581cc36.md index 42ac008ff41..abe236b4b3a 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d486aec20f7d2a581cc36.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d486aec20f7d2a581cc36.md @@ -7,11 +7,11 @@ dashedName: step-93 # --description-- -Unfortunately, that `children` property is returning a collection of elements, which is array-like but not an array. Wrap your second argument in `Array.from()` to convert it to an array. +Purtroppo, quella proprietà `children` sta restituendo una serie di elementi, che è simil-array ma non un array. Racchiudi il secondo argomento in `Array.from()` per convertirlo in un array. # --hints-- -You should wrap your `document.getElementById('container').children` in `Array.from()`. +Dovresti inserire `document.getElementById('container').children` in `Array.from()`. ```js assert.match(code, /const\s+update\s*=\s*\(?\s*event\s*\)?\s*=>\s*\{\s*const\s+element\s*=\s*event\.target;?\s*const\s+value\s*=\s*element\.value\.replace\(\s*\/\\s\/g\s*,\s*('|"|`)\1\s*\);?\s*if\s*\(\s*(!value\.includes\(\s*element\.id\s*\)\s*&&\s*(?:value\[0\]\s*===\s*('|"|`)=\3|value\.charAt\(0\)\s*===\s*('|"|`)=\4|value\.startsWith\(('|"|`)=\5\))|(?:value\[0\]\s*===\s*('|"|`)=\6|value\.charAt\(0\)\s*===\s*('|"|`)=\7|value\.startsWith\(('|"|`)=\8\))\s*\|\|\s*!value\.includes\(\s*element\.id\s*\))\s*\)\s*\{\s*element\.value\s*=\s*evalFormula\(\s*value\.slice\(\s*1\s*\)\s*,\s*Array\.from\(\s*document\.getElementById\(\s*('|"|`)container\9\s*\)\.children\s*\)\s*\);?/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d48b936802fd34c3f05af.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d48b936802fd34c3f05af.md index 255197e54a6..99ec2be488f 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d48b936802fd34c3f05af.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d48b936802fd34c3f05af.md @@ -7,49 +7,49 @@ dashedName: step-94 # --description-- -Your spreadsheet is now functional. However, you don't have support for very many formulas. +Il tuo foglio di calcolo ora funziona. Tuttavia, non hai il supporto per molte formule. -Add an `even` property to your `spreadsheetFunctions`. It should take a `nums` parameter, and return the result of filtering the `nums` array to only include even numbers. Use a reference to your `isEven` function to help. +Aggiungi una proprietà `even` a `spreadsheetFunctions`. Dovrebbe prendere un parametro `nums` e filtrare l'array `nums` per includere solo numeri pari, restituendo questo risultato. Utilizza un riferimento alla funzione `isEven` come aiuto. # --hints-- -Your `spreadsheetFunctions` object should have an `even` property. +L'oggetto `spreadsheetFunctions` dovrebbe avere una proprietà `even`. ```js assert.property(spreadsheetFunctions, "even"); ``` -Your `even` property should be a function. +La proprietà `even` dovrebbe essere una funzione. ```js assert.isFunction(spreadsheetFunctions.even); ``` -Your `even` function should take a `nums` parameter. +La funzione `even` dovrebbe avere un parametro `nums`. ```js assert.match(code, /even\s*:\s*\(?\s*nums\s*\)?\s*=>/) ``` -Your `even` function should use an implicit return. +La funzione `even` dovrebbe utilizzare un return implicito. ```js assert.notMatch(code, /even\s*:\s*\(?\s*nums\s*\)?\s*=>\s*\{/) ``` -Your `even` function should return the result of calling the `.filter()` method on `nums`. +La funzione `even` dovrebbe restituire il risultato della chiamata del metodo `.filter()` su `nums`. ```js assert.match(code, /even\s*:\s*\(?\s*nums\s*\)?\s*=>\s*nums\s*\.\s*filter/) ``` -You should pass a reference to your `isEven()` function as the callback for the `.filter()` method. +Dovresti passare un riferimento alla funzione `isEven()` come callback per il metodo `.filter()`. ```js assert.match(code, /even\s*:\s*\(?\s*nums\s*\)?\s*=>\s*nums\s*\.\s*filter\s*\(\s*isEven\s*\)/) ``` -Your `even` function should return an array of even numbers. +La funzione `even` dovrebbe restituire un array di numeri pari. ```js assert.deepEqual(spreadsheetFunctions.even([1, 2, 3, 4, 5, 6]), [2, 4, 6]); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d498c8ebc31d3f753b22e.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d498c8ebc31d3f753b22e.md index 0dd57f1224b..a6025c95531 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d498c8ebc31d3f753b22e.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d498c8ebc31d3f753b22e.md @@ -7,41 +7,41 @@ dashedName: step-95 # --description-- -Add a `firsttwo` property which takes a `nums` parameter and returns the first two elements of the `nums` array. Then add a `lasttwo` property which returns the last two elements of the `nums` array. +Aggiungi una proprietà `firsttwo` che prende un parametro `nums` e restituisce i primi due elementi dell'array `nums`. Quindi aggiungi una proprietà `lasttwo` che restituisce gli ultimi due elementi dell'array `nums`. # --hints-- -Your `spreadsheetFunctions` object should have a `firsttwo` property. +L'oggetto `spreadsheetFunctions` dovrebbe avere una proprietà `firsttwo`. ```js assert.property(spreadsheetFunctions, "firsttwo"); ``` -Your `firsttwo` property should be a function. +La proprietà `firsttwo` dovrebbe essere una funzione. ```js assert.isFunction(spreadsheetFunctions.firsttwo); ``` -Your `firsttwo` function should return the first two numbers of the array. +La funzione `firsttwo` dovrebbe restituire i primi due numeri dell'array. ```js assert.deepEqual(spreadsheetFunctions.firsttwo([1, 2, 3, 4, 5, 6]), [1, 2]); ``` -Your `spreadsheetFunctions` object should have a `lasttwo` property. +L'oggetto `spreadsheetFunctions` dovrebbe avere una proprietà `lasttwo`. ```js assert.property(spreadsheetFunctions, "lasttwo"); ``` -Your `lasttwo` property should be a function. +La proprietà `lasttwo` dovrebbe essere una funzione. ```js assert.isFunction(spreadsheetFunctions.lasttwo); ``` -Your `lasttwo` function should return the last two numbers of the array. +La funzione `lasttwo` dovrebbe restituire gli ultimi due numeri dell'array. ```js assert.deepEqual(spreadsheetFunctions.lasttwo([1, 2, 3, 4, 5, 6]), [5, 6]); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d49bfff9079d4b38df115.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d49bfff9079d4b38df115.md index 2a2788f4b10..6ea40aba84e 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d49bfff9079d4b38df115.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d49bfff9079d4b38df115.md @@ -7,47 +7,47 @@ dashedName: step-96 # --description-- -Add a `has2` property which returns whether the `nums` array has `2` in the values, and an `increment` property which returns `nums` with every value incremented by one. +Aggiungi una proprietà `has2` che restituisce se l'array `nums` ha `2` nei valori, e una proprietà `increment` che restituisce `nums` con ogni valore incrementato di uno. # --hints-- -Your `spreadsheetFunctions` object should have a `has2` property. +L'oggetto `spreadsheetFunctions` dovrebbe avere una proprietà `has2`. ```js assert.property(spreadsheetFunctions, "has2"); ``` -Your `has2` property should be a function. +La proprietà `has2` dovrebbe essere una funzione. ```js assert.isFunction(spreadsheetFunctions.has2); ``` -Your `has2` function should return `true` if the array has `2` in it. +La funzione `has2` dovrebbe restituire `true` se l'array ha `2` al suo interno. ```js assert.isTrue(spreadsheetFunctions.has2([1, 2, 3])); ``` -Your `has2` function should return `false` if the array does not have `2` in it. +La funzione `has2` dovrebbe restituire `false` se l'array non ha `2` al suo interno. ```js assert.isFalse(spreadsheetFunctions.has2([1, 3, 4])); ``` -Your `spreadsheetFunctions` object should have an `increment` property. +L'oggetto `spreadsheetFunctions` dovrebbe avere una proprietà `increment`. ```js assert.property(spreadsheetFunctions, "increment"); ``` -Your `increment` property should be a function. +La proprietà `increment` dovrebbe essere una funzione. ```js assert.isFunction(spreadsheetFunctions.increment); ``` -Your `increment` function should return an array of numbers incremented by one. +La funzione `increment` dovrebbe restituire un array di numeri incrementati di uno. ```js assert.deepEqual(spreadsheetFunctions.increment([1, 2, 3]), [2, 3, 4]); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4a07a8fb14d55cd70e09.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4a07a8fb14d55cd70e09.md index 12c4eb6bf15..9842de4bb1b 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4a07a8fb14d55cd70e09.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4a07a8fb14d55cd70e09.md @@ -7,38 +7,38 @@ dashedName: step-97 # --description-- -Arrays have a `.some()` method. Like the `.filter()` method, `.some()` accepts a callback function which should take an element of the array as the argument. The `.some()` method will return `true` if the callback function returns `true` for at least one element in the array. +Gli array hanno un metodo `.some()`. Come il metodo `.filter()`, `.some()` accetta una funzione callback che dovrebbe prendere un elemento dell'array come argomento. Il metodo `.some()` restituirà `true` se la funzione callback restituisce `true` per almeno un elemento nell'array. -Here is an example of a `.some()` method call to check if any element in the array is an uppercase letter. +Ecco un esempio di una chiamata del metodo `.some()` per verificare se un elemento dell'array è una lettera maiuscola. ```js const arr = ["A", "b", "C"]; arr.some(letter => letter === letter.toUpperCase()); ``` -Add a `someeven` property to your `spreadsheetFunctions` - use the `.some()` method to check if any element in the array is even. +Aggiungi una proprietà `someeven` a `spreadsheetFunctions` - usa il metodo `.some()` per verificare se un elemento dell'array è pari. # --hints-- -Your `spreadsheetFunctions` object should have a `someeven` property. +L'oggetto `spreadsheetFunctions` dovrebbe avere una proprietà `someeven`. ```js assert.property(spreadsheetFunctions, "someeven"); ``` -Your `someeven` property should be a function. +La proprietà `someeven` dovrebbe essere una funzione. ```js assert.isFunction(spreadsheetFunctions.someeven); ``` -Your `someeven` function should return `true` if some of the elements in the array are even. +La funzione `someeven` dovrebbe restituire `true` se alcuni degli elementi dell'array sono pari. ```js assert.isTrue(spreadsheetFunctions.someeven([1, 2, 3])); ``` -Your `someeven` function should return `false` if none of the elements in the array are even. +La funzione `someeven` dovrebbe restituire `false` se nessuno degli elementi dell'array è pari. ```js assert.isFalse(spreadsheetFunctions.someeven([1, 3, 5])); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4a5b32a1cad6165df286.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4a5b32a1cad6165df286.md index 7c43db10dd0..ea44a85803a 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4a5b32a1cad6165df286.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4a5b32a1cad6165df286.md @@ -7,30 +7,30 @@ dashedName: step-99 # --description-- -Add a `random` property which takes the first two numbers from an array and returns a random number between them. Use the `Math.random()` function to help. +Aggiungi una proprietà `random` che prende i primi due numeri da un array e restituisce un numero casuale tra di loro. Utilizza la funzione `Math.random()`. # --hints-- -Your `spreadsheetFunctions` object should have a `random` property. +L'oggetto `spreadsheetFunctions` dovrebbe avere una proprietà `random`. ```js assert.property(spreadsheetFunctions, "random"); ``` -Your `random` property should be a function. +La proprietà `random` dovrebbe essere una funzione. ```js assert.isFunction(spreadsheetFunctions.random); ``` -Your `random` function should return a random number between the first two numbers in the array. +La funzione `random` dovrebbe restituire un numero casuale tra i primi due numeri nell'array. ```js assert.isAtLeast(spreadsheetFunctions.random([1, 2, 3]), 1); assert.isAtMost(spreadsheetFunctions.random([1, 2, 3]), 2); ``` -Your `random` function should return a whole number (integer). +La funzione `random` dovrebbe restituire un numero intero. ```js const result = spreadsheetFunctions.random([1, 10]); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4a8dbc04c6d6bb0001f8.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4a8dbc04c6d6bb0001f8.md index 1123c7fe781..1a6a0607270 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4a8dbc04c6d6bb0001f8.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4a8dbc04c6d6bb0001f8.md @@ -7,23 +7,23 @@ dashedName: step-100 # --description-- -Add a `range` property which generates a range from `nums`. Remember that you have a `range` function you can reuse here. +Aggiungi una proprietà `range` che genera un intervallo da `nums`. Ricorda che hai una funzione `range` che puoi usare. # --hints-- -Your `spreadsheetFunctions` object should have a `range` property. +L'oggetto `spreadsheetFunctions` dovrebbe avere una proprietà `range`. ```js assert.property(spreadsheetFunctions, "range"); ``` -Your `range` property should be a function. +La proprietà `range` dovrebbe essere una funzione. ```js assert.isFunction(spreadsheetFunctions.range); ``` -Your `range` function should return an array of consecutive numbers from the first number in the argument to the second number in the argument. +La funzione `range` dovrebbe restituire un array di numeri consecutivi dal primo numero nell'argomento al secondo numero nell'argomento. ```js assert.deepEqual(spreadsheetFunctions.range([1, 5, 10]), [1, 2, 3, 4, 5]); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4ab9b3b4c5d74fdd2154.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4ab9b3b4c5d74fdd2154.md index d89f6df3612..92d6dae2ffc 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4ab9b3b4c5d74fdd2154.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4ab9b3b4c5d74fdd2154.md @@ -7,25 +7,25 @@ dashedName: step-101 # --description-- -The last function has a few approaches to implement, and you are free to choose whichever approach you would like. +L'ultima funzione può essere implementata con vari approcci e sei libero di scegliere quello che preferisci. -Add a `nodupes` property which returns `nums` with all duplicate values removed. For example, `[2, 1, 2, 5, 3, 2, 7]` should return `[2, 1, 5, 3, 7]`. +Aggiungi una proprietà `nodupes` che restituisce `nums` con tutti i valori duplicati rimossi. Ad esempio, `[2, 1, 2, 5, 3, 2, 7]` dovrebbe restituire `[2, 1, 5, 3, 7]`. # --hints-- -Your `spreadsheetFunctions` object should have a `nodupes` property. +L'oggetto `spreadsheetFunctions` dovrebbe avere una proprietà `nodupes`. ```js assert.property(spreadsheetFunctions, "nodupes"); ``` -Your `nodupes` property should be a function. +La proprietà `nodupes` dovrebbe essere una funzione. ```js assert.isFunction(spreadsheetFunctions.nodupes); ``` -Your `nodupes` function should remove all duplicate values from the array. +La funzione `nodupes` dovrebbe rimuovere tutti i valori duplicati dall'array. ```js assert.deepEqual(spreadsheetFunctions.nodupes([2, 1, 2, 5, 3, 2, 7]), [2, 1, 5, 3, 7]); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4b3d80ea98d824c8a4f9.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4b3d80ea98d824c8a4f9.md index edb35c09bd0..32888e0f5eb 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4b3d80ea98d824c8a4f9.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/646d4b3d80ea98d824c8a4f9.md @@ -7,25 +7,25 @@ dashedName: step-102 # --description-- -Finally, to handle potential edge cases, add an empty string property (you will need to use quotes) which is a function that takes a single argument and returns that argument. +Infine, per gestire potenziali casi limite, aggiungi una proprietà stringa vuota (dovrai usare le virgolette) che è una funzione che richiede un singolo argomento e lo restituisce. -With that, your spreadsheet project is now complete. You are welcome to experiment with adding support for even more functions. +E con questo, il progetto del foglio di calcolo adesso è completo. Sei invitato a sperimentare aggiungendo il supporto per altre funzioni. # --hints-- -Your `spreadsheetFunctions` object should have an empty string property. +L'oggetto `spreadsheetFunctions` dovrebbe avere una proprietà stringa vuota. ```js assert.property(spreadsheetFunctions, ""); ``` -Your empty string property should be a function. +La proprietà stringa vuota dovrebbe essere una funzione. ```js assert.isFunction(spreadsheetFunctions[""]); ``` -Your empty string property function should return the argument. +La funzione della proprietà stringa vuota dovrebbe restituire l'argomento. ```js assert.deepEqual(spreadsheetFunctions[""]([1,2,3]), [1,2,3]); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6491d38f5b09a021c4b5d5fe.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6491d38f5b09a021c4b5d5fe.md index ec55d6b9819..c48afc2bbbe 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6491d38f5b09a021c4b5d5fe.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/6491d38f5b09a021c4b5d5fe.md @@ -7,38 +7,38 @@ dashedName: step-98 # --description-- -Arrays have an `.every()` method. Like the `.some()` method, `.every()` accepts a callback function which should take an element of the array as the argument. The `.every()` method will return `true` if the callback function returns `true` for all elements in the array. +Gli array hanno un metodo `.every()`. Come il metodo `.some()`, `.every()` accetta una funzione callback che dovrebbe prendere un elemento dell'array come argomento. Il metodo `.every()` restituirà `true` se la funzione callback restituisce `true` per tutti gli elementi dell'array. -Here is an example of a `.every()` method call to check if all elements in the array are uppercase letters. +Ecco un esempio di una chiamata del metodo `.every()` per verificare se tutti gli elementi dell'array sono lettere maiuscole. ```js const arr = ["A", "b", "C"]; arr.every(letter => letter === letter.toUpperCase()); ``` -Add an `everyeven` property to your `spreadsheetFunctions` - use the `.every()` method to check if any element in the array is even. +Aggiungi una proprietà `everyeven` a `spreadsheetFunctions` - usa il metodo `.every()` per verificare se ogni elemento nell'array è pari. # --hints-- -Your `spreadsheetFunctions` object should have an `everyeven` property. +L'oggetto `spreadsheetFunctions` dovrebbe avere una proprietà `everyeven`. ```js assert.property(spreadsheetFunctions, "everyeven"); ``` -Your `everyeven` property should be a function. +La proprietà `everyeven` dovrebbe essere una funzione. ```js assert.isFunction(spreadsheetFunctions.everyeven); ``` -Your `everyeven` function should return `true` if every element in the array is even. +La funzione `everyeven` dovrebbe restituire `true` se tutti degli elementi dell'array sono pari. ```js assert.isTrue(spreadsheetFunctions.everyeven([2, 4, 6])); ``` -Your `everyeven` function should return `false` if some of the elements in the array are not even. +La funzione `everyeven` dovrebbe restituire `false` se alcuni degli elementi dell'array sono pari. ```js assert.isFalse(spreadsheetFunctions.everyeven([1, 2, 3])); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md index de4d949bd05..672d8b338ca 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md @@ -11,7 +11,7 @@ All'interno della funzione callback, aggiungi un `console.log` con il valore `e. Apri la console e fai una selezione dal menu a discesa dei giocatori. Dovresti vedere il valore selezionato nella console. -`e.target.value` rappresenta la proprietà value dell'elemento `playersDropdownList`. Nei prossimi step userai questo valore per mostrare le figurine dei giocatori in base al ruolo in cui giocano. +`e.target.value` rappresenta la proprietà `value` dell'elemento `playersDropdownList`. Nei prossimi step userai questo valore per mostrare le figurine dei giocatori in base al ruolo in cui giocano. # --hints-- diff --git a/curriculum/challenges/italian/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md b/curriculum/challenges/italian/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md index 4477438009e..78f31967220 100644 --- a/curriculum/challenges/italian/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md +++ b/curriculum/challenges/italian/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md @@ -15,16 +15,16 @@ Il sito web sarà composto da una pagina index principale che avrà dei link ad 1. La pagina di ricette dovrebbe includere un elemento `html` con degli elementi `head` e `body` come figli. 1. Dovresti avere un elemento `title` all'interno dell'elemento `head` con il testo `The Odin Recipes`. 1. Dovresti vedere un elemento `h1` con il testo `Creamy Chocolate Fudge`. -1. Dovresti vedere un'immagine con l'url `*placeholder-fcc-cdn*` con un testo `alt` adatto. +1. You should see a related image with an `alt` attribute. 1. Dovrebbe esserci un elemento `h2` con il testo `Description` sotto l'immagine. 1. Dovresti vedere un paio di paragrafi che descrivono la ricetta sotto `Description`. -1. Dovrebbe esserci un elemento `h2` con il testo `Ingredients` +1. There should be an `h2` element with the text `Ingredients`. 1. Sotto l'intestazione `Ingredients` dovrebbe esserci una lista non ordinata con gli ingredienti necessari per la ricetta. 1. Sotto l'elenco degli ingredienti aggiungi un'altra intestazione chiamata `Steps`. 1. Dovresti vedere una lista ordinata con un paio di passaggi necessari per completare la ricetta. -1. Sotto gli step dovrebbe esserci un elemento `h2` con il testo `More Recipes` +1. Under the steps there should be an `h2` element with the text `More Recipes`. 1. Dovresti vedere un paio di link ad altre ricette all'interno di una lista non ordinata che ha un paio di elementi di lista con elementi di ancoraggio al suo interno. -1. Questi elementi di ancoraggio dovrebbero avere un attributo `href` con il valore `#` +1. These anchor elements should have `href` attribute with the value set to `#`. # --hints-- @@ -56,12 +56,12 @@ Dovresti avere un elemento `h1` all'interno dell'elemento `body` che contiene il assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge'); ``` -Dovresti avere un'immagine con l'url `*placeholder-fcc-cdn*` con un attributo `alt` con un testo adatto. +You should have an image with an `alt` attribute. ```js const img = document.querySelectorAll('IMG')[0]; -assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg') +assert(img && img.alt !='' && img.src != '') ``` Dovresti avere un elemento `h2` con il testo `Description`. diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md new file mode 100644 index 00000000000..26dcaf81d51 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md @@ -0,0 +1,54 @@ +--- +id: 637f4e0e72c65bc8e73dfe1e +videoId: LGQuIIv2RVA +title: HTML Foundations Question A +challengeType: 15 +dashedName: html-foundations-question-a +--- + +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) + +## --text-- + +What are HTML tags? + +## --answers-- + +HTML tags tell the browser what content an element contains. + +--- + +HTML tags tell the browser when to load its content. + +--- + +HTML tags tell the browser what content the next element contains. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md new file mode 100644 index 00000000000..1fa04902849 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md @@ -0,0 +1,49 @@ +--- +id: 637f4e1672c65bc8e73dfe1f +title: HTML Foundations Question B +challengeType: 15 +dashedName: html-foundations-question-b +--- + +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `
`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --text-- + +What are the three parts of most HTML elements? + +## --answers-- + +An opening tag, self closing tag, and content. + +--- + +An opening tag, closing tag, and content. + +--- + +An opening tag, closing tag, and attribute. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md new file mode 100644 index 00000000000..79bd0197756 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md @@ -0,0 +1,54 @@ +--- +id: 637f4e1c72c65bc8e73dfe20 +title: HTML Foundations Question C +challengeType: 15 +dashedName: html-foundations-question-c +--- + +# --description-- + +To demonstrate an HTML boilerplate, you first need an HTML file to work with. + +Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`. + +You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files. + +To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file. + +It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems. + +## The DOCTYPE + +Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``. + +The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4: + +```html + +``` + +However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``. + +Open the `index.html` file created earlier in your text editor and add `` to the very first line. + +# --question-- +## --text-- + +What is the purpose of the `DOCTYPE` declaration? + +## --answers-- + +It tells the browser which version of HTML to use to render the document. + +--- + +It tells the browser that this document uses JavaScript. + +--- + +It tells the browser the title of the document. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md new file mode 100644 index 00000000000..d851163101c --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md @@ -0,0 +1,46 @@ +--- +id: 637f4e2872c65bc8e73dfe21 +title: HTML Foundations Question D +challengeType: 15 +dashedName: html-foundations-question-d +--- + +# --description-- + +After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it. + +This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document. + +Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so: + +```html + + + +``` + +## What is the lang attribute? +`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation. + +# --question-- + +## --text-- + +What is the `html` element? + +## --answers-- + +It is the root element in the document and tells the browser which version of HTML it should use. + +--- + +It is the root element in the document and all other elements should descend from it. + +--- + +It is the root element in the document and all other elements should come after it. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md new file mode 100644 index 00000000000..58e4fab1b96 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md @@ -0,0 +1,41 @@ +--- +id: 6374f208de18c50e48ba767b +title: HTML Foundations Question E +challengeType: 15 +dashedName: html-foundations-question-e +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --assignment-- + +Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. + +## --text-- + +Which of the following statements is true? + +## --answers-- + +CSS is used to create the basic structure of a webpage, and HTML is used to add style. + +--- + +HTML is used to create the basic structure of a webpage, and CSS is used to add style. + +--- + +HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. + + +## --video-solution-- + +2 + + diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md new file mode 100644 index 00000000000..80f5869cff5 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md @@ -0,0 +1,65 @@ +--- +id: 637f4e2f72c65bc8e73dfe22 +title: HTML Foundations Question F +challengeType: 15 +dashedName: html-foundations-question-f +--- + +# --description-- + +The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage. + +## The Charset Meta Element +You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: ``. + +Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser. + +## Title Element +Another element you should always include in the head of an HTML document is the `title` element: + +```html +
My First Webpage +``` + +The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. + +If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open. + +There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum. + +Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag: + + +```html + + + + + +My First Webpage + + +``` + +# --question-- + +## --text-- + +What is the purpose of the `head` element? + +## --answers-- + +The `head` element is used to display all elements that are displayed on the webpage. + +--- + +The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements. + +--- + +The `head` element is used to display the header content on top of the webpage. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md new file mode 100644 index 00000000000..16299d58648 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md @@ -0,0 +1,48 @@ +--- +id: 637f4e3672c65bc8e73dfe23 +videoId: V8UAEoOvqFg +title: HTML Foundations Question G +challengeType: 15 +dashedName: html-foundations-question-g +--- + +# --description-- + +The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. + +To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so: + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s brilliant Building your first web page video above. + +--- + +Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. + +--- + +Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML. + +## --text-- + +What is the purpose of the `body` element? + +## --answers-- + +This is where all important information about the webpage is displayed such as the `title` and `meta` tags. + +--- + +This is where you tell the browser how to render the webpage correctly. + +--- + +This is where all content will be displayed on the page such images, text, and links. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md new file mode 100644 index 00000000000..f99018d79de --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md @@ -0,0 +1,36 @@ +--- +id: 6376327e2724a688c04636e3 +title: HTML Foundations Question H +challengeType: 15 +dashedName: html-foundations-question-h +--- + +# --description-- + + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to add paragraphs of text on a webpage? + +## --answers-- + +CSS + +--- + +JavaScript + +--- + +HTML + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md new file mode 100644 index 00000000000..72ed091e603 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md @@ -0,0 +1,33 @@ +--- +id: 637633162724a688c04636e4 +title: HTML Foundations Question I +challengeType: 15 +dashedName: html-foundations-question-i +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to change the font and background color of a button? + +## --answers-- + +You should use CSS to change the background color and font of a button. + +--- + +You should use JavaScript to change the background color and font of a button. + +--- + +You should use HTML to change the background color and font of a button. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md new file mode 100644 index 00000000000..ebd30965da6 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md @@ -0,0 +1,34 @@ +--- +id: 637633672724a688c04636e5 +title: HTML Foundations Question J +challengeType: 15 +dashedName: html-foundations-question-j +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +What is the difference between HTML, CSS, and JavaScript? + +## --answers-- + +HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. + +--- + +CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. + +--- + +JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-a.md b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-a.md new file mode 100644 index 00000000000..b4d237448f3 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-a.md @@ -0,0 +1,66 @@ +--- +id: 637f704072c65bc8e73dfe36 +videoId: tsEQgGjSmkM +title: Links and Images Question A +challengeType: 15 +dashedName: links-and-images-question-a +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named `odin-links-and-images`. + +- Within that directory, create a new file named `index.html`. + +- Fill in the usual HTML boilerplate. + +- Finally, add the following `h1` to the `body`: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. + +Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. + +It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Links video above. + +## --text-- + +What HTML tag is used to create a link? + +## --answers-- + +`` + +--- + +`` + +--- + +`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-b.md b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-b.md
new file mode 100644
index 00000000000..a138268c406
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-b.md
@@ -0,0 +1,54 @@
+---
+id: 637f703572c65bc8e73dfe35
+title: Links and Images Question B
+challengeType: 15
+dashedName: links-and-images-question-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- finally, add the following `h1` to the `body`: `
Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- +## --text-- + +What is an attribute? +## --answers-- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. + +--- + +An HTML attribute is used to tell the browser what the element contains. + +--- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-c.md b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-c.md new file mode 100644 index 00000000000..8863b087456 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-c.md @@ -0,0 +1,55 @@ +--- +id: 637f703072c65bc8e73dfe34 +title: Links and Images Question C +challengeType: 15 +dashedName: links-and-images-question-c +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named `odin-links-and-images`. + +- Within that directory, create a new file named `index.html`. + +- Fill in the usual HTML boilerplate. + +- finally, add the following `h1` to the `body`: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --text-- + +What attribute tells links where to go to? + +## --answers-- + +`src` + +--- + +`href` + +--- + +`link` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-d.md b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-d.md new file mode 100644 index 00000000000..37eebffbabf --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-d.md @@ -0,0 +1,112 @@ +--- +id: 637f702872c65bc8e73dfe33 +videoId: ta3Oxx7Yqbo +title: Links and Images Question D +challengeType: 15 +dashedName: links-and-images-question-d +--- + +# --description-- + + +Generally, there are two kinds of links you will create: + +- Links to pages on other websites on the internet + +- Links to pages located on your own websites + + +## Absolute Links +Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. + +You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. + +`https://www.theodinproject.com/about` + +## Relative Links +Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. + +Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. + +Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: + +```html + + + + +Odin Links and Images + + + +About Page
+ + +``` + +Back in the `index` page, add the following anchor element to create a link to the `about` page: + +```html + +Homepage
+ click me + + About + +``` + +Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. + +This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. + +But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. + +Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. + +Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. + +To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. + +```html + +Homepage
+ About + +``` + +Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. + +In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. + +```html + +Homepage
+ About + +``` + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML File Structure video above. + +## --text-- + +What is the difference between an absolute and a relative link? + +## --answers-- + +An absolute link is a link to another page on the current website. A relative link is a link to another website. + +--- + +An absolute link is a link to another website. A relative link is a link another page on the current website. + +--- + +There is no difference between absolute and relative links. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-e.md b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-e.md new file mode 100644 index 00000000000..ae008078088 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-e.md @@ -0,0 +1,98 @@ +--- +id: 637f702372c65bc8e73dfe32 +videoId: 0xoztJCHpbQ +title: Links and Images Question E +challengeType: 15 +dashedName: links-and-images-question-e +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+``
+
+---
+
+``
+
+---
+
+`` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-f.md b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-f.md new file mode 100644 index 00000000000..e1af2d6a659 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-f.md @@ -0,0 +1,93 @@ +--- +id: 637f701c72c65bc8e73dfe31 +title: Links and Images Question F +challengeType: 15 +dashedName: links-and-images-question-f +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `
` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-g.md b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-g.md
new file mode 100644
index 00000000000..5bc84fa6c96
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+title: Links and Images Question G
+challengeType: 15
+dashedName: links-and-images-question-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-h.md b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-h.md
new file mode 100644
index 00000000000..71157081ae7
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-question-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+title: Links and Images Question H
+challengeType: 15
+dashedName: links-and-images-question-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Read about the four main image formats that can be used on the web.
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+TIFF, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-a.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-a.md
new file mode 100644
index 00000000000..8698b62aca8
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Question A
+challengeType: 15
+dashedName: working-with-text-question-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua.
+
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ nisi ut aliquip ex ea commodo consequat.
+
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `` tag. + +Changing our example from before to use paragraph elements fixes the issue: + + + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. + +## --text-- + +How do you create a paragraph in HTML? + +## --answers-- + +`
This is a paragraph
` + +--- + +`This is a paragraph
` + +--- + +`This is a paragraph` + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-b.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-b.md new file mode 100644 index 00000000000..17d3c900359 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-b.md @@ -0,0 +1,39 @@ +--- +id: 637f4e5f72c65bc8e73dfe28 +title: Working With Text Question B +challengeType: 15 +dashedName: working-with-text-question-b +--- + +# --description-- + +Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. + +There are 6 different levels of headings starting from `` to `
`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. + +Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `
` tag. + + + +Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. + +# --question-- +## --text-- + +How many different levels of headings are there and what is the difference between them? + +## --answers-- + +There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. + +--- + +There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. + +--- + +There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-c.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-c.md new file mode 100644 index 00000000000..6ccf0e06658 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-c.md @@ -0,0 +1,47 @@ +--- +id: 637f4e6672c65bc8e73dfe29 +videoId: gW6cBZLUk6M +title: Working With Text Question C +challengeType: 15 +dashedName: working-with-text-question-c +--- + +# --description-- + +The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. + +You can use `strong` on its own: + + + +But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: + + + +Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Bold and Italic Text Video above. + +## --text-- + +What element should you use to make text bold and important? + +## --answers-- + +`This is an important message` + +--- + +`
This is an important message
` + +--- + +`This is an important message` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-d.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-d.md new file mode 100644 index 00000000000..e686b2698e0 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-d.md @@ -0,0 +1,38 @@ +--- +id: 637f4e6e72c65bc8e73dfe2a +title: Working With Text Question D +challengeType: 15 +dashedName: working-with-text-question-d +--- + +# --description-- + +The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. + +To use `em` on its own: + + +Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: + + + +# --question-- +## --text-- + +What element should you use to make text italicized to add emphasis? + +## --answers-- + +`This is an italic message` + +--- + +`This is an italic message` + +--- + +`This is an italic message ` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-e.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-e.md new file mode 100644 index 00000000000..a0a7ba2fda9 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-e.md @@ -0,0 +1,65 @@ +--- +id: 637f4e7972c65bc8e73dfe2b +title: Working With Text Question E +challengeType: 15 +dashedName: working-with-text-question-e +--- + +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the `body` element is the parent and the `p` is the child: + +```html + + + + +Lorem ipsum dolor sit amet.
+ + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: + +```html + + + + +Lorem ipsum dolor sit amet.
+Ut enim ad minim veniam.
+ + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship do two elements have if they are at the same level of nesting? + +## --answers-- + +The elements are each other's parents. + +--- + +The elements are each other's children. + +--- + +The elements are siblings. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-f.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-f.md new file mode 100644 index 00000000000..7d440cfab25 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-f.md @@ -0,0 +1,66 @@ +--- +id: 637f4e8072c65bc8e73dfe2c +title: Working With Text Question F +challengeType: 15 +dashedName: working-with-text-question-f +--- + +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the body element is the parent and the paragraph is the child: + +```html + + + + +Lorem ipsum dolor sit amet.
+ + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: + +```html + + + + +Lorem ipsum dolor sit amet.
+Ut enim ad minim veniam.
+ + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship does an element have with any nested element within it? + +## --answers-- + +The element within the other element is called the parent element. + +--- + +The element within the other element is called the child element. + +--- + +The element within the other element is called the sibling element. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-g.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-g.md new file mode 100644 index 00000000000..5f5d141fa46 --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-g.md @@ -0,0 +1,48 @@ +--- +id: 637f4e8772c65bc8e73dfe2d +title: Working With Text Question G +challengeType: 15 +dashedName: working-with-text-question-g +--- + +# --description-- + +HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. + +Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: + +```html +View the html to see the hidden comments
+ + + +Some paragraph text
+ + +``` + +# --question-- + +## --assignment-- + +To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. + +## --text-- + +How do you create HTML comments? + +## --answers-- + +`/* This is an HTML comment */` + +--- + +`` + +--- + +`<-- This is an HTML comment --!>` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-h.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-h.md new file mode 100644 index 00000000000..c20b4de097a --- /dev/null +++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-question-h.md @@ -0,0 +1,65 @@ +--- +id: 637f4e3e72c65bc8e73dfe24 +videoId: kcHKFZBVtf4 +title: Working with Text Question H +challengeType: 15 +dashedName: working-with-text-question-h +--- + +# --description-- + +If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. + +Unordered lists are created using the `- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-i.md b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-i.md
new file mode 100644
index 00000000000..05765087c87
--- /dev/null
+++ b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-i.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+title: Working with Text Question I
+challengeType: 15
+dashedName: working-with-text-question-i
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
: @cluster0-jvwxi.mongodb.net/?retryWrites=true&w=majority`) to the environment variable `MONGO_URI`. This is used in the `connection.js` file. +You are not loading an actual user object since the database is not set up. Connect to the database once, when you start the server, and keep a persistent connection for the full life-cycle of the app. To do this, add your database's connection string (for example: `mongodb+srv:// : @cluster0-jvwxi.mongodb.net/?retryWrites=true&w=majority`) to the environment variable `MONGO_URI`. Dies wird in der `connection.js`-Datei verwendet. *If you are having issues setting up a free database on MongoDB Atlas, check out this tutorial.* diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md index f0f30aaeb1c..70b58ca6a91 100644 --- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md @@ -14,7 +14,7 @@ To set up the GitHub strategy, you have to tell Passport to use an instantiated The current strategy you are implementing authenticates users using a GitHub account and OAuth 2.0 tokens. The client ID and secret obtained when creating an application are supplied as options when creating the strategy. The strategy also requires a `verify` callback, which receives the access token and optional refresh token, as well as `profile` which contains the authenticated user's GitHub profile. The `verify` callback must call `cb` providing a user to complete authentication. -Here's how your new strategy should look at this point: +So sollte deine neue Strategie zu diesem Zeitpunkt aussehen: ```js passport.use(new GitHubStrategy({ @@ -50,7 +50,7 @@ async (getUserInput) => { } ``` -passport-github should be required. +passport-github sollte erforderlich sein. ```js async (getUserInput) => { diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md index d7908beb67d..80d3b632831 100644 --- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md @@ -47,7 +47,7 @@ Reiche deine Seite ein, wenn du davon ausgehst, alles richtig gemacht zu haben. # --hints-- -GitHub strategy setup should be complete. +Die Einrichtung der GitHub-Strategie sollte abgeschlossen sein. ```js async (getUserInput) => { diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md index 5477556d5f4..0e1b68a53af 100644 --- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md @@ -20,7 +20,7 @@ app.route('/logout') }); ``` -You may have noticed that you are not handling missing pages (404). Der übliche Weg, dies in Node zu handhaben, ist mithilfe folgender Middleware. Füge dies nach all deinen anderen Routen ein: +Du hast vielleicht bemerkt, dass du fehlende Seiten (404) nicht behandelst. Der übliche Weg, dies in Node zu handhaben, ist mithilfe folgender Middleware. Füge dies nach all deinen anderen Routen ein: ```js app.use((req, res, next) => { diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md index 2b88d484697..2ccf94c48da 100644 --- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md @@ -18,7 +18,7 @@ The logic of the registration route should be as follows: Die Logik von Schritt 1 sollte wie folgt lauten: -1. Query database with `findOne` +1. Frage die Datenbank mit `findOne` ab 2. Wenn ein Fehler auftritt, rufe `next` mit dem Fehler auf 3. If a user is returned, redirect back to home 4. Wird der Nutzer nicht gefunden und tritt kein Fehler auf, so füge den Nutzernamen sowie das Passwort der Datenbank mithilfe von `insertOne` hinzu. Tritt auch hier kein Fehler auf, so rufe `next` auf, um zu Schritt 2 überzugehen – der Authentifizierung des neuen Nutzers. Die Logik hierfür hast du bereits in deiner `POST /login`-Route geschrieben. @@ -177,7 +177,7 @@ Logout sollte funktionieren. ); ``` -Profile should no longer work after logout. +Das Profil sollte nach dem Logout nicht mehr funktionieren. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md index 153d568fb7f..5f2c4bf4a26 100644 --- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md @@ -14,11 +14,11 @@ Bei der Arbeit an diesen Aufgaben wirst du deinen Code mithilfe folgender Method - Use our Replit starter project to complete these challenges. - Verwende einen Site-Builder deiner Wahl, um das Projekt abzuschließen. Achte darauf, alle Dateien von unserem GitHub-Repo zu integrieren. -If you use Replit, follow these steps to set up the project: +Wenn du Replit verwendest, folge diesen Schritten, um das Projekt einzurichten: -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- Beginne mit dem Importieren des Projekts in Replit. +- Daraufhin wird ein `.replit`-Fenster angezeigt. +- Wähle `Use run command` und klicke auf die `Done`-Schaltfläche. When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md index 04e465dc866..9f6476375ae 100644 --- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md @@ -8,7 +8,7 @@ dashedName: set-up-the-environment # --description-- -The following challenges will make use of the `chat.pug` file. So, in your `routes.js` file, add a GET route pointing to `/chat` which makes use of `ensureAuthenticated`, and renders `chat.pug`, with `{ user: req.user }` passed as an argument to the response. Now, alter your existing `/auth/github/callback` route to set the `req.session.user_id = req.user.id`, and redirect to `/chat`. +Die folgenden Aufgaben nutzen die `chat.pug`-Datei. So, in your `routes.js` file, add a GET route pointing to `/chat` which makes use of `ensureAuthenticated`, and renders `chat.pug`, with `{ user: req.user }` passed as an argument to the response. Now, alter your existing `/auth/github/callback` route to set the `req.session.user_id = req.user.id`, and redirect to `/chat`. `socket.io@~2.3.0` has already been added as a dependency, so require/instantiate it in your server as follows with `http` (comes built-in with Nodejs): diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md index 609be3f11b1..30ea290a282 100644 --- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md @@ -27,7 +27,7 @@ body p Get on it! ``` -The above yields the following HTML: +Daraus ergibt sich der folgende HTML-Code: ```html @@ -40,7 +40,7 @@ The above yields the following HTML: ``` -Your `index.pug` file included in your project, uses the variables `title` and `message`. +Die in deinem Projekt enthaltene `index.pug`-Datei verwendet die Variablen `title` und `message`. Pass those from your server to the Pug file by adding an object as a second argument to your `res.render` call with the variables and their values. Give the `title` a value of `Hello` and `message` a value of `Please log in`. diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md index 548cb3c5258..bc3696f3106 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md @@ -19,16 +19,16 @@ Within `tests/2_functional-tests.js`, in the `'Submit the surname "Vespucci" in And within the `pressButton` callback: -1. Assert that status is OK `200` -2. Assert that the text inside the element `span#name` is `'Amerigo'` -3. Assert that the text inside the element `span#surname` is `'Vespucci'` -4. Assert that the element(s) `span#dates` exist and their count is `1` +1. Bestätigen, dass der Status `200` OK ist +2. Prüfe, ob der Text innerhalb des Elements `span#name` `'Amerigo'` ist +3. Prüfe, ob der Text innerhalb des Elements `span#surname` `'Vespucci'` ist +4. Überprüfe, ob das/die Element(e) `span#dates` existieren und deren Zahl `1` ist -Do not forget to remove the `assert.fail()` call. +Vergiss nicht, den `assert.fail()`-Aufruf zu entfernen. # --hints-- -All tests should pass. +Alle Tests sollten bestanden werden. ```js (getUserInput) => @@ -56,7 +56,7 @@ You should assert that the headless browser request succeeded. ); ``` -You should assert that the text inside the element `span#name` is `'Amerigo'`. +Prüfe, ob der Text innerhalb des Elements `span#name` `'Amerigo'` ist. ```js (getUserInput) => @@ -72,7 +72,7 @@ You should assert that the text inside the element `span#name` is `'Amerigo'`. ); ``` -You should assert that the text inside the element `span#surname` is `'Vespucci'`. +Prüfe, ob der Text innerhalb des Elements `span#surname` `'Vespucci'` ist. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md index 6257a4c6f20..de2557ff88f 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md @@ -47,7 +47,7 @@ suiteSetup(function(done) { # --hints-- -All tests should pass. +Alle Tests sollten bestanden werden. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md index 0a7bd766277..ab9722c39d1 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md @@ -18,15 +18,15 @@ assert.isTrue('true', 'This will NOT pass with the string value "true"'); assert.isTrue(1, 'This will NOT pass with the number value 1'); ``` -`isFalse()` and `isNotFalse()` also exist, and behave similarly to their true counterparts except they look for the boolean value of `false`. +`isFalse()` und `isNotFalse()` existiert ebenfalls und verhalten sich ähnlich zu ihren wahren Gegenstücken, außer, dass sie nach dem booleschen Wert `false` suchen. # --instructions-- -Within `tests/1_unit-tests.js` under the test labelled `#4` in the `Basic Assertions` suite, change each `assert` to either `assert.isTrue` or `assert.isNotTrue` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. +Within `tests/1_unit-tests.js` under the test labelled `#4` in the `Basic Assertions` suite, change each `assert` to either `assert.isTrue` or `assert.isNotTrue` to make the test pass (should evaluate to `true`). Die an die Asserts übergebenen Argumente dürfen nicht verändert werden. # --hints-- -All tests should pass. +Alle Tests sollten bestanden werden. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md index 15c684e7ea1..848dbe4266e 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md @@ -18,7 +18,7 @@ Within `tests/1_unit-tests.js` under the test labelled `#14` in the `Strings` su # --hints-- -All tests should pass. +Alle Tests sollten bestanden werden. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md index 3cb9f4b7589..1031dee5bc8 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md @@ -24,7 +24,7 @@ Wählen den Minimalbereich (3. Parameter) aus, damit der Test immer bestanden wi # --hints-- -All tests should pass. +Alle Tests sollten bestanden werden. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md index 69f77eda645..7e12aec6dab 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md @@ -1,6 +1,6 @@ --- id: 587d824d367417b2b2512c52 -title: Test if a Value is a String +title: Teste, ob ein Wert ein String ist challengeType: 2 forumTopicId: 301599 dashedName: test-if-a-value-is-a-string @@ -10,7 +10,7 @@ dashedName: test-if-a-value-is-a-string As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. -`isString` or `isNotString` asserts that the actual value is a string. +`isString` oder `isNotString` gibt an, ob der eigentliche Wert ein String ist. # --instructions-- @@ -18,7 +18,7 @@ Within `tests/1_unit-tests.js` under the test labelled `#13` in the `Strings` su # --hints-- -All tests should pass. +Alle Tests sollten bestanden werden. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md index f08730dc01b..4ff6ebae89e 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md @@ -16,7 +16,7 @@ As a reminder, this project is being built upon the following starter project on # --hints-- -All tests should pass. +Alle Tests sollten erfolgreich sein. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md index af02792b81a..696c5dc866e 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md @@ -14,11 +14,11 @@ As a reminder, this project is being built upon the following starter project on # --instructions-- -Within `tests/1_unit-tests.js` under the test labelled `#17` in the `Objects` suite, change each `assert` to either `assert.typeOf` or `assert.notTypeOf` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. +Within `tests/1_unit-tests.js` under the test labelled `#17` in the `Objects` suite, change each `assert` to either `assert.typeOf` or `assert.notTypeOf` to make the test pass (should evaluate to `true`). Die an die Asserts übergebenen Argumente dürfen nicht verändert werden. # --hints-- -All tests should pass. +Alle Tests sollten bestanden werden. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-variable-or-function-is-defined.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-variable-or-function-is-defined.md index 903f48174f8..983b38adabd 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-variable-or-function-is-defined.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-variable-or-function-is-defined.md @@ -12,11 +12,11 @@ As a reminder, this project is being built upon the following starter project on # --instructions-- -Within `tests/1_unit-tests.js` under the test labelled `#2` in the `Basic Assertions` suite, change each `assert` to either `assert.isDefined()` or `assert.isUndefined()` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. +Within `tests/1_unit-tests.js` under the test labelled `#2` in the `Basic Assertions` suite, change each `assert` to either `assert.isDefined()` or `assert.isUndefined()` to make the test pass (should evaluate to `true`). Die an die Asserts übergebenen Argumente dürfen nicht verändert werden. # --hints-- -All tests should pass. +Alle Tests sollten bestanden werden. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-array-contains-an-item.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-array-contains-an-item.md index 3210ef60838..8841ea492d2 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-array-contains-an-item.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-array-contains-an-item.md @@ -1,6 +1,6 @@ --- id: 587d824d367417b2b2512c51 -title: Test if an Array Contains an Item +title: Teste, ob ein Array ein Element enthält challengeType: 2 forumTopicId: 301603 dashedName: test-if-an-array-contains-an-item diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md index 660052d8b8a..38878c01c42 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md @@ -32,7 +32,7 @@ All tests should pass. ); ``` -You should choose the correct method for the first assertion - `instanceOf` vs. `notInstanceOf`. +Du solltest die richtige Methode für die erste Behauptung wählen - `instanceOf` vs. `notInstanceOf`. ```js (getUserInput) => @@ -68,7 +68,7 @@ Du solltest die richtige Methode für die zweite Behauptung wählen - `instanceO ); ``` -You should choose the correct method for the third assertion - `instanceOf` vs. `notInstanceOf`. +Du solltest die richtige Methode für die dritte Behauptung wählen - `instanceOf` vs. `notInstanceOf`. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md index 82210167b91..a5849ec2233 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md @@ -16,7 +16,7 @@ Within `tests/1_unit-tests.js` under the test labelled `#9` in the `Comparisons` # --hints-- -All tests should pass. +Alle Tests sollten bestanden werden. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md index 44494833b5e..44c850096c5 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md @@ -10,7 +10,7 @@ dashedName: use-regular-expressions-to-test-a-string As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. -`match()` asserts that the actual value matches the second argument regular expression. +`match()` gibt an, dass der tatsächliche Wert mit dem zweiten Argument übereinstimmt. # --instructions-- @@ -18,7 +18,7 @@ Within `tests/1_unit-tests.js` under the test labelled `#15` in the `Strings` su # --hints-- -All tests should pass. +Alle Tests sollten bestanden werden. ```js (getUserInput) => @@ -50,7 +50,7 @@ Du solltest die richtige Methode für die erste Behauptung wählen - `match` vs. ); ``` -You should choose the correct method for the second assertion - `match` vs. `notMatch`. +Du solltest die richtige Methode für die zweite Assertion auswählen - `match` vs. `notMatch`. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-triple-equals-to-assert-strict-equality.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-triple-equals-to-assert-strict-equality.md index 80913e95fbe..dbe70ad98c0 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-triple-equals-to-assert-strict-equality.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-triple-equals-to-assert-strict-equality.md @@ -18,7 +18,7 @@ Within `tests/1_unit-tests.js` under the test labelled `#6` in the `Equality` su # --hints-- -All tests should pass. +Alle Tests sollten bestanden werden. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md index 3172d7f2740..f3f841907a7 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md @@ -14,10 +14,10 @@ Build a full stack JavaScript app that is functionally similar to this: our Replit starter project to complete your project. - Verwende einen Site-Builder deiner Wahl, um das Projekt abzuschließen. Achte darauf, alle Dateien von unserem GitHub-Repo zu integrieren. -If you use Replit, follow these steps to set up the project: +Wenn du Replit verwendest, folge diesen Schritten, um das Projekt einzurichten: - Start by importing the project on Replit. -- Next, you will see a `.replit` window. +- Daraufhin wird ein `.replit`-Fenster angezeigt. - Select `Use run command` and click the `Done` button. When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field. @@ -30,15 +30,15 @@ When you are done, make sure a working demo of your project is hosted somewhere - To run the tests uncomment `NODE_ENV=test` in your `.env` file - To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" -Write the following tests in `tests/1_unit-tests.js`: +Schreibe die folgenden Tests in `tests/1_unit-tests.js`: -- `convertHandler` should correctly read a whole number input. -- `convertHandler` should correctly read a decimal number input. +- `convertHandler` sollte eine ganzzahlige Eingabe korrekt lesen. +- `convertHandler` sollte die Eingabe einer Dezimalzahl korrekt lesen. - `convertHandler` should correctly read a fractional input. - `convertHandler` should correctly read a fractional input with a decimal. - `convertHandler` should correctly return an error on a double-fraction (i.e. `3/2/3`). - `convertHandler` should correctly default to a numerical input of `1` when no numerical input is provided. -- `convertHandler` should correctly read each valid input unit. +- `convertHandler` sollte jede gültige Eingabeeinheit korrekt lesen. - `convertHandler` should correctly return an error for an invalid input unit. - `convertHandler` should return the correct return unit for each valid input unit. - `convertHandler` should correctly return the spelled-out string unit for each valid input unit. @@ -49,7 +49,7 @@ Write the following tests in `tests/1_unit-tests.js`: - `convertHandler` should correctly convert `lbs` to `kg`. - `convertHandler` should correctly convert `kg` to `lbs`. -Write the following tests in `tests/2_functional-tests.js`: +Schreibe die folgenden Tests in `tests/2_functional-tests.js`: - Convert a valid input such as `10L`: `GET` request to `/api/convert`. - Convert an invalid input such as `32g`: `GET` request to `/api/convert`. diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/personal-library.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/personal-library.md index b77dfb53945..45d69e6c23c 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/personal-library.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/personal-library.md @@ -152,7 +152,7 @@ async (getUserInput) => { }; ``` -You can send a DELETE request to `/api/books/{_id}` to delete a book from the collection. The returned response will be the string `delete successful` if successful. If no book is found, return the string `no book exists`. +You can send a DELETE request to `/api/books/{_id}` to delete a book from the collection. Bei Erfolg, wird die zurückgegebene Antwort der String `delete successful` sein. If no book is found, return the string `no book exists`. ```js async (getUserInput) => { diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/sudoku-solver.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/sudoku-solver.md index 67ff56d5841..bc676b7819e 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/sudoku-solver.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/sudoku-solver.md @@ -17,8 +17,8 @@ Build a full stack JavaScript app that is functionally similar to this: { diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md index 7783f642892..3a54e9ca43e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -19,7 +19,7 @@ img { In this example, `img` elements will have a minimum width of `250px`. And as the viewport grows, the image will grow accordingly to be 25 percent of the viewport width. -Scale the image using its `id` as a selector, and setting the `width` to be the maximum of `100px` or `18vw`. +Skaliere das Bild, indem du seine `id` als Selektor verwendest und die `width` auf das Maximale von `100px` oder `18vw` setzt. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md index d20c9547123..5d5ed9dbd65 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md @@ -15,7 +15,7 @@ ul { } ``` -Remove the default styling for the `.answers-list` items by settings its style to `none`, and remove the unordered list padding. +Remove the default styling for the `.answers-list` items by setting its style to `none`, and remove the unordered list padding. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md index d57d9cc22f6..5e54f539839 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md @@ -9,7 +9,7 @@ dashedName: step-45 Wenn du die Breite der Seitenvorschau verkleinerst, wirst du feststellen, dass ein Teil des Textes auf der linken Seite in die nächste Zeile übergeht. Das liegt daran, dass die Breite der `p`-Elemente auf der linken Seite nur `50%` des Platzes einnehmen kann. -Since you know the prices on the right have significantly fewer characters, change the `flavor` class `width` value to be `75%` and the `price` class `width` value to be `25%`. +Da du weißt, dass die Preise auf der rechten Seite deutlich weniger Zeichen haben, ändere den `width`-Wert der `flavor`-Klasse auf `75%` und den `width`-Wert der `price`-Klasse auf `25%`. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md index eaaf3e0780a..9513d737249 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md @@ -7,7 +7,7 @@ dashedName: step-28 # --description-- -Erstelle einen neuen `25%`-Selektor zwischen deinen `0%`- und `50%`-Selektoren. Give this new selector the `background-color` property set to `yellow`. +Erstelle einen neuen `25%`-Selektor zwischen deinen `0%`- und `50%`-Selektoren. Weise diesem neuen Selektor die `background-color`-Eigenschaft mit dem Wert `yellow` zu. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md index 51d82b52b98..c2476cc6dce 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md @@ -7,7 +7,7 @@ dashedName: step-2 # --description-- -Nest a `head` element within the `html` element. Füge nach dem `head`-Element ein `body`-Element hinzu. +Bette innerhalb des `html`-Elements ein `head`-Element ein. Füge nach dem `head`-Element ein `body`-Element hinzu. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md index b7499520daa..67e05bc71b9 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md @@ -9,7 +9,7 @@ dashedName: step-4 To tell browsers how to encode characters on your page, set the `charset` to `utf-8`. `utf-8` is a universal character set that includes almost every character from all human languages. -Inside the `head` element, nest a `meta` element with the attribute `charset` set to `utf-8`. Remember that `meta` elements are self-closing, and do not need a closing tag. +Bette innerhalb des `head`-Elements ein `meta`-Element mit dem Attribut `charset` mit `utf-8` als Wert ein. Remember that `meta` elements are self-closing, and do not need a closing tag. # --hints-- @@ -20,13 +20,13 @@ const meta = document.querySelectorAll('meta'); assert(meta?.length === 1); ``` -Your `meta` element should be a self-closing element. +Dein `meta`-Element sollte ein selbstschließendes Element sein. ```js assert(code.match(/<\/meta>/i) === null); ``` -Your `meta` element should have a `charset` attribute set to `utf-8`. +Dein `meta`-Element sollte ein `charset`-Attribut auf `utf-8` gesetzt haben. ```js const meta = [...document.querySelectorAll('meta')]; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md index 5cc4b3994ad..a902819fc2b 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md @@ -13,7 +13,7 @@ Um den Markierungen verschiedene Farben zu geben, musst du jeder Markierung eine ``` -If you add multiple classes to an HTML element, the styles of the first classes you list may be overridden by later classes. +Wenn du einem HTML-Element mehrere Klassen hinzufügst, können die Stile der ersten Klassen, die du aufzählst, von späteren Klassen überschrieben werden. Füge zunächst die Klasse `one` zum ersten `div`-Markierungselement hinzu. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md index 80ad1c43757..4090d4a7a3b 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md @@ -11,11 +11,11 @@ Es gibt zwei Hauptfarbenmodelle: Das additive RGB (Rot, Grün, Blau) In diesem Projekt wirst du mit dem RGB-Modell arbeiten. Das bedeutet, dass die Farben als Schwarz beginnen und sich bei der Zugabe verschiedener Rot-, Grün- und Blauanteile verändern. Eine einfache Möglichkeit, dies zu sehen, ist die `rgb`-CSS-Funktion. -Create a new CSS rule that targets the class `container` and set its `background-color` to black with `rgb(0, 0, 0)`. +Erstelle eine neue CSS-Regel, die die Klasse `container` auswählt, und setze seine `background-color` mit `rgb(0, 0, 0)` auf schwarz. # --hints-- -You should use a class selector to target the class `container`. +Du solltest einen Klassen-Selektor verwenden, um die Klasse `container` auszuwählen. ```js assert(new __helpers.CSSHelp(document).getStyle('.container')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md index 14f50e0db73..0ad37703586 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md @@ -7,25 +7,25 @@ dashedName: step-35 # --description-- -Now that you've gone through all the primary, secondary, and tertiary colors on a color wheel, it'll be easier to understand other color theory concepts and how they impact design. +Nun, da du alle primären, sekundären und tertiären Farben auf einem Farbrad durchgegangen bist, wird es einfacher sein, andere Farbtheoriekonzepte und deren Auswirkungen auf das Design zu verstehen. -First, in the CSS rules `.one`, `.two`, and `.three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black. Remember that the `rgb` function uses the additive color model, where colors start as black and change as the values of red, green, and blue increase. +Passe zuerst in den CSS-Regeln `.one`, `.two` und `.three` die Werte in der `rgb`-Funktion an, so dass die `background-color` jedes Elements auf reines Schwarz gesetzt ist. Denke daran, dass die `rgb`-Funktion das additive Farbmodell verwendet, in dem Farben als Schwarz beginnen und sich ändern, wenn die Werte von Rot, Grün, und Blau steigen. # --hints-- -Your `.one` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. +Deine `.one`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgb(0, 0, 0)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)'); ``` -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. +Deine `.two`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgb(0, 0, 0)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)'); ``` -Your `.three` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. +Deine `.three`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgb(0, 0, 0)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 0)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md index e587e1dcebe..50d938d0655 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md @@ -17,7 +17,7 @@ Dein Code sollte keinen `.one`-Klassenselektor haben. assert(!new __helpers.CSSHelp(document).getStyle('.one')); ``` -You should use a class selector to target the class `red`. +Du solltest einen Klassen-Selektor verwenden, um die Klasse `red` auszuwählen. ```js assert(new __helpers.CSSHelp(document).getStyle('.red')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md index a35e34889a2..8a1306794cb 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md @@ -11,7 +11,7 @@ Update the CSS class selector `.two` so it targets the new `green` class. And up # --hints-- -Your code should no longer have a `.two` class selector. +Dein Code sollte nicht länger einen `.two`-Klassen-Selektor haben. ```js assert(!new __helpers.CSSHelp(document).getStyle('.two')); @@ -23,13 +23,13 @@ You should use a class selector to target the class `green`. assert(new __helpers.CSSHelp(document).getStyle('.green')); ``` -Your `.green` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. +Deine `.green`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgb(0, 0, 0)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 0, 0)'); ``` -Your code should no longer have a `.three` class selector. +Dein Code sollte nicht länger einen `.three`-Klassen-Selektor haben. ```js assert(!new __helpers.CSSHelp(document).getStyle('.three')); @@ -41,7 +41,7 @@ You should use a class selector to target the class `blue`. assert(new __helpers.CSSHelp(document).getStyle('.blue')); ``` -Your `.blue` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. +Deine `.blue`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgb(0, 0, 0)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 0)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md index baa5d4247b2..27963fe2b62 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md @@ -9,7 +9,7 @@ dashedName: step-86 Das Letzte, was du tun wirst, ist, jeder Markierung einen leichten Schatten hinzuzufügen, um sie noch realistischer erscheinen zu lassen. -The `box-shadow` property lets you apply one or more shadows around an element. Hier ist die grundlegende Syntax: +Mit der Eigenschaft `box-shadow` kannst du einen oder mehrere Schatten um ein Element herum legen. Hier ist die grundlegende Syntax: ```css box-shadow: offsetX offsetY color; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md index 30c7264efff..afb85a58766 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md @@ -23,7 +23,7 @@ if (backMountain?.transform) { } ``` -You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.back-mountain` ein `transform` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain'); @@ -41,7 +41,7 @@ Du solltest `.back-mountain` eine `left`-Eigenschaft geben. assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left); ``` -You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.back-mountain` eine `left`-Eigenschaft von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px'); @@ -53,7 +53,7 @@ Du solltest `.back-mountain` eine `top`-Eigenschaft geben. assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top); ``` -You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.back-mountain` eine `top`-Eigenschaft von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md index ee95d0f91fc..55e2c964bc4 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md @@ -17,7 +17,7 @@ Du solltest `.penguin-head` eine `top`-Eigenschaft geben. assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top); ``` -You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.penguin-head` eine `top`-Eigenschaft von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%'); @@ -29,7 +29,7 @@ Du solltest `.penguin-head` eine `left`-Eigenschaft geben. assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left); ``` -You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.penguin-head` eine `left`-Eigenschaft von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md index 1a69b893b0a..595e7f7b345 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md @@ -7,7 +7,7 @@ dashedName: step-49 # --description-- -Target the `.face` element with the `left` class, and position it `5%` left of its parent. +Wähle das `.face`-Element mit der `left`-Klasse aus und positioniere es `5%` links neben seinem Elternelement. # --hints-- @@ -23,7 +23,7 @@ Du solltest `.face.left` eine `left`-Eigenschaft geben. assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left); ``` -You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.face.left` eine `left` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md index d24edc8dbc3..78b6cc3bdf3 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md @@ -23,7 +23,7 @@ Du solltest `.chin` eine `width`-Eigenschaft geben. assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width); ``` -You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.chin` eine `width` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%'); @@ -35,7 +35,7 @@ Du solltest `.chin` eine `height`-Eigenschaft geben. assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height); ``` -You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.chin` eine `height` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%'); @@ -47,7 +47,7 @@ Du solltest `.chin` eine `background-color`-Eigenschaft geben. assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor); ``` -You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.chin` eine `background-color` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md index aeb88174018..50b06d8d024 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md @@ -7,7 +7,7 @@ dashedName: step-61 # --description-- -Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`. +Wähle die `.eye-lid`-Elemente aus und weise ihnen eine `width` von `150%`, eine `height` von `100%` und eine `background-color` von `--penguin-face` zu. # --hints-- @@ -17,13 +17,13 @@ Du solltest den `.eye-lid`-Selektor verwenden. assert.match(code, /\.eye-lid\s*\{/); ``` -You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`. +Du solltest `.eye-lid` eine `width` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%'); ``` -You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`. +Du solltest `.eye-lid` eine `height` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md index 7ba47593ec9..d6b555e8e5d 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md @@ -11,13 +11,13 @@ Positioniere die `.blush`-Elemente `65%` vom oberen Rand des übergeordneten Ele # --hints-- -You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.blush` eine `top` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%'); ``` -You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.blush` einen `border-radius` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md index 4f9b0dc7785..4b0c9dc281c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md @@ -17,7 +17,7 @@ Du solltest den `.blush.left`-Selektor verwenden. assert.match(code, /\.blush\.left\s*\{/); ``` -You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.blush.left` eine `left` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%'); @@ -29,7 +29,7 @@ Du solltest den `.blush.right`-Selektor verwenden. assert.match(code, /\.blush\.right\s*\{/); ``` -You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.blush.right` eine `right` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md index a35e4a9a609..671d95c3791 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md @@ -17,19 +17,19 @@ Du solltest den `.beak`-Selektor verwenden. assert.match(code, /\.beak\s*\{/); ``` -You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`. +Du solltest `.beak` eine `height` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%'); ``` -You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. +Du solltest `.beak` eine `background-color` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange'); ``` -You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`. +Du solltest `.beak` einen `border-radius` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md index 221dc295970..722f7d7d33f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md @@ -19,19 +19,19 @@ Du solltest `:root` eine `--penguin-picorna`-Eigenschaft geben. assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna')); ``` -You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`. +Du solltest `--penguin-picorna` einen Wert von `orange` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange'); ``` -You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`. +Du solltest `.beak` eine `background-color` von `var(--penguin-picorna)` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)'); ``` -You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`. +Du solltest `.foot` eine `background-color` von `var(--penguin-picorna)` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md index 583e829e1f3..2176b3cba99 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md @@ -7,7 +7,7 @@ dashedName: step-83 # --description-- -Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent. +Wähle das `.foot`-Element mit einer `class` von `left` aus und positioniere es `25%` links von seinem Elternelement. Wähle dann das `.foot`-Element mit einer `class` von `right` aus und positioniere es `25%` rechts von seinem Elternelement. # --hints-- @@ -17,7 +17,7 @@ Du solltest den `.foot.left`-Selektor verwenden. assert.match(code, /\.foot\.left\s*\{/); ``` -You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.foot.left` eine `left` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%'); @@ -29,7 +29,7 @@ Du solltest den `.foot.right`-Selektor verwenden. assert.match(code, /\.foot\.right\s*\{/); ``` -You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.foot.right` eine `right` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md index 337cee3988c..a417fd36fd4 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md @@ -17,19 +17,19 @@ Du solltest `.arm.left` einen `animation-name` von `--fcc-expected--` geben, abe assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave'); ``` -You should give `.arm.left` an `animation-duration` of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.arm.left` eine `animation-duration` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s'); ``` -You should give `.arm.left` an `animation-iteration-count` of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.arm.left` einen `animation-iteration-count` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite'); ``` -You should give `.arm.left` an `animation-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.arm.left` eine `animation-timing-function` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md index 1e7e7d269b6..22a2e4c56a4 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md @@ -29,7 +29,7 @@ Du solltest dem zweiten neuen `div` eine Klasse von `fb1b` geben. assert.exists(document.querySelector("div.fb1 > div.fb1b")); ``` -You should give the third new `div` a class of `fb1c`. +Du solltest dem dritten neuen `div` eine Klasse von `fb1c` zuweisen. ```js assert.exists(document.querySelector("div.fb1 > div.fb1c")); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md index ff409789135..46da7d5951b 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md @@ -7,7 +7,7 @@ dashedName: step-77 # --description-- -Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building. +Mach dir keine Sorgen um den Platz unten, alles wird später nach unten verschoben, wenn du dem Element oben am Gebäude etwas Höhe hinzufügst. Füge einen `repeating-linear-gradient` zu `.fb1c` mit einem Winkel von `90deg`, deine `--building-color4` von `0%` bis `10%` und `transparent` von `10%` bis `15%` hinzu. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md index 934edd3554c..6e9070458b5 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md @@ -7,7 +7,7 @@ dashedName: step-80 # --description-- -When you increase the size of the left and right borders, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide. +When you increase the size of the left and right borders, the border on the bottom will expand to be the width of the combined left and right border widths. Füge `2vw solid transparent` als Wert für die `border-left`- und `border-right`-Eigenschaften von `.fb1a` hinzu. They will be invisible, but it will make the border on the bottom `4vw` wide. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md index c62f87e809c..6d808e2ec81 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md @@ -11,7 +11,7 @@ On to the next building! It's the green one in the foreground. Give it a `repeat # --hints-- -You should give `.fb5` a `background` property. +Du solltest `.fb5` eine `background`-Eigenschaft zuweisen. ```js assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md index 291144a2421..e72e6f91794 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md @@ -11,7 +11,7 @@ Add another repeating gradient to this building; make it the same as the one you # --hints-- -You should give `.fb6` a second `repeating-linear-gradient` in the `background` property. +Du solltest `.fb6` einen zweiten `repeating-linear-gradient` innerhalb der `background`-Eigenschaft zuweisen. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md index 3c100b9c963..b2ef00d98d0 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md @@ -14,7 +14,7 @@ Verwandle im Text deines `p`-Elements die Wörter `cat photos` in einen Link zu # --hints-- -You should nest a new anchor (`a`) element within the `p` element. +Du solltest ein neues Anker-Element (`a`) innerhalb des `p`-Elements einbetten. ```js assert($('p > a').length); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md index 79bf44f8777..a49076266eb 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md @@ -29,13 +29,13 @@ Dein (`a`)-Ankerelement sollte ein öffnendes Tag haben. Öffnende Tags haben fo assert(document.querySelectorAll('a').length >= 2); ``` -You are missing a closing (`a`) tag after the image. +Dir fehlt ein abschließendes (`a`)-Tag nach dem Bild. ```js assert(document.querySelectorAll('a').length === 2); ``` -Dein (`a`)-Ankerelement sollte ein schließendes Tag haben. Closing tags have a `/` just after the `<` character. +Dein (`a`)-Ankerelement sollte ein schließendes Tag haben. Abschließende Tags haben ein `/` genau nach dem `<`-Zeichen. ```js assert(code.match(/<\/a>/g).length >= 2); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md index c9e3ac73e52..f7cab4ec9a5 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md @@ -26,7 +26,7 @@ Dein `h2`-Element sollte ein öffnendes Tag haben. Öffnende Tags haben diese Sy assert(document.querySelectorAll('h2').length === 2); ``` -Dein `h2`-Element sollte ein schließendes Tag haben. Closing tags have a `/` just after the `<` character. +Dein `h2`-Element sollte ein schließendes Tag haben. Abschließende Tags haben einen `/` genau nach dem `<`-Zeichen. ```js assert(code.match(/<\/h2\>/g).length === 2); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md index 917786cfce3..de1f2b5ec7d 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md @@ -25,7 +25,7 @@ Your `button` element should have a closing tag. Closing tags have a `/` just af assert(code.match(/<\/button\>/)); ``` -Your `button` element's text should be `Submit`. Du hast entweder den Text weggelassen oder einen Tippfehler gemacht. +Der Text deines `button`-Elements sollte `Submit` sein. Du hast entweder den Text weggelassen oder einen Tippfehler gemacht. ```js assert(document.querySelector('button').innerText.toLowerCase() === 'submit'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md index b25f128b505..ae6390eaf81 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md @@ -9,7 +9,7 @@ dashedName: step-45 `label`-Elemente werden verwendet, um den Text für ein `input`-Element mit dem `input`-Element selbst zu verknüpfen (speziell für unterstützende Technologien wie Screenreader). For example, `` makes it so clicking the word `cat` also selects the corresponding radio button. -Nest your `radio` button inside a `label` element. +Bette deinen `radio`-Button in einem `label`-Element ein. # --hints-- @@ -34,13 +34,13 @@ Dein `label`-Element sollte ein öffnendes Tag haben. Öffnende Tags haben diese assert(document.querySelector('label')); ``` -Dein `label`-Element sollte ein schließendes Tag haben. Closing tags have a `/` just after the `<` character. +Dein `label`-Element sollte ein schließendes Tag haben. Abschließende Tags haben ein `/` direkt nach dem `<`-Zeichen. ```js assert(code.match(/<\/label\>/)); ``` -Your radio button and its text should all be located between the opening and closing tags of the `label` element. +Dein Radio-Button und sein Text sollten sich zwischen dem öffnenden und abschließenden Tag des `label`-Elements befinden. ```js const labelChildNodes = [...$('form > label')[0].childNodes]; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md index 716270a574c..177bc366c04 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md @@ -7,7 +7,7 @@ dashedName: step-63 # --description-- -Nest a `p` element with the text `No Copyright - freeCodeCamp.org` within the `footer` element. +Bette ein `p`-Element mit dem Text `No Copyright - freeCodeCamp.org` innerhalb des `footer`-Elements ein. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md index e3ca41d32ec..2cf9babe6a5 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md @@ -7,7 +7,7 @@ dashedName: step-57 # --description-- -Add the `name` attribute with the value `personality` to the checkbox `input` element. +Füge das `name`-Attribut mit dem Wert `personality` zum `input`-Checkbox-Element hinzu. While you won't notice this in the browser, doing this makes it easier for a server to process your web form, especially when there are multiple checkboxes. @@ -19,13 +19,13 @@ You should make sure the checkbox is still present. assert($('input[type="checkbox"]')[0]); ``` -The checkbox `input` element does not have a `name` attribute. Check that there is a space after the opening tag's name. +Das `input`-Checkbox-Element enthält kein `name`-Attribut. Check that there is a space after the opening tag's name. ```js assert($('input[type="checkbox"]')[0].hasAttribute('name')); ``` -The checkbox `input` element should have a `name` attribute with the value `personality`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. +Das `input`-Checkbox-Element sollte ein `name`-Attribut mit dem Wert `personality` enthalten. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. ```js assert( diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md index 7ff0be3cda3..2920132ef51 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md @@ -7,23 +7,23 @@ dashedName: step-33 # --description-- -It is time to add a new section. Add a third `section` element below the second `section` element. +It is time to add a new section. Füge ein drittes `section`-Element unter dem zweiten Element hinzu. # --hints-- -Your `section` element should have an opening tag. Opening tags have this syntax: ``. +Dein `section`-Element sollte ein öffnendes Tag haben. Opening tags have this syntax: ` `. ```js assert(document.querySelectorAll('section').length >= 3); ``` -You should only add one opening `section` tag. Please remove any extras. +Du solltest nur ein öffnendes `section`-Tag haben. Please remove any extras. ```js assert(document.querySelectorAll('section').length === 3); ``` -Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character. +Dein `section`-Element sollte ein schließendes Tag haben. Closing tags have a `/` just after the `<` character. ```js assert(code.match(/<\/section>/g).length >= 3); @@ -45,7 +45,7 @@ const sectionElemsFound = childrenOfMain.filter((child) => { assert(sectionElemsFound.length === 3); ``` -The last `section` element should have no content. Remove any HTML elements or text within the `section` element. +The last `section` element should have no content. Entferne innerhalb des `section`-Elements jedes HTML-Element oder Text. ```js assert($('main > section')[2].children.length === 0); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md index 4f6e4f919bd..52deafa9647 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md @@ -7,29 +7,29 @@ dashedName: step-52 # --description-- -Next, you are going to add some new form `input` elements, so add another `fieldset` element directly below the current `fieldset` element. +Als Nächstes wirst du ein paar neue `input`-Formularelemente hinzufügen, füge also ein weiteres `fieldset`-Element direkt unter deinem aktuellen `fieldset`-Element hinzu. # --hints-- -Your new `fieldset` element should have an opening tag. Opening tags have this syntax: ` `. +Dein neues `fieldset`-Element sollte ein öffnendes Tag enthalten. Opening tags have this syntax: ` `. ```js assert(document.querySelectorAll('fieldset').length >= 2); ``` -You should only add one opening `fieldset` tag. Please remove any extras. +Du solltest nur ein öffnendes `fieldset`-Tag hinzufügen. Please remove any extras. ```js assert(document.querySelectorAll('fieldset').length === 2); ``` -Your new `fieldset` element should have a closing tag. Closing tags have a `/` just after the `<` character. +Dein neues `fieldset`-Element sollte ein abschließendes Tag enthalten. Abschließende Tags haben ein `/` genau nach dem `<`-Zeichen. ```js assert(code.match(/<\/fieldset>/g).length >= 2); ``` -You should only add one closing `fieldset` tag. Please remove any extras. +Du solltest nur ein abschließendes `fieldset`-Tag hinzufügen. Please remove any extras. ```js assert(code.match(/<\/fieldset>/g).length === 2); @@ -47,7 +47,7 @@ const foundElems = childrenOf1stFieldset.filter((child) => { assert(foundElems.length === 0); ``` -Both `fieldset` elements should be above the text field. They are out of order. +Beide `fieldset`-Elemente sollten über dem Textfeld liegen. They are out of order. ```js const formChildren = $('form')[0].children; @@ -60,7 +60,7 @@ assert( ); ``` -Your new `fieldset` element should be below the existing `fieldset` element. You have them in the wrong order. +Dein neues `fieldset`-Element sollte sich unter dem vorhandenen `fieldset`-Element befinden. You have them in the wrong order. ```js const fieldsetChildren = [...document.querySelectorAll('fieldset')].map( diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md index 975fabc1fae..ab6b7b7ce91 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md @@ -9,11 +9,11 @@ dashedName: step-49 If you select the `Indoor` radio button and submit the form, the form data for the button is based on its `name` and `value` attributes. Since your radio buttons do not have a `value` attribute, the form data will include `indoor-outdoor=on`, which is not useful when you have multiple buttons. -Add a `value` attribute to both radio buttons. For convenience, set the button's `value` attribute to the same value as its `id` attribute. +Füge ein `value`-Attribut zu beiden Radio-Buttons hinzu. For convenience, set the button's `value` attribute to the same value as its `id` attribute. # --hints-- -Both radio buttons should still be located between opening and closing `label` element tags. +Beide Radio-Buttons sollten immer noch zwischen öffnenden und abschießenden `label`-Element-Tags liegen. ```js const labelChildNodes = [...document.querySelectorAll('form > label')].map( @@ -25,28 +25,28 @@ assert( ); ``` -Both radio buttons should have a `value` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. +Beide Radio-Buttons sollten ein `value`-Attribut enthalten. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. ```js const radioButtons = [...document.querySelectorAll('input[type="radio"]')]; assert(radioButtons.every((btn) => btn.hasAttribute('value'))); ``` -Both radio buttons should have a `type` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. +Beide Radio-Buttons sollten ein `type`-Attribut enthalten. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. ```js const radioButtons = [...document.querySelectorAll('input')]; assert(radioButtons.every((btn) => btn.hasAttribute('type'))); ``` -The `Indoor` radio button's `value` attribute should be set to `indoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. +Das `value`-Attribut des `Indoor`-Radio-Buttons sollte auf `indoor` gesetzt sein. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. ```js const indoorRadioButton = document.querySelector('#indoor'); assert(indoorRadioButton.getAttribute('value').match(/^indoor$/)); ``` -The `Outdoor` radio button's `value` attribute should be set to `outdoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. +Das `value`-Attribut des `Outdoor`-Radio-Buttons sollte auf `outdoor` gesetzt sein. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. ```js const outdoorRadioButton = document.querySelector('#outdoor'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md index 6299a0db000..8e62a173f47 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md @@ -9,32 +9,32 @@ dashedName: step-60 Like radio buttons, form data for selected checkboxes are `name` / `value` attribute pairs. While the `value` attribute is optional, it's best practice to include it with any checkboxes or radio buttons on the page. -Add a `value` attribute to each checkbox. For convenience, set each checkbox's `value` attribute to the same value as its `id` attribute. +Füge ein `value`-Attribut zu jeder Checkbox hinzu. Setze zur Bequemlichkeit das `value`-Attribut jeder Checkbox auf den gleichen Wert wie sein `id`-Attribut. # --hints-- -All three checkboxes should have a `value` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. +Alle drei Checkboxen sollten ein `value`-Attribut enthalten. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. ```js const checkboxes = [...document.querySelectorAll('input[type="checkbox"]')]; assert(checkboxes.every((checkbox) => checkbox.hasAttribute('value'))); ``` -The `value` attribute of the `Loving` checkbox should be set to `loving`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. +Das `value`-Attribut der `Loving`-Checkbox sollte auf `loving` gesetzt werden. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. ```js const lovingCheckbox = document.querySelector('#loving'); assert(lovingCheckbox.getAttribute('value').match(/^loving$/)); ``` -The `value` attribute of the `Lazy` checkbox should be set to `lazy`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. +Das `value`-Attribut der `Lazy`-Checkbox sollte auf `lazy` gesetzt werden. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. ```js const lazyCheckbox = document.querySelector('#lazy'); assert(lazyCheckbox.getAttribute('value').match(/^lazy$/)); ``` -The `value` attribute of the `Energetic` checkbox should be set to `energetic`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. +Das `value`-Attribut der `Energetic`-Checkbox sollte auf `energetic` gesetzt werden. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. ```js const energeticCheckbox = document.querySelector('#energetic'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md index 49b5d7c56e0..d45b4333c19 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md @@ -13,7 +13,7 @@ You can set browser behavior by adding self-closing `meta` elements in the `head ``` -Tell the browser to parse the markup into multiple languages by creating a `meta` element as a child of the `head` element. Set its `charset` attribute to `UTF-8`. +Tell the browser to parse the markup into multiple languages by creating a `meta` element as a child of the `head` element. Setze sein `charset`-Attribut auf `UTF-8`. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md index c3d6ecea75e..b616afe7702 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md @@ -7,17 +7,17 @@ dashedName: step-13 # --description-- -Now that you turned the text `cat photos` inside the `p` element into a link, you don't need the second link below the `p` element. Delete the entire anchor element below the `p` element. +Now that you turned the text `cat photos` inside the `p` element into a link, you don't need the second link below the `p` element. Lösche das gesamte Ankerelement unterhalb des `p`-Elements. # --hints-- -Your code should only have one anchor (`a`) element. +Dein Code sollte nur ein (`a`)-Ankerelement enthalten. ```js assert(document.querySelectorAll('a').length === 1); ``` -The `p` element should still have the anchor (`a`) element inside of it. +Das `p`-Element sollte immer noch das (`a`)-Ankerelement enthalten. ```js assert($('p > a').length); @@ -51,7 +51,7 @@ const pText = document assert(pText.match(/see more cat photos in our gallery\.?$/)); ``` -There should not be `cat photos` text below the `p` element. +Unter dem `p`-Element sollte kein `cat photos`-Text vorhanden sein. ```js const pNextSibling = document.querySelector('p').nextSibling; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md index 2596568c6b6..e2327a2e784 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md @@ -11,13 +11,13 @@ Welcome to the Registration Form project! Start by adding the `!DOCTYPE html` de # --hints-- -Your code should contain the `DOCTYPE` reference. +Dein Code sollte die `DOCTYPE`-Referenz enthalten. ```js assert(code.match(/` after the type. +Du solltest die `DOCTYPE`-Deklaration mit einem `>` nach dem Typ schließen. ```js assert(code.match(/html\s*>/gi)); ``` -Your `DOCTYPE` declaration should be at the beginning of your HTML. +Deine `DOCTYPE`-Deklaration sollte am Anfang deines HTML stehen. ```js assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md index 0c46a429dc7..1546c94aacf 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md @@ -7,35 +7,35 @@ dashedName: step-2 # --description-- -Below the `DOCTYPE`, add an `html` element with a `lang` attribute set to `en`, so that you have a place to start putting some code. +Füge unter dem `DOCTYPE` ein `html`-Element mit einem `lang`-Attribut von `en` hinzu, so dass du einen Ort hast, an dem du mit der Eingabe vom Code beginnen kannst. # --hints-- -Your `DOCTYPE` declaration should be at the beginning of your HTML. +Deine `DOCTYPE`-Deklaration sollte am Anfang deines HTML stehen. ```js assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); ``` -Your `html` element should have an opening tag, and `lang` attribute with value of `en`. +Dein `html`-Element sollte ein öffnendes Tag enthalten sowie ein `lang`-Attribut mit dem Wert `en`. ```js assert(code.match(/ fCC Cat Painting + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md new file mode 100644 index 00000000000..1757ddb08e0 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md @@ -0,0 +1,51 @@ +--- +id: 646c586be7180e40ddf74ff6 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Give your `body` element a `background-color` of `#c9d2fc`. + +# --hints-- + +You should have a `body` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` selector should have a `background-color` property set to `#c9d2fc`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(201, 210, 252)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + +``` + +```css +* { + box-sizing: border-box; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md new file mode 100644 index 00000000000..c605ff01e1d --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md @@ -0,0 +1,66 @@ +--- +id: 646c59e942f35541923104bf +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Back in your HTML, create a `main` element. Inside that `main` element, add a `div` element with the class `cat-head`. + +# --hints-- + +You should have a `main` element. + +```js +assert(document.querySelectorAll('main').length === 1); +``` + +You should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 1); +``` + +Your `div` element should have the class `cat-head`. + +```js +assert(document.querySelector('div')?.getAttribute('class') === 'cat-head'); +``` + +Your `div` element should be inside your `main` tag. + +```js +assert(document.querySelectorAll('main div').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md new file mode 100644 index 00000000000..81eb5c83f27 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md @@ -0,0 +1,79 @@ +--- +id: 646c5ace05e4be4211407935 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +To see the `cat-head` element, give it a linear gradient background with `#5e5e5e` at `85%` and `#45454f` at `100%`. + +You might not notice the difference between these two colors, but they are there. + +# --hints-- + +Your `.cat-head` selector should have a `background` property. + +```js +assert.match(code, /background:/) +``` + +Your `background` property should use the `linear-gradient` function. + +```js +assert.match(code, /background:\s*linear-gradient\(/) +``` + +Your `linear-gradient` function should set the first color to be `#5e5e5e` at `85%`. + +```js +assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%/) +``` + +Your `linear-gradient` function should set the second color to be `#45454f` at `100%`. + +```js +assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%,\s+#45454f\s+100%\);?/) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md new file mode 100644 index 00000000000..98afa6c6b3b --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md @@ -0,0 +1,77 @@ +--- +id: 646c5d7057c45f432fcdd46c +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Using a class selector, give the `.cat-head` element a width of `205px` and a height of `180px`. Also, give it a border of `1px solid #000` and a `border-radius` of `46%`. + +# --hints-- + +You should have a `.cat-head` selector. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')) +``` + +Your `.cat-head` selector should have a `width` set to `205px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.width === '205px'); +``` + +Your `.cat-head` selector should have a `height` set to `180px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.height === '180px') +``` + +Your `.cat-head` selector should have a `border` set to `1px solid #000`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.border === '1px solid rgb(0, 0, 0)') +``` + +Your `.cat-head` selector should have a `border-radius` set to `46%`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle(".cat-head")?.borderRadius === '46%') +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md new file mode 100644 index 00000000000..7c88ce9baa8 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md @@ -0,0 +1,78 @@ +--- +id: 646c5e727e56e743c9aed4a1 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +CSS positioning lets you set how you want an element to be positioned in the browser. It has a `position` property you can set to `static`, `absolute`, `relative`, `sticky` or `fixed`. + +Once you set the `position` property of the element, you can move the element around by setting a pixel or a percentage value for one or more of the `top`, `right`, `left`, or `bottom` properties. + +`static` is the default positioning for all elements. If you assign it to an element, you won't be able to move it around with `top`, `right`, `left`, or `bottom`. + +Give `.cat-head` a `position` property of `static`, then set the `top` and `left` properties to `100px` each. + + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `static`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'static') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + --fcc-editable-region-- + + --fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md new file mode 100644 index 00000000000..9c460caa45f --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md @@ -0,0 +1,80 @@ +--- +id: 646c5ffef5598d449b52ec12 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Now you should work on the cat's ears. There will be a right and a left ear, and inside each, there will be an inner ear. + +Inside your `.cat-head` element, create a `div` element with the class `cat-ears`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-head`. + +```js +assert(document.querySelectorAll('div.cat-head').length === 1); +``` + +You should create one `div` element inside your `.cat-head` element. + +```js +assert(document.querySelectorAll('.cat-head div').length === 1); +``` + +Your `div` element should have the class `cat-ears`. + +```js +assert(document.querySelectorAll('.cat-head div')[0]?.getAttribute('class') === 'cat-ears'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md new file mode 100644 index 00000000000..356b443cc39 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md @@ -0,0 +1,86 @@ +--- +id: 646ce8bb4b35544d501c7184 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Inside your `.cat-ears` element, create two `div` elements with the classes `cat-left-ear` and `cat-right-ear` respectively. + +# --hints-- + +You should not change the existing `div` element with the class `car-ears`. + +```js +assert(document.querySelectorAll('div.cat-ears').length === 1); +``` + +You should create two `div` elements inside your `.cat-ears` element. + +```js +assert(document.querySelectorAll('.cat-ears div').length === 2); +``` + +Your first `div` element should have the class `cat-left-ear`. + +```js +assert(document.querySelectorAll('.cat-ears div')[0]?.classList.contains('cat-left-ear')); +``` + +Your second `div` element should have the class `cat-right-ear`. + +```js +assert(document.querySelectorAll('.cat-ears div')[1]?.classList.contains('cat-right-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md new file mode 100644 index 00000000000..f868fcd598d --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md @@ -0,0 +1,83 @@ +--- +id: 646ce9d790d2a44de5f99e04 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Inside your `.cat-left-ear` element, create another `div` element with the class `cat-left-inner-ear`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-ear`. + +```js +assert(document.querySelectorAll('div.cat-left-ear').length === 1); +``` + +You should have a `div` element inside your `.cat-left-ear` element. + +```js +assert(document.querySelectorAll('.cat-left-ear div').length === 1); +``` + +Your `div` element should have the class `cat-left-inner-ear`. + +```js +assert(document.querySelectorAll('.cat-left-ear div')[0]?.classList.contains('cat-left-inner-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md new file mode 100644 index 00000000000..deb18782568 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md @@ -0,0 +1,85 @@ +--- +id: 646ceae4d57c214e6b03576c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Inside your `.cat-right-ear` element, create another `div` element with the class `cat-right-inner-ear`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-right-ear`. + +```js +assert(document.querySelectorAll('div.cat-right-ear').length === 1); +``` + +You should have a `div` element inside your `.cat-right-ear` element. + +```js +assert(document.querySelectorAll('.cat-right-ear div').length === 1); +``` + +Your `div` element should have the class `cat-right-inner-ear`. + +```js +assert(document.querySelectorAll('.cat-right-ear div')[0]?.classList.contains('cat-right-inner-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md new file mode 100644 index 00000000000..ae13eae4db7 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md @@ -0,0 +1,95 @@ +--- +id: 646ceb843412c74edee27a79 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +You are going to make each ear look like a triangle. + +Using a class selector, give the `.cat-left-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`. + +# --hints-- + +You should have a `.cat-left-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')) +``` + +Your `.cat-left-ear` selector should have a `border-left` property set to `35px solid transparent` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderLeft === '35px solid transparent') +``` + +Your `.cat-left-ear` selector should have a `border-right` property set to `35px solid transparent` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderRight === '35px solid transparent') +``` + +Your `.cat-left-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderBottom === '70px solid rgb(94, 94, 94)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md new file mode 100644 index 00000000000..60b4d9ebfde --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md @@ -0,0 +1,92 @@ +--- +id: 646cecc9eb5c4f4f73dafd07 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Move the left ear into position by setting a position of `absolute`, a `top` of `-26px`, and a `left` of `-31px`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.position === 'absolute') +``` + +Your `.cat-left-ear` selector should have a `top` property set to `-26px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.top === '-26px') +``` + +Your `.cat-left-ear` selector should have a `left` property set to `-31px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.left === '-31px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md new file mode 100644 index 00000000000..a0b737ac3d9 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md @@ -0,0 +1,89 @@ +--- +id: 646cef0c2b98915094df7099 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Those edges are too sharp for an ear. So, set the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-left-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md new file mode 100644 index 00000000000..3bcd393bf42 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md @@ -0,0 +1,89 @@ +--- +id: 646cf1206cac5f51804f49cf +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +To position the left ear properly, you can use CSS transform to rotate it in a certain degree. + +The `transform` property allows you to modify the shape, position, and size of an element without changing the layout or affecting the surrounding elements. It has functions such as `translate()`, `rotate()`, `scale()`, `skew()`, and `matrix()`. + +Set the `transform` property to `rotate(-45deg)` and see what happens. + +# --hints-- + +You should set the `transform` property of your `.cat-left-ear` element to `rotate(-45deg)`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.transform === 'rotate(-45deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md new file mode 100644 index 00000000000..51bb049e2dd --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md @@ -0,0 +1,107 @@ +--- +id: 646cf2249f02ca5233d9af7c +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Now you can work on the right ear of the cat. You have the HTML for it already. + +Using a class selector, give the `.cat-right-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`. + +# --hints-- + +You should have a `.cat-right-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')) +``` + +Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent') +``` + +Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent') +``` + +Your `.cat-right-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '70px solid rgb(94, 94, 94)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md new file mode 100644 index 00000000000..dfce258d838 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md @@ -0,0 +1,104 @@ +--- +id: 646cf48d8f8e1f535a1821d3 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Move the right ear into position with a `position` property set to `absolute`, a `top` of `-26px`, and a `left` of `163px`. + +# --hints-- + +Your `.cat-right-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.position === 'absolute') +``` + +Your `.cat-right-ear` selector should have a `top` property set to `-26px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.top === '-26px') +``` + +Your `.cat-right-ear` selector should have a `left` property set to `163px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.left === '163px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md new file mode 100644 index 00000000000..d4525731d1f --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md @@ -0,0 +1,95 @@ +--- +id: 646cf6cbca98e258da65c979 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +As you did for the left ear, rotate the right ear at 45 degrees. + +# --hints-- + +You should set the `transform` property of your `.right-ear` element to `rotate(45deg)`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.transform === 'rotate(45deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md new file mode 100644 index 00000000000..bbd36a62759 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md @@ -0,0 +1,102 @@ +--- +id: 646cf88aa884405a11ea5bcc +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Remove the sharp border of the right ear by setting the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`. + +# --hints-- + +Your `.cat-right-ear` selector should have a `border-top-left-radius` property set to `90px`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-right-ear` selector should have a `border-top-right-radius` property set to `10px`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md new file mode 100644 index 00000000000..bb200fd1069 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md @@ -0,0 +1,102 @@ +--- +id: 646cfc2b8e6fe95c20a819d5 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The ears should always be placed above the part of the head it overlaps. You can do this with the `z-index` property. + +`z-index` is a property you can use to define the order of overlapping HTML elements. Any element with a higher `z-index` will always be positioned over an element with a lower `z-index`. + +To see `z-index` in action, set the `z-index`property of the left ear to `-1`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `z-index` of `-1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '-1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md new file mode 100644 index 00000000000..7f2be20c198 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md @@ -0,0 +1,100 @@ +--- +id: 646cfd853634255d02b64cc1 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +That's not the behavior you want. You should make the ears display over the head so the borders that overlap with them don't show. + +Instead of `-1`, set the `z-index` property of the left ear to `1`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `z-index` of `1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + --fcc-editable-region-- + z-index: -1; + --fcc-editable-region-- + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md new file mode 100644 index 00000000000..b892d61ca1d --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md @@ -0,0 +1,99 @@ +--- +id: 646cfde6ac612e5d60391f50 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Set the `z-index`property of the right ear to `1` so it always stays over the head. + +# --hints-- + +Your `.cat-right-ear` selector should have a `z-index` of `1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.zIndex === '1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + --fcc-editable-region-- + + --fcc-editable-region-- + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md new file mode 100644 index 00000000000..1d7411ad660 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md @@ -0,0 +1,121 @@ +--- +id: 646dd556d524bc61c0139bd6 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Most cats have different colors in their ear and the inner part of the same ear. You can implement the same too. That's why you defined a `div` element for both right and left inner ears a while ago. + +Using a class selector, give your `.cat-left-inner-ear` element a left and right border of `20px solid transparent` each. Also give it a bottom border of `40px solid #3b3b4f`. + +# --hints-- + +You should have a `.cat-left-inner-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')) +``` + +Your `.cat-left-inner-ear` selector should have a `border-left` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderLeft === '20px solid transparent') +``` + +Your `.cat-left-inner-ear` selector should have a `border-right` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderRight === '20px solid transparent') +``` + +Your `.cat-left-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md new file mode 100644 index 00000000000..8be0ea3110e --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md @@ -0,0 +1,118 @@ +--- +id: 646dd6f9caa862627dd87772 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Move the inner ear into position with a `position` property set to `absolute`, a `top` of `22px`, and a `left` of `-20px`. + +# --hints-- + +Your `.cat-left-inner-ear` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.position === 'absolute') +``` + +Your `.cat-left-inner-ear` selector should have a `top` property set to `22px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.top === '22px') +``` + +Your `.cat-left-inner-ear` selector should have a `left` property set to `-20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.left === '-20px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md new file mode 100644 index 00000000000..7e24c8e937c --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md @@ -0,0 +1,127 @@ +--- +id: 646dd7cfd0cfac630c1dd520 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +To remove all the pointed edges of the ear, set a bottom-right and bottom-left border radius of `40%` each, a top-left border radius of `90px`, and a top-right border radius of `10px`. + +# --hints-- + +Your `.cat-left-inner-ear` selector should have a `border-bottom-right-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottomRightRadius === '40%') +``` + +Your `.cat-left-inner-ear` selector should have a `border-bottom-left-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottomLeftRadius === '40%') +``` + +Your `.cat-left-inner-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-left-inner-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md new file mode 100644 index 00000000000..ba3b89e07d1 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md @@ -0,0 +1,132 @@ +--- +id: 646dd8c79ec23463a3d0e356 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +It's time to work on the right inner ear. Using a class selector, give your `.cat-right-inner-ear` element a left and right border of `20px solid transparent`. Also, give it a bottom border of `40px solid #3b3b4f`. + +# --hints-- + +You should have a `.cat-right-inner-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')) +``` + +Your `.cat-right-inner-ear` selector should have a `border-left` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderLeft === '20px solid transparent') +``` + +Your `.cat-right-inner-ear` selector should have a `border-right` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderRight === '20px solid transparent') +``` + +Your `.cat-right-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md new file mode 100644 index 00000000000..f48ba0bd881 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md @@ -0,0 +1,131 @@ +--- +id: 646dd9d9a729916460724f16 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Move the right inner ear into position with a `position` property set to `absolute`, a `top` of `22px` and a `left` of `-20px`. + +# --hints-- + +Your `.cat-right-inner-ear` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.position === 'absolute') +``` + +Your `.cat-right-inner-ear` selector should have a `top` property set to `22px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.top === '22px') +``` + +Your `.cat-right-inner-ear` selector should have a `left` property set to `-20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.left === '-20px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md new file mode 100644 index 00000000000..12d8b78a661 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md @@ -0,0 +1,140 @@ +--- +id: 646ddab8afd73764f5241bbf +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +As you did for the left inner ear, remove the sharp edges of the right inner ear by setting a bottom-right and bottom-left border radius of `40%`, a top-left border radius of `90px`, and a top-right border radius of `10px`. + +# --hints-- + +Your `.cat-right-inner-ear` selector should have a `border-bottom-right-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottomRightRadius === '40%') +``` + +Your `.cat-right-inner-ear` selector should have a `border-bottom-left-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottomLeftRadius === '40%') +``` + +Your `.cat-right-inner-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-right-inner-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md new file mode 100644 index 00000000000..5a2488dca6b --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md @@ -0,0 +1,147 @@ +--- +id: 646ddb61ff08366570cc5902 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +You will now start working on the cat's eyes. Like the ears, the eyes will have inner eyes. + +Create a `div` element with the class `cat-eyes`. Inside the `cat-eyes` element, create two `div` elements with the class `cat-left-eye` and `cat-right-eye` respectively. + +# --hints-- + +You should create a `div` element with the class `cat-eyes`. + +```js +assert(document.querySelectorAll('.cat-eyes').length === 1); +``` + +You should create two `div` elements inside the `.cat-eyes` element. + +```js +assert(document.querySelectorAll('.cat-eyes div').length === 2); +``` + +The first `div` element inside the `.cat-eyes` element should have the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('.cat-eyes div')[0].classList.contains('cat-left-eye')); +``` + +The second `div` element inside the `.cat-eyes` element should have the class `cat-right-eye`. + +```js +assert(document.querySelectorAll('.cat-eyes div')[1].classList.contains('cat-right-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md new file mode 100644 index 00000000000..9b995228d29 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md @@ -0,0 +1,144 @@ +--- +id: 646ddd3f9f97a0667b964bdb +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Inside the `.cat-left-eye` element, create another `div` element with the class `cat-left-inner-eye`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('div.cat-left-eye').length === 1); +``` + +You should have a `div` element inside your `.cat-left-eye` element. + +```js +assert(document.querySelectorAll('.cat-left-eye div').length === 1); +``` + +Your `div` element should have the class `cat-left-inner-eye`. + +```js +assert(document.querySelectorAll('.cat-left-eye div')[0]?.classList.contains('cat-left-inner-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md new file mode 100644 index 00000000000..5bad715a154 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md @@ -0,0 +1,146 @@ +--- +id: 646dddfb3a301c66ec513c56 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Inside the `.cat-right-eye` element, create another `div` element with the class `cat-right-inner-eye`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('div.cat-right-eye').length === 1); +``` + +You should have a `div` element inside your `.cat-right-eye` element. + +```js +assert(document.querySelectorAll('.cat-right-eye div').length === 1); +``` + +Your `div` element should have the class `cat-right-inner-eye`. + +```js +assert(document.querySelectorAll('.cat-right-eye div')[0]?.classList.contains('cat-right-inner-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md new file mode 100644 index 00000000000..9cf9b19e226 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md @@ -0,0 +1,154 @@ +--- +id: 646dde7dc20dc167489faa69 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Using a class selector, give your `.cat-left-eye` element a `width` of `30px` and a `height` of `40px`. Also, give it a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-left-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')) +``` + +Your `.cat-left-eye` selector should have a `width` set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.width === '30px') +``` + +Your `.cat-left-eye` selector should have a `height` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.height === '40px') +``` + +Your `.cat-left-eye` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md new file mode 100644 index 00000000000..45ed732e12d --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md @@ -0,0 +1,153 @@ +--- +id: 646ddf888632fa67f1180940 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Move the left eye into position with a `position` property of `absolute` a `top` of `54px`, and a `left` of `39px`. + +# --hints-- + +Your `.cat-left-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.position === 'absolute') +``` + +Your `.cat-left-eye` selector should have a `top` property set to `54px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.top === '54px') +``` + +Your `.cat-left-eye` selector should have a `left` property set to `39px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.left === '39px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md new file mode 100644 index 00000000000..38088bba67e --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md @@ -0,0 +1,150 @@ +--- +id: 646de5dc8988076a1d992afd +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +To make the left eye look like an eye, give it a border radius of `60%`. Also, using the transform property, rotate it at `25` degrees. + +# --hints-- + +Your `.cat-left-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.borderRadius === '60%') +``` + +Your `.cat-left-eye` selector should have a `transform` property set to `rotate(25deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.transform === 'rotate(25deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md new file mode 100644 index 00000000000..b9dc455e5b1 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md @@ -0,0 +1,167 @@ +--- +id: 646de6a97b50a86ac487de86 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Now you will work on the right eye by using the same approach. + +Using a class selector, give your `.cat-right-eye` element a width of `30px` and a height of `40px`. Also, give it a background color of `#000`. + +# --hints-- + +You should have a `.cat-right-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')) +``` + +Your `.cat-right-eye` selector should have a `width` set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.width === '30px') +``` + +Your `.cat-right-eye` selector should have a `height` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.height === '40px') +``` + +Your `.cat-right-eye` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md new file mode 100644 index 00000000000..1cae6709360 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md @@ -0,0 +1,165 @@ +--- +id: 646de7b64467e96b7d35b5cd +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Move the right eye into position with a `position` property of `absolute` a `top` of `54px`, and a `left` of `134px`. + +# --hints-- + +Your `.cat-right-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.position === 'absolute') +``` + +Your `.cat-right-eye` selector should have a `top` property set to `54px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.top === '54px') +``` + +Your `.cat-right-eye` selector should have a `left` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.left === '134px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} + +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md new file mode 100644 index 00000000000..b376c539f32 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md @@ -0,0 +1,162 @@ +--- +id: 646de8478d6f796bfbdccfb2 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +To make the right eye look like an eye, give it a border radius of `60%`. Also, using the transform property, rotate it at `-25` degrees. + +# --hints-- + +Your `.cat-right-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.borderRadius === '60%') +``` + +Your `.cat-right-eye` selector should have a `transform` property set to `rotate(-25deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.transform === 'rotate(-25deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} + +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md new file mode 100644 index 00000000000..74ba34db408 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md @@ -0,0 +1,178 @@ +--- +id: 646de8d204a3426c7d184372 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Those look like eyes, but you can still make them better. That's why you created two inner eyes `div` elements. + +Using a class selector, give your `.cat-left-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`. + +# --hints-- + +You should have a `.cat-left-inner-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')) +``` + +Your `.cat-left-inner-eye` selector should have a `width` set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.width === '10px') +``` + +Your `.cat-left-inner-eye` selector should have a `height` set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.height === '20px') +``` + +Your `.cat-left-inner-eye` selector should have a `background-color` set to `#fff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md new file mode 100644 index 00000000000..b0243121123 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md @@ -0,0 +1,187 @@ +--- +id: 646dea1c98c2426d43a705c3 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Move the left inner eye into position with a `position` property of `absolute`, a `top` of `8px`, and a `left` of `2px`. Also, give it a border radius of `60%` and rotate it at `10` degrees. + +# --hints-- + +Your `.cat-left-inner-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.position === 'absolute') +``` + +Your `.cat-left-inner-eye` selector should have a `top` property set to `8px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.top === '8px') +``` + +Your `.cat-left-inner-eye` selector should have a `left` property set to `2px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.left === '2px') +``` + +Your `.cat-left-inner-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.borderRadius === '60%') +``` + +Your `.cat-left-inner-eye` selector should have a `transform` property set to `10deg`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.transform === 'rotate(10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 10px; + height: 20px; + background-color: #fff; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md new file mode 100644 index 00000000000..1b344dc94cc --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md @@ -0,0 +1,187 @@ +--- +id: 646deb169847f86df0f95bfc +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Using a class selector, give your `.cat-right-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`. + +# --hints-- + +You should have a `.cat-right-inner-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')) +``` + +Your `.cat-right-inner-eye` selector should have a `width` set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.width === '10px') +``` + +Your `.cat-right-inner-eye` selector should have a `height` set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.height === '20px') +``` + +Your `.cat-right-inner-eye` selector should have a `background-color` set to `#fff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md new file mode 100644 index 00000000000..f7933f8c3dc --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md @@ -0,0 +1,198 @@ +--- +id: 646dec359bef3b7811fba5a6 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Move the right inner eye into position with a `position` of `absolute`, a `top` of `8px`, and a `left` of `18px`. Also, give it a border radius of `60%` and rotate it at `-5deg`. + +# --hints-- + +Your `.cat-right-inner-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.position === 'absolute') +``` + +Your `.cat-right-inner-eye` selector should have a `top` property set to `8px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.top === '8px') +``` + +Your `.cat-right-inner-eye` selector should have a `left` property set to `18px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.left === '18px') +``` + +Your `.cat-right-inner-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.borderRadius === '60%') +``` + +Your `.cat-right-inner-eye` selector should have a `transform` property set to `-5deg`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.transform === 'rotate(-5deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 10px; + height: 20px; + background-color: #fff; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md new file mode 100644 index 00000000000..143f0179cfe --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md @@ -0,0 +1,186 @@ +--- +id: 646dedbcba062079128b2ecc +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +It's time to work on the nose. In your HTML, create a `div` element with the class `cat-nose`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 12) +``` + +Your `div` element should have the class `cat-nose`. + +```js +assert(document.querySelectorAll('div')[11].classList.contains('cat-nose')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md new file mode 100644 index 00000000000..bf02b9cf8fc --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md @@ -0,0 +1,200 @@ +--- +id: 646def5e863abf7a14501421 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Using a class selector, give your `.cat-nose` element a left and right border of `15px solid transparent` each. Also give it a bottom border of `20px solid #442c2c`. + +# --hints-- + +You should have a `.cat-nose` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')) +``` + +Your `.cat-nose` selector should have a `border-left` property set to `15px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderLeft === '15px solid transparent') +``` + +Your `.cat-nose` selector should have a `border-right` property set to `15px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderRight === '15px solid transparent') +``` + +Your `.cat-nose` selector should have a `border-bottom` property set to `20px solid #442c2c`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottom === '20px solid rgb(68, 44, 44)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md new file mode 100644 index 00000000000..ef9238633b8 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md @@ -0,0 +1,200 @@ +--- +id: 646df03c8f79337ab46f148b +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Move the nose into position with a `position` property of `absolute`, a `top` of `108px`, and a `left` of `85px`. + +# --hints-- + +Your `.cat-nose` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.position === 'absolute') +``` + +Your `.cat-nose` selector should have a `top` property set to `108px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.top === '108px') +``` + +Your `.cat-nose` selector should have a `left` property set to `85px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.left === '85px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md new file mode 100644 index 00000000000..0318f9d7f46 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md @@ -0,0 +1,215 @@ +--- +id: 646df0cf26413a7b35e4b8b3 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Remove the sharp edges of the nose with border radius of `50%` each on the top-left, bottom-right, and bottom-left corners. Also, rotate it at 180 degrees. + +# --hints-- + +Your `.cat-nose` selector should have a `border-top-left-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderTopLeftRadius === '50%') +``` + +Your `.cat-nose` selector should have a `border-bottom-right-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottomRightRadius === '50%') +``` + +Your `.cat-nose` selector should have a `border-bottom-left-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottomLeftRadius === '50%') +``` + +Your `.cat-nose` selector should have a `transform` property set to `rotate(180deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.transform === 'rotate(180deg)') +``` + +You should not have a `border-top-right-radius` property in your `.cat-nose` selector. + +```js +assert(/border-top-right-radius:\s*\d+%;/.test(code) === false); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md new file mode 100644 index 00000000000..9d8231e174b --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md @@ -0,0 +1,203 @@ +--- +id: 646df1d1aa4ae57bdf1869c4 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Now you will start working on the mouth. There will be a right line and left line for the mouth. + +Create a `div` element with the class `cat-mouth`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 13) +``` + +Your `div` element should have the class `cat-mouth` + +```js +assert(document.querySelectorAll('div')[12].classList.contains('cat-mouth')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md new file mode 100644 index 00000000000..3ef80ee39bb --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md @@ -0,0 +1,217 @@ +--- +id: 646dffd8ce9ac77ec1906f2e +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Inside your `.cat-mouth` element, create a `div` element with the class `cat-mouth-line-left` and another `div` with the class `cat-mouth-line-right`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-mouth`. + +```js +assert(document.querySelectorAll('div.cat-mouth').length === 1); +``` + +You should have two `div` elements inside your `.cat-mouth` element. + +```js +assert(document.querySelectorAll('.cat-mouth div').length === 2); +``` + +The first `div` element inside the `.cat-mouth` element should have the class `cat-mouth-line-left`. + +```js +assert(document.querySelectorAll('.cat-mouth div')[0]?.classList.contains('cat-mouth-line-left')); +``` + +The second `div` element inside the `.cat-mouth` element should have the class `cat-mouth-line-right`. + +```js +assert(document.querySelectorAll('.cat-mouth div')[1]?.classList.contains('cat-mouth-line-right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md new file mode 100644 index 00000000000..a561360c7e9 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md @@ -0,0 +1,227 @@ +--- +id: 646f0417322c0e04983a5149 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Using a class selector, give your `.cat-mouth-line-left` element a `position` of `absolute`, a `top` of `88px` and a `left` of `74px`. This would move it into the right position. + +# --hints-- + +You should have a `cat-mouth-line-left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')) +``` + +Your `.cat-mouth-line-left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.position === 'absolute') +``` + +Your `.cat-mouth-line-left` selector should have a `top` property set to `88px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.top === '88px') +``` + +Your `.cat-mouth-line-left` selector should have a `left` property set to `74px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.left === '74px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + + --fcc-editable-region-- ++ +++ +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md new file mode 100644 index 00000000000..46ce69b8f2c --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md @@ -0,0 +1,214 @@ +--- +id: 646f08293804a30685533c6f +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Using the `transform` property, rotate the left mouth line at `170` degrees. + +# --hints-- + +Your `.cat-mouth-line-left` property should have a `transform` property set to `rotate(170deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.transform === 'rotate(170deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md new file mode 100644 index 00000000000..03853c3938b --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md @@ -0,0 +1,234 @@ +--- +id: 646f09293eb3230723a62f77 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Access your `.cat-mouth-line-right` element with a class selector, then move it into the right position with a `position` of `absolute`, a `top` of `88px` and a `left` of `91px`. + +# --hints-- + +You should have a `.cat-mouth-line-right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')) +``` + +Your `.cat-mouth-line-right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.position === 'absolute') +``` + +Your `.cat-mouth-line-right` selector should have a `top` property set to `88px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.top === '88px') +``` + +Your `.cat-mouth-line-right` selector should have a `left` property set to `91px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.left === '91px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md new file mode 100644 index 00000000000..2a01ed169d2 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md @@ -0,0 +1,221 @@ +--- +id: 646f0c9a1e3360092d1bbd33 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Rotate the right mouth line at `165` degrees. + +# --hints-- + +Your `.cat-mouth-line-left` property should have a `transform` property set to `rotate(165deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.transform === 'rotate(165deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md new file mode 100644 index 00000000000..3d75bf77a02 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md @@ -0,0 +1,231 @@ +--- +id: 646f0ce5737243098ad6e494 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +The last thing you will work on is the whiskers. There are going to be 6 of them, meaning there will be three on each side. + +Create a `div` element with the class `cat-whiskers`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 16) +``` + +Your div element should have the class `cat-whiskers`. + +```js +assert(document.querySelectorAll('div')[15].classList.contains('cat-whiskers')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md new file mode 100644 index 00000000000..6e28a86659a --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md @@ -0,0 +1,243 @@ +--- +id: 646f0ef13604420a8744f7d4 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Inside the `.cat-whiskers` element, create two `div` elements with the class `cat-whiskers-left` and `cat-whiskers-right`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-whiskers` + +```js +assert(document.querySelectorAll('div.cat-whiskers').length === 1) +``` + +You should have two `div` elements inside the `.cat-whiskers` element. + +```js +assert(document.querySelectorAll('.cat-whiskers div').length === 2) +``` + +The first `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-left`. + +```js +assert(document.querySelectorAll('.cat-whiskers div')[0].classList.contains('cat-whiskers-left')) +``` + +The second `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-right`. + +```js +assert(document.querySelectorAll('.cat-whiskers div')[1].classList.contains('cat-whiskers-right')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md new file mode 100644 index 00000000000..291e0fbd52d --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md @@ -0,0 +1,253 @@ +--- +id: 646f0f7c5933560af8e7e380 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Inside the `.cat-whiskers-left` element, create three `div` elements with the classes `cat-whisker-left-top`, `cat-whisker-left-middle`, and `cat-whisker-left-bottom`. + +# --hints-- + +You should not change the existing `div` element with class `cat-whiskers-left`. + +```js +assert(document.querySelectorAll('div.cat-whiskers-left').length === 1) +``` + +You should create three `div` elements inside your `.cat-whiskers-left` element. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div').length === 3) +``` + +The first `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-top`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[0].classList.contains('cat-whisker-left-top')) +``` + +The second `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-middle`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[1].classList.contains('cat-whisker-left-middle')) +``` + +The third `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-bottom`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[2].classList.contains('cat-whisker-left-bottom')) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ + --fcc-editable-region-- ++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md new file mode 100644 index 00000000000..820cbd44d12 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md @@ -0,0 +1,256 @@ +--- +id: 646f102bf87b350b593baa72 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Inside the `.cat-whiskers-right` element, create 3 `div` elements with the class `cat-whisker-right-top`, `cat-whisker-right-middle`, and `cat-whisker-right-bottom`. + +# --hints-- + +You should not change the existing `div` element with class `cat-whiskers-right`. + +```js +assert(document.querySelectorAll('div.cat-whiskers-right').length === 1) +``` + +You should create three `div` elements inside your `.cat-whiskers-right` element. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div').length === 3) +``` + +The first `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-top`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[0].classList.contains('cat-whisker-right-top')) +``` + +The second `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-middle`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[1].classList.contains('cat-whisker-right-middle')) +``` + +The third `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-bottom`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[2].classList.contains('cat-whisker-right-bottom')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ ++ --fcc-editable-region-- ++ ++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md new file mode 100644 index 00000000000..741c609e6b3 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md @@ -0,0 +1,254 @@ +--- +id: 646f107abb89d00bb99f387a +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Use a descendant selector to target the three `div` elements inside your `.cat-whiskers-left` element. Give it a `width` of `40px`, a `height` of `1px`, and a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-whiskers-left div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')) +``` + +Your `.cat-whiskers-left div` selector should have a `width` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.width === '40px') +``` + +Your `.cat-whiskers-left div` selector should have a `height` set to `1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.height === '1px') +``` + +Your `.cat-whiskers-left div` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md new file mode 100644 index 00000000000..b1c107c9c2e --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md @@ -0,0 +1,266 @@ +--- +id: 646f12da0b4c5d0ca162834a +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Using a class selector, move the `.cat-whisker-left-top` element into place with a `position` of `absolute`, a `top` of `120px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-top` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')) +``` + +Your `.cat-whisker-left-top` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.position === 'absolute') +``` + +Your `.cat-whisker-left-top` selector should have a `top` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.top === '120px') +``` + +Your `.cat-whisker-left-top` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md new file mode 100644 index 00000000000..9ae2339b4dc --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md @@ -0,0 +1,254 @@ +--- +id: 646f135eab69d90d0c6d4e9b +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Rotate the left top whisker at `10` degrees. + +# --hints-- + +Your `.cat-whisker-left-top` selector should have a `transform` property set to `rotate(10deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.transform === 'rotate(10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md new file mode 100644 index 00000000000..c0b941997a6 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md @@ -0,0 +1,273 @@ +--- +id: 646f159b2cffb21150b927cb +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Use a class selector to target the `.cat-whisker-left-middle` element. Then move it into place with a `position` property set to `absolute`, a `top` of `127px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-middle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')) +``` + +Your `.cat-whisker-left-middle` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.position === 'absolute') +``` + +Your `.cat-whisker-left-middle` selector should have a `top` property set to `127px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.top === '127px') +``` + +Your `.cat-whisker-left-middle` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md new file mode 100644 index 00000000000..0a537b0812d --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md @@ -0,0 +1,260 @@ +--- +id: 646f164bf100dd11d226161f +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Rotate the left middle whisker at 3 degrees. + +# --hints-- + +Your `.cat-whisker-left-middle` selector should have a `transform` property set to `rotate(3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.transform === 'rotate(3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md new file mode 100644 index 00000000000..651a9405914 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md @@ -0,0 +1,280 @@ +--- +id: 646f1764e2f1d212ba9785a7 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Using a class selector, move the `.cat-whisker-left-bottom` into position with a `position` of `absolute`, a `top` of `134px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-bottom` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')) +``` + +Your `.cat-whisker-left-bottom` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.position === 'absolute') +``` + +Your `.cat-whisker-left-bottom` selector should have a `top` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.top === '134px') +``` + +Your `.cat-whisker-left-bottom` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md new file mode 100644 index 00000000000..bc03c983374 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md @@ -0,0 +1,267 @@ +--- +id: 646f1802a09a171332e14630 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Rotate the left bottom whisker at `-3` degrees. + +# --hints-- + +Your `.cat-whisker-left-bottom` selector should have a `transform` property set to `rotate(-3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.transform === 'rotate(-3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md new file mode 100644 index 00000000000..e365b97d693 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md @@ -0,0 +1,287 @@ +--- +id: 646f4d6c42dc5f214f4e7444 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Now you will work on moving the right whiskers into place. Use class selector to target the `.cat-whisker-right-top` element and give it a `position` of `absolute`, a `top` of `120px`, and a `left` of `109px`. + +# --hints-- + +You should have a `.cat-whisker-right-top` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')) +``` + +Your `.cat-whisker-right-top` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.position === 'absolute') +``` + +Your `.cat-whisker-right-top` selector should have a `top` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.top === '120px') +``` + +Your `.cat-whisker-right-top` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md new file mode 100644 index 00000000000..9df724448e7 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md @@ -0,0 +1,274 @@ +--- +id: 646f4e46e81f7021d5fd9c1d +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Rotate the top-right whisker at -10 degrees. + +# --hints-- + +Your `.cat-whisker-right-top` selector should have a `transform` property set to `rotate(-1deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.transform === 'rotate(-10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md new file mode 100644 index 00000000000..2f79cbf9301 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md @@ -0,0 +1,294 @@ +--- +id: 646f4f6a14e3c522d130a0d2 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Use a class selector to target the `cat-whisker-right-middle` element, then move the right middle whisker into position with a `position` of `absolute`, a `top` of `127px`, and a `left` of `109px`. + +# --hints-- + +You should have a `.cat-whisker-right-middle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')) +``` + +Your `.cat-whisker-right-middle` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.position === 'absolute') +``` + +Your `.cat-whisker-right-middle` selector should have a `top` property set to `127px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.top === '127px') +``` + +Your `.cat-whisker-right-middle` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md new file mode 100644 index 00000000000..a7d861a1258 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md @@ -0,0 +1,281 @@ +--- +id: 646f4fe12b7985232bf475a5 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Rotate the right middle whisker at -3 degrees. + +# --hints-- + +Your `.cat-whisker-right-middle` selector should have a `transform` property set to `rotate(-3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.transform === 'rotate(-3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md new file mode 100644 index 00000000000..d0cf2b64a3f --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md @@ -0,0 +1,302 @@ +--- +id: 646f507e4d1cd323f17db4fc +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Use class selector to target the `.cat-whisker-right-bottom` element, then move it into place with a `position` of `absolute`, a `top` of `134px`, and a `left` of `109px`. + + +# --hints-- + +You should have a `.cat-whisker-right-bottom` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')) +``` + +Your `.cat-whisker-right-bottom` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.position === 'absolute') +``` + +Your `.cat-whisker-right-bottom` selector should have a `top` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.top === '134px') +``` + +Your `.cat-whisker-right-bottom` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md new file mode 100644 index 00000000000..3bf9207660e --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md @@ -0,0 +1,556 @@ +--- +id: 646f516dbfc1342495515625 +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Rotate the bottom-right whisker at 3 degrees. + +With this final step, your cat painting is now complete. + +# --hints-- + +Your `.cat-whisker-right-bottom` selector should have a `transform` property set to `rotate(3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.transform === 'rotate(3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +.cat-whisker-right-bottom { + position: absolute; + top: 134px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +# --solutions-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +.cat-whisker-right-bottom { + position: absolute; + top: 134px; + left: 109px; + transform: rotate(3deg); +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md new file mode 100644 index 00000000000..03ea4e8598b --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md @@ -0,0 +1,77 @@ +--- +id: 6476f5c17f99146071ee884c +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +You could see that nothing happens. The `.cat-head` element did not move despite setting a `top` and `left` of `100px` each. But that's not the case with `relative` positioning. + +When you use the `relative` value, the element is still positioned according to the normal flow of the document, but the `top`, `left`, `bottom`, and `right` values become active. + +Instead of `static`, give you `.cat-head` a position of `relative`, and leave both `top` and `left` properties as they are. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `relative`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'relative') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: static; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md new file mode 100644 index 00000000000..0c28f0f242e --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md @@ -0,0 +1,79 @@ +--- +id: 6476f7a4827bcc61682f2347 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +The next position property is `absolute`. When you use the `absolute` value for your `position` property, the element is taken out of the normal flow of the document, and then its position is determined by the `top`, `right`, `bottom`, and `left` properties. + +Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any pixel value. + + + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `absolute`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute') +``` + +Your `.cat-head` selector should have a `top` property set to any number in `px`. Make sure you add a semi-colon. + +```js +// assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '300px') +assert.match(code, /top:\s*\d{1,4}px;/) +``` + +Your `.cat-head` selector should have a `left` property set to any number in `px`. Make sure you add a semi-colon. + +```js +// assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '400px') +assert.match(code, /left:\s*\d{1,4}px;/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: relative; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md new file mode 100644 index 00000000000..85259f8c8bf --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md @@ -0,0 +1,70 @@ +--- +id: 6476fb7cbaafa36d65e9cf35 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +`fixed` is a `position` property value that lets you make an element fixed to the page no matter where the user scrolls to on the page. + +You'll have to do some more markups to see how `fixed` positioning works. In your HTML, create a `div` element with the class `box`. + +# --hints-- + +You should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 2); +``` + +Your `div` element should have the class `box`. + +```js +assert(document.querySelectorAll('div')[1]?.getAttribute('class') === 'box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + top: 300px; + left: 400px; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md new file mode 100644 index 00000000000..a8a137321fe --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md @@ -0,0 +1,101 @@ +--- +id: 6476fc5cf14b276e6d04e82a +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Use a class selector to give your `.box` element a width of `200px`, a height of `600px`, and a background color of `#000`. Also, give it a `position` of `absolute`, a `top` of `800px` and a `left` of `650px`. + +# --hints-- + +You should have a `.box` selector. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')) +``` + +Your `.box` selector should have a `width` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.width === '200px') +``` + +Your `.box` selector should have a `height` property set to `600px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.height === '600px') +``` + +Your `.box` selector should have a `background-color` property set to `#000`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +Your `.box` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.position === 'absolute') +``` + +Your `.box` selector should have a `left` property set to `650px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.left === '650px') +``` + +Your `.box` selector should have a `top` property set to `800px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.top === '800px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: relative; + top: 100px; + left: 100px; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md new file mode 100644 index 00000000000..bd1a9049d86 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md @@ -0,0 +1,85 @@ +--- +id: 6476fd4213318f6ee211028a +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Now replace the `position` property value of your `.cat-head` with `fixed`. Leave both `top` and `left` as they are. + +After that, scroll up and down to see how the `fixed` value works. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `fixed`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'fixed') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: relative; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 200px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md new file mode 100644 index 00000000000..1c8891e4304 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md @@ -0,0 +1,87 @@ +--- +id: 64770351e8586671ec0911f0 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +The last position property value is `sticky`. `sticky` positioning is a hybrid of `relative` and `fixed` positioning. It allows an element to **stick** to a specific position within its containing element or viewport, based on the scroll position. + +Change the value of the `position` property of `.cat-head` to `sticky`, set `top` to `0`, then remove `left` and its value. + +**Note**: To see how `sticky` works, you have to place a couple of texts before and after your `.cat-head` `div` element. If you scroll up after that, you'll see that the `.cat-head` gets stuck to the top and remains there. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `sticky`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'sticky') +``` + +Your `.cat-head` selector should have a `top` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px') +``` + +You should not have the `left` property and its value in your code. + +```js +assert.notMatch(code, /left:\s*100px;?/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: fixed; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 200px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md new file mode 100644 index 00000000000..a7597864564 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md @@ -0,0 +1,102 @@ +--- +id: 6477062778c85972eb648030 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +You should now center the cat head. + +Give the `.cat-head` element a position property set to `absolute`. Set a value of `0` for the `right`, `left`, `top`, `bottom` properties, then set its `margin` property on all sides to `auto`. That's one way to center an element vertically and horizontally using CSS positioning. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `absolute`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute') +``` + +Your `.cat-head` selector should have a `top` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px') +``` + +Your `.cat-head` selector should have a `left` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '0px') +``` + +Your `.cat-head` selector should have a `right` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.right === '0px') +``` + +Your `.cat-head` selector should have a `bottom` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.bottom === '0px') +``` + +Your `.cat-head` selector should have a `margin` property set to `auto`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.margin === 'auto') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: sticky; + top: 0; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md new file mode 100644 index 00000000000..806db219734 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md @@ -0,0 +1,73 @@ +--- +id: 647d821de0d97b3283c72b36 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Also, remove the `.box` CSS rule and its declarations because you don't need them anymore. + +# --hints-- + +You should remove the `.box` css rule and all its values. + +```js +assert.notMatch(code, /\.box\s*\{\s*width:\s*400px;\s*height:\s*600px;\s*background-color:\s*#000;\s*position:\s*absolute;\s*left:\s*650px;\s*top:\s*800px;?\s*\}\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md new file mode 100644 index 00000000000..6e039d20c5c --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md @@ -0,0 +1,48 @@ +--- +id: 647d855ac12cd436059acd39 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Use the universal selector to add `box-sizing: border-box;` to your CSS. This ensures elements include padding and border in their specified width and height. + +# --hints-- + +You should have the universal selector (`*`). + +```js +// assert.match(code, /\*\s*{\s*.*\s*}/) +assert(new __helpers.CSSHelp(document).getStyle('*')) +``` + +Your universal selector should have a `box-sizing` property set to `border-box`. + +```js +// assert.match(code, /\*\s*{\s*box-sizing:\s*border-box;?\s*}/) +assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md new file mode 100644 index 00000000000..a7a70f95a81 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md @@ -0,0 +1,74 @@ +--- +id: 649353647c44ef4867ab4935 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Remove the `div` element with class `box` because you don't need it anymore. + +# --hints-- + +You should remove the `div` element with class `box` + +```js +assert.notMatch(code, /fCC Cat Painting + + + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md new file mode 100644 index 00000000000..04963838659 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md @@ -0,0 +1,218 @@ +--- +id: 64a2687ef267e5934a2f93e3 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Using a descendant selector, select the two `div` elements inside the `div` with class `cat-mouth`. Give it a width of `30px`, a height of `50px`, and a border of `2px solid #000`. + +# --hints-- + +You should have a `.cat-mouth div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')) +``` + +Your `.cat-mouth div` selector should have a `width` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.width === '30px') +``` + +Your `.cat-mouth div` selector should have a `height` property set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.height === '50px') +``` + +Your `.cat-mouth div` selector should have a `border` property set to `2px solid #000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.border === '2px solid rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md new file mode 100644 index 00000000000..d46fbf6da0d --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md @@ -0,0 +1,212 @@ +--- +id: 64a26ac5540c5493f4641f10 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +You are going to make the two mouth lines into an elliptical shape. So, give the `.cat-mouth div` selector a border color of `black transparent transparent transparent` and a border radius of `190%/190px 150px 0 0`. + +# --hints-- + +Your `.cat-mouth div` selector should have a `border-color` property set to `black transparent transparent transparent`. + +```js +assert.match(code, /border-color:\s*black\s*(transparent)\s*\1\s*\1\s*;?/) +``` + +Your `.cat-mouth div` selector should have a `border-radius` property set to `190%/190px 150px 0 0`. + +```js +assert.match(code, /border-radius:\s*190%\/190px\s*150px\s*0\s*0\s*;?/) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md new file mode 100644 index 00000000000..4f3a8d2de51 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md @@ -0,0 +1,260 @@ +--- +id: 64a3bcbc83e574b58c8ed048 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +As you did in the previous step, use a descendant selector to target the three `div` elements inside your `.cat-whiskers-right` element. Give it a `width` of `40px`, a `height` of `1px`, and a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-whiskers-right div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')) +``` + +Your `.cat-whiskers-right div` selector should have a `width` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.width === '40px') +``` + +Your `.cat-whiskers-right div` selector should have a `height` set to `1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.height === '1px') +``` + +Your `.cat-whiskers-right div` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md index 926912aa8ee..2c998192c03 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md @@ -7,7 +7,7 @@ dashedName: step-1 # --description-- -Set up your HTML with the `DOCTYPE`, `html` indicating this document is in English, `head`, and `body` elements. +Richte deinen HTML-Code mit der `DOCTYPE`-Deklaration, dem `html`-Element, das angibt, dass dieses Dokument englischsprachig ist, mit dem `head`-Element sowie mit dem `body`-Element ein. Gib deinem `head`-Element die passenden `meta`-Elemente für das `charset` und den `viewport`, ein `title`-Element mit einem passenden Titel und ein `link`-Element für dein Stylesheet. @@ -25,7 +25,7 @@ Dein Code sollte ein `html`-Element enthalten. assert.equal(document.querySelectorAll('html')?.length, 1); ``` -Your `html` element should have an opening tag with a `lang` attribute of `en`. +Dein `html`-Element sollte ein öffnendes Tag mit einem `lang`-Attribut mit dem Wert `en` enthalten. ```js assert(code.match(/++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++`. +Setze das `class`-Attribut gleich `canvas`. For example, ``. This will act as the canvas for your painting. # --hints-- -Your code should have a `div` element. +Dein Code sollte ein `div`-Element enthalten. ```js assert(document.querySelectorAll('div').length === 1) ``` -The `div` element should have a `class` with the value `canvas`. +Das `div`-Element sollte eine `class` mit dem Wert `canvas` enthalten. ```js assert(document.querySelector('div').className.split(' ').includes('canvas')) diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md index 4abb75d9a1d..2d815ef561f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md @@ -19,21 +19,21 @@ Obwohl dein `` keinen Text enthält, wird es dennoch als eine Box mit Inhal # --hints-- -Your code should have a `.canvas` selector. +Dein Code sollte einen `.canvas`-Selektor enthalten. ```js const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas'); assert(hasCanvas) ``` -You should set the `width` property to `500px`. +Du solltest die `width`-Eigenschaft auf `500px` setzen. ```js const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px') assert(hasWidth); ``` -Your `.canvas` element should have a `width` of `500px`. +Dein `.canvas`-Element sollte eine `width` von `500px` enthalten. ```js const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md index f2b666b6225..99782e0f262 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md @@ -11,14 +11,14 @@ Add the `height` property with the value `600px` to your `.canvas` rule. # --hints-- -You should set the `height` property to `600px`. +Du solltest die `height`-Eigenschaft auf `600px` setzen. ```js const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px'); assert(hasHeight); ``` -Your `.canvas` element should have a `height` of `600px`. +Dein `.canvas`-Element sollte eine `height` von `600px` haben. ```js const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md index 9ac234235d6..42893c99499 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md @@ -9,28 +9,28 @@ dashedName: step-11 Every painting needs a frame. -Wrap the `.canvas` element in another `div`. Give that `div` the `frame` class. +Bette das `.canvas`-Element in ein anderes `div` ein. Weise diesem `div` die `frame`-Klasse zu. # --hints-- -You should add a new `div` element. +Du solltest ein neues `div`-Element hinzufügen. ```js assert(document.querySelectorAll('div').length === 2) ``` -Your `.canvas` element should be nested in the new `div` element. +Dein `.canvas` Element sollte in dem neuen `div` Element eingebettet sein. ```js assert(document.querySelector('.canvas').parentElement.tagName === 'DIV'); ``` -Your new `div` should have a `class` with the value `frame`. +Dein neues `div` sollte eine `class` mit dem Wert `frame` enthalten. ```js assert(document.querySelector('div').className.split(' ').includes('frame')); ``` -Your new `div` should be within your `body` element. +Dein neues `div` sollte sich innerhalb deines `body`-Elements befinden. ```js assert(document.querySelector('div').parentElement.tagName === 'BODY'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md index 53c96e679cd..bbe0e61f388 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md @@ -7,20 +7,20 @@ dashedName: step-14 # --description-- -Use padding to adjust the spacing within an element. +Verwende Padding, um den Abstand innerhalb eines Elements anzupassen. In `.frame`, use the `padding` shorthand property to increase the space between the `.frame` and `.canvas` elements by `50px`. The shorthand will increase space in the top, bottom, left, and right of the element's border and canvas within. # --hints-- -You should set the `padding` property to `50px`. +Du solltest die `padding`-Eigenschaft auf `50px` setzen. ```js const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px'); assert(hasPadding); ``` -Your `.frame` element should have a `padding` value of `50px`. +Dein `.frame`-Element sollte einen `padding`-Wert von `50px` enthalten. ```js const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md index f2810d73a37..9733934070a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md @@ -11,14 +11,14 @@ Set the `background-color` of `.one` to `#efb762`. # --hints-- -You should set the `background-color` property to `#efb762`. +Du solltest die `background-color`-Eigenschaft auf `#efb762` setzen. ```js const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)'); assert(hasBackground) ``` -Your `.one` element should have a `background-color` value of `#efb762`. +Dein `.one`-Element sollte einen `background-color`-Wert von `#efb762` enthalten. ```js const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md index b0ab61aba43..adcdbefdb1a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md @@ -7,27 +7,27 @@ dashedName: step-22 # --description-- -Adding 1 pixel of padding to the top, bottom, left, and right of the canvas changed its dimensions to 502 pixels x 602 pixels. +Durch das Hinzufügen von 1 Pixel Padding oben, unten, links und rechts der Canavs änderten sich die Dimensionen zu 502 Pixel x 602 Pixel. Replace the `padding` property with `overflow` set to `hidden` - changing the canvas back to its original dimensions. # --hints-- -You should remove the `padding` property from the `.canvas` selector. +Du solltest die `padding`-Eigenschaft aus dem `.canvas`-Selektor entfernen. ```js const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas').getPropertyValue('padding'); assert(!canvasPadding); ``` -You should set the `overflow` property to `hidden`. +Du solltest die `overflow`-Eigenschaft auf `hidden` setzen. ```js const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden'); assert(hasOverflow); ``` -Your `.canvas` element should have an `overflow` value of `hidden`. +Dein `.canvas`-Element sollte einen `overflow`-Wert von `hidden` enthalten. ```js const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md index ced15ec8baf..e05dc04bb3e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md @@ -7,25 +7,25 @@ dashedName: step-24 # --description-- -Create a new CSS rule using the `.two` selector and set its `width` to 475 pixels. +Erstelle eine neue CSS-Regel, indem du den `.two`-Selektor verwendest und seine `width` auf 475 Pixel setzt. # --hints-- -You should have a `.two` selector. +Du solltest einen `.two`-Selektor haben. ```js const hasTwo = new __helpers.CSSHelp(document).getStyle('.two'); assert(hasTwo); ``` -You should set the `width` property to `475px`. +Du solltest die `width`-Eigenschaft auf `475px` setzen. ```js const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px'); assert(hasWidth); ``` -Your `.two` element should have a `width` value of `475px`. +Dein `.two`-Element sollte einen `width`-Wert von `475px` enthalten. ```js const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md index ca131fd0c94..200be9bb1ca 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md @@ -7,18 +7,18 @@ dashedName: step-26 # --description-- -Set the `background-color` of the `.two` element to `#8f0401`. +Setze die `background-color` des `.two`-Elements auf `#8f0401`. # --hints-- -You should set the `background-color` property to `#8f0401`. +Du solltest die `background-color`-Eigenschaft auf `#8f0401` setzen. ```js const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)'); assert(hasBackground); ``` -Your `.two` element should have a `background-color` value of `#8f0401`. +Dein `.two`-Element sollte einen `background-color`-Wert von `#8f0401` enthalten. ```js const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md index 52351252c7e..ae639168cb6 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md @@ -7,30 +7,30 @@ dashedName: step-28 # --description-- -Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle. +Erstelle ein neues `div` mit einem `class`-Wert von `three`, genau unter dem `.two` Element. Dies wird dein drittes Rechteck sein. # --hints-- -Your existing `.one` and `.two` elements should not be changed. +Deine vorhandenen `.one`- und `.two`-Elemente sollten nicht verändert werden. ```js assert(document.querySelectorAll('.one').length === 1); assert(document.querySelectorAll('.two').length === 1); ``` -Your new `div` should be nested in your `.canvas` element. +Dein neues `div` sollte in deinem `.canvas`-Element eingebettet sein. ```js assert(document.querySelector('.canvas').children[2].tagName === 'DIV'); ``` -Your new `div` should come after your `.two` element. +Dein neues `div` sollte nach deinem `.two`-Element stehen. ```js assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV'); ``` -Your new `div` element should have a `class` with the value `three`. +Dein neues `div`-Element sollte eine `class` mit dem Wert `three` enthalten. ```js assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md index f0a8e7d9b36..633e11256a3 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md @@ -7,18 +7,18 @@ dashedName: step-31 # --description-- -Change the `background-color` of `.three` to `#b20403`. +Ändere die `background-color` von `.three` auf `#b20403`. # --hints-- -You should set the `background-color` property to `#b20403`. +Du solltest die `background-color`-Eigenschaft auf `#b20403` setzen. ```js const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)'); assert(hasBackground); ``` -Your `.three` element should have a `background-color` value of `#b20403`. +Dein `.three`-Element sollte einen `background-color`-Wert von `#b20403` enthalten. ```js const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md index df69fce43c0..59304377dca 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md @@ -9,20 +9,20 @@ dashedName: step-33 It's helpful to have your margins push in one direction. -In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels. +In diesem Fall schiebt der untere Rand des `.one`-Elements `.two` um 20 Pixel nach unten. In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels. # --hints-- -You should set the `margin` property to `0 auto 20px`. +Du solltest die `margin`-Eigenschaft auf `0 auto 20px` setzen. ```js const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px'); assert(hasMargin); ``` -Your `.two` element should have a `margin` value of `0 auto 20px`. +Dein `.two`-Element sollte einen `margin`-Wert von `0 auto 20px` enthalten. ```js const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md index f0ca05b7bc9..9c3de58cf3e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md @@ -9,7 +9,7 @@ dashedName: step-34 The colors and shapes of your painting are too sharp to pass as a Rothko. -Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element. +Verwende die `filter`-Eigenschaft, um das Bild um `2px` im `.canvas`-Element zu `blur`. Here's an example of a rule that add a 3px `blur`: @@ -21,7 +21,7 @@ p { # --hints-- -You should set the `filter` property to `blur(2px)`. +Du solltest die `filter`-Eigenschaft auf `blur(2px)` gesetzt haben. ```js const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md index b36562685b5..8a47eba1ed5 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md @@ -11,14 +11,14 @@ Increase the `blur` of `.three` by 2 pixels. # --hints-- -You should set the `filter` property to `blur(2px)`. +Du solltest die `filter`-Eigenschaft auf `blur(2px)` setzen. ```js const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)'); assert(filterFilter.length === 2); ``` -Your `.three` element should have a `filter` value of `blur(2px)`. +Dein `.three`-Element sollte einen `filter`-Wert von `blur(2px)` enthalten. ```js const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md index 419fdec1304..0e8fe79f280 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md @@ -7,18 +7,18 @@ dashedName: step-38 # --description-- -Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`. +Verwende die gleiche `box-shadow`-Deklaration für `.two`, aber ändere die Farbe von `#efb762` zu `#8f0401`. # --hints-- -You should set the `box-shadow` property to `0 0 3px 3px #8f0401`. +Du solltest die `box-shadow`-Eigenschaft auf `0 0 3px 3px #8f0401` setzen. ```js const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px'); assert(hasBoxShadow); ``` -Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`. +Dein `.two`-Element sollte einen `box-shadow`-Wert von `0 0 3px 3px #8f0401` enthalten. ```js const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md index fb957d90974..39bb820af71 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md @@ -11,14 +11,14 @@ Verwende die `border-radius`-Eigenschaft beim `.two`-Selektor, um dessen oberen # --hints-- -You should set the `border-radius` property to `8px 10px`. +Du solltest die `border-radius`-Eigenschaft auf `8px 10px` setzen. ```js const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px'); assert(hasBorderRadius); ``` -Your `.two` element should have a `border-radius` value of `8px 10px`. +Dein `.two`-Element sollte einen `border-radius`-Wert von `8px 10px` enthalten. ```js const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md index 02d226969c0..bd300af284e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md @@ -7,20 +7,20 @@ dashedName: step-43 # --description-- -Rotate each rectangle to give them more of an imperfect, hand-painted look. +Drehe jedes Rechteck, um ihnen ein unvollkommenes, handgemaltes Aussehen zu verleihen. -Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees. +Verwende die `transform`-Eigenschaft beim `.one`-Selektor, um es um 0,6 Grad gegen den Uhrzeigersinn mittels `rotate` zu drehen. # --hints-- -You should set the `transform` property to `rotate(-0.6deg)`. +Du solltest die `transform` Eigenschaft auf `rotate(-0.6deg)` setzen. ```js const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)'); assert(hasTransform); ``` -Your `.one` element should have a `transform` value of `rotate(-0.6deg)`. +Dein `.one`-Element sollte einen `transform`-Wert von `rotate(-0.6deg)` enthalten. ```js const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md index a8a1a424e27..626318a4d9c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md @@ -7,29 +7,29 @@ dashedName: step-2 # --description-- -Below your `h1` element, add a `p` element with the text `8 servings per container`. +Füge unter deinem `h1`-Element ein `p`-Element mit dem Text `8 servings per container` hinzu. # --hints-- -You should add a new `p` element. +Du solltest ein neues `p`-Element hinzufügen. ```js assert.exists(document.querySelector('p')); ``` -Your `p` element should be within your `body` element. +Dein `p`-Element sollte sich innerhalb deines `body`-Elements befinden. ```js assert(document.querySelector('p')?.parentElement?.localName === 'body'); ``` -Your `p` element should come after your `h1` element. +Dein `p`-Element sollte nach deinem `h1`-Element stehen. ```js assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1'); ``` -Your `p` element should have the text `8 servings per container`. +Dein `p`-Element sollte den Text `8 servings per container` enthalten. ```js assert(document.querySelector('p')?.innerText === '8 servings per container'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md index 9de26cd7606..6a59891e463 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md @@ -21,14 +21,14 @@ Your code should have two self-closing `link` elements. assert(document.querySelectorAll('link').length === 2); ``` -Both of your `link` elements should have the `rel` attribute set to `stylesheet`. +Beide `link`-Elemente benötigen ein `rel`-Attribut mit dem Wert `stylesheet`. ```js const links = [...document.querySelectorAll('link')]; assert(links.every(link => link.getAttribute('rel') === 'stylesheet')); ``` -One of your `link` elements should have an `href` attribute set to `./styles.css`. +Eines der `link`-Elemente sollte ein `href`-Attribut mit `./styles.css` als Wert enthalten. ```js assert(code.match(/`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) + +## --text-- + +What are HTML tags? + +## --answers-- + +HTML tags tell the browser what content an element contains. + +--- + +HTML tags tell the browser when to load its content. + +--- + +HTML tags tell the browser what content the next element contains. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md new file mode 100644 index 00000000000..1fa04902849 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md @@ -0,0 +1,49 @@ +--- +id: 637f4e1672c65bc8e73dfe1f +title: HTML Foundations Question B +challengeType: 15 +dashedName: html-foundations-question-b +--- + +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `
`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --text-- + +What are the three parts of most HTML elements? + +## --answers-- + +An opening tag, self closing tag, and content. + +--- + +An opening tag, closing tag, and content. + +--- + +An opening tag, closing tag, and attribute. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md new file mode 100644 index 00000000000..79bd0197756 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md @@ -0,0 +1,54 @@ +--- +id: 637f4e1c72c65bc8e73dfe20 +title: HTML Foundations Question C +challengeType: 15 +dashedName: html-foundations-question-c +--- + +# --description-- + +To demonstrate an HTML boilerplate, you first need an HTML file to work with. + +Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`. + +You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files. + +To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file. + +It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems. + +## The DOCTYPE + +Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``. + +The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4: + +```html + +``` + +However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``. + +Open the `index.html` file created earlier in your text editor and add `` to the very first line. + +# --question-- +## --text-- + +What is the purpose of the `DOCTYPE` declaration? + +## --answers-- + +It tells the browser which version of HTML to use to render the document. + +--- + +It tells the browser that this document uses JavaScript. + +--- + +It tells the browser the title of the document. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md new file mode 100644 index 00000000000..d851163101c --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md @@ -0,0 +1,46 @@ +--- +id: 637f4e2872c65bc8e73dfe21 +title: HTML Foundations Question D +challengeType: 15 +dashedName: html-foundations-question-d +--- + +# --description-- + +After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it. + +This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document. + +Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so: + +```html + + + +``` + +## What is the lang attribute? +`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation. + +# --question-- + +## --text-- + +What is the `html` element? + +## --answers-- + +It is the root element in the document and tells the browser which version of HTML it should use. + +--- + +It is the root element in the document and all other elements should descend from it. + +--- + +It is the root element in the document and all other elements should come after it. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md new file mode 100644 index 00000000000..58e4fab1b96 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md @@ -0,0 +1,41 @@ +--- +id: 6374f208de18c50e48ba767b +title: HTML Foundations Question E +challengeType: 15 +dashedName: html-foundations-question-e +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --assignment-- + +Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. + +## --text-- + +Which of the following statements is true? + +## --answers-- + +CSS is used to create the basic structure of a webpage, and HTML is used to add style. + +--- + +HTML is used to create the basic structure of a webpage, and CSS is used to add style. + +--- + +HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. + + +## --video-solution-- + +2 + + diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md new file mode 100644 index 00000000000..80f5869cff5 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md @@ -0,0 +1,65 @@ +--- +id: 637f4e2f72c65bc8e73dfe22 +title: HTML Foundations Question F +challengeType: 15 +dashedName: html-foundations-question-f +--- + +# --description-- + +The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage. + +## The Charset Meta Element +You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: ``. + +Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser. + +## Title Element +Another element you should always include in the head of an HTML document is the `title` element: + +```html +
My First Webpage +``` + +The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. + +If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open. + +There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum. + +Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag: + + +```html + + + + + +My First Webpage + + +``` + +# --question-- + +## --text-- + +What is the purpose of the `head` element? + +## --answers-- + +The `head` element is used to display all elements that are displayed on the webpage. + +--- + +The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements. + +--- + +The `head` element is used to display the header content on top of the webpage. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md new file mode 100644 index 00000000000..16299d58648 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md @@ -0,0 +1,48 @@ +--- +id: 637f4e3672c65bc8e73dfe23 +videoId: V8UAEoOvqFg +title: HTML Foundations Question G +challengeType: 15 +dashedName: html-foundations-question-g +--- + +# --description-- + +The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. + +To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so: + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s brilliant Building your first web page video above. + +--- + +Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. + +--- + +Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML. + +## --text-- + +What is the purpose of the `body` element? + +## --answers-- + +This is where all important information about the webpage is displayed such as the `title` and `meta` tags. + +--- + +This is where you tell the browser how to render the webpage correctly. + +--- + +This is where all content will be displayed on the page such images, text, and links. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md new file mode 100644 index 00000000000..f99018d79de --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md @@ -0,0 +1,36 @@ +--- +id: 6376327e2724a688c04636e3 +title: HTML Foundations Question H +challengeType: 15 +dashedName: html-foundations-question-h +--- + +# --description-- + + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to add paragraphs of text on a webpage? + +## --answers-- + +CSS + +--- + +JavaScript + +--- + +HTML + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md new file mode 100644 index 00000000000..72ed091e603 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md @@ -0,0 +1,33 @@ +--- +id: 637633162724a688c04636e4 +title: HTML Foundations Question I +challengeType: 15 +dashedName: html-foundations-question-i +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to change the font and background color of a button? + +## --answers-- + +You should use CSS to change the background color and font of a button. + +--- + +You should use JavaScript to change the background color and font of a button. + +--- + +You should use HTML to change the background color and font of a button. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md new file mode 100644 index 00000000000..ebd30965da6 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md @@ -0,0 +1,34 @@ +--- +id: 637633672724a688c04636e5 +title: HTML Foundations Question J +challengeType: 15 +dashedName: html-foundations-question-j +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +What is the difference between HTML, CSS, and JavaScript? + +## --answers-- + +HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. + +--- + +CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. + +--- + +JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-a.md b/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-a.md new file mode 100644 index 00000000000..b4d237448f3 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-a.md @@ -0,0 +1,66 @@ +--- +id: 637f704072c65bc8e73dfe36 +videoId: tsEQgGjSmkM +title: Links and Images Question A +challengeType: 15 +dashedName: links-and-images-question-a +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named `odin-links-and-images`. + +- Within that directory, create a new file named `index.html`. + +- Fill in the usual HTML boilerplate. + +- Finally, add the following `h1` to the `body`: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. + +Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. + +It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Links video above. + +## --text-- + +What HTML tag is used to create a link? + +## --answers-- + +`` + +--- + +`` + +--- + +`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-b.md b/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-b.md
new file mode 100644
index 00000000000..a138268c406
--- /dev/null
+++ b/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-b.md
@@ -0,0 +1,54 @@
+---
+id: 637f703572c65bc8e73dfe35
+title: Links and Images Question B
+challengeType: 15
+dashedName: links-and-images-question-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- finally, add the following `h1` to the `body`: `
Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- +## --text-- + +What is an attribute? +## --answers-- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. + +--- + +An HTML attribute is used to tell the browser what the element contains. + +--- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-c.md b/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-c.md new file mode 100644 index 00000000000..8863b087456 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-c.md @@ -0,0 +1,55 @@ +--- +id: 637f703072c65bc8e73dfe34 +title: Links and Images Question C +challengeType: 15 +dashedName: links-and-images-question-c +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named `odin-links-and-images`. + +- Within that directory, create a new file named `index.html`. + +- Fill in the usual HTML boilerplate. + +- finally, add the following `h1` to the `body`: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --text-- + +What attribute tells links where to go to? + +## --answers-- + +`src` + +--- + +`href` + +--- + +`link` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-d.md b/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-d.md new file mode 100644 index 00000000000..37eebffbabf --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-d.md @@ -0,0 +1,112 @@ +--- +id: 637f702872c65bc8e73dfe33 +videoId: ta3Oxx7Yqbo +title: Links and Images Question D +challengeType: 15 +dashedName: links-and-images-question-d +--- + +# --description-- + + +Generally, there are two kinds of links you will create: + +- Links to pages on other websites on the internet + +- Links to pages located on your own websites + + +## Absolute Links +Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. + +You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. + +`https://www.theodinproject.com/about` + +## Relative Links +Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. + +Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. + +Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: + +```html + + + + +Odin Links and Images + + + +About Page
+ + +``` + +Back in the `index` page, add the following anchor element to create a link to the `about` page: + +```html + +Homepage
+ click me + + About + +``` + +Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. + +This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. + +But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. + +Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. + +Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. + +To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. + +```html + +Homepage
+ About + +``` + +Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. + +In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. + +```html + +Homepage
+ About + +``` + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML File Structure video above. + +## --text-- + +What is the difference between an absolute and a relative link? + +## --answers-- + +An absolute link is a link to another page on the current website. A relative link is a link to another website. + +--- + +An absolute link is a link to another website. A relative link is a link another page on the current website. + +--- + +There is no difference between absolute and relative links. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-e.md b/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-e.md new file mode 100644 index 00000000000..ae008078088 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-e.md @@ -0,0 +1,98 @@ +--- +id: 637f702372c65bc8e73dfe32 +videoId: 0xoztJCHpbQ +title: Links and Images Question E +challengeType: 15 +dashedName: links-and-images-question-e +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+``
+
+---
+
+``
+
+---
+
+`` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-f.md b/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-f.md new file mode 100644 index 00000000000..e1af2d6a659 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-f.md @@ -0,0 +1,93 @@ +--- +id: 637f701c72c65bc8e73dfe31 +title: Links and Images Question F +challengeType: 15 +dashedName: links-and-images-question-f +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `
` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-g.md b/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-g.md
new file mode 100644
index 00000000000..5bc84fa6c96
--- /dev/null
+++ b/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+title: Links and Images Question G
+challengeType: 15
+dashedName: links-and-images-question-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-h.md b/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-h.md
new file mode 100644
index 00000000000..71157081ae7
--- /dev/null
+++ b/curriculum/challenges/german/16-the-odin-project/top-links-and-images/links-and-images-question-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+title: Links and Images Question H
+challengeType: 15
+dashedName: links-and-images-question-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Read about the four main image formats that can be used on the web.
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+TIFF, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-a.md b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-a.md
new file mode 100644
index 00000000000..8698b62aca8
--- /dev/null
+++ b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Question A
+challengeType: 15
+dashedName: working-with-text-question-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua.
+
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ nisi ut aliquip ex ea commodo consequat.
+
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `` tag. + +Changing our example from before to use paragraph elements fixes the issue: + + + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. + +## --text-- + +How do you create a paragraph in HTML? + +## --answers-- + +`
This is a paragraph
` + +--- + +`This is a paragraph
` + +--- + +`This is a paragraph` + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-b.md b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-b.md new file mode 100644 index 00000000000..17d3c900359 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-b.md @@ -0,0 +1,39 @@ +--- +id: 637f4e5f72c65bc8e73dfe28 +title: Working With Text Question B +challengeType: 15 +dashedName: working-with-text-question-b +--- + +# --description-- + +Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. + +There are 6 different levels of headings starting from `` to `
`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. + +Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `
` tag. + + + +Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. + +# --question-- +## --text-- + +How many different levels of headings are there and what is the difference between them? + +## --answers-- + +There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. + +--- + +There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. + +--- + +There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-c.md b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-c.md new file mode 100644 index 00000000000..6ccf0e06658 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-c.md @@ -0,0 +1,47 @@ +--- +id: 637f4e6672c65bc8e73dfe29 +videoId: gW6cBZLUk6M +title: Working With Text Question C +challengeType: 15 +dashedName: working-with-text-question-c +--- + +# --description-- + +The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. + +You can use `strong` on its own: + + + +But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: + + + +Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Bold and Italic Text Video above. + +## --text-- + +What element should you use to make text bold and important? + +## --answers-- + +`This is an important message` + +--- + +`
This is an important message
` + +--- + +`This is an important message` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-d.md b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-d.md new file mode 100644 index 00000000000..e686b2698e0 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-d.md @@ -0,0 +1,38 @@ +--- +id: 637f4e6e72c65bc8e73dfe2a +title: Working With Text Question D +challengeType: 15 +dashedName: working-with-text-question-d +--- + +# --description-- + +The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. + +To use `em` on its own: + + +Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: + + + +# --question-- +## --text-- + +What element should you use to make text italicized to add emphasis? + +## --answers-- + +`This is an italic message` + +--- + +`This is an italic message` + +--- + +`This is an italic message ` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-e.md b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-e.md new file mode 100644 index 00000000000..a0a7ba2fda9 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-e.md @@ -0,0 +1,65 @@ +--- +id: 637f4e7972c65bc8e73dfe2b +title: Working With Text Question E +challengeType: 15 +dashedName: working-with-text-question-e +--- + +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the `body` element is the parent and the `p` is the child: + +```html + + + + +Lorem ipsum dolor sit amet.
+ + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: + +```html + + + + +Lorem ipsum dolor sit amet.
+Ut enim ad minim veniam.
+ + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship do two elements have if they are at the same level of nesting? + +## --answers-- + +The elements are each other's parents. + +--- + +The elements are each other's children. + +--- + +The elements are siblings. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-f.md b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-f.md new file mode 100644 index 00000000000..7d440cfab25 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-f.md @@ -0,0 +1,66 @@ +--- +id: 637f4e8072c65bc8e73dfe2c +title: Working With Text Question F +challengeType: 15 +dashedName: working-with-text-question-f +--- + +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the body element is the parent and the paragraph is the child: + +```html + + + + +Lorem ipsum dolor sit amet.
+ + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: + +```html + + + + +Lorem ipsum dolor sit amet.
+Ut enim ad minim veniam.
+ + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship does an element have with any nested element within it? + +## --answers-- + +The element within the other element is called the parent element. + +--- + +The element within the other element is called the child element. + +--- + +The element within the other element is called the sibling element. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-g.md b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-g.md new file mode 100644 index 00000000000..5f5d141fa46 --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-g.md @@ -0,0 +1,48 @@ +--- +id: 637f4e8772c65bc8e73dfe2d +title: Working With Text Question G +challengeType: 15 +dashedName: working-with-text-question-g +--- + +# --description-- + +HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. + +Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: + +```html +View the html to see the hidden comments
+ + + +Some paragraph text
+ + +``` + +# --question-- + +## --assignment-- + +To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. + +## --text-- + +How do you create HTML comments? + +## --answers-- + +`/* This is an HTML comment */` + +--- + +`` + +--- + +`<-- This is an HTML comment --!>` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-h.md b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-h.md new file mode 100644 index 00000000000..c20b4de097a --- /dev/null +++ b/curriculum/challenges/german/16-the-odin-project/top-working-with-text/working-with-text-question-h.md @@ -0,0 +1,65 @@ +--- +id: 637f4e3e72c65bc8e73dfe24 +videoId: kcHKFZBVtf4 +title: Working with Text Question H +challengeType: 15 +dashedName: working-with-text-question-h +--- + +# --description-- + +If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. + +Unordered lists are created using the `- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-i.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-i.md
new file mode 100644
index 00000000000..05765087c87
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-i.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+title: Working with Text Question I
+challengeType: 15
+dashedName: working-with-text-question-i
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
fCC Cat Painting + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md new file mode 100644 index 00000000000..1757ddb08e0 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md @@ -0,0 +1,51 @@ +--- +id: 646c586be7180e40ddf74ff6 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Give your `body` element a `background-color` of `#c9d2fc`. + +# --hints-- + +You should have a `body` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` selector should have a `background-color` property set to `#c9d2fc`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(201, 210, 252)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + +``` + +```css +* { + box-sizing: border-box; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md new file mode 100644 index 00000000000..c605ff01e1d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md @@ -0,0 +1,66 @@ +--- +id: 646c59e942f35541923104bf +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Back in your HTML, create a `main` element. Inside that `main` element, add a `div` element with the class `cat-head`. + +# --hints-- + +You should have a `main` element. + +```js +assert(document.querySelectorAll('main').length === 1); +``` + +You should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 1); +``` + +Your `div` element should have the class `cat-head`. + +```js +assert(document.querySelector('div')?.getAttribute('class') === 'cat-head'); +``` + +Your `div` element should be inside your `main` tag. + +```js +assert(document.querySelectorAll('main div').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md new file mode 100644 index 00000000000..81eb5c83f27 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md @@ -0,0 +1,79 @@ +--- +id: 646c5ace05e4be4211407935 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +To see the `cat-head` element, give it a linear gradient background with `#5e5e5e` at `85%` and `#45454f` at `100%`. + +You might not notice the difference between these two colors, but they are there. + +# --hints-- + +Your `.cat-head` selector should have a `background` property. + +```js +assert.match(code, /background:/) +``` + +Your `background` property should use the `linear-gradient` function. + +```js +assert.match(code, /background:\s*linear-gradient\(/) +``` + +Your `linear-gradient` function should set the first color to be `#5e5e5e` at `85%`. + +```js +assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%/) +``` + +Your `linear-gradient` function should set the second color to be `#45454f` at `100%`. + +```js +assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%,\s+#45454f\s+100%\);?/) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md new file mode 100644 index 00000000000..98afa6c6b3b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md @@ -0,0 +1,77 @@ +--- +id: 646c5d7057c45f432fcdd46c +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Using a class selector, give the `.cat-head` element a width of `205px` and a height of `180px`. Also, give it a border of `1px solid #000` and a `border-radius` of `46%`. + +# --hints-- + +You should have a `.cat-head` selector. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')) +``` + +Your `.cat-head` selector should have a `width` set to `205px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.width === '205px'); +``` + +Your `.cat-head` selector should have a `height` set to `180px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.height === '180px') +``` + +Your `.cat-head` selector should have a `border` set to `1px solid #000`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.border === '1px solid rgb(0, 0, 0)') +``` + +Your `.cat-head` selector should have a `border-radius` set to `46%`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle(".cat-head")?.borderRadius === '46%') +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md new file mode 100644 index 00000000000..7c88ce9baa8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md @@ -0,0 +1,78 @@ +--- +id: 646c5e727e56e743c9aed4a1 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +CSS positioning lets you set how you want an element to be positioned in the browser. It has a `position` property you can set to `static`, `absolute`, `relative`, `sticky` or `fixed`. + +Once you set the `position` property of the element, you can move the element around by setting a pixel or a percentage value for one or more of the `top`, `right`, `left`, or `bottom` properties. + +`static` is the default positioning for all elements. If you assign it to an element, you won't be able to move it around with `top`, `right`, `left`, or `bottom`. + +Give `.cat-head` a `position` property of `static`, then set the `top` and `left` properties to `100px` each. + + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `static`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'static') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + --fcc-editable-region-- + + --fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md new file mode 100644 index 00000000000..9c460caa45f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md @@ -0,0 +1,80 @@ +--- +id: 646c5ffef5598d449b52ec12 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Now you should work on the cat's ears. There will be a right and a left ear, and inside each, there will be an inner ear. + +Inside your `.cat-head` element, create a `div` element with the class `cat-ears`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-head`. + +```js +assert(document.querySelectorAll('div.cat-head').length === 1); +``` + +You should create one `div` element inside your `.cat-head` element. + +```js +assert(document.querySelectorAll('.cat-head div').length === 1); +``` + +Your `div` element should have the class `cat-ears`. + +```js +assert(document.querySelectorAll('.cat-head div')[0]?.getAttribute('class') === 'cat-ears'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md new file mode 100644 index 00000000000..356b443cc39 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md @@ -0,0 +1,86 @@ +--- +id: 646ce8bb4b35544d501c7184 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Inside your `.cat-ears` element, create two `div` elements with the classes `cat-left-ear` and `cat-right-ear` respectively. + +# --hints-- + +You should not change the existing `div` element with the class `car-ears`. + +```js +assert(document.querySelectorAll('div.cat-ears').length === 1); +``` + +You should create two `div` elements inside your `.cat-ears` element. + +```js +assert(document.querySelectorAll('.cat-ears div').length === 2); +``` + +Your first `div` element should have the class `cat-left-ear`. + +```js +assert(document.querySelectorAll('.cat-ears div')[0]?.classList.contains('cat-left-ear')); +``` + +Your second `div` element should have the class `cat-right-ear`. + +```js +assert(document.querySelectorAll('.cat-ears div')[1]?.classList.contains('cat-right-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md new file mode 100644 index 00000000000..f868fcd598d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md @@ -0,0 +1,83 @@ +--- +id: 646ce9d790d2a44de5f99e04 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Inside your `.cat-left-ear` element, create another `div` element with the class `cat-left-inner-ear`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-ear`. + +```js +assert(document.querySelectorAll('div.cat-left-ear').length === 1); +``` + +You should have a `div` element inside your `.cat-left-ear` element. + +```js +assert(document.querySelectorAll('.cat-left-ear div').length === 1); +``` + +Your `div` element should have the class `cat-left-inner-ear`. + +```js +assert(document.querySelectorAll('.cat-left-ear div')[0]?.classList.contains('cat-left-inner-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md new file mode 100644 index 00000000000..deb18782568 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md @@ -0,0 +1,85 @@ +--- +id: 646ceae4d57c214e6b03576c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Inside your `.cat-right-ear` element, create another `div` element with the class `cat-right-inner-ear`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-right-ear`. + +```js +assert(document.querySelectorAll('div.cat-right-ear').length === 1); +``` + +You should have a `div` element inside your `.cat-right-ear` element. + +```js +assert(document.querySelectorAll('.cat-right-ear div').length === 1); +``` + +Your `div` element should have the class `cat-right-inner-ear`. + +```js +assert(document.querySelectorAll('.cat-right-ear div')[0]?.classList.contains('cat-right-inner-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md new file mode 100644 index 00000000000..ae13eae4db7 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md @@ -0,0 +1,95 @@ +--- +id: 646ceb843412c74edee27a79 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +You are going to make each ear look like a triangle. + +Using a class selector, give the `.cat-left-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`. + +# --hints-- + +You should have a `.cat-left-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')) +``` + +Your `.cat-left-ear` selector should have a `border-left` property set to `35px solid transparent` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderLeft === '35px solid transparent') +``` + +Your `.cat-left-ear` selector should have a `border-right` property set to `35px solid transparent` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderRight === '35px solid transparent') +``` + +Your `.cat-left-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderBottom === '70px solid rgb(94, 94, 94)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md new file mode 100644 index 00000000000..60b4d9ebfde --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md @@ -0,0 +1,92 @@ +--- +id: 646cecc9eb5c4f4f73dafd07 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Move the left ear into position by setting a position of `absolute`, a `top` of `-26px`, and a `left` of `-31px`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.position === 'absolute') +``` + +Your `.cat-left-ear` selector should have a `top` property set to `-26px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.top === '-26px') +``` + +Your `.cat-left-ear` selector should have a `left` property set to `-31px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.left === '-31px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md new file mode 100644 index 00000000000..a0b737ac3d9 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md @@ -0,0 +1,89 @@ +--- +id: 646cef0c2b98915094df7099 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Those edges are too sharp for an ear. So, set the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-left-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md new file mode 100644 index 00000000000..3bcd393bf42 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md @@ -0,0 +1,89 @@ +--- +id: 646cf1206cac5f51804f49cf +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +To position the left ear properly, you can use CSS transform to rotate it in a certain degree. + +The `transform` property allows you to modify the shape, position, and size of an element without changing the layout or affecting the surrounding elements. It has functions such as `translate()`, `rotate()`, `scale()`, `skew()`, and `matrix()`. + +Set the `transform` property to `rotate(-45deg)` and see what happens. + +# --hints-- + +You should set the `transform` property of your `.cat-left-ear` element to `rotate(-45deg)`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.transform === 'rotate(-45deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md new file mode 100644 index 00000000000..51bb049e2dd --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md @@ -0,0 +1,107 @@ +--- +id: 646cf2249f02ca5233d9af7c +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Now you can work on the right ear of the cat. You have the HTML for it already. + +Using a class selector, give the `.cat-right-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`. + +# --hints-- + +You should have a `.cat-right-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')) +``` + +Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent') +``` + +Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent') +``` + +Your `.cat-right-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '70px solid rgb(94, 94, 94)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md new file mode 100644 index 00000000000..dfce258d838 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md @@ -0,0 +1,104 @@ +--- +id: 646cf48d8f8e1f535a1821d3 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Move the right ear into position with a `position` property set to `absolute`, a `top` of `-26px`, and a `left` of `163px`. + +# --hints-- + +Your `.cat-right-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.position === 'absolute') +``` + +Your `.cat-right-ear` selector should have a `top` property set to `-26px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.top === '-26px') +``` + +Your `.cat-right-ear` selector should have a `left` property set to `163px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.left === '163px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md new file mode 100644 index 00000000000..d4525731d1f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md @@ -0,0 +1,95 @@ +--- +id: 646cf6cbca98e258da65c979 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +As you did for the left ear, rotate the right ear at 45 degrees. + +# --hints-- + +You should set the `transform` property of your `.right-ear` element to `rotate(45deg)`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.transform === 'rotate(45deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md new file mode 100644 index 00000000000..bbd36a62759 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md @@ -0,0 +1,102 @@ +--- +id: 646cf88aa884405a11ea5bcc +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Remove the sharp border of the right ear by setting the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`. + +# --hints-- + +Your `.cat-right-ear` selector should have a `border-top-left-radius` property set to `90px`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-right-ear` selector should have a `border-top-right-radius` property set to `10px`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md new file mode 100644 index 00000000000..bb200fd1069 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md @@ -0,0 +1,102 @@ +--- +id: 646cfc2b8e6fe95c20a819d5 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The ears should always be placed above the part of the head it overlaps. You can do this with the `z-index` property. + +`z-index` is a property you can use to define the order of overlapping HTML elements. Any element with a higher `z-index` will always be positioned over an element with a lower `z-index`. + +To see `z-index` in action, set the `z-index`property of the left ear to `-1`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `z-index` of `-1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '-1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md new file mode 100644 index 00000000000..7f2be20c198 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md @@ -0,0 +1,100 @@ +--- +id: 646cfd853634255d02b64cc1 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +That's not the behavior you want. You should make the ears display over the head so the borders that overlap with them don't show. + +Instead of `-1`, set the `z-index` property of the left ear to `1`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `z-index` of `1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + --fcc-editable-region-- + z-index: -1; + --fcc-editable-region-- + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md new file mode 100644 index 00000000000..b892d61ca1d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md @@ -0,0 +1,99 @@ +--- +id: 646cfde6ac612e5d60391f50 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Set the `z-index`property of the right ear to `1` so it always stays over the head. + +# --hints-- + +Your `.cat-right-ear` selector should have a `z-index` of `1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.zIndex === '1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + --fcc-editable-region-- + + --fcc-editable-region-- + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md new file mode 100644 index 00000000000..1d7411ad660 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md @@ -0,0 +1,121 @@ +--- +id: 646dd556d524bc61c0139bd6 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Most cats have different colors in their ear and the inner part of the same ear. You can implement the same too. That's why you defined a `div` element for both right and left inner ears a while ago. + +Using a class selector, give your `.cat-left-inner-ear` element a left and right border of `20px solid transparent` each. Also give it a bottom border of `40px solid #3b3b4f`. + +# --hints-- + +You should have a `.cat-left-inner-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')) +``` + +Your `.cat-left-inner-ear` selector should have a `border-left` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderLeft === '20px solid transparent') +``` + +Your `.cat-left-inner-ear` selector should have a `border-right` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderRight === '20px solid transparent') +``` + +Your `.cat-left-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md new file mode 100644 index 00000000000..8be0ea3110e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md @@ -0,0 +1,118 @@ +--- +id: 646dd6f9caa862627dd87772 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Move the inner ear into position with a `position` property set to `absolute`, a `top` of `22px`, and a `left` of `-20px`. + +# --hints-- + +Your `.cat-left-inner-ear` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.position === 'absolute') +``` + +Your `.cat-left-inner-ear` selector should have a `top` property set to `22px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.top === '22px') +``` + +Your `.cat-left-inner-ear` selector should have a `left` property set to `-20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.left === '-20px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md new file mode 100644 index 00000000000..7e24c8e937c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md @@ -0,0 +1,127 @@ +--- +id: 646dd7cfd0cfac630c1dd520 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +To remove all the pointed edges of the ear, set a bottom-right and bottom-left border radius of `40%` each, a top-left border radius of `90px`, and a top-right border radius of `10px`. + +# --hints-- + +Your `.cat-left-inner-ear` selector should have a `border-bottom-right-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottomRightRadius === '40%') +``` + +Your `.cat-left-inner-ear` selector should have a `border-bottom-left-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottomLeftRadius === '40%') +``` + +Your `.cat-left-inner-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-left-inner-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md new file mode 100644 index 00000000000..ba3b89e07d1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md @@ -0,0 +1,132 @@ +--- +id: 646dd8c79ec23463a3d0e356 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +It's time to work on the right inner ear. Using a class selector, give your `.cat-right-inner-ear` element a left and right border of `20px solid transparent`. Also, give it a bottom border of `40px solid #3b3b4f`. + +# --hints-- + +You should have a `.cat-right-inner-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')) +``` + +Your `.cat-right-inner-ear` selector should have a `border-left` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderLeft === '20px solid transparent') +``` + +Your `.cat-right-inner-ear` selector should have a `border-right` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderRight === '20px solid transparent') +``` + +Your `.cat-right-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md new file mode 100644 index 00000000000..f48ba0bd881 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md @@ -0,0 +1,131 @@ +--- +id: 646dd9d9a729916460724f16 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Move the right inner ear into position with a `position` property set to `absolute`, a `top` of `22px` and a `left` of `-20px`. + +# --hints-- + +Your `.cat-right-inner-ear` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.position === 'absolute') +``` + +Your `.cat-right-inner-ear` selector should have a `top` property set to `22px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.top === '22px') +``` + +Your `.cat-right-inner-ear` selector should have a `left` property set to `-20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.left === '-20px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md new file mode 100644 index 00000000000..12d8b78a661 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md @@ -0,0 +1,140 @@ +--- +id: 646ddab8afd73764f5241bbf +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +As you did for the left inner ear, remove the sharp edges of the right inner ear by setting a bottom-right and bottom-left border radius of `40%`, a top-left border radius of `90px`, and a top-right border radius of `10px`. + +# --hints-- + +Your `.cat-right-inner-ear` selector should have a `border-bottom-right-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottomRightRadius === '40%') +``` + +Your `.cat-right-inner-ear` selector should have a `border-bottom-left-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottomLeftRadius === '40%') +``` + +Your `.cat-right-inner-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-right-inner-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md new file mode 100644 index 00000000000..5a2488dca6b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md @@ -0,0 +1,147 @@ +--- +id: 646ddb61ff08366570cc5902 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +You will now start working on the cat's eyes. Like the ears, the eyes will have inner eyes. + +Create a `div` element with the class `cat-eyes`. Inside the `cat-eyes` element, create two `div` elements with the class `cat-left-eye` and `cat-right-eye` respectively. + +# --hints-- + +You should create a `div` element with the class `cat-eyes`. + +```js +assert(document.querySelectorAll('.cat-eyes').length === 1); +``` + +You should create two `div` elements inside the `.cat-eyes` element. + +```js +assert(document.querySelectorAll('.cat-eyes div').length === 2); +``` + +The first `div` element inside the `.cat-eyes` element should have the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('.cat-eyes div')[0].classList.contains('cat-left-eye')); +``` + +The second `div` element inside the `.cat-eyes` element should have the class `cat-right-eye`. + +```js +assert(document.querySelectorAll('.cat-eyes div')[1].classList.contains('cat-right-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md new file mode 100644 index 00000000000..9b995228d29 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md @@ -0,0 +1,144 @@ +--- +id: 646ddd3f9f97a0667b964bdb +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Inside the `.cat-left-eye` element, create another `div` element with the class `cat-left-inner-eye`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('div.cat-left-eye').length === 1); +``` + +You should have a `div` element inside your `.cat-left-eye` element. + +```js +assert(document.querySelectorAll('.cat-left-eye div').length === 1); +``` + +Your `div` element should have the class `cat-left-inner-eye`. + +```js +assert(document.querySelectorAll('.cat-left-eye div')[0]?.classList.contains('cat-left-inner-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md new file mode 100644 index 00000000000..5bad715a154 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md @@ -0,0 +1,146 @@ +--- +id: 646dddfb3a301c66ec513c56 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Inside the `.cat-right-eye` element, create another `div` element with the class `cat-right-inner-eye`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('div.cat-right-eye').length === 1); +``` + +You should have a `div` element inside your `.cat-right-eye` element. + +```js +assert(document.querySelectorAll('.cat-right-eye div').length === 1); +``` + +Your `div` element should have the class `cat-right-inner-eye`. + +```js +assert(document.querySelectorAll('.cat-right-eye div')[0]?.classList.contains('cat-right-inner-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md new file mode 100644 index 00000000000..9cf9b19e226 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md @@ -0,0 +1,154 @@ +--- +id: 646dde7dc20dc167489faa69 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Using a class selector, give your `.cat-left-eye` element a `width` of `30px` and a `height` of `40px`. Also, give it a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-left-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')) +``` + +Your `.cat-left-eye` selector should have a `width` set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.width === '30px') +``` + +Your `.cat-left-eye` selector should have a `height` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.height === '40px') +``` + +Your `.cat-left-eye` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md new file mode 100644 index 00000000000..45ed732e12d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md @@ -0,0 +1,153 @@ +--- +id: 646ddf888632fa67f1180940 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Move the left eye into position with a `position` property of `absolute` a `top` of `54px`, and a `left` of `39px`. + +# --hints-- + +Your `.cat-left-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.position === 'absolute') +``` + +Your `.cat-left-eye` selector should have a `top` property set to `54px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.top === '54px') +``` + +Your `.cat-left-eye` selector should have a `left` property set to `39px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.left === '39px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md new file mode 100644 index 00000000000..38088bba67e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md @@ -0,0 +1,150 @@ +--- +id: 646de5dc8988076a1d992afd +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +To make the left eye look like an eye, give it a border radius of `60%`. Also, using the transform property, rotate it at `25` degrees. + +# --hints-- + +Your `.cat-left-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.borderRadius === '60%') +``` + +Your `.cat-left-eye` selector should have a `transform` property set to `rotate(25deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.transform === 'rotate(25deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md new file mode 100644 index 00000000000..b9dc455e5b1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md @@ -0,0 +1,167 @@ +--- +id: 646de6a97b50a86ac487de86 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Now you will work on the right eye by using the same approach. + +Using a class selector, give your `.cat-right-eye` element a width of `30px` and a height of `40px`. Also, give it a background color of `#000`. + +# --hints-- + +You should have a `.cat-right-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')) +``` + +Your `.cat-right-eye` selector should have a `width` set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.width === '30px') +``` + +Your `.cat-right-eye` selector should have a `height` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.height === '40px') +``` + +Your `.cat-right-eye` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md new file mode 100644 index 00000000000..1cae6709360 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md @@ -0,0 +1,165 @@ +--- +id: 646de7b64467e96b7d35b5cd +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Move the right eye into position with a `position` property of `absolute` a `top` of `54px`, and a `left` of `134px`. + +# --hints-- + +Your `.cat-right-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.position === 'absolute') +``` + +Your `.cat-right-eye` selector should have a `top` property set to `54px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.top === '54px') +``` + +Your `.cat-right-eye` selector should have a `left` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.left === '134px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md new file mode 100644 index 00000000000..b376c539f32 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md @@ -0,0 +1,162 @@ +--- +id: 646de8478d6f796bfbdccfb2 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +To make the right eye look like an eye, give it a border radius of `60%`. Also, using the transform property, rotate it at `-25` degrees. + +# --hints-- + +Your `.cat-right-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.borderRadius === '60%') +``` + +Your `.cat-right-eye` selector should have a `transform` property set to `rotate(-25deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.transform === 'rotate(-25deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md new file mode 100644 index 00000000000..74ba34db408 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md @@ -0,0 +1,178 @@ +--- +id: 646de8d204a3426c7d184372 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Those look like eyes, but you can still make them better. That's why you created two inner eyes `div` elements. + +Using a class selector, give your `.cat-left-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`. + +# --hints-- + +You should have a `.cat-left-inner-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')) +``` + +Your `.cat-left-inner-eye` selector should have a `width` set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.width === '10px') +``` + +Your `.cat-left-inner-eye` selector should have a `height` set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.height === '20px') +``` + +Your `.cat-left-inner-eye` selector should have a `background-color` set to `#fff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md new file mode 100644 index 00000000000..b0243121123 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md @@ -0,0 +1,187 @@ +--- +id: 646dea1c98c2426d43a705c3 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Move the left inner eye into position with a `position` property of `absolute`, a `top` of `8px`, and a `left` of `2px`. Also, give it a border radius of `60%` and rotate it at `10` degrees. + +# --hints-- + +Your `.cat-left-inner-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.position === 'absolute') +``` + +Your `.cat-left-inner-eye` selector should have a `top` property set to `8px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.top === '8px') +``` + +Your `.cat-left-inner-eye` selector should have a `left` property set to `2px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.left === '2px') +``` + +Your `.cat-left-inner-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.borderRadius === '60%') +``` + +Your `.cat-left-inner-eye` selector should have a `transform` property set to `10deg`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.transform === 'rotate(10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 10px; + height: 20px; + background-color: #fff; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md new file mode 100644 index 00000000000..1b344dc94cc --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md @@ -0,0 +1,187 @@ +--- +id: 646deb169847f86df0f95bfc +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Using a class selector, give your `.cat-right-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`. + +# --hints-- + +You should have a `.cat-right-inner-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')) +``` + +Your `.cat-right-inner-eye` selector should have a `width` set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.width === '10px') +``` + +Your `.cat-right-inner-eye` selector should have a `height` set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.height === '20px') +``` + +Your `.cat-right-inner-eye` selector should have a `background-color` set to `#fff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md new file mode 100644 index 00000000000..f7933f8c3dc --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md @@ -0,0 +1,198 @@ +--- +id: 646dec359bef3b7811fba5a6 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Move the right inner eye into position with a `position` of `absolute`, a `top` of `8px`, and a `left` of `18px`. Also, give it a border radius of `60%` and rotate it at `-5deg`. + +# --hints-- + +Your `.cat-right-inner-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.position === 'absolute') +``` + +Your `.cat-right-inner-eye` selector should have a `top` property set to `8px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.top === '8px') +``` + +Your `.cat-right-inner-eye` selector should have a `left` property set to `18px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.left === '18px') +``` + +Your `.cat-right-inner-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.borderRadius === '60%') +``` + +Your `.cat-right-inner-eye` selector should have a `transform` property set to `-5deg`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.transform === 'rotate(-5deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 10px; + height: 20px; + background-color: #fff; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md new file mode 100644 index 00000000000..143f0179cfe --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md @@ -0,0 +1,186 @@ +--- +id: 646dedbcba062079128b2ecc +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +It's time to work on the nose. In your HTML, create a `div` element with the class `cat-nose`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 12) +``` + +Your `div` element should have the class `cat-nose`. + +```js +assert(document.querySelectorAll('div')[11].classList.contains('cat-nose')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md new file mode 100644 index 00000000000..bf02b9cf8fc --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md @@ -0,0 +1,200 @@ +--- +id: 646def5e863abf7a14501421 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Using a class selector, give your `.cat-nose` element a left and right border of `15px solid transparent` each. Also give it a bottom border of `20px solid #442c2c`. + +# --hints-- + +You should have a `.cat-nose` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')) +``` + +Your `.cat-nose` selector should have a `border-left` property set to `15px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderLeft === '15px solid transparent') +``` + +Your `.cat-nose` selector should have a `border-right` property set to `15px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderRight === '15px solid transparent') +``` + +Your `.cat-nose` selector should have a `border-bottom` property set to `20px solid #442c2c`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottom === '20px solid rgb(68, 44, 44)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md new file mode 100644 index 00000000000..ef9238633b8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md @@ -0,0 +1,200 @@ +--- +id: 646df03c8f79337ab46f148b +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Move the nose into position with a `position` property of `absolute`, a `top` of `108px`, and a `left` of `85px`. + +# --hints-- + +Your `.cat-nose` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.position === 'absolute') +``` + +Your `.cat-nose` selector should have a `top` property set to `108px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.top === '108px') +``` + +Your `.cat-nose` selector should have a `left` property set to `85px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.left === '85px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md new file mode 100644 index 00000000000..0318f9d7f46 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md @@ -0,0 +1,215 @@ +--- +id: 646df0cf26413a7b35e4b8b3 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Remove the sharp edges of the nose with border radius of `50%` each on the top-left, bottom-right, and bottom-left corners. Also, rotate it at 180 degrees. + +# --hints-- + +Your `.cat-nose` selector should have a `border-top-left-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderTopLeftRadius === '50%') +``` + +Your `.cat-nose` selector should have a `border-bottom-right-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottomRightRadius === '50%') +``` + +Your `.cat-nose` selector should have a `border-bottom-left-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottomLeftRadius === '50%') +``` + +Your `.cat-nose` selector should have a `transform` property set to `rotate(180deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.transform === 'rotate(180deg)') +``` + +You should not have a `border-top-right-radius` property in your `.cat-nose` selector. + +```js +assert(/border-top-right-radius:\s*\d+%;/.test(code) === false); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md new file mode 100644 index 00000000000..9d8231e174b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md @@ -0,0 +1,203 @@ +--- +id: 646df1d1aa4ae57bdf1869c4 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Now you will start working on the mouth. There will be a right line and left line for the mouth. + +Create a `div` element with the class `cat-mouth`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 13) +``` + +Your `div` element should have the class `cat-mouth` + +```js +assert(document.querySelectorAll('div')[12].classList.contains('cat-mouth')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md new file mode 100644 index 00000000000..3ef80ee39bb --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md @@ -0,0 +1,217 @@ +--- +id: 646dffd8ce9ac77ec1906f2e +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Inside your `.cat-mouth` element, create a `div` element with the class `cat-mouth-line-left` and another `div` with the class `cat-mouth-line-right`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-mouth`. + +```js +assert(document.querySelectorAll('div.cat-mouth').length === 1); +``` + +You should have two `div` elements inside your `.cat-mouth` element. + +```js +assert(document.querySelectorAll('.cat-mouth div').length === 2); +``` + +The first `div` element inside the `.cat-mouth` element should have the class `cat-mouth-line-left`. + +```js +assert(document.querySelectorAll('.cat-mouth div')[0]?.classList.contains('cat-mouth-line-left')); +``` + +The second `div` element inside the `.cat-mouth` element should have the class `cat-mouth-line-right`. + +```js +assert(document.querySelectorAll('.cat-mouth div')[1]?.classList.contains('cat-mouth-line-right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md new file mode 100644 index 00000000000..a561360c7e9 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md @@ -0,0 +1,227 @@ +--- +id: 646f0417322c0e04983a5149 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Using a class selector, give your `.cat-mouth-line-left` element a `position` of `absolute`, a `top` of `88px` and a `left` of `74px`. This would move it into the right position. + +# --hints-- + +You should have a `cat-mouth-line-left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')) +``` + +Your `.cat-mouth-line-left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.position === 'absolute') +``` + +Your `.cat-mouth-line-left` selector should have a `top` property set to `88px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.top === '88px') +``` + +Your `.cat-mouth-line-left` selector should have a `left` property set to `74px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.left === '74px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + + --fcc-editable-region-- ++ +++ +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md new file mode 100644 index 00000000000..46ce69b8f2c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md @@ -0,0 +1,214 @@ +--- +id: 646f08293804a30685533c6f +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Using the `transform` property, rotate the left mouth line at `170` degrees. + +# --hints-- + +Your `.cat-mouth-line-left` property should have a `transform` property set to `rotate(170deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.transform === 'rotate(170deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md new file mode 100644 index 00000000000..03853c3938b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md @@ -0,0 +1,234 @@ +--- +id: 646f09293eb3230723a62f77 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Access your `.cat-mouth-line-right` element with a class selector, then move it into the right position with a `position` of `absolute`, a `top` of `88px` and a `left` of `91px`. + +# --hints-- + +You should have a `.cat-mouth-line-right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')) +``` + +Your `.cat-mouth-line-right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.position === 'absolute') +``` + +Your `.cat-mouth-line-right` selector should have a `top` property set to `88px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.top === '88px') +``` + +Your `.cat-mouth-line-right` selector should have a `left` property set to `91px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.left === '91px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md new file mode 100644 index 00000000000..2a01ed169d2 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md @@ -0,0 +1,221 @@ +--- +id: 646f0c9a1e3360092d1bbd33 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Rotate the right mouth line at `165` degrees. + +# --hints-- + +Your `.cat-mouth-line-left` property should have a `transform` property set to `rotate(165deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.transform === 'rotate(165deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md new file mode 100644 index 00000000000..3d75bf77a02 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md @@ -0,0 +1,231 @@ +--- +id: 646f0ce5737243098ad6e494 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +The last thing you will work on is the whiskers. There are going to be 6 of them, meaning there will be three on each side. + +Create a `div` element with the class `cat-whiskers`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 16) +``` + +Your div element should have the class `cat-whiskers`. + +```js +assert(document.querySelectorAll('div')[15].classList.contains('cat-whiskers')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md new file mode 100644 index 00000000000..6e28a86659a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md @@ -0,0 +1,243 @@ +--- +id: 646f0ef13604420a8744f7d4 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Inside the `.cat-whiskers` element, create two `div` elements with the class `cat-whiskers-left` and `cat-whiskers-right`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-whiskers` + +```js +assert(document.querySelectorAll('div.cat-whiskers').length === 1) +``` + +You should have two `div` elements inside the `.cat-whiskers` element. + +```js +assert(document.querySelectorAll('.cat-whiskers div').length === 2) +``` + +The first `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-left`. + +```js +assert(document.querySelectorAll('.cat-whiskers div')[0].classList.contains('cat-whiskers-left')) +``` + +The second `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-right`. + +```js +assert(document.querySelectorAll('.cat-whiskers div')[1].classList.contains('cat-whiskers-right')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md new file mode 100644 index 00000000000..291e0fbd52d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md @@ -0,0 +1,253 @@ +--- +id: 646f0f7c5933560af8e7e380 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Inside the `.cat-whiskers-left` element, create three `div` elements with the classes `cat-whisker-left-top`, `cat-whisker-left-middle`, and `cat-whisker-left-bottom`. + +# --hints-- + +You should not change the existing `div` element with class `cat-whiskers-left`. + +```js +assert(document.querySelectorAll('div.cat-whiskers-left').length === 1) +``` + +You should create three `div` elements inside your `.cat-whiskers-left` element. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div').length === 3) +``` + +The first `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-top`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[0].classList.contains('cat-whisker-left-top')) +``` + +The second `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-middle`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[1].classList.contains('cat-whisker-left-middle')) +``` + +The third `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-bottom`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[2].classList.contains('cat-whisker-left-bottom')) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ + --fcc-editable-region-- ++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md new file mode 100644 index 00000000000..820cbd44d12 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md @@ -0,0 +1,256 @@ +--- +id: 646f102bf87b350b593baa72 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Inside the `.cat-whiskers-right` element, create 3 `div` elements with the class `cat-whisker-right-top`, `cat-whisker-right-middle`, and `cat-whisker-right-bottom`. + +# --hints-- + +You should not change the existing `div` element with class `cat-whiskers-right`. + +```js +assert(document.querySelectorAll('div.cat-whiskers-right').length === 1) +``` + +You should create three `div` elements inside your `.cat-whiskers-right` element. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div').length === 3) +``` + +The first `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-top`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[0].classList.contains('cat-whisker-right-top')) +``` + +The second `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-middle`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[1].classList.contains('cat-whisker-right-middle')) +``` + +The third `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-bottom`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[2].classList.contains('cat-whisker-right-bottom')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ ++ --fcc-editable-region-- ++ ++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md new file mode 100644 index 00000000000..741c609e6b3 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md @@ -0,0 +1,254 @@ +--- +id: 646f107abb89d00bb99f387a +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Use a descendant selector to target the three `div` elements inside your `.cat-whiskers-left` element. Give it a `width` of `40px`, a `height` of `1px`, and a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-whiskers-left div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')) +``` + +Your `.cat-whiskers-left div` selector should have a `width` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.width === '40px') +``` + +Your `.cat-whiskers-left div` selector should have a `height` set to `1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.height === '1px') +``` + +Your `.cat-whiskers-left div` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md new file mode 100644 index 00000000000..b1c107c9c2e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md @@ -0,0 +1,266 @@ +--- +id: 646f12da0b4c5d0ca162834a +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Using a class selector, move the `.cat-whisker-left-top` element into place with a `position` of `absolute`, a `top` of `120px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-top` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')) +``` + +Your `.cat-whisker-left-top` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.position === 'absolute') +``` + +Your `.cat-whisker-left-top` selector should have a `top` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.top === '120px') +``` + +Your `.cat-whisker-left-top` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md new file mode 100644 index 00000000000..9ae2339b4dc --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md @@ -0,0 +1,254 @@ +--- +id: 646f135eab69d90d0c6d4e9b +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Rotate the left top whisker at `10` degrees. + +# --hints-- + +Your `.cat-whisker-left-top` selector should have a `transform` property set to `rotate(10deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.transform === 'rotate(10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md new file mode 100644 index 00000000000..c0b941997a6 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md @@ -0,0 +1,273 @@ +--- +id: 646f159b2cffb21150b927cb +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Use a class selector to target the `.cat-whisker-left-middle` element. Then move it into place with a `position` property set to `absolute`, a `top` of `127px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-middle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')) +``` + +Your `.cat-whisker-left-middle` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.position === 'absolute') +``` + +Your `.cat-whisker-left-middle` selector should have a `top` property set to `127px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.top === '127px') +``` + +Your `.cat-whisker-left-middle` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md new file mode 100644 index 00000000000..0a537b0812d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md @@ -0,0 +1,260 @@ +--- +id: 646f164bf100dd11d226161f +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Rotate the left middle whisker at 3 degrees. + +# --hints-- + +Your `.cat-whisker-left-middle` selector should have a `transform` property set to `rotate(3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.transform === 'rotate(3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md new file mode 100644 index 00000000000..651a9405914 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md @@ -0,0 +1,280 @@ +--- +id: 646f1764e2f1d212ba9785a7 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Using a class selector, move the `.cat-whisker-left-bottom` into position with a `position` of `absolute`, a `top` of `134px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-bottom` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')) +``` + +Your `.cat-whisker-left-bottom` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.position === 'absolute') +``` + +Your `.cat-whisker-left-bottom` selector should have a `top` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.top === '134px') +``` + +Your `.cat-whisker-left-bottom` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md new file mode 100644 index 00000000000..bc03c983374 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md @@ -0,0 +1,267 @@ +--- +id: 646f1802a09a171332e14630 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Rotate the left bottom whisker at `-3` degrees. + +# --hints-- + +Your `.cat-whisker-left-bottom` selector should have a `transform` property set to `rotate(-3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.transform === 'rotate(-3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md new file mode 100644 index 00000000000..e365b97d693 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md @@ -0,0 +1,287 @@ +--- +id: 646f4d6c42dc5f214f4e7444 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Now you will work on moving the right whiskers into place. Use class selector to target the `.cat-whisker-right-top` element and give it a `position` of `absolute`, a `top` of `120px`, and a `left` of `109px`. + +# --hints-- + +You should have a `.cat-whisker-right-top` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')) +``` + +Your `.cat-whisker-right-top` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.position === 'absolute') +``` + +Your `.cat-whisker-right-top` selector should have a `top` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.top === '120px') +``` + +Your `.cat-whisker-right-top` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md new file mode 100644 index 00000000000..9df724448e7 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md @@ -0,0 +1,274 @@ +--- +id: 646f4e46e81f7021d5fd9c1d +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Rotate the top-right whisker at -10 degrees. + +# --hints-- + +Your `.cat-whisker-right-top` selector should have a `transform` property set to `rotate(-1deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.transform === 'rotate(-10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md new file mode 100644 index 00000000000..2f79cbf9301 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md @@ -0,0 +1,294 @@ +--- +id: 646f4f6a14e3c522d130a0d2 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Use a class selector to target the `cat-whisker-right-middle` element, then move the right middle whisker into position with a `position` of `absolute`, a `top` of `127px`, and a `left` of `109px`. + +# --hints-- + +You should have a `.cat-whisker-right-middle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')) +``` + +Your `.cat-whisker-right-middle` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.position === 'absolute') +``` + +Your `.cat-whisker-right-middle` selector should have a `top` property set to `127px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.top === '127px') +``` + +Your `.cat-whisker-right-middle` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md new file mode 100644 index 00000000000..a7d861a1258 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md @@ -0,0 +1,281 @@ +--- +id: 646f4fe12b7985232bf475a5 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Rotate the right middle whisker at -3 degrees. + +# --hints-- + +Your `.cat-whisker-right-middle` selector should have a `transform` property set to `rotate(-3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.transform === 'rotate(-3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md new file mode 100644 index 00000000000..d0cf2b64a3f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md @@ -0,0 +1,302 @@ +--- +id: 646f507e4d1cd323f17db4fc +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Use class selector to target the `.cat-whisker-right-bottom` element, then move it into place with a `position` of `absolute`, a `top` of `134px`, and a `left` of `109px`. + + +# --hints-- + +You should have a `.cat-whisker-right-bottom` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')) +``` + +Your `.cat-whisker-right-bottom` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.position === 'absolute') +``` + +Your `.cat-whisker-right-bottom` selector should have a `top` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.top === '134px') +``` + +Your `.cat-whisker-right-bottom` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md new file mode 100644 index 00000000000..3bf9207660e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md @@ -0,0 +1,556 @@ +--- +id: 646f516dbfc1342495515625 +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Rotate the bottom-right whisker at 3 degrees. + +With this final step, your cat painting is now complete. + +# --hints-- + +Your `.cat-whisker-right-bottom` selector should have a `transform` property set to `rotate(3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.transform === 'rotate(3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +.cat-whisker-right-bottom { + position: absolute; + top: 134px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +# --solutions-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +.cat-whisker-right-bottom { + position: absolute; + top: 134px; + left: 109px; + transform: rotate(3deg); +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md new file mode 100644 index 00000000000..03ea4e8598b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md @@ -0,0 +1,77 @@ +--- +id: 6476f5c17f99146071ee884c +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +You could see that nothing happens. The `.cat-head` element did not move despite setting a `top` and `left` of `100px` each. But that's not the case with `relative` positioning. + +When you use the `relative` value, the element is still positioned according to the normal flow of the document, but the `top`, `left`, `bottom`, and `right` values become active. + +Instead of `static`, give you `.cat-head` a position of `relative`, and leave both `top` and `left` properties as they are. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `relative`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'relative') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: static; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md new file mode 100644 index 00000000000..0c28f0f242e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md @@ -0,0 +1,79 @@ +--- +id: 6476f7a4827bcc61682f2347 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +The next position property is `absolute`. When you use the `absolute` value for your `position` property, the element is taken out of the normal flow of the document, and then its position is determined by the `top`, `right`, `bottom`, and `left` properties. + +Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any pixel value. + + + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `absolute`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute') +``` + +Your `.cat-head` selector should have a `top` property set to any number in `px`. Make sure you add a semi-colon. + +```js +// assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '300px') +assert.match(code, /top:\s*\d{1,4}px;/) +``` + +Your `.cat-head` selector should have a `left` property set to any number in `px`. Make sure you add a semi-colon. + +```js +// assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '400px') +assert.match(code, /left:\s*\d{1,4}px;/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: relative; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md new file mode 100644 index 00000000000..85259f8c8bf --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md @@ -0,0 +1,70 @@ +--- +id: 6476fb7cbaafa36d65e9cf35 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +`fixed` is a `position` property value that lets you make an element fixed to the page no matter where the user scrolls to on the page. + +You'll have to do some more markups to see how `fixed` positioning works. In your HTML, create a `div` element with the class `box`. + +# --hints-- + +You should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 2); +``` + +Your `div` element should have the class `box`. + +```js +assert(document.querySelectorAll('div')[1]?.getAttribute('class') === 'box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + top: 300px; + left: 400px; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md new file mode 100644 index 00000000000..a8a137321fe --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md @@ -0,0 +1,101 @@ +--- +id: 6476fc5cf14b276e6d04e82a +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Use a class selector to give your `.box` element a width of `200px`, a height of `600px`, and a background color of `#000`. Also, give it a `position` of `absolute`, a `top` of `800px` and a `left` of `650px`. + +# --hints-- + +You should have a `.box` selector. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')) +``` + +Your `.box` selector should have a `width` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.width === '200px') +``` + +Your `.box` selector should have a `height` property set to `600px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.height === '600px') +``` + +Your `.box` selector should have a `background-color` property set to `#000`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +Your `.box` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.position === 'absolute') +``` + +Your `.box` selector should have a `left` property set to `650px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.left === '650px') +``` + +Your `.box` selector should have a `top` property set to `800px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.top === '800px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: relative; + top: 100px; + left: 100px; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md new file mode 100644 index 00000000000..bd1a9049d86 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md @@ -0,0 +1,85 @@ +--- +id: 6476fd4213318f6ee211028a +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Now replace the `position` property value of your `.cat-head` with `fixed`. Leave both `top` and `left` as they are. + +After that, scroll up and down to see how the `fixed` value works. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `fixed`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'fixed') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: relative; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 200px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md new file mode 100644 index 00000000000..1c8891e4304 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md @@ -0,0 +1,87 @@ +--- +id: 64770351e8586671ec0911f0 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +The last position property value is `sticky`. `sticky` positioning is a hybrid of `relative` and `fixed` positioning. It allows an element to **stick** to a specific position within its containing element or viewport, based on the scroll position. + +Change the value of the `position` property of `.cat-head` to `sticky`, set `top` to `0`, then remove `left` and its value. + +**Note**: To see how `sticky` works, you have to place a couple of texts before and after your `.cat-head` `div` element. If you scroll up after that, you'll see that the `.cat-head` gets stuck to the top and remains there. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `sticky`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'sticky') +``` + +Your `.cat-head` selector should have a `top` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px') +``` + +You should not have the `left` property and its value in your code. + +```js +assert.notMatch(code, /left:\s*100px;?/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: fixed; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 200px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md new file mode 100644 index 00000000000..a7597864564 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md @@ -0,0 +1,102 @@ +--- +id: 6477062778c85972eb648030 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +You should now center the cat head. + +Give the `.cat-head` element a position property set to `absolute`. Set a value of `0` for the `right`, `left`, `top`, `bottom` properties, then set its `margin` property on all sides to `auto`. That's one way to center an element vertically and horizontally using CSS positioning. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `absolute`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute') +``` + +Your `.cat-head` selector should have a `top` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px') +``` + +Your `.cat-head` selector should have a `left` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '0px') +``` + +Your `.cat-head` selector should have a `right` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.right === '0px') +``` + +Your `.cat-head` selector should have a `bottom` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.bottom === '0px') +``` + +Your `.cat-head` selector should have a `margin` property set to `auto`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.margin === 'auto') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: sticky; + top: 0; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md new file mode 100644 index 00000000000..806db219734 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md @@ -0,0 +1,73 @@ +--- +id: 647d821de0d97b3283c72b36 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Also, remove the `.box` CSS rule and its declarations because you don't need them anymore. + +# --hints-- + +You should remove the `.box` css rule and all its values. + +```js +assert.notMatch(code, /\.box\s*\{\s*width:\s*400px;\s*height:\s*600px;\s*background-color:\s*#000;\s*position:\s*absolute;\s*left:\s*650px;\s*top:\s*800px;?\s*\}\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md new file mode 100644 index 00000000000..6e039d20c5c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md @@ -0,0 +1,48 @@ +--- +id: 647d855ac12cd436059acd39 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Use the universal selector to add `box-sizing: border-box;` to your CSS. This ensures elements include padding and border in their specified width and height. + +# --hints-- + +You should have the universal selector (`*`). + +```js +// assert.match(code, /\*\s*{\s*.*\s*}/) +assert(new __helpers.CSSHelp(document).getStyle('*')) +``` + +Your universal selector should have a `box-sizing` property set to `border-box`. + +```js +// assert.match(code, /\*\s*{\s*box-sizing:\s*border-box;?\s*}/) +assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md new file mode 100644 index 00000000000..a7a70f95a81 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md @@ -0,0 +1,74 @@ +--- +id: 649353647c44ef4867ab4935 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Remove the `div` element with class `box` because you don't need it anymore. + +# --hints-- + +You should remove the `div` element with class `box` + +```js +assert.notMatch(code, /fCC Cat Painting + + + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md new file mode 100644 index 00000000000..04963838659 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md @@ -0,0 +1,218 @@ +--- +id: 64a2687ef267e5934a2f93e3 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Using a descendant selector, select the two `div` elements inside the `div` with class `cat-mouth`. Give it a width of `30px`, a height of `50px`, and a border of `2px solid #000`. + +# --hints-- + +You should have a `.cat-mouth div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')) +``` + +Your `.cat-mouth div` selector should have a `width` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.width === '30px') +``` + +Your `.cat-mouth div` selector should have a `height` property set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.height === '50px') +``` + +Your `.cat-mouth div` selector should have a `border` property set to `2px solid #000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.border === '2px solid rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md new file mode 100644 index 00000000000..d46fbf6da0d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md @@ -0,0 +1,212 @@ +--- +id: 64a26ac5540c5493f4641f10 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +You are going to make the two mouth lines into an elliptical shape. So, give the `.cat-mouth div` selector a border color of `black transparent transparent transparent` and a border radius of `190%/190px 150px 0 0`. + +# --hints-- + +Your `.cat-mouth div` selector should have a `border-color` property set to `black transparent transparent transparent`. + +```js +assert.match(code, /border-color:\s*black\s*(transparent)\s*\1\s*\1\s*;?/) +``` + +Your `.cat-mouth div` selector should have a `border-radius` property set to `190%/190px 150px 0 0`. + +```js +assert.match(code, /border-radius:\s*190%\/190px\s*150px\s*0\s*0\s*;?/) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md new file mode 100644 index 00000000000..4f3a8d2de51 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md @@ -0,0 +1,260 @@ +--- +id: 64a3bcbc83e574b58c8ed048 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +As you did in the previous step, use a descendant selector to target the three `div` elements inside your `.cat-whiskers-right` element. Give it a `width` of `40px`, a `height` of `1px`, and a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-whiskers-right div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')) +``` + +Your `.cat-whiskers-right div` selector should have a `width` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.width === '40px') +``` + +Your `.cat-whiskers-right div` selector should have a `height` set to `1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.height === '1px') +``` + +Your `.cat-whiskers-right div` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md index 8bab91d6a74..ec2a7ad994c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md @@ -29,7 +29,7 @@ El nuevo elemento `p` debe tener tres elementos `span`. assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3); ``` -Un elemento `span` debe envolver el texto `Sodium 360mg`. +A `span` element should wrap the text `Sodium 160mg`. ```js assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/)); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md index 781e9de51ea..9600bb0d948 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -El texto `* Daily Value %` debe estar alineado a la derecha. Crea un selector `.right` y usa la propiedad `justify-content` para hacerlo. +The text `% Daily Value *` should be aligned to the right. Crea un selector `.right` y usa la propiedad `justify-content` para hacerlo. # --hints-- diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md index 9422e15afaf..229b7eefc0e 100644 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md @@ -7,7 +7,7 @@ dashedName: step-25 # --description-- -To keep track of all of your spreadsheet's functions, delcare a `spreadsheetFunctions` object. Using destructuring syntax, set `sum`, `average`, and `median` as properties and values on the `spreadsheetFunctions` object. +To keep track of all of your spreadsheet's functions, declare a `spreadsheetFunctions` object. Using destructuring syntax, set `sum`, `average`, and `median` as properties and values on the `spreadsheetFunctions` object. # --hints-- diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md index f8bad487511..7404932cec7 100644 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md @@ -11,7 +11,7 @@ Inside the callback function, add a `console.log` with the value of `e.target.va Open the console, and make a selection from the teammates dropdown menu. You should see the value of that selection in the console. -`e.target.value` represents the value property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. +`e.target.value` represents the `value` property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. # --hints-- diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md b/curriculum/challenges/espanol/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md index 10067040fdc..71b63098422 100644 --- a/curriculum/challenges/espanol/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md +++ b/curriculum/challenges/espanol/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md @@ -15,16 +15,16 @@ El sitio web constará de una página de índice principal que tendrá enlaces a 1. Tu página de receta debe incluir un elemento `html` con un elemento `head` y `body` como hijos. 1. Debes tener un elemento `title` dentro del elemento `head` con el texto++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++. 1. Deberías ver un elemento `h1` que tiene el texto `Creamy Chocolate Fudge`. -1. Deberías ver una imagen con la url `*placeholder-fcc-cdn*` con un texto `alt` apropiado. +1. You should see a related image with an `alt` attribute. 1. Debes tener un elemento `h2` con el texto `Description` debajo de la imagen. 1. Debes ver algunos párrafos debajo de,`Description` que describan la receta. -1. Debes tener un elemento `h2` con el texto `Ingredients` +1. There should be an `h2` element with the text `Ingredients`. 1. Debajo del título `Ingredients` debe haber una lista desordenada con los ingredientes necesarios para la receta. 1. Debajo de la lista de ingredientes añade otro título llamado `Steps`. 1. Deberías ver una lista ordenada con algunos de los pasos necesarios para completar la receta. -1. Debajo de los pasos, debería haber un elemento `h2` con el texto `More Recipes` +1. Under the steps there should be an `h2` element with the text `More Recipes`. 1. Deberías ver algunos enlaces a otras recetas, dentro de una lista desordenada que con elementos anchor dentro de los elementos de lista. -1. Estos elementos anchor deberían tener un atributo `href` con el valor`#` +1. These anchor elements should have `href` attribute with the value set to `#`. # --hints-- @@ -56,12 +56,12 @@ Deberías tener un elemento `h1` dentro del elemento `body` con el texto `Creamy assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge'); ``` -Deberías tener una imagen con la url `*placeholder-fcc-cdn*` con un atributo `alt` y un texto apropiado. +You should have an image with an `alt` attribute. ```js const img = document.querySelectorAll('IMG')[0]; -assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg') +assert(img && img.alt !='' && img.src != '') ``` You should have an `h2` element with the text `Description`. diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md new file mode 100644 index 00000000000..26dcaf81d51 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md @@ -0,0 +1,54 @@ +--- +id: 637f4e0e72c65bc8e73dfe1e +videoId: LGQuIIv2RVA +title: HTML Foundations Question A +challengeType: 15 +dashedName: html-foundations-question-a +--- + +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: ` `. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) + +## --text-- + +What are HTML tags? + +## --answers-- + +HTML tags tell the browser what content an element contains. + +--- + +HTML tags tell the browser when to load its content. + +--- + +HTML tags tell the browser what content the next element contains. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md new file mode 100644 index 00000000000..1fa04902849 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md @@ -0,0 +1,49 @@ +--- +id: 637f4e1672c65bc8e73dfe1f +title: HTML Foundations Question B +challengeType: 15 +dashedName: html-foundations-question-b +--- + +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `
`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --text-- + +What are the three parts of most HTML elements? + +## --answers-- + +An opening tag, self closing tag, and content. + +--- + +An opening tag, closing tag, and content. + +--- + +An opening tag, closing tag, and attribute. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md new file mode 100644 index 00000000000..79bd0197756 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md @@ -0,0 +1,54 @@ +--- +id: 637f4e1c72c65bc8e73dfe20 +title: HTML Foundations Question C +challengeType: 15 +dashedName: html-foundations-question-c +--- + +# --description-- + +To demonstrate an HTML boilerplate, you first need an HTML file to work with. + +Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`. + +You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files. + +To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file. + +It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems. + +## The DOCTYPE + +Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``. + +The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4: + +```html + +``` + +However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``. + +Open the `index.html` file created earlier in your text editor and add `` to the very first line. + +# --question-- +## --text-- + +What is the purpose of the `DOCTYPE` declaration? + +## --answers-- + +It tells the browser which version of HTML to use to render the document. + +--- + +It tells the browser that this document uses JavaScript. + +--- + +It tells the browser the title of the document. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md new file mode 100644 index 00000000000..d851163101c --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md @@ -0,0 +1,46 @@ +--- +id: 637f4e2872c65bc8e73dfe21 +title: HTML Foundations Question D +challengeType: 15 +dashedName: html-foundations-question-d +--- + +# --description-- + +After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it. + +This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document. + +Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so: + +```html + + + +``` + +## What is the lang attribute? +`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation. + +# --question-- + +## --text-- + +What is the `html` element? + +## --answers-- + +It is the root element in the document and tells the browser which version of HTML it should use. + +--- + +It is the root element in the document and all other elements should descend from it. + +--- + +It is the root element in the document and all other elements should come after it. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md new file mode 100644 index 00000000000..58e4fab1b96 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md @@ -0,0 +1,41 @@ +--- +id: 6374f208de18c50e48ba767b +title: HTML Foundations Question E +challengeType: 15 +dashedName: html-foundations-question-e +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --assignment-- + +Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. + +## --text-- + +Which of the following statements is true? + +## --answers-- + +CSS is used to create the basic structure of a webpage, and HTML is used to add style. + +--- + +HTML is used to create the basic structure of a webpage, and CSS is used to add style. + +--- + +HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. + + +## --video-solution-- + +2 + + diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md new file mode 100644 index 00000000000..80f5869cff5 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md @@ -0,0 +1,65 @@ +--- +id: 637f4e2f72c65bc8e73dfe22 +title: HTML Foundations Question F +challengeType: 15 +dashedName: html-foundations-question-f +--- + +# --description-- + +The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage. + +## The Charset Meta Element +You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: ``. + +Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser. + +## Title Element +Another element you should always include in the head of an HTML document is the `title` element: + +```html +
My First Webpage +``` + +The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. + +If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open. + +There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum. + +Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag: + + +```html + + + + + +My First Webpage + + +``` + +# --question-- + +## --text-- + +What is the purpose of the `head` element? + +## --answers-- + +The `head` element is used to display all elements that are displayed on the webpage. + +--- + +The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements. + +--- + +The `head` element is used to display the header content on top of the webpage. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md new file mode 100644 index 00000000000..16299d58648 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md @@ -0,0 +1,48 @@ +--- +id: 637f4e3672c65bc8e73dfe23 +videoId: V8UAEoOvqFg +title: HTML Foundations Question G +challengeType: 15 +dashedName: html-foundations-question-g +--- + +# --description-- + +The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. + +To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so: + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s brilliant Building your first web page video above. + +--- + +Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. + +--- + +Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML. + +## --text-- + +What is the purpose of the `body` element? + +## --answers-- + +This is where all important information about the webpage is displayed such as the `title` and `meta` tags. + +--- + +This is where you tell the browser how to render the webpage correctly. + +--- + +This is where all content will be displayed on the page such images, text, and links. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md new file mode 100644 index 00000000000..f99018d79de --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md @@ -0,0 +1,36 @@ +--- +id: 6376327e2724a688c04636e3 +title: HTML Foundations Question H +challengeType: 15 +dashedName: html-foundations-question-h +--- + +# --description-- + + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to add paragraphs of text on a webpage? + +## --answers-- + +CSS + +--- + +JavaScript + +--- + +HTML + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md new file mode 100644 index 00000000000..72ed091e603 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md @@ -0,0 +1,33 @@ +--- +id: 637633162724a688c04636e4 +title: HTML Foundations Question I +challengeType: 15 +dashedName: html-foundations-question-i +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to change the font and background color of a button? + +## --answers-- + +You should use CSS to change the background color and font of a button. + +--- + +You should use JavaScript to change the background color and font of a button. + +--- + +You should use HTML to change the background color and font of a button. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md new file mode 100644 index 00000000000..ebd30965da6 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md @@ -0,0 +1,34 @@ +--- +id: 637633672724a688c04636e5 +title: HTML Foundations Question J +challengeType: 15 +dashedName: html-foundations-question-j +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +What is the difference between HTML, CSS, and JavaScript? + +## --answers-- + +HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. + +--- + +CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. + +--- + +JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-a.md new file mode 100644 index 00000000000..b4d237448f3 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-a.md @@ -0,0 +1,66 @@ +--- +id: 637f704072c65bc8e73dfe36 +videoId: tsEQgGjSmkM +title: Links and Images Question A +challengeType: 15 +dashedName: links-and-images-question-a +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named `odin-links-and-images`. + +- Within that directory, create a new file named `index.html`. + +- Fill in the usual HTML boilerplate. + +- Finally, add the following `h1` to the `body`: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. + +Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. + +It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Links video above. + +## --text-- + +What HTML tag is used to create a link? + +## --answers-- + +`` + +--- + +`` + +--- + +`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-b.md
new file mode 100644
index 00000000000..a138268c406
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-b.md
@@ -0,0 +1,54 @@
+---
+id: 637f703572c65bc8e73dfe35
+title: Links and Images Question B
+challengeType: 15
+dashedName: links-and-images-question-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- finally, add the following `h1` to the `body`: `
Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- +## --text-- + +What is an attribute? +## --answers-- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. + +--- + +An HTML attribute is used to tell the browser what the element contains. + +--- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-c.md new file mode 100644 index 00000000000..8863b087456 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-c.md @@ -0,0 +1,55 @@ +--- +id: 637f703072c65bc8e73dfe34 +title: Links and Images Question C +challengeType: 15 +dashedName: links-and-images-question-c +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named `odin-links-and-images`. + +- Within that directory, create a new file named `index.html`. + +- Fill in the usual HTML boilerplate. + +- finally, add the following `h1` to the `body`: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --text-- + +What attribute tells links where to go to? + +## --answers-- + +`src` + +--- + +`href` + +--- + +`link` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-d.md new file mode 100644 index 00000000000..37eebffbabf --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-d.md @@ -0,0 +1,112 @@ +--- +id: 637f702872c65bc8e73dfe33 +videoId: ta3Oxx7Yqbo +title: Links and Images Question D +challengeType: 15 +dashedName: links-and-images-question-d +--- + +# --description-- + + +Generally, there are two kinds of links you will create: + +- Links to pages on other websites on the internet + +- Links to pages located on your own websites + + +## Absolute Links +Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. + +You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. + +`https://www.theodinproject.com/about` + +## Relative Links +Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. + +Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. + +Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: + +```html + + + + +Odin Links and Images + + + +About Page
+ + +``` + +Back in the `index` page, add the following anchor element to create a link to the `about` page: + +```html + +Homepage
+ click me + + About + +``` + +Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. + +This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. + +But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. + +Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. + +Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. + +To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. + +```html + +Homepage
+ About + +``` + +Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. + +In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. + +```html + +Homepage
+ About + +``` + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML File Structure video above. + +## --text-- + +What is the difference between an absolute and a relative link? + +## --answers-- + +An absolute link is a link to another page on the current website. A relative link is a link to another website. + +--- + +An absolute link is a link to another website. A relative link is a link another page on the current website. + +--- + +There is no difference between absolute and relative links. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-e.md new file mode 100644 index 00000000000..ae008078088 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-e.md @@ -0,0 +1,98 @@ +--- +id: 637f702372c65bc8e73dfe32 +videoId: 0xoztJCHpbQ +title: Links and Images Question E +challengeType: 15 +dashedName: links-and-images-question-e +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+``
+
+---
+
+``
+
+---
+
+`` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-f.md new file mode 100644 index 00000000000..e1af2d6a659 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-f.md @@ -0,0 +1,93 @@ +--- +id: 637f701c72c65bc8e73dfe31 +title: Links and Images Question F +challengeType: 15 +dashedName: links-and-images-question-f +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `
` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-g.md
new file mode 100644
index 00000000000..5bc84fa6c96
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+title: Links and Images Question G
+challengeType: 15
+dashedName: links-and-images-question-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-h.md b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-h.md
new file mode 100644
index 00000000000..71157081ae7
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-question-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+title: Links and Images Question H
+challengeType: 15
+dashedName: links-and-images-question-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Read about the four main image formats that can be used on the web.
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+TIFF, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-a.md
new file mode 100644
index 00000000000..8698b62aca8
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Question A
+challengeType: 15
+dashedName: working-with-text-question-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua.
+
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ nisi ut aliquip ex ea commodo consequat.
+
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `` tag. + +Changing our example from before to use paragraph elements fixes the issue: + + + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. + +## --text-- + +How do you create a paragraph in HTML? + +## --answers-- + +`
This is a paragraph
` + +--- + +`This is a paragraph
` + +--- + +`This is a paragraph` + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-b.md new file mode 100644 index 00000000000..17d3c900359 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-b.md @@ -0,0 +1,39 @@ +--- +id: 637f4e5f72c65bc8e73dfe28 +title: Working With Text Question B +challengeType: 15 +dashedName: working-with-text-question-b +--- + +# --description-- + +Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. + +There are 6 different levels of headings starting from `` to `
`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. + +Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `
` tag. + + + +Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. + +# --question-- +## --text-- + +How many different levels of headings are there and what is the difference between them? + +## --answers-- + +There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. + +--- + +There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. + +--- + +There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-c.md new file mode 100644 index 00000000000..6ccf0e06658 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-c.md @@ -0,0 +1,47 @@ +--- +id: 637f4e6672c65bc8e73dfe29 +videoId: gW6cBZLUk6M +title: Working With Text Question C +challengeType: 15 +dashedName: working-with-text-question-c +--- + +# --description-- + +The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. + +You can use `strong` on its own: + + + +But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: + + + +Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Bold and Italic Text Video above. + +## --text-- + +What element should you use to make text bold and important? + +## --answers-- + +`This is an important message` + +--- + +`
This is an important message
` + +--- + +`This is an important message` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-d.md new file mode 100644 index 00000000000..e686b2698e0 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-d.md @@ -0,0 +1,38 @@ +--- +id: 637f4e6e72c65bc8e73dfe2a +title: Working With Text Question D +challengeType: 15 +dashedName: working-with-text-question-d +--- + +# --description-- + +The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. + +To use `em` on its own: + + +Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: + + + +# --question-- +## --text-- + +What element should you use to make text italicized to add emphasis? + +## --answers-- + +`This is an italic message` + +--- + +`This is an italic message` + +--- + +`This is an italic message ` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-e.md new file mode 100644 index 00000000000..a0a7ba2fda9 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-e.md @@ -0,0 +1,65 @@ +--- +id: 637f4e7972c65bc8e73dfe2b +title: Working With Text Question E +challengeType: 15 +dashedName: working-with-text-question-e +--- + +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the `body` element is the parent and the `p` is the child: + +```html + + + + +Lorem ipsum dolor sit amet.
+ + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: + +```html + + + + +Lorem ipsum dolor sit amet.
+Ut enim ad minim veniam.
+ + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship do two elements have if they are at the same level of nesting? + +## --answers-- + +The elements are each other's parents. + +--- + +The elements are each other's children. + +--- + +The elements are siblings. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-f.md new file mode 100644 index 00000000000..7d440cfab25 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-f.md @@ -0,0 +1,66 @@ +--- +id: 637f4e8072c65bc8e73dfe2c +title: Working With Text Question F +challengeType: 15 +dashedName: working-with-text-question-f +--- + +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the body element is the parent and the paragraph is the child: + +```html + + + + +Lorem ipsum dolor sit amet.
+ + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: + +```html + + + + +Lorem ipsum dolor sit amet.
+Ut enim ad minim veniam.
+ + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship does an element have with any nested element within it? + +## --answers-- + +The element within the other element is called the parent element. + +--- + +The element within the other element is called the child element. + +--- + +The element within the other element is called the sibling element. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-g.md new file mode 100644 index 00000000000..5f5d141fa46 --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-g.md @@ -0,0 +1,48 @@ +--- +id: 637f4e8772c65bc8e73dfe2d +title: Working With Text Question G +challengeType: 15 +dashedName: working-with-text-question-g +--- + +# --description-- + +HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. + +Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: + +```html +View the html to see the hidden comments
+ + + +Some paragraph text
+ + +``` + +# --question-- + +## --assignment-- + +To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. + +## --text-- + +How do you create HTML comments? + +## --answers-- + +`/* This is an HTML comment */` + +--- + +`` + +--- + +`<-- This is an HTML comment --!>` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-h.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-h.md new file mode 100644 index 00000000000..c20b4de097a --- /dev/null +++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-question-h.md @@ -0,0 +1,65 @@ +--- +id: 637f4e3e72c65bc8e73dfe24 +videoId: kcHKFZBVtf4 +title: Working with Text Question H +challengeType: 15 +dashedName: working-with-text-question-h +--- + +# --description-- + +If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. + +Unordered lists are created using the `- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-i.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-i.md
new file mode 100644
index 00000000000..05765087c87
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-i.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+title: Working with Text Question I
+challengeType: 15
+dashedName: working-with-text-question-i
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
fCC Cat Painting + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md new file mode 100644 index 00000000000..1757ddb08e0 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md @@ -0,0 +1,51 @@ +--- +id: 646c586be7180e40ddf74ff6 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Give your `body` element a `background-color` of `#c9d2fc`. + +# --hints-- + +You should have a `body` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` selector should have a `background-color` property set to `#c9d2fc`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(201, 210, 252)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + +``` + +```css +* { + box-sizing: border-box; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md new file mode 100644 index 00000000000..c605ff01e1d --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md @@ -0,0 +1,66 @@ +--- +id: 646c59e942f35541923104bf +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Back in your HTML, create a `main` element. Inside that `main` element, add a `div` element with the class `cat-head`. + +# --hints-- + +You should have a `main` element. + +```js +assert(document.querySelectorAll('main').length === 1); +``` + +You should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 1); +``` + +Your `div` element should have the class `cat-head`. + +```js +assert(document.querySelector('div')?.getAttribute('class') === 'cat-head'); +``` + +Your `div` element should be inside your `main` tag. + +```js +assert(document.querySelectorAll('main div').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md new file mode 100644 index 00000000000..81eb5c83f27 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md @@ -0,0 +1,79 @@ +--- +id: 646c5ace05e4be4211407935 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +To see the `cat-head` element, give it a linear gradient background with `#5e5e5e` at `85%` and `#45454f` at `100%`. + +You might not notice the difference between these two colors, but they are there. + +# --hints-- + +Your `.cat-head` selector should have a `background` property. + +```js +assert.match(code, /background:/) +``` + +Your `background` property should use the `linear-gradient` function. + +```js +assert.match(code, /background:\s*linear-gradient\(/) +``` + +Your `linear-gradient` function should set the first color to be `#5e5e5e` at `85%`. + +```js +assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%/) +``` + +Your `linear-gradient` function should set the second color to be `#45454f` at `100%`. + +```js +assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%,\s+#45454f\s+100%\);?/) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md new file mode 100644 index 00000000000..98afa6c6b3b --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md @@ -0,0 +1,77 @@ +--- +id: 646c5d7057c45f432fcdd46c +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Using a class selector, give the `.cat-head` element a width of `205px` and a height of `180px`. Also, give it a border of `1px solid #000` and a `border-radius` of `46%`. + +# --hints-- + +You should have a `.cat-head` selector. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')) +``` + +Your `.cat-head` selector should have a `width` set to `205px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.width === '205px'); +``` + +Your `.cat-head` selector should have a `height` set to `180px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.height === '180px') +``` + +Your `.cat-head` selector should have a `border` set to `1px solid #000`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.border === '1px solid rgb(0, 0, 0)') +``` + +Your `.cat-head` selector should have a `border-radius` set to `46%`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle(".cat-head")?.borderRadius === '46%') +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md new file mode 100644 index 00000000000..7c88ce9baa8 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md @@ -0,0 +1,78 @@ +--- +id: 646c5e727e56e743c9aed4a1 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +CSS positioning lets you set how you want an element to be positioned in the browser. It has a `position` property you can set to `static`, `absolute`, `relative`, `sticky` or `fixed`. + +Once you set the `position` property of the element, you can move the element around by setting a pixel or a percentage value for one or more of the `top`, `right`, `left`, or `bottom` properties. + +`static` is the default positioning for all elements. If you assign it to an element, you won't be able to move it around with `top`, `right`, `left`, or `bottom`. + +Give `.cat-head` a `position` property of `static`, then set the `top` and `left` properties to `100px` each. + + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `static`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'static') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + --fcc-editable-region-- + + --fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md new file mode 100644 index 00000000000..9c460caa45f --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md @@ -0,0 +1,80 @@ +--- +id: 646c5ffef5598d449b52ec12 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Now you should work on the cat's ears. There will be a right and a left ear, and inside each, there will be an inner ear. + +Inside your `.cat-head` element, create a `div` element with the class `cat-ears`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-head`. + +```js +assert(document.querySelectorAll('div.cat-head').length === 1); +``` + +You should create one `div` element inside your `.cat-head` element. + +```js +assert(document.querySelectorAll('.cat-head div').length === 1); +``` + +Your `div` element should have the class `cat-ears`. + +```js +assert(document.querySelectorAll('.cat-head div')[0]?.getAttribute('class') === 'cat-ears'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md new file mode 100644 index 00000000000..356b443cc39 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md @@ -0,0 +1,86 @@ +--- +id: 646ce8bb4b35544d501c7184 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Inside your `.cat-ears` element, create two `div` elements with the classes `cat-left-ear` and `cat-right-ear` respectively. + +# --hints-- + +You should not change the existing `div` element with the class `car-ears`. + +```js +assert(document.querySelectorAll('div.cat-ears').length === 1); +``` + +You should create two `div` elements inside your `.cat-ears` element. + +```js +assert(document.querySelectorAll('.cat-ears div').length === 2); +``` + +Your first `div` element should have the class `cat-left-ear`. + +```js +assert(document.querySelectorAll('.cat-ears div')[0]?.classList.contains('cat-left-ear')); +``` + +Your second `div` element should have the class `cat-right-ear`. + +```js +assert(document.querySelectorAll('.cat-ears div')[1]?.classList.contains('cat-right-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md new file mode 100644 index 00000000000..f868fcd598d --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md @@ -0,0 +1,83 @@ +--- +id: 646ce9d790d2a44de5f99e04 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Inside your `.cat-left-ear` element, create another `div` element with the class `cat-left-inner-ear`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-ear`. + +```js +assert(document.querySelectorAll('div.cat-left-ear').length === 1); +``` + +You should have a `div` element inside your `.cat-left-ear` element. + +```js +assert(document.querySelectorAll('.cat-left-ear div').length === 1); +``` + +Your `div` element should have the class `cat-left-inner-ear`. + +```js +assert(document.querySelectorAll('.cat-left-ear div')[0]?.classList.contains('cat-left-inner-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md new file mode 100644 index 00000000000..deb18782568 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md @@ -0,0 +1,85 @@ +--- +id: 646ceae4d57c214e6b03576c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Inside your `.cat-right-ear` element, create another `div` element with the class `cat-right-inner-ear`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-right-ear`. + +```js +assert(document.querySelectorAll('div.cat-right-ear').length === 1); +``` + +You should have a `div` element inside your `.cat-right-ear` element. + +```js +assert(document.querySelectorAll('.cat-right-ear div').length === 1); +``` + +Your `div` element should have the class `cat-right-inner-ear`. + +```js +assert(document.querySelectorAll('.cat-right-ear div')[0]?.classList.contains('cat-right-inner-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md new file mode 100644 index 00000000000..ae13eae4db7 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md @@ -0,0 +1,95 @@ +--- +id: 646ceb843412c74edee27a79 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +You are going to make each ear look like a triangle. + +Using a class selector, give the `.cat-left-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`. + +# --hints-- + +You should have a `.cat-left-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')) +``` + +Your `.cat-left-ear` selector should have a `border-left` property set to `35px solid transparent` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderLeft === '35px solid transparent') +``` + +Your `.cat-left-ear` selector should have a `border-right` property set to `35px solid transparent` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderRight === '35px solid transparent') +``` + +Your `.cat-left-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderBottom === '70px solid rgb(94, 94, 94)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md new file mode 100644 index 00000000000..60b4d9ebfde --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md @@ -0,0 +1,92 @@ +--- +id: 646cecc9eb5c4f4f73dafd07 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Move the left ear into position by setting a position of `absolute`, a `top` of `-26px`, and a `left` of `-31px`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.position === 'absolute') +``` + +Your `.cat-left-ear` selector should have a `top` property set to `-26px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.top === '-26px') +``` + +Your `.cat-left-ear` selector should have a `left` property set to `-31px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.left === '-31px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md new file mode 100644 index 00000000000..a0b737ac3d9 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md @@ -0,0 +1,89 @@ +--- +id: 646cef0c2b98915094df7099 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Those edges are too sharp for an ear. So, set the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-left-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md new file mode 100644 index 00000000000..3bcd393bf42 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md @@ -0,0 +1,89 @@ +--- +id: 646cf1206cac5f51804f49cf +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +To position the left ear properly, you can use CSS transform to rotate it in a certain degree. + +The `transform` property allows you to modify the shape, position, and size of an element without changing the layout or affecting the surrounding elements. It has functions such as `translate()`, `rotate()`, `scale()`, `skew()`, and `matrix()`. + +Set the `transform` property to `rotate(-45deg)` and see what happens. + +# --hints-- + +You should set the `transform` property of your `.cat-left-ear` element to `rotate(-45deg)`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.transform === 'rotate(-45deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md new file mode 100644 index 00000000000..51bb049e2dd --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md @@ -0,0 +1,107 @@ +--- +id: 646cf2249f02ca5233d9af7c +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Now you can work on the right ear of the cat. You have the HTML for it already. + +Using a class selector, give the `.cat-right-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`. + +# --hints-- + +You should have a `.cat-right-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')) +``` + +Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent') +``` + +Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent') +``` + +Your `.cat-right-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '70px solid rgb(94, 94, 94)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md new file mode 100644 index 00000000000..dfce258d838 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md @@ -0,0 +1,104 @@ +--- +id: 646cf48d8f8e1f535a1821d3 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Move the right ear into position with a `position` property set to `absolute`, a `top` of `-26px`, and a `left` of `163px`. + +# --hints-- + +Your `.cat-right-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.position === 'absolute') +``` + +Your `.cat-right-ear` selector should have a `top` property set to `-26px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.top === '-26px') +``` + +Your `.cat-right-ear` selector should have a `left` property set to `163px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.left === '163px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md new file mode 100644 index 00000000000..d4525731d1f --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md @@ -0,0 +1,95 @@ +--- +id: 646cf6cbca98e258da65c979 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +As you did for the left ear, rotate the right ear at 45 degrees. + +# --hints-- + +You should set the `transform` property of your `.right-ear` element to `rotate(45deg)`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.transform === 'rotate(45deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md new file mode 100644 index 00000000000..bbd36a62759 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md @@ -0,0 +1,102 @@ +--- +id: 646cf88aa884405a11ea5bcc +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Remove the sharp border of the right ear by setting the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`. + +# --hints-- + +Your `.cat-right-ear` selector should have a `border-top-left-radius` property set to `90px`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-right-ear` selector should have a `border-top-right-radius` property set to `10px`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md new file mode 100644 index 00000000000..bb200fd1069 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md @@ -0,0 +1,102 @@ +--- +id: 646cfc2b8e6fe95c20a819d5 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The ears should always be placed above the part of the head it overlaps. You can do this with the `z-index` property. + +`z-index` is a property you can use to define the order of overlapping HTML elements. Any element with a higher `z-index` will always be positioned over an element with a lower `z-index`. + +To see `z-index` in action, set the `z-index`property of the left ear to `-1`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `z-index` of `-1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '-1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md new file mode 100644 index 00000000000..7f2be20c198 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md @@ -0,0 +1,100 @@ +--- +id: 646cfd853634255d02b64cc1 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +That's not the behavior you want. You should make the ears display over the head so the borders that overlap with them don't show. + +Instead of `-1`, set the `z-index` property of the left ear to `1`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `z-index` of `1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + --fcc-editable-region-- + z-index: -1; + --fcc-editable-region-- + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md new file mode 100644 index 00000000000..b892d61ca1d --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md @@ -0,0 +1,99 @@ +--- +id: 646cfde6ac612e5d60391f50 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Set the `z-index`property of the right ear to `1` so it always stays over the head. + +# --hints-- + +Your `.cat-right-ear` selector should have a `z-index` of `1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.zIndex === '1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + --fcc-editable-region-- + + --fcc-editable-region-- + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md new file mode 100644 index 00000000000..1d7411ad660 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md @@ -0,0 +1,121 @@ +--- +id: 646dd556d524bc61c0139bd6 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Most cats have different colors in their ear and the inner part of the same ear. You can implement the same too. That's why you defined a `div` element for both right and left inner ears a while ago. + +Using a class selector, give your `.cat-left-inner-ear` element a left and right border of `20px solid transparent` each. Also give it a bottom border of `40px solid #3b3b4f`. + +# --hints-- + +You should have a `.cat-left-inner-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')) +``` + +Your `.cat-left-inner-ear` selector should have a `border-left` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderLeft === '20px solid transparent') +``` + +Your `.cat-left-inner-ear` selector should have a `border-right` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderRight === '20px solid transparent') +``` + +Your `.cat-left-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md new file mode 100644 index 00000000000..8be0ea3110e --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md @@ -0,0 +1,118 @@ +--- +id: 646dd6f9caa862627dd87772 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Move the inner ear into position with a `position` property set to `absolute`, a `top` of `22px`, and a `left` of `-20px`. + +# --hints-- + +Your `.cat-left-inner-ear` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.position === 'absolute') +``` + +Your `.cat-left-inner-ear` selector should have a `top` property set to `22px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.top === '22px') +``` + +Your `.cat-left-inner-ear` selector should have a `left` property set to `-20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.left === '-20px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md new file mode 100644 index 00000000000..7e24c8e937c --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md @@ -0,0 +1,127 @@ +--- +id: 646dd7cfd0cfac630c1dd520 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +To remove all the pointed edges of the ear, set a bottom-right and bottom-left border radius of `40%` each, a top-left border radius of `90px`, and a top-right border radius of `10px`. + +# --hints-- + +Your `.cat-left-inner-ear` selector should have a `border-bottom-right-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottomRightRadius === '40%') +``` + +Your `.cat-left-inner-ear` selector should have a `border-bottom-left-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottomLeftRadius === '40%') +``` + +Your `.cat-left-inner-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-left-inner-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md new file mode 100644 index 00000000000..ba3b89e07d1 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md @@ -0,0 +1,132 @@ +--- +id: 646dd8c79ec23463a3d0e356 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +It's time to work on the right inner ear. Using a class selector, give your `.cat-right-inner-ear` element a left and right border of `20px solid transparent`. Also, give it a bottom border of `40px solid #3b3b4f`. + +# --hints-- + +You should have a `.cat-right-inner-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')) +``` + +Your `.cat-right-inner-ear` selector should have a `border-left` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderLeft === '20px solid transparent') +``` + +Your `.cat-right-inner-ear` selector should have a `border-right` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderRight === '20px solid transparent') +``` + +Your `.cat-right-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md new file mode 100644 index 00000000000..f48ba0bd881 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md @@ -0,0 +1,131 @@ +--- +id: 646dd9d9a729916460724f16 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Move the right inner ear into position with a `position` property set to `absolute`, a `top` of `22px` and a `left` of `-20px`. + +# --hints-- + +Your `.cat-right-inner-ear` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.position === 'absolute') +``` + +Your `.cat-right-inner-ear` selector should have a `top` property set to `22px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.top === '22px') +``` + +Your `.cat-right-inner-ear` selector should have a `left` property set to `-20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.left === '-20px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md new file mode 100644 index 00000000000..12d8b78a661 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md @@ -0,0 +1,140 @@ +--- +id: 646ddab8afd73764f5241bbf +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +As you did for the left inner ear, remove the sharp edges of the right inner ear by setting a bottom-right and bottom-left border radius of `40%`, a top-left border radius of `90px`, and a top-right border radius of `10px`. + +# --hints-- + +Your `.cat-right-inner-ear` selector should have a `border-bottom-right-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottomRightRadius === '40%') +``` + +Your `.cat-right-inner-ear` selector should have a `border-bottom-left-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottomLeftRadius === '40%') +``` + +Your `.cat-right-inner-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-right-inner-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md new file mode 100644 index 00000000000..5a2488dca6b --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md @@ -0,0 +1,147 @@ +--- +id: 646ddb61ff08366570cc5902 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +You will now start working on the cat's eyes. Like the ears, the eyes will have inner eyes. + +Create a `div` element with the class `cat-eyes`. Inside the `cat-eyes` element, create two `div` elements with the class `cat-left-eye` and `cat-right-eye` respectively. + +# --hints-- + +You should create a `div` element with the class `cat-eyes`. + +```js +assert(document.querySelectorAll('.cat-eyes').length === 1); +``` + +You should create two `div` elements inside the `.cat-eyes` element. + +```js +assert(document.querySelectorAll('.cat-eyes div').length === 2); +``` + +The first `div` element inside the `.cat-eyes` element should have the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('.cat-eyes div')[0].classList.contains('cat-left-eye')); +``` + +The second `div` element inside the `.cat-eyes` element should have the class `cat-right-eye`. + +```js +assert(document.querySelectorAll('.cat-eyes div')[1].classList.contains('cat-right-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md new file mode 100644 index 00000000000..9b995228d29 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md @@ -0,0 +1,144 @@ +--- +id: 646ddd3f9f97a0667b964bdb +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Inside the `.cat-left-eye` element, create another `div` element with the class `cat-left-inner-eye`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('div.cat-left-eye').length === 1); +``` + +You should have a `div` element inside your `.cat-left-eye` element. + +```js +assert(document.querySelectorAll('.cat-left-eye div').length === 1); +``` + +Your `div` element should have the class `cat-left-inner-eye`. + +```js +assert(document.querySelectorAll('.cat-left-eye div')[0]?.classList.contains('cat-left-inner-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md new file mode 100644 index 00000000000..5bad715a154 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md @@ -0,0 +1,146 @@ +--- +id: 646dddfb3a301c66ec513c56 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Inside the `.cat-right-eye` element, create another `div` element with the class `cat-right-inner-eye`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('div.cat-right-eye').length === 1); +``` + +You should have a `div` element inside your `.cat-right-eye` element. + +```js +assert(document.querySelectorAll('.cat-right-eye div').length === 1); +``` + +Your `div` element should have the class `cat-right-inner-eye`. + +```js +assert(document.querySelectorAll('.cat-right-eye div')[0]?.classList.contains('cat-right-inner-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md new file mode 100644 index 00000000000..9cf9b19e226 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md @@ -0,0 +1,154 @@ +--- +id: 646dde7dc20dc167489faa69 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Using a class selector, give your `.cat-left-eye` element a `width` of `30px` and a `height` of `40px`. Also, give it a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-left-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')) +``` + +Your `.cat-left-eye` selector should have a `width` set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.width === '30px') +``` + +Your `.cat-left-eye` selector should have a `height` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.height === '40px') +``` + +Your `.cat-left-eye` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md new file mode 100644 index 00000000000..45ed732e12d --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md @@ -0,0 +1,153 @@ +--- +id: 646ddf888632fa67f1180940 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Move the left eye into position with a `position` property of `absolute` a `top` of `54px`, and a `left` of `39px`. + +# --hints-- + +Your `.cat-left-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.position === 'absolute') +``` + +Your `.cat-left-eye` selector should have a `top` property set to `54px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.top === '54px') +``` + +Your `.cat-left-eye` selector should have a `left` property set to `39px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.left === '39px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md new file mode 100644 index 00000000000..38088bba67e --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md @@ -0,0 +1,150 @@ +--- +id: 646de5dc8988076a1d992afd +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +To make the left eye look like an eye, give it a border radius of `60%`. Also, using the transform property, rotate it at `25` degrees. + +# --hints-- + +Your `.cat-left-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.borderRadius === '60%') +``` + +Your `.cat-left-eye` selector should have a `transform` property set to `rotate(25deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.transform === 'rotate(25deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md new file mode 100644 index 00000000000..b9dc455e5b1 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md @@ -0,0 +1,167 @@ +--- +id: 646de6a97b50a86ac487de86 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Now you will work on the right eye by using the same approach. + +Using a class selector, give your `.cat-right-eye` element a width of `30px` and a height of `40px`. Also, give it a background color of `#000`. + +# --hints-- + +You should have a `.cat-right-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')) +``` + +Your `.cat-right-eye` selector should have a `width` set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.width === '30px') +``` + +Your `.cat-right-eye` selector should have a `height` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.height === '40px') +``` + +Your `.cat-right-eye` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md new file mode 100644 index 00000000000..1cae6709360 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md @@ -0,0 +1,165 @@ +--- +id: 646de7b64467e96b7d35b5cd +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Move the right eye into position with a `position` property of `absolute` a `top` of `54px`, and a `left` of `134px`. + +# --hints-- + +Your `.cat-right-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.position === 'absolute') +``` + +Your `.cat-right-eye` selector should have a `top` property set to `54px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.top === '54px') +``` + +Your `.cat-right-eye` selector should have a `left` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.left === '134px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} + +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md new file mode 100644 index 00000000000..b376c539f32 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md @@ -0,0 +1,162 @@ +--- +id: 646de8478d6f796bfbdccfb2 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +To make the right eye look like an eye, give it a border radius of `60%`. Also, using the transform property, rotate it at `-25` degrees. + +# --hints-- + +Your `.cat-right-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.borderRadius === '60%') +``` + +Your `.cat-right-eye` selector should have a `transform` property set to `rotate(-25deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.transform === 'rotate(-25deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} + +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md new file mode 100644 index 00000000000..74ba34db408 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md @@ -0,0 +1,178 @@ +--- +id: 646de8d204a3426c7d184372 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Those look like eyes, but you can still make them better. That's why you created two inner eyes `div` elements. + +Using a class selector, give your `.cat-left-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`. + +# --hints-- + +You should have a `.cat-left-inner-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')) +``` + +Your `.cat-left-inner-eye` selector should have a `width` set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.width === '10px') +``` + +Your `.cat-left-inner-eye` selector should have a `height` set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.height === '20px') +``` + +Your `.cat-left-inner-eye` selector should have a `background-color` set to `#fff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md new file mode 100644 index 00000000000..b0243121123 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md @@ -0,0 +1,187 @@ +--- +id: 646dea1c98c2426d43a705c3 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Move the left inner eye into position with a `position` property of `absolute`, a `top` of `8px`, and a `left` of `2px`. Also, give it a border radius of `60%` and rotate it at `10` degrees. + +# --hints-- + +Your `.cat-left-inner-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.position === 'absolute') +``` + +Your `.cat-left-inner-eye` selector should have a `top` property set to `8px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.top === '8px') +``` + +Your `.cat-left-inner-eye` selector should have a `left` property set to `2px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.left === '2px') +``` + +Your `.cat-left-inner-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.borderRadius === '60%') +``` + +Your `.cat-left-inner-eye` selector should have a `transform` property set to `10deg`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.transform === 'rotate(10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 10px; + height: 20px; + background-color: #fff; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md new file mode 100644 index 00000000000..1b344dc94cc --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md @@ -0,0 +1,187 @@ +--- +id: 646deb169847f86df0f95bfc +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Using a class selector, give your `.cat-right-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`. + +# --hints-- + +You should have a `.cat-right-inner-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')) +``` + +Your `.cat-right-inner-eye` selector should have a `width` set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.width === '10px') +``` + +Your `.cat-right-inner-eye` selector should have a `height` set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.height === '20px') +``` + +Your `.cat-right-inner-eye` selector should have a `background-color` set to `#fff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md new file mode 100644 index 00000000000..f7933f8c3dc --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md @@ -0,0 +1,198 @@ +--- +id: 646dec359bef3b7811fba5a6 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Move the right inner eye into position with a `position` of `absolute`, a `top` of `8px`, and a `left` of `18px`. Also, give it a border radius of `60%` and rotate it at `-5deg`. + +# --hints-- + +Your `.cat-right-inner-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.position === 'absolute') +``` + +Your `.cat-right-inner-eye` selector should have a `top` property set to `8px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.top === '8px') +``` + +Your `.cat-right-inner-eye` selector should have a `left` property set to `18px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.left === '18px') +``` + +Your `.cat-right-inner-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.borderRadius === '60%') +``` + +Your `.cat-right-inner-eye` selector should have a `transform` property set to `-5deg`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.transform === 'rotate(-5deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 10px; + height: 20px; + background-color: #fff; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md new file mode 100644 index 00000000000..143f0179cfe --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md @@ -0,0 +1,186 @@ +--- +id: 646dedbcba062079128b2ecc +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +It's time to work on the nose. In your HTML, create a `div` element with the class `cat-nose`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 12) +``` + +Your `div` element should have the class `cat-nose`. + +```js +assert(document.querySelectorAll('div')[11].classList.contains('cat-nose')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md new file mode 100644 index 00000000000..bf02b9cf8fc --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md @@ -0,0 +1,200 @@ +--- +id: 646def5e863abf7a14501421 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Using a class selector, give your `.cat-nose` element a left and right border of `15px solid transparent` each. Also give it a bottom border of `20px solid #442c2c`. + +# --hints-- + +You should have a `.cat-nose` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')) +``` + +Your `.cat-nose` selector should have a `border-left` property set to `15px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderLeft === '15px solid transparent') +``` + +Your `.cat-nose` selector should have a `border-right` property set to `15px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderRight === '15px solid transparent') +``` + +Your `.cat-nose` selector should have a `border-bottom` property set to `20px solid #442c2c`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottom === '20px solid rgb(68, 44, 44)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md new file mode 100644 index 00000000000..ef9238633b8 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md @@ -0,0 +1,200 @@ +--- +id: 646df03c8f79337ab46f148b +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Move the nose into position with a `position` property of `absolute`, a `top` of `108px`, and a `left` of `85px`. + +# --hints-- + +Your `.cat-nose` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.position === 'absolute') +``` + +Your `.cat-nose` selector should have a `top` property set to `108px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.top === '108px') +``` + +Your `.cat-nose` selector should have a `left` property set to `85px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.left === '85px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md new file mode 100644 index 00000000000..0318f9d7f46 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md @@ -0,0 +1,215 @@ +--- +id: 646df0cf26413a7b35e4b8b3 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Remove the sharp edges of the nose with border radius of `50%` each on the top-left, bottom-right, and bottom-left corners. Also, rotate it at 180 degrees. + +# --hints-- + +Your `.cat-nose` selector should have a `border-top-left-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderTopLeftRadius === '50%') +``` + +Your `.cat-nose` selector should have a `border-bottom-right-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottomRightRadius === '50%') +``` + +Your `.cat-nose` selector should have a `border-bottom-left-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottomLeftRadius === '50%') +``` + +Your `.cat-nose` selector should have a `transform` property set to `rotate(180deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.transform === 'rotate(180deg)') +``` + +You should not have a `border-top-right-radius` property in your `.cat-nose` selector. + +```js +assert(/border-top-right-radius:\s*\d+%;/.test(code) === false); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md new file mode 100644 index 00000000000..9d8231e174b --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md @@ -0,0 +1,203 @@ +--- +id: 646df1d1aa4ae57bdf1869c4 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Now you will start working on the mouth. There will be a right line and left line for the mouth. + +Create a `div` element with the class `cat-mouth`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 13) +``` + +Your `div` element should have the class `cat-mouth` + +```js +assert(document.querySelectorAll('div')[12].classList.contains('cat-mouth')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md new file mode 100644 index 00000000000..3ef80ee39bb --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md @@ -0,0 +1,217 @@ +--- +id: 646dffd8ce9ac77ec1906f2e +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Inside your `.cat-mouth` element, create a `div` element with the class `cat-mouth-line-left` and another `div` with the class `cat-mouth-line-right`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-mouth`. + +```js +assert(document.querySelectorAll('div.cat-mouth').length === 1); +``` + +You should have two `div` elements inside your `.cat-mouth` element. + +```js +assert(document.querySelectorAll('.cat-mouth div').length === 2); +``` + +The first `div` element inside the `.cat-mouth` element should have the class `cat-mouth-line-left`. + +```js +assert(document.querySelectorAll('.cat-mouth div')[0]?.classList.contains('cat-mouth-line-left')); +``` + +The second `div` element inside the `.cat-mouth` element should have the class `cat-mouth-line-right`. + +```js +assert(document.querySelectorAll('.cat-mouth div')[1]?.classList.contains('cat-mouth-line-right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md new file mode 100644 index 00000000000..a561360c7e9 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md @@ -0,0 +1,227 @@ +--- +id: 646f0417322c0e04983a5149 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Using a class selector, give your `.cat-mouth-line-left` element a `position` of `absolute`, a `top` of `88px` and a `left` of `74px`. This would move it into the right position. + +# --hints-- + +You should have a `cat-mouth-line-left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')) +``` + +Your `.cat-mouth-line-left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.position === 'absolute') +``` + +Your `.cat-mouth-line-left` selector should have a `top` property set to `88px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.top === '88px') +``` + +Your `.cat-mouth-line-left` selector should have a `left` property set to `74px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.left === '74px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + + --fcc-editable-region-- ++ +++ +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md new file mode 100644 index 00000000000..46ce69b8f2c --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md @@ -0,0 +1,214 @@ +--- +id: 646f08293804a30685533c6f +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Using the `transform` property, rotate the left mouth line at `170` degrees. + +# --hints-- + +Your `.cat-mouth-line-left` property should have a `transform` property set to `rotate(170deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.transform === 'rotate(170deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md new file mode 100644 index 00000000000..03853c3938b --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md @@ -0,0 +1,234 @@ +--- +id: 646f09293eb3230723a62f77 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Access your `.cat-mouth-line-right` element with a class selector, then move it into the right position with a `position` of `absolute`, a `top` of `88px` and a `left` of `91px`. + +# --hints-- + +You should have a `.cat-mouth-line-right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')) +``` + +Your `.cat-mouth-line-right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.position === 'absolute') +``` + +Your `.cat-mouth-line-right` selector should have a `top` property set to `88px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.top === '88px') +``` + +Your `.cat-mouth-line-right` selector should have a `left` property set to `91px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.left === '91px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md new file mode 100644 index 00000000000..2a01ed169d2 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md @@ -0,0 +1,221 @@ +--- +id: 646f0c9a1e3360092d1bbd33 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Rotate the right mouth line at `165` degrees. + +# --hints-- + +Your `.cat-mouth-line-left` property should have a `transform` property set to `rotate(165deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.transform === 'rotate(165deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md new file mode 100644 index 00000000000..3d75bf77a02 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md @@ -0,0 +1,231 @@ +--- +id: 646f0ce5737243098ad6e494 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +The last thing you will work on is the whiskers. There are going to be 6 of them, meaning there will be three on each side. + +Create a `div` element with the class `cat-whiskers`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 16) +``` + +Your div element should have the class `cat-whiskers`. + +```js +assert(document.querySelectorAll('div')[15].classList.contains('cat-whiskers')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md new file mode 100644 index 00000000000..6e28a86659a --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md @@ -0,0 +1,243 @@ +--- +id: 646f0ef13604420a8744f7d4 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Inside the `.cat-whiskers` element, create two `div` elements with the class `cat-whiskers-left` and `cat-whiskers-right`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-whiskers` + +```js +assert(document.querySelectorAll('div.cat-whiskers').length === 1) +``` + +You should have two `div` elements inside the `.cat-whiskers` element. + +```js +assert(document.querySelectorAll('.cat-whiskers div').length === 2) +``` + +The first `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-left`. + +```js +assert(document.querySelectorAll('.cat-whiskers div')[0].classList.contains('cat-whiskers-left')) +``` + +The second `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-right`. + +```js +assert(document.querySelectorAll('.cat-whiskers div')[1].classList.contains('cat-whiskers-right')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md new file mode 100644 index 00000000000..291e0fbd52d --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md @@ -0,0 +1,253 @@ +--- +id: 646f0f7c5933560af8e7e380 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Inside the `.cat-whiskers-left` element, create three `div` elements with the classes `cat-whisker-left-top`, `cat-whisker-left-middle`, and `cat-whisker-left-bottom`. + +# --hints-- + +You should not change the existing `div` element with class `cat-whiskers-left`. + +```js +assert(document.querySelectorAll('div.cat-whiskers-left').length === 1) +``` + +You should create three `div` elements inside your `.cat-whiskers-left` element. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div').length === 3) +``` + +The first `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-top`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[0].classList.contains('cat-whisker-left-top')) +``` + +The second `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-middle`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[1].classList.contains('cat-whisker-left-middle')) +``` + +The third `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-bottom`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[2].classList.contains('cat-whisker-left-bottom')) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ + --fcc-editable-region-- ++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md new file mode 100644 index 00000000000..820cbd44d12 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md @@ -0,0 +1,256 @@ +--- +id: 646f102bf87b350b593baa72 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Inside the `.cat-whiskers-right` element, create 3 `div` elements with the class `cat-whisker-right-top`, `cat-whisker-right-middle`, and `cat-whisker-right-bottom`. + +# --hints-- + +You should not change the existing `div` element with class `cat-whiskers-right`. + +```js +assert(document.querySelectorAll('div.cat-whiskers-right').length === 1) +``` + +You should create three `div` elements inside your `.cat-whiskers-right` element. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div').length === 3) +``` + +The first `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-top`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[0].classList.contains('cat-whisker-right-top')) +``` + +The second `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-middle`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[1].classList.contains('cat-whisker-right-middle')) +``` + +The third `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-bottom`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[2].classList.contains('cat-whisker-right-bottom')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ ++ --fcc-editable-region-- ++ ++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md new file mode 100644 index 00000000000..741c609e6b3 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md @@ -0,0 +1,254 @@ +--- +id: 646f107abb89d00bb99f387a +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Use a descendant selector to target the three `div` elements inside your `.cat-whiskers-left` element. Give it a `width` of `40px`, a `height` of `1px`, and a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-whiskers-left div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')) +``` + +Your `.cat-whiskers-left div` selector should have a `width` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.width === '40px') +``` + +Your `.cat-whiskers-left div` selector should have a `height` set to `1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.height === '1px') +``` + +Your `.cat-whiskers-left div` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md new file mode 100644 index 00000000000..b1c107c9c2e --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md @@ -0,0 +1,266 @@ +--- +id: 646f12da0b4c5d0ca162834a +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Using a class selector, move the `.cat-whisker-left-top` element into place with a `position` of `absolute`, a `top` of `120px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-top` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')) +``` + +Your `.cat-whisker-left-top` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.position === 'absolute') +``` + +Your `.cat-whisker-left-top` selector should have a `top` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.top === '120px') +``` + +Your `.cat-whisker-left-top` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md new file mode 100644 index 00000000000..9ae2339b4dc --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md @@ -0,0 +1,254 @@ +--- +id: 646f135eab69d90d0c6d4e9b +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Rotate the left top whisker at `10` degrees. + +# --hints-- + +Your `.cat-whisker-left-top` selector should have a `transform` property set to `rotate(10deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.transform === 'rotate(10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md new file mode 100644 index 00000000000..c0b941997a6 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md @@ -0,0 +1,273 @@ +--- +id: 646f159b2cffb21150b927cb +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Use a class selector to target the `.cat-whisker-left-middle` element. Then move it into place with a `position` property set to `absolute`, a `top` of `127px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-middle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')) +``` + +Your `.cat-whisker-left-middle` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.position === 'absolute') +``` + +Your `.cat-whisker-left-middle` selector should have a `top` property set to `127px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.top === '127px') +``` + +Your `.cat-whisker-left-middle` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md new file mode 100644 index 00000000000..0a537b0812d --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md @@ -0,0 +1,260 @@ +--- +id: 646f164bf100dd11d226161f +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Rotate the left middle whisker at 3 degrees. + +# --hints-- + +Your `.cat-whisker-left-middle` selector should have a `transform` property set to `rotate(3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.transform === 'rotate(3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md new file mode 100644 index 00000000000..651a9405914 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md @@ -0,0 +1,280 @@ +--- +id: 646f1764e2f1d212ba9785a7 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Using a class selector, move the `.cat-whisker-left-bottom` into position with a `position` of `absolute`, a `top` of `134px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-bottom` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')) +``` + +Your `.cat-whisker-left-bottom` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.position === 'absolute') +``` + +Your `.cat-whisker-left-bottom` selector should have a `top` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.top === '134px') +``` + +Your `.cat-whisker-left-bottom` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md new file mode 100644 index 00000000000..bc03c983374 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md @@ -0,0 +1,267 @@ +--- +id: 646f1802a09a171332e14630 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Rotate the left bottom whisker at `-3` degrees. + +# --hints-- + +Your `.cat-whisker-left-bottom` selector should have a `transform` property set to `rotate(-3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.transform === 'rotate(-3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md new file mode 100644 index 00000000000..e365b97d693 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md @@ -0,0 +1,287 @@ +--- +id: 646f4d6c42dc5f214f4e7444 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Now you will work on moving the right whiskers into place. Use class selector to target the `.cat-whisker-right-top` element and give it a `position` of `absolute`, a `top` of `120px`, and a `left` of `109px`. + +# --hints-- + +You should have a `.cat-whisker-right-top` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')) +``` + +Your `.cat-whisker-right-top` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.position === 'absolute') +``` + +Your `.cat-whisker-right-top` selector should have a `top` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.top === '120px') +``` + +Your `.cat-whisker-right-top` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md new file mode 100644 index 00000000000..9df724448e7 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md @@ -0,0 +1,274 @@ +--- +id: 646f4e46e81f7021d5fd9c1d +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Rotate the top-right whisker at -10 degrees. + +# --hints-- + +Your `.cat-whisker-right-top` selector should have a `transform` property set to `rotate(-1deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.transform === 'rotate(-10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md new file mode 100644 index 00000000000..2f79cbf9301 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md @@ -0,0 +1,294 @@ +--- +id: 646f4f6a14e3c522d130a0d2 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Use a class selector to target the `cat-whisker-right-middle` element, then move the right middle whisker into position with a `position` of `absolute`, a `top` of `127px`, and a `left` of `109px`. + +# --hints-- + +You should have a `.cat-whisker-right-middle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')) +``` + +Your `.cat-whisker-right-middle` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.position === 'absolute') +``` + +Your `.cat-whisker-right-middle` selector should have a `top` property set to `127px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.top === '127px') +``` + +Your `.cat-whisker-right-middle` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md new file mode 100644 index 00000000000..a7d861a1258 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md @@ -0,0 +1,281 @@ +--- +id: 646f4fe12b7985232bf475a5 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Rotate the right middle whisker at -3 degrees. + +# --hints-- + +Your `.cat-whisker-right-middle` selector should have a `transform` property set to `rotate(-3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.transform === 'rotate(-3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md new file mode 100644 index 00000000000..d0cf2b64a3f --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md @@ -0,0 +1,302 @@ +--- +id: 646f507e4d1cd323f17db4fc +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Use class selector to target the `.cat-whisker-right-bottom` element, then move it into place with a `position` of `absolute`, a `top` of `134px`, and a `left` of `109px`. + + +# --hints-- + +You should have a `.cat-whisker-right-bottom` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')) +``` + +Your `.cat-whisker-right-bottom` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.position === 'absolute') +``` + +Your `.cat-whisker-right-bottom` selector should have a `top` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.top === '134px') +``` + +Your `.cat-whisker-right-bottom` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md new file mode 100644 index 00000000000..3bf9207660e --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md @@ -0,0 +1,556 @@ +--- +id: 646f516dbfc1342495515625 +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Rotate the bottom-right whisker at 3 degrees. + +With this final step, your cat painting is now complete. + +# --hints-- + +Your `.cat-whisker-right-bottom` selector should have a `transform` property set to `rotate(3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.transform === 'rotate(3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +.cat-whisker-right-bottom { + position: absolute; + top: 134px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +# --solutions-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +.cat-whisker-right-bottom { + position: absolute; + top: 134px; + left: 109px; + transform: rotate(3deg); +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md new file mode 100644 index 00000000000..03ea4e8598b --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md @@ -0,0 +1,77 @@ +--- +id: 6476f5c17f99146071ee884c +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +You could see that nothing happens. The `.cat-head` element did not move despite setting a `top` and `left` of `100px` each. But that's not the case with `relative` positioning. + +When you use the `relative` value, the element is still positioned according to the normal flow of the document, but the `top`, `left`, `bottom`, and `right` values become active. + +Instead of `static`, give you `.cat-head` a position of `relative`, and leave both `top` and `left` properties as they are. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `relative`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'relative') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: static; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md new file mode 100644 index 00000000000..0c28f0f242e --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md @@ -0,0 +1,79 @@ +--- +id: 6476f7a4827bcc61682f2347 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +The next position property is `absolute`. When you use the `absolute` value for your `position` property, the element is taken out of the normal flow of the document, and then its position is determined by the `top`, `right`, `bottom`, and `left` properties. + +Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any pixel value. + + + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `absolute`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute') +``` + +Your `.cat-head` selector should have a `top` property set to any number in `px`. Make sure you add a semi-colon. + +```js +// assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '300px') +assert.match(code, /top:\s*\d{1,4}px;/) +``` + +Your `.cat-head` selector should have a `left` property set to any number in `px`. Make sure you add a semi-colon. + +```js +// assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '400px') +assert.match(code, /left:\s*\d{1,4}px;/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: relative; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md new file mode 100644 index 00000000000..85259f8c8bf --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md @@ -0,0 +1,70 @@ +--- +id: 6476fb7cbaafa36d65e9cf35 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +`fixed` is a `position` property value that lets you make an element fixed to the page no matter where the user scrolls to on the page. + +You'll have to do some more markups to see how `fixed` positioning works. In your HTML, create a `div` element with the class `box`. + +# --hints-- + +You should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 2); +``` + +Your `div` element should have the class `box`. + +```js +assert(document.querySelectorAll('div')[1]?.getAttribute('class') === 'box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + top: 300px; + left: 400px; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md new file mode 100644 index 00000000000..a8a137321fe --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md @@ -0,0 +1,101 @@ +--- +id: 6476fc5cf14b276e6d04e82a +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Use a class selector to give your `.box` element a width of `200px`, a height of `600px`, and a background color of `#000`. Also, give it a `position` of `absolute`, a `top` of `800px` and a `left` of `650px`. + +# --hints-- + +You should have a `.box` selector. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')) +``` + +Your `.box` selector should have a `width` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.width === '200px') +``` + +Your `.box` selector should have a `height` property set to `600px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.height === '600px') +``` + +Your `.box` selector should have a `background-color` property set to `#000`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +Your `.box` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.position === 'absolute') +``` + +Your `.box` selector should have a `left` property set to `650px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.left === '650px') +``` + +Your `.box` selector should have a `top` property set to `800px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.top === '800px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: relative; + top: 100px; + left: 100px; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md new file mode 100644 index 00000000000..bd1a9049d86 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md @@ -0,0 +1,85 @@ +--- +id: 6476fd4213318f6ee211028a +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Now replace the `position` property value of your `.cat-head` with `fixed`. Leave both `top` and `left` as they are. + +After that, scroll up and down to see how the `fixed` value works. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `fixed`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'fixed') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: relative; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 200px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md new file mode 100644 index 00000000000..1c8891e4304 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md @@ -0,0 +1,87 @@ +--- +id: 64770351e8586671ec0911f0 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +The last position property value is `sticky`. `sticky` positioning is a hybrid of `relative` and `fixed` positioning. It allows an element to **stick** to a specific position within its containing element or viewport, based on the scroll position. + +Change the value of the `position` property of `.cat-head` to `sticky`, set `top` to `0`, then remove `left` and its value. + +**Note**: To see how `sticky` works, you have to place a couple of texts before and after your `.cat-head` `div` element. If you scroll up after that, you'll see that the `.cat-head` gets stuck to the top and remains there. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `sticky`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'sticky') +``` + +Your `.cat-head` selector should have a `top` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px') +``` + +You should not have the `left` property and its value in your code. + +```js +assert.notMatch(code, /left:\s*100px;?/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: fixed; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 200px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md new file mode 100644 index 00000000000..a7597864564 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md @@ -0,0 +1,102 @@ +--- +id: 6477062778c85972eb648030 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +You should now center the cat head. + +Give the `.cat-head` element a position property set to `absolute`. Set a value of `0` for the `right`, `left`, `top`, `bottom` properties, then set its `margin` property on all sides to `auto`. That's one way to center an element vertically and horizontally using CSS positioning. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `absolute`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute') +``` + +Your `.cat-head` selector should have a `top` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px') +``` + +Your `.cat-head` selector should have a `left` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '0px') +``` + +Your `.cat-head` selector should have a `right` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.right === '0px') +``` + +Your `.cat-head` selector should have a `bottom` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.bottom === '0px') +``` + +Your `.cat-head` selector should have a `margin` property set to `auto`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.margin === 'auto') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: sticky; + top: 0; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md new file mode 100644 index 00000000000..806db219734 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md @@ -0,0 +1,73 @@ +--- +id: 647d821de0d97b3283c72b36 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Also, remove the `.box` CSS rule and its declarations because you don't need them anymore. + +# --hints-- + +You should remove the `.box` css rule and all its values. + +```js +assert.notMatch(code, /\.box\s*\{\s*width:\s*400px;\s*height:\s*600px;\s*background-color:\s*#000;\s*position:\s*absolute;\s*left:\s*650px;\s*top:\s*800px;?\s*\}\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md new file mode 100644 index 00000000000..6e039d20c5c --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md @@ -0,0 +1,48 @@ +--- +id: 647d855ac12cd436059acd39 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Use the universal selector to add `box-sizing: border-box;` to your CSS. This ensures elements include padding and border in their specified width and height. + +# --hints-- + +You should have the universal selector (`*`). + +```js +// assert.match(code, /\*\s*{\s*.*\s*}/) +assert(new __helpers.CSSHelp(document).getStyle('*')) +``` + +Your universal selector should have a `box-sizing` property set to `border-box`. + +```js +// assert.match(code, /\*\s*{\s*box-sizing:\s*border-box;?\s*}/) +assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md new file mode 100644 index 00000000000..a7a70f95a81 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md @@ -0,0 +1,74 @@ +--- +id: 649353647c44ef4867ab4935 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Remove the `div` element with class `box` because you don't need it anymore. + +# --hints-- + +You should remove the `div` element with class `box` + +```js +assert.notMatch(code, /fCC Cat Painting + + + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md new file mode 100644 index 00000000000..04963838659 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md @@ -0,0 +1,218 @@ +--- +id: 64a2687ef267e5934a2f93e3 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Using a descendant selector, select the two `div` elements inside the `div` with class `cat-mouth`. Give it a width of `30px`, a height of `50px`, and a border of `2px solid #000`. + +# --hints-- + +You should have a `.cat-mouth div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')) +``` + +Your `.cat-mouth div` selector should have a `width` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.width === '30px') +``` + +Your `.cat-mouth div` selector should have a `height` property set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.height === '50px') +``` + +Your `.cat-mouth div` selector should have a `border` property set to `2px solid #000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.border === '2px solid rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md new file mode 100644 index 00000000000..d46fbf6da0d --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md @@ -0,0 +1,212 @@ +--- +id: 64a26ac5540c5493f4641f10 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +You are going to make the two mouth lines into an elliptical shape. So, give the `.cat-mouth div` selector a border color of `black transparent transparent transparent` and a border radius of `190%/190px 150px 0 0`. + +# --hints-- + +Your `.cat-mouth div` selector should have a `border-color` property set to `black transparent transparent transparent`. + +```js +assert.match(code, /border-color:\s*black\s*(transparent)\s*\1\s*\1\s*;?/) +``` + +Your `.cat-mouth div` selector should have a `border-radius` property set to `190%/190px 150px 0 0`. + +```js +assert.match(code, /border-radius:\s*190%\/190px\s*150px\s*0\s*0\s*;?/) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md new file mode 100644 index 00000000000..4f3a8d2de51 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md @@ -0,0 +1,260 @@ +--- +id: 64a3bcbc83e574b58c8ed048 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +As you did in the previous step, use a descendant selector to target the three `div` elements inside your `.cat-whiskers-right` element. Give it a `width` of `40px`, a `height` of `1px`, and a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-whiskers-right div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')) +``` + +Your `.cat-whiskers-right div` selector should have a `width` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.width === '40px') +``` + +Your `.cat-whiskers-right div` selector should have a `height` set to `1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.height === '1px') +``` + +Your `.cat-whiskers-right div` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md index 6e76702ed93..ba0312cbd34 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md @@ -29,7 +29,7 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.inne assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3); ``` -一个 `span` 元素应该包含文本 `Sodium 360mg`。 +A `span` element should wrap the text `Sodium 160mg`. ```js assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/)); diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md index 3cfb303c4dc..c226ccf4545 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -文本 `* Daily Value %` 应该右对齐。 创建一个 `.right` 选择器，并使用 `justify-content` 属性来实现它。 +The text `% Daily Value *` should be aligned to the right. 创建一个 `.right` 选择器，并使用 `justify-content` 属性来实现它。 # --hints-- diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md index 9422e15afaf..229b7eefc0e 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md @@ -7,7 +7,7 @@ dashedName: step-25 # --description-- -To keep track of all of your spreadsheet's functions, delcare a `spreadsheetFunctions` object. Using destructuring syntax, set `sum`, `average`, and `median` as properties and values on the `spreadsheetFunctions` object. +To keep track of all of your spreadsheet's functions, declare a `spreadsheetFunctions` object. Using destructuring syntax, set `sum`, `average`, and `median` as properties and values on the `spreadsheetFunctions` object. # --hints-- diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md index f8bad487511..7404932cec7 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md @@ -11,7 +11,7 @@ Inside the callback function, add a `console.log` with the value of `e.target.va Open the console, and make a selection from the teammates dropdown menu. You should see the value of that selection in the console. -`e.target.value` represents the value property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. +`e.target.value` represents the `value` property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. # --hints-- diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md b/curriculum/challenges/chinese/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md index 39441cd555d..8fc0d7b5e38 100644 --- a/curriculum/challenges/chinese/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md +++ b/curriculum/challenges/chinese/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md @@ -15,16 +15,16 @@ The website will consist of a main index page which will have links to a few rec 1. Your recipe page should include an `html` element with a `head` and `body` element as children. 1. You should have a `title` element within the `head` element with the text `The Odin Recipes`. 1. You should see an `h1` element that has the text `Creamy Chocolate Fudge`. -1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text. +1. You should see a related image with an `alt` attribute. 1. There should be an `h2` element with the text `Description` under the image. 1. You should see a couple of paragraphs under `Description` that describe the recipe. -1. There should be an `h2` element with the text `Ingredients` +1. There should be an `h2` element with the text `Ingredients`. 1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe. 1. Under the list of ingredients add another heading called `Steps`. 1. You should see an ordered list with a couple of steps needed to complete the recipe. -1. Under the steps there should be an `h2` element with the text `More Recipes` +1. Under the steps there should be an `h2` element with the text `More Recipes`. 1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within. -1. These anchor elements should have `href` attribute with the value set to `#` +1. These anchor elements should have `href` attribute with the value set to `#`. # --hints-- @@ -56,12 +56,12 @@ You should have a `h1` element within your `body` element that contains the text assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge'); ``` -You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text. +You should have an image with an `alt` attribute. ```js const img = document.querySelectorAll('IMG')[0]; -assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg') +assert(img && img.alt !='' && img.src != '') ``` You should have an `h2` element with the text `Description`. diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md new file mode 100644 index 00000000000..26dcaf81d51 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md @@ -0,0 +1,54 @@ +--- +id: 637f4e0e72c65bc8e73dfe1e +videoId: LGQuIIv2RVA +title: HTML Foundations Question A +challengeType: 15 +dashedName: html-foundations-question-a +--- + +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) + +## --text-- + +What are HTML tags? + +## --answers-- + +HTML tags tell the browser what content an element contains. + +--- + +HTML tags tell the browser when to load its content. + +--- + +HTML tags tell the browser what content the next element contains. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md new file mode 100644 index 00000000000..1fa04902849 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md @@ -0,0 +1,49 @@ +--- +id: 637f4e1672c65bc8e73dfe1f +title: HTML Foundations Question B +challengeType: 15 +dashedName: html-foundations-question-b +--- + +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `
`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --text-- + +What are the three parts of most HTML elements? + +## --answers-- + +An opening tag, self closing tag, and content. + +--- + +An opening tag, closing tag, and content. + +--- + +An opening tag, closing tag, and attribute. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md new file mode 100644 index 00000000000..79bd0197756 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md @@ -0,0 +1,54 @@ +--- +id: 637f4e1c72c65bc8e73dfe20 +title: HTML Foundations Question C +challengeType: 15 +dashedName: html-foundations-question-c +--- + +# --description-- + +To demonstrate an HTML boilerplate, you first need an HTML file to work with. + +Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`. + +You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files. + +To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file. + +It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems. + +## The DOCTYPE + +Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``. + +The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4: + +```html + +``` + +However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``. + +Open the `index.html` file created earlier in your text editor and add `` to the very first line. + +# --question-- +## --text-- + +What is the purpose of the `DOCTYPE` declaration? + +## --answers-- + +It tells the browser which version of HTML to use to render the document. + +--- + +It tells the browser that this document uses JavaScript. + +--- + +It tells the browser the title of the document. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md new file mode 100644 index 00000000000..d851163101c --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md @@ -0,0 +1,46 @@ +--- +id: 637f4e2872c65bc8e73dfe21 +title: HTML Foundations Question D +challengeType: 15 +dashedName: html-foundations-question-d +--- + +# --description-- + +After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it. + +This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document. + +Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so: + +```html + + + +``` + +## What is the lang attribute? +`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation. + +# --question-- + +## --text-- + +What is the `html` element? + +## --answers-- + +It is the root element in the document and tells the browser which version of HTML it should use. + +--- + +It is the root element in the document and all other elements should descend from it. + +--- + +It is the root element in the document and all other elements should come after it. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md new file mode 100644 index 00000000000..58e4fab1b96 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md @@ -0,0 +1,41 @@ +--- +id: 6374f208de18c50e48ba767b +title: HTML Foundations Question E +challengeType: 15 +dashedName: html-foundations-question-e +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --assignment-- + +Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. + +## --text-- + +Which of the following statements is true? + +## --answers-- + +CSS is used to create the basic structure of a webpage, and HTML is used to add style. + +--- + +HTML is used to create the basic structure of a webpage, and CSS is used to add style. + +--- + +HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. + + +## --video-solution-- + +2 + + diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md new file mode 100644 index 00000000000..80f5869cff5 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md @@ -0,0 +1,65 @@ +--- +id: 637f4e2f72c65bc8e73dfe22 +title: HTML Foundations Question F +challengeType: 15 +dashedName: html-foundations-question-f +--- + +# --description-- + +The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage. + +## The Charset Meta Element +You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: ``. + +Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser. + +## Title Element +Another element you should always include in the head of an HTML document is the `title` element: + +```html +
My First Webpage +``` + +The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. + +If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open. + +There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum. + +Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag: + + +```html + + + + + +My First Webpage + + +``` + +# --question-- + +## --text-- + +What is the purpose of the `head` element? + +## --answers-- + +The `head` element is used to display all elements that are displayed on the webpage. + +--- + +The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements. + +--- + +The `head` element is used to display the header content on top of the webpage. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md new file mode 100644 index 00000000000..16299d58648 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md @@ -0,0 +1,48 @@ +--- +id: 637f4e3672c65bc8e73dfe23 +videoId: V8UAEoOvqFg +title: HTML Foundations Question G +challengeType: 15 +dashedName: html-foundations-question-g +--- + +# --description-- + +The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. + +To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so: + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s brilliant Building your first web page video above. + +--- + +Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. + +--- + +Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML. + +## --text-- + +What is the purpose of the `body` element? + +## --answers-- + +This is where all important information about the webpage is displayed such as the `title` and `meta` tags. + +--- + +This is where you tell the browser how to render the webpage correctly. + +--- + +This is where all content will be displayed on the page such images, text, and links. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md new file mode 100644 index 00000000000..f99018d79de --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md @@ -0,0 +1,36 @@ +--- +id: 6376327e2724a688c04636e3 +title: HTML Foundations Question H +challengeType: 15 +dashedName: html-foundations-question-h +--- + +# --description-- + + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to add paragraphs of text on a webpage? + +## --answers-- + +CSS + +--- + +JavaScript + +--- + +HTML + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md new file mode 100644 index 00000000000..72ed091e603 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md @@ -0,0 +1,33 @@ +--- +id: 637633162724a688c04636e4 +title: HTML Foundations Question I +challengeType: 15 +dashedName: html-foundations-question-i +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to change the font and background color of a button? + +## --answers-- + +You should use CSS to change the background color and font of a button. + +--- + +You should use JavaScript to change the background color and font of a button. + +--- + +You should use HTML to change the background color and font of a button. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md new file mode 100644 index 00000000000..ebd30965da6 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md @@ -0,0 +1,34 @@ +--- +id: 637633672724a688c04636e5 +title: HTML Foundations Question J +challengeType: 15 +dashedName: html-foundations-question-j +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +What is the difference between HTML, CSS, and JavaScript? + +## --answers-- + +HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. + +--- + +CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. + +--- + +JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-a.md new file mode 100644 index 00000000000..b4d237448f3 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-a.md @@ -0,0 +1,66 @@ +--- +id: 637f704072c65bc8e73dfe36 +videoId: tsEQgGjSmkM +title: Links and Images Question A +challengeType: 15 +dashedName: links-and-images-question-a +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named `odin-links-and-images`. + +- Within that directory, create a new file named `index.html`. + +- Fill in the usual HTML boilerplate. + +- Finally, add the following `h1` to the `body`: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. + +Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. + +It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Links video above. + +## --text-- + +What HTML tag is used to create a link? + +## --answers-- + +`` + +--- + +`` + +--- + +`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-b.md
new file mode 100644
index 00000000000..a138268c406
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-b.md
@@ -0,0 +1,54 @@
+---
+id: 637f703572c65bc8e73dfe35
+title: Links and Images Question B
+challengeType: 15
+dashedName: links-and-images-question-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- finally, add the following `h1` to the `body`: `
Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- +## --text-- + +What is an attribute? +## --answers-- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. + +--- + +An HTML attribute is used to tell the browser what the element contains. + +--- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-c.md new file mode 100644 index 00000000000..8863b087456 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-c.md @@ -0,0 +1,55 @@ +--- +id: 637f703072c65bc8e73dfe34 +title: Links and Images Question C +challengeType: 15 +dashedName: links-and-images-question-c +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named `odin-links-and-images`. + +- Within that directory, create a new file named `index.html`. + +- Fill in the usual HTML boilerplate. + +- finally, add the following `h1` to the `body`: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --text-- + +What attribute tells links where to go to? + +## --answers-- + +`src` + +--- + +`href` + +--- + +`link` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-d.md new file mode 100644 index 00000000000..37eebffbabf --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-d.md @@ -0,0 +1,112 @@ +--- +id: 637f702872c65bc8e73dfe33 +videoId: ta3Oxx7Yqbo +title: Links and Images Question D +challengeType: 15 +dashedName: links-and-images-question-d +--- + +# --description-- + + +Generally, there are two kinds of links you will create: + +- Links to pages on other websites on the internet + +- Links to pages located on your own websites + + +## Absolute Links +Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. + +You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. + +`https://www.theodinproject.com/about` + +## Relative Links +Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. + +Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. + +Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: + +```html + + + + +Odin Links and Images + + + +About Page
+ + +``` + +Back in the `index` page, add the following anchor element to create a link to the `about` page: + +```html + +Homepage
+ click me + + About + +``` + +Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. + +This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. + +But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. + +Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. + +Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. + +To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. + +```html + +Homepage
+ About + +``` + +Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. + +In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. + +```html + +Homepage
+ About + +``` + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML File Structure video above. + +## --text-- + +What is the difference between an absolute and a relative link? + +## --answers-- + +An absolute link is a link to another page on the current website. A relative link is a link to another website. + +--- + +An absolute link is a link to another website. A relative link is a link another page on the current website. + +--- + +There is no difference between absolute and relative links. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-e.md new file mode 100644 index 00000000000..ae008078088 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-e.md @@ -0,0 +1,98 @@ +--- +id: 637f702372c65bc8e73dfe32 +videoId: 0xoztJCHpbQ +title: Links and Images Question E +challengeType: 15 +dashedName: links-and-images-question-e +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+``
+
+---
+
+``
+
+---
+
+`` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-f.md new file mode 100644 index 00000000000..e1af2d6a659 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-f.md @@ -0,0 +1,93 @@ +--- +id: 637f701c72c65bc8e73dfe31 +title: Links and Images Question F +challengeType: 15 +dashedName: links-and-images-question-f +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `
` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-g.md
new file mode 100644
index 00000000000..5bc84fa6c96
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+title: Links and Images Question G
+challengeType: 15
+dashedName: links-and-images-question-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-h.md b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-h.md
new file mode 100644
index 00000000000..71157081ae7
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-question-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+title: Links and Images Question H
+challengeType: 15
+dashedName: links-and-images-question-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Read about the four main image formats that can be used on the web.
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+TIFF, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-a.md
new file mode 100644
index 00000000000..8698b62aca8
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Question A
+challengeType: 15
+dashedName: working-with-text-question-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua.
+
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ nisi ut aliquip ex ea commodo consequat.
+
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `` tag. + +Changing our example from before to use paragraph elements fixes the issue: + + + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. + +## --text-- + +How do you create a paragraph in HTML? + +## --answers-- + +`
This is a paragraph
` + +--- + +`This is a paragraph
` + +--- + +`This is a paragraph` + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-b.md new file mode 100644 index 00000000000..17d3c900359 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-b.md @@ -0,0 +1,39 @@ +--- +id: 637f4e5f72c65bc8e73dfe28 +title: Working With Text Question B +challengeType: 15 +dashedName: working-with-text-question-b +--- + +# --description-- + +Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. + +There are 6 different levels of headings starting from `` to `
`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. + +Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `
` tag. + + + +Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. + +# --question-- +## --text-- + +How many different levels of headings are there and what is the difference between them? + +## --answers-- + +There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. + +--- + +There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. + +--- + +There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-c.md new file mode 100644 index 00000000000..6ccf0e06658 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-c.md @@ -0,0 +1,47 @@ +--- +id: 637f4e6672c65bc8e73dfe29 +videoId: gW6cBZLUk6M +title: Working With Text Question C +challengeType: 15 +dashedName: working-with-text-question-c +--- + +# --description-- + +The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. + +You can use `strong` on its own: + + + +But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: + + + +Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Bold and Italic Text Video above. + +## --text-- + +What element should you use to make text bold and important? + +## --answers-- + +`This is an important message` + +--- + +`
This is an important message
` + +--- + +`This is an important message` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-d.md new file mode 100644 index 00000000000..e686b2698e0 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-d.md @@ -0,0 +1,38 @@ +--- +id: 637f4e6e72c65bc8e73dfe2a +title: Working With Text Question D +challengeType: 15 +dashedName: working-with-text-question-d +--- + +# --description-- + +The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. + +To use `em` on its own: + + +Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: + + + +# --question-- +## --text-- + +What element should you use to make text italicized to add emphasis? + +## --answers-- + +`This is an italic message` + +--- + +`This is an italic message` + +--- + +`This is an italic message ` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-e.md new file mode 100644 index 00000000000..a0a7ba2fda9 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-e.md @@ -0,0 +1,65 @@ +--- +id: 637f4e7972c65bc8e73dfe2b +title: Working With Text Question E +challengeType: 15 +dashedName: working-with-text-question-e +--- + +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the `body` element is the parent and the `p` is the child: + +```html + + + + +Lorem ipsum dolor sit amet.
+ + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: + +```html + + + + +Lorem ipsum dolor sit amet.
+Ut enim ad minim veniam.
+ + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship do two elements have if they are at the same level of nesting? + +## --answers-- + +The elements are each other's parents. + +--- + +The elements are each other's children. + +--- + +The elements are siblings. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-f.md new file mode 100644 index 00000000000..7d440cfab25 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-f.md @@ -0,0 +1,66 @@ +--- +id: 637f4e8072c65bc8e73dfe2c +title: Working With Text Question F +challengeType: 15 +dashedName: working-with-text-question-f +--- + +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the body element is the parent and the paragraph is the child: + +```html + + + + +Lorem ipsum dolor sit amet.
+ + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: + +```html + + + + +Lorem ipsum dolor sit amet.
+Ut enim ad minim veniam.
+ + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship does an element have with any nested element within it? + +## --answers-- + +The element within the other element is called the parent element. + +--- + +The element within the other element is called the child element. + +--- + +The element within the other element is called the sibling element. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-g.md new file mode 100644 index 00000000000..5f5d141fa46 --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-g.md @@ -0,0 +1,48 @@ +--- +id: 637f4e8772c65bc8e73dfe2d +title: Working With Text Question G +challengeType: 15 +dashedName: working-with-text-question-g +--- + +# --description-- + +HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. + +Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: + +```html +View the html to see the hidden comments
+ + + +Some paragraph text
+ + +``` + +# --question-- + +## --assignment-- + +To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. + +## --text-- + +How do you create HTML comments? + +## --answers-- + +`/* This is an HTML comment */` + +--- + +`` + +--- + +`<-- This is an HTML comment --!>` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-h.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-h.md new file mode 100644 index 00000000000..c20b4de097a --- /dev/null +++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-question-h.md @@ -0,0 +1,65 @@ +--- +id: 637f4e3e72c65bc8e73dfe24 +videoId: kcHKFZBVtf4 +title: Working with Text Question H +challengeType: 15 +dashedName: working-with-text-question-h +--- + +# --description-- + +If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. + +Unordered lists are created using the `- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-i.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-i.md
new file mode 100644
index 00000000000..05765087c87
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-i.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+title: Working with Text Question I
+challengeType: 15
+dashedName: working-with-text-question-i
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
fCC Cat Painting + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md new file mode 100644 index 00000000000..1757ddb08e0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md @@ -0,0 +1,51 @@ +--- +id: 646c586be7180e40ddf74ff6 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Give your `body` element a `background-color` of `#c9d2fc`. + +# --hints-- + +You should have a `body` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` selector should have a `background-color` property set to `#c9d2fc`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(201, 210, 252)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + +``` + +```css +* { + box-sizing: border-box; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md new file mode 100644 index 00000000000..c605ff01e1d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md @@ -0,0 +1,66 @@ +--- +id: 646c59e942f35541923104bf +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Back in your HTML, create a `main` element. Inside that `main` element, add a `div` element with the class `cat-head`. + +# --hints-- + +You should have a `main` element. + +```js +assert(document.querySelectorAll('main').length === 1); +``` + +You should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 1); +``` + +Your `div` element should have the class `cat-head`. + +```js +assert(document.querySelector('div')?.getAttribute('class') === 'cat-head'); +``` + +Your `div` element should be inside your `main` tag. + +```js +assert(document.querySelectorAll('main div').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md new file mode 100644 index 00000000000..81eb5c83f27 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md @@ -0,0 +1,79 @@ +--- +id: 646c5ace05e4be4211407935 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +To see the `cat-head` element, give it a linear gradient background with `#5e5e5e` at `85%` and `#45454f` at `100%`. + +You might not notice the difference between these two colors, but they are there. + +# --hints-- + +Your `.cat-head` selector should have a `background` property. + +```js +assert.match(code, /background:/) +``` + +Your `background` property should use the `linear-gradient` function. + +```js +assert.match(code, /background:\s*linear-gradient\(/) +``` + +Your `linear-gradient` function should set the first color to be `#5e5e5e` at `85%`. + +```js +assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%/) +``` + +Your `linear-gradient` function should set the second color to be `#45454f` at `100%`. + +```js +assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%,\s+#45454f\s+100%\);?/) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md new file mode 100644 index 00000000000..98afa6c6b3b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md @@ -0,0 +1,77 @@ +--- +id: 646c5d7057c45f432fcdd46c +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Using a class selector, give the `.cat-head` element a width of `205px` and a height of `180px`. Also, give it a border of `1px solid #000` and a `border-radius` of `46%`. + +# --hints-- + +You should have a `.cat-head` selector. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')) +``` + +Your `.cat-head` selector should have a `width` set to `205px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.width === '205px'); +``` + +Your `.cat-head` selector should have a `height` set to `180px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.height === '180px') +``` + +Your `.cat-head` selector should have a `border` set to `1px solid #000`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.border === '1px solid rgb(0, 0, 0)') +``` + +Your `.cat-head` selector should have a `border-radius` set to `46%`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle(".cat-head")?.borderRadius === '46%') +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md new file mode 100644 index 00000000000..7c88ce9baa8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md @@ -0,0 +1,78 @@ +--- +id: 646c5e727e56e743c9aed4a1 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +CSS positioning lets you set how you want an element to be positioned in the browser. It has a `position` property you can set to `static`, `absolute`, `relative`, `sticky` or `fixed`. + +Once you set the `position` property of the element, you can move the element around by setting a pixel or a percentage value for one or more of the `top`, `right`, `left`, or `bottom` properties. + +`static` is the default positioning for all elements. If you assign it to an element, you won't be able to move it around with `top`, `right`, `left`, or `bottom`. + +Give `.cat-head` a `position` property of `static`, then set the `top` and `left` properties to `100px` each. + + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `static`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'static') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + --fcc-editable-region-- + + --fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md new file mode 100644 index 00000000000..9c460caa45f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md @@ -0,0 +1,80 @@ +--- +id: 646c5ffef5598d449b52ec12 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Now you should work on the cat's ears. There will be a right and a left ear, and inside each, there will be an inner ear. + +Inside your `.cat-head` element, create a `div` element with the class `cat-ears`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-head`. + +```js +assert(document.querySelectorAll('div.cat-head').length === 1); +``` + +You should create one `div` element inside your `.cat-head` element. + +```js +assert(document.querySelectorAll('.cat-head div').length === 1); +``` + +Your `div` element should have the class `cat-ears`. + +```js +assert(document.querySelectorAll('.cat-head div')[0]?.getAttribute('class') === 'cat-ears'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md new file mode 100644 index 00000000000..356b443cc39 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md @@ -0,0 +1,86 @@ +--- +id: 646ce8bb4b35544d501c7184 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Inside your `.cat-ears` element, create two `div` elements with the classes `cat-left-ear` and `cat-right-ear` respectively. + +# --hints-- + +You should not change the existing `div` element with the class `car-ears`. + +```js +assert(document.querySelectorAll('div.cat-ears').length === 1); +``` + +You should create two `div` elements inside your `.cat-ears` element. + +```js +assert(document.querySelectorAll('.cat-ears div').length === 2); +``` + +Your first `div` element should have the class `cat-left-ear`. + +```js +assert(document.querySelectorAll('.cat-ears div')[0]?.classList.contains('cat-left-ear')); +``` + +Your second `div` element should have the class `cat-right-ear`. + +```js +assert(document.querySelectorAll('.cat-ears div')[1]?.classList.contains('cat-right-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md new file mode 100644 index 00000000000..f868fcd598d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md @@ -0,0 +1,83 @@ +--- +id: 646ce9d790d2a44de5f99e04 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Inside your `.cat-left-ear` element, create another `div` element with the class `cat-left-inner-ear`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-ear`. + +```js +assert(document.querySelectorAll('div.cat-left-ear').length === 1); +``` + +You should have a `div` element inside your `.cat-left-ear` element. + +```js +assert(document.querySelectorAll('.cat-left-ear div').length === 1); +``` + +Your `div` element should have the class `cat-left-inner-ear`. + +```js +assert(document.querySelectorAll('.cat-left-ear div')[0]?.classList.contains('cat-left-inner-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md new file mode 100644 index 00000000000..deb18782568 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md @@ -0,0 +1,85 @@ +--- +id: 646ceae4d57c214e6b03576c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Inside your `.cat-right-ear` element, create another `div` element with the class `cat-right-inner-ear`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-right-ear`. + +```js +assert(document.querySelectorAll('div.cat-right-ear').length === 1); +``` + +You should have a `div` element inside your `.cat-right-ear` element. + +```js +assert(document.querySelectorAll('.cat-right-ear div').length === 1); +``` + +Your `div` element should have the class `cat-right-inner-ear`. + +```js +assert(document.querySelectorAll('.cat-right-ear div')[0]?.classList.contains('cat-right-inner-ear')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md new file mode 100644 index 00000000000..ae13eae4db7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md @@ -0,0 +1,95 @@ +--- +id: 646ceb843412c74edee27a79 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +You are going to make each ear look like a triangle. + +Using a class selector, give the `.cat-left-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`. + +# --hints-- + +You should have a `.cat-left-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')) +``` + +Your `.cat-left-ear` selector should have a `border-left` property set to `35px solid transparent` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderLeft === '35px solid transparent') +``` + +Your `.cat-left-ear` selector should have a `border-right` property set to `35px solid transparent` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderRight === '35px solid transparent') +``` + +Your `.cat-left-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderBottom === '70px solid rgb(94, 94, 94)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md new file mode 100644 index 00000000000..60b4d9ebfde --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md @@ -0,0 +1,92 @@ +--- +id: 646cecc9eb5c4f4f73dafd07 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Move the left ear into position by setting a position of `absolute`, a `top` of `-26px`, and a `left` of `-31px`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.position === 'absolute') +``` + +Your `.cat-left-ear` selector should have a `top` property set to `-26px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.top === '-26px') +``` + +Your `.cat-left-ear` selector should have a `left` property set to `-31px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.left === '-31px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md new file mode 100644 index 00000000000..a0b737ac3d9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md @@ -0,0 +1,89 @@ +--- +id: 646cef0c2b98915094df7099 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Those edges are too sharp for an ear. So, set the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-left-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md new file mode 100644 index 00000000000..3bcd393bf42 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md @@ -0,0 +1,89 @@ +--- +id: 646cf1206cac5f51804f49cf +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +To position the left ear properly, you can use CSS transform to rotate it in a certain degree. + +The `transform` property allows you to modify the shape, position, and size of an element without changing the layout or affecting the surrounding elements. It has functions such as `translate()`, `rotate()`, `scale()`, `skew()`, and `matrix()`. + +Set the `transform` property to `rotate(-45deg)` and see what happens. + +# --hints-- + +You should set the `transform` property of your `.cat-left-ear` element to `rotate(-45deg)`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.transform === 'rotate(-45deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md new file mode 100644 index 00000000000..51bb049e2dd --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md @@ -0,0 +1,107 @@ +--- +id: 646cf2249f02ca5233d9af7c +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Now you can work on the right ear of the cat. You have the HTML for it already. + +Using a class selector, give the `.cat-right-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`. + +# --hints-- + +You should have a `.cat-right-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')) +``` + +Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent') +``` + +Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent') +``` + +Your `.cat-right-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '70px solid rgb(94, 94, 94)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md new file mode 100644 index 00000000000..dfce258d838 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md @@ -0,0 +1,104 @@ +--- +id: 646cf48d8f8e1f535a1821d3 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Move the right ear into position with a `position` property set to `absolute`, a `top` of `-26px`, and a `left` of `163px`. + +# --hints-- + +Your `.cat-right-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.position === 'absolute') +``` + +Your `.cat-right-ear` selector should have a `top` property set to `-26px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.top === '-26px') +``` + +Your `.cat-right-ear` selector should have a `left` property set to `163px` + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.left === '163px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md new file mode 100644 index 00000000000..d4525731d1f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md @@ -0,0 +1,95 @@ +--- +id: 646cf6cbca98e258da65c979 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +As you did for the left ear, rotate the right ear at 45 degrees. + +# --hints-- + +You should set the `transform` property of your `.right-ear` element to `rotate(45deg)`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.transform === 'rotate(45deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md new file mode 100644 index 00000000000..bbd36a62759 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md @@ -0,0 +1,102 @@ +--- +id: 646cf88aa884405a11ea5bcc +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Remove the sharp border of the right ear by setting the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`. + +# --hints-- + +Your `.cat-right-ear` selector should have a `border-top-left-radius` property set to `90px`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-right-ear` selector should have a `border-top-right-radius` property set to `10px`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md new file mode 100644 index 00000000000..bb200fd1069 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md @@ -0,0 +1,102 @@ +--- +id: 646cfc2b8e6fe95c20a819d5 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The ears should always be placed above the part of the head it overlaps. You can do this with the `z-index` property. + +`z-index` is a property you can use to define the order of overlapping HTML elements. Any element with a higher `z-index` will always be positioned over an element with a lower `z-index`. + +To see `z-index` in action, set the `z-index`property of the left ear to `-1`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `z-index` of `-1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '-1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md new file mode 100644 index 00000000000..7f2be20c198 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md @@ -0,0 +1,100 @@ +--- +id: 646cfd853634255d02b64cc1 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +That's not the behavior you want. You should make the ears display over the head so the borders that overlap with them don't show. + +Instead of `-1`, set the `z-index` property of the left ear to `1`. + +# --hints-- + +Your `.cat-left-ear` selector should have a `z-index` of `1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + --fcc-editable-region-- + z-index: -1; + --fcc-editable-region-- + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md new file mode 100644 index 00000000000..b892d61ca1d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md @@ -0,0 +1,99 @@ +--- +id: 646cfde6ac612e5d60391f50 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Set the `z-index`property of the right ear to `1` so it always stays over the head. + +# --hints-- + +Your `.cat-right-ear` selector should have a `z-index` of `1`. Don't forget to add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.zIndex === '1') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + --fcc-editable-region-- + + --fcc-editable-region-- + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md new file mode 100644 index 00000000000..1d7411ad660 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md @@ -0,0 +1,121 @@ +--- +id: 646dd556d524bc61c0139bd6 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Most cats have different colors in their ear and the inner part of the same ear. You can implement the same too. That's why you defined a `div` element for both right and left inner ears a while ago. + +Using a class selector, give your `.cat-left-inner-ear` element a left and right border of `20px solid transparent` each. Also give it a bottom border of `40px solid #3b3b4f`. + +# --hints-- + +You should have a `.cat-left-inner-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')) +``` + +Your `.cat-left-inner-ear` selector should have a `border-left` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderLeft === '20px solid transparent') +``` + +Your `.cat-left-inner-ear` selector should have a `border-right` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderRight === '20px solid transparent') +``` + +Your `.cat-left-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md new file mode 100644 index 00000000000..8be0ea3110e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md @@ -0,0 +1,118 @@ +--- +id: 646dd6f9caa862627dd87772 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Move the inner ear into position with a `position` property set to `absolute`, a `top` of `22px`, and a `left` of `-20px`. + +# --hints-- + +Your `.cat-left-inner-ear` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.position === 'absolute') +``` + +Your `.cat-left-inner-ear` selector should have a `top` property set to `22px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.top === '22px') +``` + +Your `.cat-left-inner-ear` selector should have a `left` property set to `-20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.left === '-20px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md new file mode 100644 index 00000000000..7e24c8e937c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md @@ -0,0 +1,127 @@ +--- +id: 646dd7cfd0cfac630c1dd520 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +To remove all the pointed edges of the ear, set a bottom-right and bottom-left border radius of `40%` each, a top-left border radius of `90px`, and a top-right border radius of `10px`. + +# --hints-- + +Your `.cat-left-inner-ear` selector should have a `border-bottom-right-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottomRightRadius === '40%') +``` + +Your `.cat-left-inner-ear` selector should have a `border-bottom-left-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottomLeftRadius === '40%') +``` + +Your `.cat-left-inner-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-left-inner-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; +--fcc-editable-region-- + +--fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md new file mode 100644 index 00000000000..ba3b89e07d1 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md @@ -0,0 +1,132 @@ +--- +id: 646dd8c79ec23463a3d0e356 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +It's time to work on the right inner ear. Using a class selector, give your `.cat-right-inner-ear` element a left and right border of `20px solid transparent`. Also, give it a bottom border of `40px solid #3b3b4f`. + +# --hints-- + +You should have a `.cat-right-inner-ear` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')) +``` + +Your `.cat-right-inner-ear` selector should have a `border-left` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderLeft === '20px solid transparent') +``` + +Your `.cat-right-inner-ear` selector should have a `border-right` property set to `20px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderRight === '20px solid transparent') +``` + +Your `.cat-right-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md new file mode 100644 index 00000000000..f48ba0bd881 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md @@ -0,0 +1,131 @@ +--- +id: 646dd9d9a729916460724f16 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Move the right inner ear into position with a `position` property set to `absolute`, a `top` of `22px` and a `left` of `-20px`. + +# --hints-- + +Your `.cat-right-inner-ear` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.position === 'absolute') +``` + +Your `.cat-right-inner-ear` selector should have a `top` property set to `22px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.top === '22px') +``` + +Your `.cat-right-inner-ear` selector should have a `left` property set to `-20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.left === '-20px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md new file mode 100644 index 00000000000..12d8b78a661 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md @@ -0,0 +1,140 @@ +--- +id: 646ddab8afd73764f5241bbf +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +As you did for the left inner ear, remove the sharp edges of the right inner ear by setting a bottom-right and bottom-left border radius of `40%`, a top-left border radius of `90px`, and a top-right border radius of `10px`. + +# --hints-- + +Your `.cat-right-inner-ear` selector should have a `border-bottom-right-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottomRightRadius === '40%') +``` + +Your `.cat-right-inner-ear` selector should have a `border-bottom-left-radius` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottomLeftRadius === '40%') +``` + +Your `.cat-right-inner-ear` selector should have a `border-top-left-radius` property set to `90px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderTopLeftRadius === '90px') +``` + +Your `.cat-right-inner-ear` selector should have a `border-top-right-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderTopRightRadius === '10px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md new file mode 100644 index 00000000000..5a2488dca6b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md @@ -0,0 +1,147 @@ +--- +id: 646ddb61ff08366570cc5902 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +You will now start working on the cat's eyes. Like the ears, the eyes will have inner eyes. + +Create a `div` element with the class `cat-eyes`. Inside the `cat-eyes` element, create two `div` elements with the class `cat-left-eye` and `cat-right-eye` respectively. + +# --hints-- + +You should create a `div` element with the class `cat-eyes`. + +```js +assert(document.querySelectorAll('.cat-eyes').length === 1); +``` + +You should create two `div` elements inside the `.cat-eyes` element. + +```js +assert(document.querySelectorAll('.cat-eyes div').length === 2); +``` + +The first `div` element inside the `.cat-eyes` element should have the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('.cat-eyes div')[0].classList.contains('cat-left-eye')); +``` + +The second `div` element inside the `.cat-eyes` element should have the class `cat-right-eye`. + +```js +assert(document.querySelectorAll('.cat-eyes div')[1].classList.contains('cat-right-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + ++++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md new file mode 100644 index 00000000000..9b995228d29 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md @@ -0,0 +1,144 @@ +--- +id: 646ddd3f9f97a0667b964bdb +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Inside the `.cat-left-eye` element, create another `div` element with the class `cat-left-inner-eye`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('div.cat-left-eye').length === 1); +``` + +You should have a `div` element inside your `.cat-left-eye` element. + +```js +assert(document.querySelectorAll('.cat-left-eye div').length === 1); +``` + +Your `div` element should have the class `cat-left-inner-eye`. + +```js +assert(document.querySelectorAll('.cat-left-eye div')[0]?.classList.contains('cat-left-inner-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md new file mode 100644 index 00000000000..5bad715a154 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md @@ -0,0 +1,146 @@ +--- +id: 646dddfb3a301c66ec513c56 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Inside the `.cat-right-eye` element, create another `div` element with the class `cat-right-inner-eye`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-left-eye`. + +```js +assert(document.querySelectorAll('div.cat-right-eye').length === 1); +``` + +You should have a `div` element inside your `.cat-right-eye` element. + +```js +assert(document.querySelectorAll('.cat-right-eye div').length === 1); +``` + +Your `div` element should have the class `cat-right-inner-eye`. + +```js +assert(document.querySelectorAll('.cat-right-eye div')[0]?.classList.contains('cat-right-inner-eye')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++ --fcc-editable-region-- +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md new file mode 100644 index 00000000000..9cf9b19e226 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md @@ -0,0 +1,154 @@ +--- +id: 646dde7dc20dc167489faa69 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Using a class selector, give your `.cat-left-eye` element a `width` of `30px` and a `height` of `40px`. Also, give it a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-left-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')) +``` + +Your `.cat-left-eye` selector should have a `width` set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.width === '30px') +``` + +Your `.cat-left-eye` selector should have a `height` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.height === '40px') +``` + +Your `.cat-left-eye` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md new file mode 100644 index 00000000000..45ed732e12d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md @@ -0,0 +1,153 @@ +--- +id: 646ddf888632fa67f1180940 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Move the left eye into position with a `position` property of `absolute` a `top` of `54px`, and a `left` of `39px`. + +# --hints-- + +Your `.cat-left-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.position === 'absolute') +``` + +Your `.cat-left-eye` selector should have a `top` property set to `54px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.top === '54px') +``` + +Your `.cat-left-eye` selector should have a `left` property set to `39px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.left === '39px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md new file mode 100644 index 00000000000..38088bba67e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md @@ -0,0 +1,150 @@ +--- +id: 646de5dc8988076a1d992afd +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +To make the left eye look like an eye, give it a border radius of `60%`. Also, using the transform property, rotate it at `25` degrees. + +# --hints-- + +Your `.cat-left-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.borderRadius === '60%') +``` + +Your `.cat-left-eye` selector should have a `transform` property set to `rotate(25deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.transform === 'rotate(25deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md new file mode 100644 index 00000000000..b9dc455e5b1 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md @@ -0,0 +1,167 @@ +--- +id: 646de6a97b50a86ac487de86 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Now you will work on the right eye by using the same approach. + +Using a class selector, give your `.cat-right-eye` element a width of `30px` and a height of `40px`. Also, give it a background color of `#000`. + +# --hints-- + +You should have a `.cat-right-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')) +``` + +Your `.cat-right-eye` selector should have a `width` set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.width === '30px') +``` + +Your `.cat-right-eye` selector should have a `height` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.height === '40px') +``` + +Your `.cat-right-eye` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md new file mode 100644 index 00000000000..1cae6709360 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md @@ -0,0 +1,165 @@ +--- +id: 646de7b64467e96b7d35b5cd +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Move the right eye into position with a `position` property of `absolute` a `top` of `54px`, and a `left` of `134px`. + +# --hints-- + +Your `.cat-right-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.position === 'absolute') +``` + +Your `.cat-right-eye` selector should have a `top` property set to `54px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.top === '54px') +``` + +Your `.cat-right-eye` selector should have a `left` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.left === '134px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} + +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md new file mode 100644 index 00000000000..b376c539f32 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md @@ -0,0 +1,162 @@ +--- +id: 646de8478d6f796bfbdccfb2 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +To make the right eye look like an eye, give it a border radius of `60%`. Also, using the transform property, rotate it at `-25` degrees. + +# --hints-- + +Your `.cat-right-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.borderRadius === '60%') +``` + +Your `.cat-right-eye` selector should have a `transform` property set to `rotate(-25deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.transform === 'rotate(-25deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + --fcc-editable-region-- + + --fcc-editable-region-- + width: 30px; + height: 40px; + background-color: #000; +} + +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md new file mode 100644 index 00000000000..74ba34db408 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md @@ -0,0 +1,178 @@ +--- +id: 646de8d204a3426c7d184372 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Those look like eyes, but you can still make them better. That's why you created two inner eyes `div` elements. + +Using a class selector, give your `.cat-left-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`. + +# --hints-- + +You should have a `.cat-left-inner-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')) +``` + +Your `.cat-left-inner-eye` selector should have a `width` set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.width === '10px') +``` + +Your `.cat-left-inner-eye` selector should have a `height` set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.height === '20px') +``` + +Your `.cat-left-inner-eye` selector should have a `background-color` set to `#fff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md new file mode 100644 index 00000000000..b0243121123 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md @@ -0,0 +1,187 @@ +--- +id: 646dea1c98c2426d43a705c3 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Move the left inner eye into position with a `position` property of `absolute`, a `top` of `8px`, and a `left` of `2px`. Also, give it a border radius of `60%` and rotate it at `10` degrees. + +# --hints-- + +Your `.cat-left-inner-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.position === 'absolute') +``` + +Your `.cat-left-inner-eye` selector should have a `top` property set to `8px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.top === '8px') +``` + +Your `.cat-left-inner-eye` selector should have a `left` property set to `2px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.left === '2px') +``` + +Your `.cat-left-inner-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.borderRadius === '60%') +``` + +Your `.cat-left-inner-eye` selector should have a `transform` property set to `10deg`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.transform === 'rotate(10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 10px; + height: 20px; + background-color: #fff; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md new file mode 100644 index 00000000000..1b344dc94cc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md @@ -0,0 +1,187 @@ +--- +id: 646deb169847f86df0f95bfc +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Using a class selector, give your `.cat-right-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`. + +# --hints-- + +You should have a `.cat-right-inner-eye` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')) +``` + +Your `.cat-right-inner-eye` selector should have a `width` set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.width === '10px') +``` + +Your `.cat-right-inner-eye` selector should have a `height` set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.height === '20px') +``` + +Your `.cat-right-inner-eye` selector should have a `background-color` set to `#fff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md new file mode 100644 index 00000000000..f7933f8c3dc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md @@ -0,0 +1,198 @@ +--- +id: 646dec359bef3b7811fba5a6 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Move the right inner eye into position with a `position` of `absolute`, a `top` of `8px`, and a `left` of `18px`. Also, give it a border radius of `60%` and rotate it at `-5deg`. + +# --hints-- + +Your `.cat-right-inner-eye` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.position === 'absolute') +``` + +Your `.cat-right-inner-eye` selector should have a `top` property set to `8px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.top === '8px') +``` + +Your `.cat-right-inner-eye` selector should have a `left` property set to `18px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.left === '18px') +``` + +Your `.cat-right-inner-eye` selector should have a `border-radius` property set to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.borderRadius === '60%') +``` + +Your `.cat-right-inner-eye` selector should have a `transform` property set to `-5deg`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.transform === 'rotate(-5deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + --fcc-editable-region-- + + --fcc-editable-region-- + width: 10px; + height: 20px; + background-color: #fff; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md new file mode 100644 index 00000000000..143f0179cfe --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md @@ -0,0 +1,186 @@ +--- +id: 646dedbcba062079128b2ecc +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +It's time to work on the nose. In your HTML, create a `div` element with the class `cat-nose`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 12) +``` + +Your `div` element should have the class `cat-nose`. + +```js +assert(document.querySelectorAll('div')[11].classList.contains('cat-nose')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ +++++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md new file mode 100644 index 00000000000..bf02b9cf8fc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md @@ -0,0 +1,200 @@ +--- +id: 646def5e863abf7a14501421 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Using a class selector, give your `.cat-nose` element a left and right border of `15px solid transparent` each. Also give it a bottom border of `20px solid #442c2c`. + +# --hints-- + +You should have a `.cat-nose` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')) +``` + +Your `.cat-nose` selector should have a `border-left` property set to `15px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderLeft === '15px solid transparent') +``` + +Your `.cat-nose` selector should have a `border-right` property set to `15px solid transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderRight === '15px solid transparent') +``` + +Your `.cat-nose` selector should have a `border-bottom` property set to `20px solid #442c2c`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottom === '20px solid rgb(68, 44, 44)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md new file mode 100644 index 00000000000..ef9238633b8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md @@ -0,0 +1,200 @@ +--- +id: 646df03c8f79337ab46f148b +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Move the nose into position with a `position` property of `absolute`, a `top` of `108px`, and a `left` of `85px`. + +# --hints-- + +Your `.cat-nose` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.position === 'absolute') +``` + +Your `.cat-nose` selector should have a `top` property set to `108px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.top === '108px') +``` + +Your `.cat-nose` selector should have a `left` property set to `85px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.left === '85px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md new file mode 100644 index 00000000000..0318f9d7f46 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md @@ -0,0 +1,215 @@ +--- +id: 646df0cf26413a7b35e4b8b3 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Remove the sharp edges of the nose with border radius of `50%` each on the top-left, bottom-right, and bottom-left corners. Also, rotate it at 180 degrees. + +# --hints-- + +Your `.cat-nose` selector should have a `border-top-left-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderTopLeftRadius === '50%') +``` + +Your `.cat-nose` selector should have a `border-bottom-right-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottomRightRadius === '50%') +``` + +Your `.cat-nose` selector should have a `border-bottom-left-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottomLeftRadius === '50%') +``` + +Your `.cat-nose` selector should have a `transform` property set to `rotate(180deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.transform === 'rotate(180deg)') +``` + +You should not have a `border-top-right-radius` property in your `.cat-nose` selector. + +```js +assert(/border-top-right-radius:\s*\d+%;/.test(code) === false); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + --fcc-editable-region-- + + --fcc-editable-region-- + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md new file mode 100644 index 00000000000..9d8231e174b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md @@ -0,0 +1,203 @@ +--- +id: 646df1d1aa4ae57bdf1869c4 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Now you will start working on the mouth. There will be a right line and left line for the mouth. + +Create a `div` element with the class `cat-mouth`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 13) +``` + +Your `div` element should have the class `cat-mouth` + +```js +assert(document.querySelectorAll('div')[12].classList.contains('cat-mouth')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md new file mode 100644 index 00000000000..3ef80ee39bb --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md @@ -0,0 +1,217 @@ +--- +id: 646dffd8ce9ac77ec1906f2e +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Inside your `.cat-mouth` element, create a `div` element with the class `cat-mouth-line-left` and another `div` with the class `cat-mouth-line-right`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-mouth`. + +```js +assert(document.querySelectorAll('div.cat-mouth').length === 1); +``` + +You should have two `div` elements inside your `.cat-mouth` element. + +```js +assert(document.querySelectorAll('.cat-mouth div').length === 2); +``` + +The first `div` element inside the `.cat-mouth` element should have the class `cat-mouth-line-left`. + +```js +assert(document.querySelectorAll('.cat-mouth div')[0]?.classList.contains('cat-mouth-line-left')); +``` + +The second `div` element inside the `.cat-mouth` element should have the class `cat-mouth-line-right`. + +```js +assert(document.querySelectorAll('.cat-mouth div')[1]?.classList.contains('cat-mouth-line-right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + + --fcc-editable-region-- + + --fcc-editable-region-- ++ +++ ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md new file mode 100644 index 00000000000..a561360c7e9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md @@ -0,0 +1,227 @@ +--- +id: 646f0417322c0e04983a5149 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Using a class selector, give your `.cat-mouth-line-left` element a `position` of `absolute`, a `top` of `88px` and a `left` of `74px`. This would move it into the right position. + +# --hints-- + +You should have a `cat-mouth-line-left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')) +``` + +Your `.cat-mouth-line-left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.position === 'absolute') +``` + +Your `.cat-mouth-line-left` selector should have a `top` property set to `88px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.top === '88px') +``` + +Your `.cat-mouth-line-left` selector should have a `left` property set to `74px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.left === '74px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + + --fcc-editable-region-- ++ +++ +++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md new file mode 100644 index 00000000000..46ce69b8f2c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md @@ -0,0 +1,214 @@ +--- +id: 646f08293804a30685533c6f +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Using the `transform` property, rotate the left mouth line at `170` degrees. + +# --hints-- + +Your `.cat-mouth-line-left` property should have a `transform` property set to `rotate(170deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.transform === 'rotate(170deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md new file mode 100644 index 00000000000..03853c3938b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md @@ -0,0 +1,234 @@ +--- +id: 646f09293eb3230723a62f77 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Access your `.cat-mouth-line-right` element with a class selector, then move it into the right position with a `position` of `absolute`, a `top` of `88px` and a `left` of `91px`. + +# --hints-- + +You should have a `.cat-mouth-line-right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')) +``` + +Your `.cat-mouth-line-right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.position === 'absolute') +``` + +Your `.cat-mouth-line-right` selector should have a `top` property set to `88px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.top === '88px') +``` + +Your `.cat-mouth-line-right` selector should have a `left` property set to `91px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.left === '91px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md new file mode 100644 index 00000000000..2a01ed169d2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md @@ -0,0 +1,221 @@ +--- +id: 646f0c9a1e3360092d1bbd33 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Rotate the right mouth line at `165` degrees. + +# --hints-- + +Your `.cat-mouth-line-left` property should have a `transform` property set to `rotate(165deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.transform === 'rotate(165deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md new file mode 100644 index 00000000000..3d75bf77a02 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md @@ -0,0 +1,231 @@ +--- +id: 646f0ce5737243098ad6e494 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +The last thing you will work on is the whiskers. There are going to be 6 of them, meaning there will be three on each side. + +Create a `div` element with the class `cat-whiskers`. + +# --hints-- + +You should create a `div` element. + +```js +assert(document.querySelectorAll('div').length === 16) +``` + +Your div element should have the class `cat-whiskers`. + +```js +assert(document.querySelectorAll('div')[15].classList.contains('cat-whiskers')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md new file mode 100644 index 00000000000..6e28a86659a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md @@ -0,0 +1,243 @@ +--- +id: 646f0ef13604420a8744f7d4 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Inside the `.cat-whiskers` element, create two `div` elements with the class `cat-whiskers-left` and `cat-whiskers-right`. + +# --hints-- + +You should not change the existing `div` element with the class `cat-whiskers` + +```js +assert(document.querySelectorAll('div.cat-whiskers').length === 1) +``` + +You should have two `div` elements inside the `.cat-whiskers` element. + +```js +assert(document.querySelectorAll('.cat-whiskers div').length === 2) +``` + +The first `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-left`. + +```js +assert(document.querySelectorAll('.cat-whiskers div')[0].classList.contains('cat-whiskers-left')) +``` + +The second `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-right`. + +```js +assert(document.querySelectorAll('.cat-whiskers div')[1].classList.contains('cat-whiskers-right')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md new file mode 100644 index 00000000000..291e0fbd52d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md @@ -0,0 +1,253 @@ +--- +id: 646f0f7c5933560af8e7e380 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Inside the `.cat-whiskers-left` element, create three `div` elements with the classes `cat-whisker-left-top`, `cat-whisker-left-middle`, and `cat-whisker-left-bottom`. + +# --hints-- + +You should not change the existing `div` element with class `cat-whiskers-left`. + +```js +assert(document.querySelectorAll('div.cat-whiskers-left').length === 1) +``` + +You should create three `div` elements inside your `.cat-whiskers-left` element. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div').length === 3) +``` + +The first `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-top`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[0].classList.contains('cat-whisker-left-top')) +``` + +The second `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-middle`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[1].classList.contains('cat-whisker-left-middle')) +``` + +The third `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-bottom`. + +```js +assert(document.querySelectorAll('.cat-whiskers-left div')[2].classList.contains('cat-whisker-left-bottom')) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ + --fcc-editable-region-- ++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md new file mode 100644 index 00000000000..820cbd44d12 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md @@ -0,0 +1,256 @@ +--- +id: 646f102bf87b350b593baa72 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Inside the `.cat-whiskers-right` element, create 3 `div` elements with the class `cat-whisker-right-top`, `cat-whisker-right-middle`, and `cat-whisker-right-bottom`. + +# --hints-- + +You should not change the existing `div` element with class `cat-whiskers-right`. + +```js +assert(document.querySelectorAll('div.cat-whiskers-right').length === 1) +``` + +You should create three `div` elements inside your `.cat-whiskers-right` element. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div').length === 3) +``` + +The first `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-top`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[0].classList.contains('cat-whisker-right-top')) +``` + +The second `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-middle`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[1].classList.contains('cat-whisker-right-middle')) +``` + +The third `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-bottom`. + +```js +assert(document.querySelectorAll('.cat-whiskers-right div')[2].classList.contains('cat-whisker-right-bottom')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ ++ --fcc-editable-region-- ++ ++ ++ --fcc-editable-region-- + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md new file mode 100644 index 00000000000..741c609e6b3 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md @@ -0,0 +1,254 @@ +--- +id: 646f107abb89d00bb99f387a +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Use a descendant selector to target the three `div` elements inside your `.cat-whiskers-left` element. Give it a `width` of `40px`, a `height` of `1px`, and a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-whiskers-left div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')) +``` + +Your `.cat-whiskers-left div` selector should have a `width` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.width === '40px') +``` + +Your `.cat-whiskers-left div` selector should have a `height` set to `1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.height === '1px') +``` + +Your `.cat-whiskers-left div` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + ++ --fcc-editable-region-- ++ ++ --fcc-editable-region-- +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md new file mode 100644 index 00000000000..b1c107c9c2e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md @@ -0,0 +1,266 @@ +--- +id: 646f12da0b4c5d0ca162834a +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Using a class selector, move the `.cat-whisker-left-top` element into place with a `position` of `absolute`, a `top` of `120px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-top` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')) +``` + +Your `.cat-whisker-left-top` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.position === 'absolute') +``` + +Your `.cat-whisker-left-top` selector should have a `top` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.top === '120px') +``` + +Your `.cat-whisker-left-top` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md new file mode 100644 index 00000000000..9ae2339b4dc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md @@ -0,0 +1,254 @@ +--- +id: 646f135eab69d90d0c6d4e9b +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Rotate the left top whisker at `10` degrees. + +# --hints-- + +Your `.cat-whisker-left-top` selector should have a `transform` property set to `rotate(10deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.transform === 'rotate(10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md new file mode 100644 index 00000000000..c0b941997a6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md @@ -0,0 +1,273 @@ +--- +id: 646f159b2cffb21150b927cb +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Use a class selector to target the `.cat-whisker-left-middle` element. Then move it into place with a `position` property set to `absolute`, a `top` of `127px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-middle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')) +``` + +Your `.cat-whisker-left-middle` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.position === 'absolute') +``` + +Your `.cat-whisker-left-middle` selector should have a `top` property set to `127px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.top === '127px') +``` + +Your `.cat-whisker-left-middle` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md new file mode 100644 index 00000000000..0a537b0812d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md @@ -0,0 +1,260 @@ +--- +id: 646f164bf100dd11d226161f +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Rotate the left middle whisker at 3 degrees. + +# --hints-- + +Your `.cat-whisker-left-middle` selector should have a `transform` property set to `rotate(3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.transform === 'rotate(3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md new file mode 100644 index 00000000000..651a9405914 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md @@ -0,0 +1,280 @@ +--- +id: 646f1764e2f1d212ba9785a7 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Using a class selector, move the `.cat-whisker-left-bottom` into position with a `position` of `absolute`, a `top` of `134px`, and a `left` of `52px`. + +# --hints-- + +You should have a `.cat-whisker-left-bottom` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')) +``` + +Your `.cat-whisker-left-bottom` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.position === 'absolute') +``` + +Your `.cat-whisker-left-bottom` selector should have a `top` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.top === '134px') +``` + +Your `.cat-whisker-left-bottom` selector should have a `left` property set to `52px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.left === '52px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md new file mode 100644 index 00000000000..bc03c983374 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md @@ -0,0 +1,267 @@ +--- +id: 646f1802a09a171332e14630 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Rotate the left bottom whisker at `-3` degrees. + +# --hints-- + +Your `.cat-whisker-left-bottom` selector should have a `transform` property set to `rotate(-3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.transform === 'rotate(-3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md new file mode 100644 index 00000000000..e365b97d693 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md @@ -0,0 +1,287 @@ +--- +id: 646f4d6c42dc5f214f4e7444 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Now you will work on moving the right whiskers into place. Use class selector to target the `.cat-whisker-right-top` element and give it a `position` of `absolute`, a `top` of `120px`, and a `left` of `109px`. + +# --hints-- + +You should have a `.cat-whisker-right-top` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')) +``` + +Your `.cat-whisker-right-top` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.position === 'absolute') +``` + +Your `.cat-whisker-right-top` selector should have a `top` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.top === '120px') +``` + +Your `.cat-whisker-right-top` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md new file mode 100644 index 00000000000..9df724448e7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md @@ -0,0 +1,274 @@ +--- +id: 646f4e46e81f7021d5fd9c1d +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Rotate the top-right whisker at -10 degrees. + +# --hints-- + +Your `.cat-whisker-right-top` selector should have a `transform` property set to `rotate(-1deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.transform === 'rotate(-10deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md new file mode 100644 index 00000000000..2f79cbf9301 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md @@ -0,0 +1,294 @@ +--- +id: 646f4f6a14e3c522d130a0d2 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Use a class selector to target the `cat-whisker-right-middle` element, then move the right middle whisker into position with a `position` of `absolute`, a `top` of `127px`, and a `left` of `109px`. + +# --hints-- + +You should have a `.cat-whisker-right-middle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')) +``` + +Your `.cat-whisker-right-middle` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.position === 'absolute') +``` + +Your `.cat-whisker-right-middle` selector should have a `top` property set to `127px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.top === '127px') +``` + +Your `.cat-whisker-right-middle` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md new file mode 100644 index 00000000000..a7d861a1258 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md @@ -0,0 +1,281 @@ +--- +id: 646f4fe12b7985232bf475a5 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Rotate the right middle whisker at -3 degrees. + +# --hints-- + +Your `.cat-whisker-right-middle` selector should have a `transform` property set to `rotate(-3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.transform === 'rotate(-3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md new file mode 100644 index 00000000000..d0cf2b64a3f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md @@ -0,0 +1,302 @@ +--- +id: 646f507e4d1cd323f17db4fc +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Use class selector to target the `.cat-whisker-right-bottom` element, then move it into place with a `position` of `absolute`, a `top` of `134px`, and a `left` of `109px`. + + +# --hints-- + +You should have a `.cat-whisker-right-bottom` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')) +``` + +Your `.cat-whisker-right-bottom` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.position === 'absolute') +``` + +Your `.cat-whisker-right-bottom` selector should have a `top` property set to `134px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.top === '134px') +``` + +Your `.cat-whisker-right-bottom` selector should have a `left` property set to `109px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.left === '109px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md new file mode 100644 index 00000000000..3bf9207660e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md @@ -0,0 +1,556 @@ +--- +id: 646f516dbfc1342495515625 +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Rotate the bottom-right whisker at 3 degrees. + +With this final step, your cat painting is now complete. + +# --hints-- + +Your `.cat-whisker-right-bottom` selector should have a `transform` property set to `rotate(3deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.transform === 'rotate(3deg)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +.cat-whisker-right-bottom { + position: absolute; + top: 134px; + left: 109px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +# --solutions-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whiskers-right div { + width: 40px; + height: 1px; + background-color: #000; +} + +.cat-whisker-left-top { + position: absolute; + top: 120px; + left: 52px; + transform: rotate(10deg); +} + +.cat-whisker-left-middle { + position: absolute; + top: 127px; + left: 52px; + transform: rotate(3deg); +} + +.cat-whisker-left-bottom { + position: absolute; + top: 134px; + left: 52px; + transform: rotate(-3deg); +} + +.cat-whisker-right-top { + position: absolute; + top: 120px; + left: 109px; + transform: rotate(-10deg); +} + +.cat-whisker-right-middle { + position: absolute; + top: 127px; + left: 109px; + transform: rotate(-3deg); +} + +.cat-whisker-right-bottom { + position: absolute; + top: 134px; + left: 109px; + transform: rotate(3deg); +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md new file mode 100644 index 00000000000..03ea4e8598b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md @@ -0,0 +1,77 @@ +--- +id: 6476f5c17f99146071ee884c +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +You could see that nothing happens. The `.cat-head` element did not move despite setting a `top` and `left` of `100px` each. But that's not the case with `relative` positioning. + +When you use the `relative` value, the element is still positioned according to the normal flow of the document, but the `top`, `left`, `bottom`, and `right` values become active. + +Instead of `static`, give you `.cat-head` a position of `relative`, and leave both `top` and `left` properties as they are. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `relative`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'relative') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: static; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md new file mode 100644 index 00000000000..0c28f0f242e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md @@ -0,0 +1,79 @@ +--- +id: 6476f7a4827bcc61682f2347 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +The next position property is `absolute`. When you use the `absolute` value for your `position` property, the element is taken out of the normal flow of the document, and then its position is determined by the `top`, `right`, `bottom`, and `left` properties. + +Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any pixel value. + + + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `absolute`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute') +``` + +Your `.cat-head` selector should have a `top` property set to any number in `px`. Make sure you add a semi-colon. + +```js +// assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '300px') +assert.match(code, /top:\s*\d{1,4}px;/) +``` + +Your `.cat-head` selector should have a `left` property set to any number in `px`. Make sure you add a semi-colon. + +```js +// assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '400px') +assert.match(code, /left:\s*\d{1,4}px;/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: relative; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md new file mode 100644 index 00000000000..85259f8c8bf --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md @@ -0,0 +1,70 @@ +--- +id: 6476fb7cbaafa36d65e9cf35 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +`fixed` is a `position` property value that lets you make an element fixed to the page no matter where the user scrolls to on the page. + +You'll have to do some more markups to see how `fixed` positioning works. In your HTML, create a `div` element with the class `box`. + +# --hints-- + +You should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 2); +``` + +Your `div` element should have the class `box`. + +```js +assert(document.querySelectorAll('div')[1]?.getAttribute('class') === 'box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + top: 300px; + left: 400px; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md new file mode 100644 index 00000000000..a8a137321fe --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md @@ -0,0 +1,101 @@ +--- +id: 6476fc5cf14b276e6d04e82a +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Use a class selector to give your `.box` element a width of `200px`, a height of `600px`, and a background color of `#000`. Also, give it a `position` of `absolute`, a `top` of `800px` and a `left` of `650px`. + +# --hints-- + +You should have a `.box` selector. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')) +``` + +Your `.box` selector should have a `width` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.width === '200px') +``` + +Your `.box` selector should have a `height` property set to `600px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.height === '600px') +``` + +Your `.box` selector should have a `background-color` property set to `#000`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +Your `.box` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.position === 'absolute') +``` + +Your `.box` selector should have a `left` property set to `650px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.left === '650px') +``` + +Your `.box` selector should have a `top` property set to `800px`. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.top === '800px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: relative; + top: 100px; + left: 100px; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md new file mode 100644 index 00000000000..bd1a9049d86 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md @@ -0,0 +1,85 @@ +--- +id: 6476fd4213318f6ee211028a +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Now replace the `position` property value of your `.cat-head` with `fixed`. Leave both `top` and `left` as they are. + +After that, scroll up and down to see how the `fixed` value works. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `fixed`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'fixed') +``` + +Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') +``` + +Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: relative; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 200px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md new file mode 100644 index 00000000000..1c8891e4304 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md @@ -0,0 +1,87 @@ +--- +id: 64770351e8586671ec0911f0 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +The last position property value is `sticky`. `sticky` positioning is a hybrid of `relative` and `fixed` positioning. It allows an element to **stick** to a specific position within its containing element or viewport, based on the scroll position. + +Change the value of the `position` property of `.cat-head` to `sticky`, set `top` to `0`, then remove `left` and its value. + +**Note**: To see how `sticky` works, you have to place a couple of texts before and after your `.cat-head` `div` element. If you scroll up after that, you'll see that the `.cat-head` gets stuck to the top and remains there. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `sticky`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'sticky') +``` + +Your `.cat-head` selector should have a `top` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px') +``` + +You should not have the `left` property and its value in your code. + +```js +assert.notMatch(code, /left:\s*100px;?/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: fixed; + top: 100px; + left: 100px; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 200px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md new file mode 100644 index 00000000000..a7597864564 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md @@ -0,0 +1,102 @@ +--- +id: 6477062778c85972eb648030 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +You should now center the cat head. + +Give the `.cat-head` element a position property set to `absolute`. Set a value of `0` for the `right`, `left`, `top`, `bottom` properties, then set its `margin` property on all sides to `auto`. That's one way to center an element vertically and horizontally using CSS positioning. + +# --hints-- + +Your `.cat-head` selector should have a `position` property set to `absolute`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute') +``` + +Your `.cat-head` selector should have a `top` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px') +``` + +Your `.cat-head` selector should have a `left` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '0px') +``` + +Your `.cat-head` selector should have a `right` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.right === '0px') +``` + +Your `.cat-head` selector should have a `bottom` property set to `0`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.bottom === '0px') +``` + +Your `.cat-head` selector should have a `margin` property set to `auto`. Make sure you add a semi-colon. + +```js +assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.margin === 'auto') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { +--fcc-editable-region-- + position: sticky; + top: 0; +--fcc-editable-region-- + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md new file mode 100644 index 00000000000..806db219734 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md @@ -0,0 +1,73 @@ +--- +id: 647d821de0d97b3283c72b36 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Also, remove the `.box` CSS rule and its declarations because you don't need them anymore. + +# --hints-- + +You should remove the `.box` css rule and all its values. + +```js +assert.notMatch(code, /\.box\s*\{\s*width:\s*400px;\s*height:\s*600px;\s*background-color:\s*#000;\s*position:\s*absolute;\s*left:\s*650px;\s*top:\s*800px;?\s*\}\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +--fcc-editable-region-- +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md new file mode 100644 index 00000000000..6e039d20c5c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md @@ -0,0 +1,48 @@ +--- +id: 647d855ac12cd436059acd39 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Use the universal selector to add `box-sizing: border-box;` to your CSS. This ensures elements include padding and border in their specified width and height. + +# --hints-- + +You should have the universal selector (`*`). + +```js +// assert.match(code, /\*\s*{\s*.*\s*}/) +assert(new __helpers.CSSHelp(document).getStyle('*')) +``` + +Your universal selector should have a `box-sizing` property set to `border-box`. + +```js +// assert.match(code, /\*\s*{\s*box-sizing:\s*border-box;?\s*}/) +assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md new file mode 100644 index 00000000000..a7a70f95a81 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md @@ -0,0 +1,74 @@ +--- +id: 649353647c44ef4867ab4935 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Remove the `div` element with class `box` because you don't need it anymore. + +# --hints-- + +You should remove the `div` element with class `box` + +```js +assert.notMatch(code, /fCC Cat Painting + + + ++ + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.box { + width: 400px; + height: 600px; + background-color: #000; + position: absolute; + left: 650px; + top: 800px; +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md new file mode 100644 index 00000000000..04963838659 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md @@ -0,0 +1,218 @@ +--- +id: 64a2687ef267e5934a2f93e3 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Using a descendant selector, select the two `div` elements inside the `div` with class `cat-mouth`. Give it a width of `30px`, a height of `50px`, and a border of `2px solid #000`. + +# --hints-- + +You should have a `.cat-mouth div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')) +``` + +Your `.cat-mouth div` selector should have a `width` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.width === '30px') +``` + +Your `.cat-mouth div` selector should have a `height` property set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.height === '50px') +``` + +Your `.cat-mouth div` selector should have a `border` property set to `2px solid #000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.border === '2px solid rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md new file mode 100644 index 00000000000..d46fbf6da0d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md @@ -0,0 +1,212 @@ +--- +id: 64a26ac5540c5493f4641f10 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +You are going to make the two mouth lines into an elliptical shape. So, give the `.cat-mouth div` selector a border color of `black transparent transparent transparent` and a border radius of `190%/190px 150px 0 0`. + +# --hints-- + +Your `.cat-mouth div` selector should have a `border-color` property set to `black transparent transparent transparent`. + +```js +assert.match(code, /border-color:\s*black\s*(transparent)\s*\1\s*\1\s*;?/) +``` + +Your `.cat-mouth div` selector should have a `border-radius` property set to `190%/190px 150px 0 0`. + +```js +assert.match(code, /border-radius:\s*190%\/190px\s*150px\s*0\s*0\s*;?/) +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md new file mode 100644 index 00000000000..4f3a8d2de51 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md @@ -0,0 +1,260 @@ +--- +id: 64a3bcbc83e574b58c8ed048 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +As you did in the previous step, use a descendant selector to target the three `div` elements inside your `.cat-whiskers-right` element. Give it a `width` of `40px`, a `height` of `1px`, and a `background-color` of `#000`. + +# --hints-- + +You should have a `.cat-whiskers-right div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')) +``` + +Your `.cat-whiskers-right div` selector should have a `width` set to `40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.width === '40px') +``` + +Your `.cat-whiskers-right div` selector should have a `height` set to `1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.height === '1px') +``` + +Your `.cat-whiskers-right div` selector should have a `background-color` set to `#000`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.backgroundColor === 'rgb(0, 0, 0)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +++++ ++ +++ ++++ + + ++ +++ +++ + ++fCC Cat Painting + + + ++ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + background-color: #c9d2fc; +} + +.cat-head { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + background: linear-gradient(#5e5e5e 85%, #45454f 100%); + width: 205px; + height: 180px; + border: 1px solid #000; + border-radius: 46%; +} + +.cat-left-ear { + position: absolute; + top: -26px; + left: -31px; + z-index: 1; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + transform: rotate(-45deg); + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-right-ear { + position: absolute; + top: -26px; + left: 163px; + z-index: 1; + transform: rotate(45deg); + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-left: 35px solid transparent; + border-right: 35px solid transparent; + border-bottom: 70px solid #5e5e5e; +} + +.cat-left-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-right-inner-ear { + position: absolute; + top: 22px; + left: -20px; + border-top-left-radius: 90px; + border-top-right-radius: 10px; + border-bottom-right-radius: 40%; + border-bottom-left-radius: 40%; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 40px solid #3b3b4f; +} + +.cat-left-eye { + position: absolute; + top: 54px; + left: 39px; + border-radius: 60%; + transform: rotate(25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-right-eye { + position: absolute; + top: 54px; + left: 134px; + border-radius: 60%; + transform: rotate(-25deg); + width: 30px; + height: 40px; + background-color: #000; +} + +.cat-left-inner-eye { + position: absolute; + top: 8px; + left: 2px; + width: 10px; + height: 20px; + transform: rotate(10deg); + background-color: #fff; + border-radius: 60%; +} + +.cat-right-inner-eye { + position: absolute; + top: 8px; + left: 18px; + transform: rotate(-5deg); + width: 10px; + height: 20px; + background-color: #fff; + border-radius: 60%; +} + +.cat-nose { + position: absolute; + top: 108px; + left: 85px; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + transform: rotate(180deg); + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #442c2c; +} + +.cat-mouth div { + width: 30px; + height: 50px; + border: 2px solid #000; + border-radius: 190%/190px 150px 0 0; + border-color: black transparent transparent transparent; +} + +.cat-mouth-line-left { + position: absolute; + top: 88px; + left: 74px; + transform: rotate(170deg); +} + +.cat-mouth-line-right { + position: absolute; + top: 88px; + left: 91px; + transform: rotate(165deg); +} + +.cat-whiskers-left div { + width: 40px; + height: 1px; + background-color: #000; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md index 8d31ab66f65..9e2f40a461e 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md @@ -29,7 +29,7 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.inne assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3); ``` -一個 `span` 元素應該包含文本 `Sodium 360mg`。 +A `span` element should wrap the text `Sodium 160mg`. ```js assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/)); diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md index ebac16c92f9..5d4774cc1e5 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -文本 `* Daily Value %` 應該右對齊。 創建一個 `.right` 選擇器，並使用 `justify-content` 屬性來實現它。 +The text `% Daily Value *` should be aligned to the right. 創建一個 `.right` 選擇器，並使用 `justify-content` 屬性來實現它。 # --hints-- diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md index 9422e15afaf..229b7eefc0e 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496df724dd3716a71fe971.md @@ -7,7 +7,7 @@ dashedName: step-25 # --description-- -To keep track of all of your spreadsheet's functions, delcare a `spreadsheetFunctions` object. Using destructuring syntax, set `sum`, `average`, and `median` as properties and values on the `spreadsheetFunctions` object. +To keep track of all of your spreadsheet's functions, declare a `spreadsheetFunctions` object. Using destructuring syntax, set `sum`, `average`, and `median` as properties and values on the `spreadsheetFunctions` object. # --hints-- diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md index f8bad487511..7404932cec7 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md @@ -11,7 +11,7 @@ Inside the callback function, add a `console.log` with the value of `e.target.va Open the console, and make a selection from the teammates dropdown menu. You should see the value of that selection in the console. -`e.target.value` represents the value property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. +`e.target.value` represents the `value` property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. # --hints-- diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md index 39441cd555d..8fc0d7b5e38 100644 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md @@ -15,16 +15,16 @@ The website will consist of a main index page which will have links to a few rec 1. Your recipe page should include an `html` element with a `head` and `body` element as children. 1. You should have a `title` element within the `head` element with the text `The Odin Recipes`. 1. You should see an `h1` element that has the text `Creamy Chocolate Fudge`. -1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text. +1. You should see a related image with an `alt` attribute. 1. There should be an `h2` element with the text `Description` under the image. 1. You should see a couple of paragraphs under `Description` that describe the recipe. -1. There should be an `h2` element with the text `Ingredients` +1. There should be an `h2` element with the text `Ingredients`. 1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe. 1. Under the list of ingredients add another heading called `Steps`. 1. You should see an ordered list with a couple of steps needed to complete the recipe. -1. Under the steps there should be an `h2` element with the text `More Recipes` +1. Under the steps there should be an `h2` element with the text `More Recipes`. 1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within. -1. These anchor elements should have `href` attribute with the value set to `#` +1. These anchor elements should have `href` attribute with the value set to `#`. # --hints-- @@ -56,12 +56,12 @@ You should have a `h1` element within your `body` element that contains the text assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge'); ``` -You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text. +You should have an image with an `alt` attribute. ```js const img = document.querySelectorAll('IMG')[0]; -assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg') +assert(img && img.alt !='' && img.src != '') ``` You should have an `h2` element with the text `Description`. diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md new file mode 100644 index 00000000000..26dcaf81d51 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md @@ -0,0 +1,54 @@ +--- +id: 637f4e0e72c65bc8e73dfe1e +videoId: LGQuIIv2RVA +title: HTML Foundations Question A +challengeType: 15 +dashedName: html-foundations-question-a +--- + +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `++++ ++ +++ ++++ + + ++ +++ +++ + ++ +++ ++ + + +++ + + ++`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) + +## --text-- + +What are HTML tags? + +## --answers-- + +HTML tags tell the browser what content an element contains. + +--- + +HTML tags tell the browser when to load its content. + +--- + +HTML tags tell the browser what content the next element contains. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md new file mode 100644 index 00000000000..1fa04902849 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-b.md @@ -0,0 +1,49 @@ +--- +id: 637f4e1672c65bc8e73dfe1f +title: HTML Foundations Question B +challengeType: 15 +dashedName: html-foundations-question-b +--- + +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `
`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --text-- + +What are the three parts of most HTML elements? + +## --answers-- + +An opening tag, self closing tag, and content. + +--- + +An opening tag, closing tag, and content. + +--- + +An opening tag, closing tag, and attribute. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md new file mode 100644 index 00000000000..79bd0197756 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-c.md @@ -0,0 +1,54 @@ +--- +id: 637f4e1c72c65bc8e73dfe20 +title: HTML Foundations Question C +challengeType: 15 +dashedName: html-foundations-question-c +--- + +# --description-- + +To demonstrate an HTML boilerplate, you first need an HTML file to work with. + +Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`. + +You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files. + +To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file. + +It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems. + +## The DOCTYPE + +Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``. + +The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4: + +```html + +``` + +However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``. + +Open the `index.html` file created earlier in your text editor and add `` to the very first line. + +# --question-- +## --text-- + +What is the purpose of the `DOCTYPE` declaration? + +## --answers-- + +It tells the browser which version of HTML to use to render the document. + +--- + +It tells the browser that this document uses JavaScript. + +--- + +It tells the browser the title of the document. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md new file mode 100644 index 00000000000..d851163101c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-d.md @@ -0,0 +1,46 @@ +--- +id: 637f4e2872c65bc8e73dfe21 +title: HTML Foundations Question D +challengeType: 15 +dashedName: html-foundations-question-d +--- + +# --description-- + +After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it. + +This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document. + +Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so: + +```html + + + +``` + +## What is the lang attribute? +`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation. + +# --question-- + +## --text-- + +What is the `html` element? + +## --answers-- + +It is the root element in the document and tells the browser which version of HTML it should use. + +--- + +It is the root element in the document and all other elements should descend from it. + +--- + +It is the root element in the document and all other elements should come after it. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md new file mode 100644 index 00000000000..58e4fab1b96 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-e.md @@ -0,0 +1,41 @@ +--- +id: 6374f208de18c50e48ba767b +title: HTML Foundations Question E +challengeType: 15 +dashedName: html-foundations-question-e +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --assignment-- + +Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. + +## --text-- + +Which of the following statements is true? + +## --answers-- + +CSS is used to create the basic structure of a webpage, and HTML is used to add style. + +--- + +HTML is used to create the basic structure of a webpage, and CSS is used to add style. + +--- + +HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. + + +## --video-solution-- + +2 + + diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md new file mode 100644 index 00000000000..80f5869cff5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-f.md @@ -0,0 +1,65 @@ +--- +id: 637f4e2f72c65bc8e73dfe22 +title: HTML Foundations Question F +challengeType: 15 +dashedName: html-foundations-question-f +--- + +# --description-- + +The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage. + +## The Charset Meta Element +You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: ``. + +Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser. + +## Title Element +Another element you should always include in the head of an HTML document is the `title` element: + +```html +
My First Webpage +``` + +The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. + +If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open. + +There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum. + +Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag: + + +```html + + + + + +My First Webpage + + +``` + +# --question-- + +## --text-- + +What is the purpose of the `head` element? + +## --answers-- + +The `head` element is used to display all elements that are displayed on the webpage. + +--- + +The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements. + +--- + +The `head` element is used to display the header content on top of the webpage. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md new file mode 100644 index 00000000000..16299d58648 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-g.md @@ -0,0 +1,48 @@ +--- +id: 637f4e3672c65bc8e73dfe23 +videoId: V8UAEoOvqFg +title: HTML Foundations Question G +challengeType: 15 +dashedName: html-foundations-question-g +--- + +# --description-- + +The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. + +To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so: + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s brilliant Building your first web page video above. + +--- + +Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. + +--- + +Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML. + +## --text-- + +What is the purpose of the `body` element? + +## --answers-- + +This is where all important information about the webpage is displayed such as the `title` and `meta` tags. + +--- + +This is where you tell the browser how to render the webpage correctly. + +--- + +This is where all content will be displayed on the page such images, text, and links. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md new file mode 100644 index 00000000000..f99018d79de --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-h.md @@ -0,0 +1,36 @@ +--- +id: 6376327e2724a688c04636e3 +title: HTML Foundations Question H +challengeType: 15 +dashedName: html-foundations-question-h +--- + +# --description-- + + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to add paragraphs of text on a webpage? + +## --answers-- + +CSS + +--- + +JavaScript + +--- + +HTML + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md new file mode 100644 index 00000000000..72ed091e603 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-i.md @@ -0,0 +1,33 @@ +--- +id: 637633162724a688c04636e4 +title: HTML Foundations Question I +challengeType: 15 +dashedName: html-foundations-question-i +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to change the font and background color of a button? + +## --answers-- + +You should use CSS to change the background color and font of a button. + +--- + +You should use JavaScript to change the background color and font of a button. + +--- + +You should use HTML to change the background color and font of a button. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md new file mode 100644 index 00000000000..ebd30965da6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-question-j.md @@ -0,0 +1,34 @@ +--- +id: 637633672724a688c04636e5 +title: HTML Foundations Question J +challengeType: 15 +dashedName: html-foundations-question-j +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +What is the difference between HTML, CSS, and JavaScript? + +## --answers-- + +HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. + +--- + +CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. + +--- + +JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-a.md new file mode 100644 index 00000000000..b4d237448f3 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-a.md @@ -0,0 +1,66 @@ +--- +id: 637f704072c65bc8e73dfe36 +videoId: tsEQgGjSmkM +title: Links and Images Question A +challengeType: 15 +dashedName: links-and-images-question-a +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named `odin-links-and-images`. + +- Within that directory, create a new file named `index.html`. + +- Fill in the usual HTML boilerplate. + +- Finally, add the following `h1` to the `body`: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. + +Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. + +It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Links video above. + +## --text-- + +What HTML tag is used to create a link? + +## --answers-- + +`` + +--- + +`` + +--- + +`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-b.md
new file mode 100644
index 00000000000..a138268c406
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-b.md
@@ -0,0 +1,54 @@
+---
+id: 637f703572c65bc8e73dfe35
+title: Links and Images Question B
+challengeType: 15
+dashedName: links-and-images-question-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- finally, add the following `h1` to the `body`: `
Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- +## --text-- + +What is an attribute? +## --answers-- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. + +--- + +An HTML attribute is used to tell the browser what the element contains. + +--- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-c.md new file mode 100644 index 00000000000..8863b087456 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-c.md @@ -0,0 +1,55 @@ +--- +id: 637f703072c65bc8e73dfe34 +title: Links and Images Question C +challengeType: 15 +dashedName: links-and-images-question-c +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named `odin-links-and-images`. + +- Within that directory, create a new file named `index.html`. + +- Fill in the usual HTML boilerplate. + +- finally, add the following `h1` to the `body`: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --text-- + +What attribute tells links where to go to? + +## --answers-- + +`src` + +--- + +`href` + +--- + +`link` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-d.md new file mode 100644 index 00000000000..37eebffbabf --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-d.md @@ -0,0 +1,112 @@ +--- +id: 637f702872c65bc8e73dfe33 +videoId: ta3Oxx7Yqbo +title: Links and Images Question D +challengeType: 15 +dashedName: links-and-images-question-d +--- + +# --description-- + + +Generally, there are two kinds of links you will create: + +- Links to pages on other websites on the internet + +- Links to pages located on your own websites + + +## Absolute Links +Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. + +You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. + +`https://www.theodinproject.com/about` + +## Relative Links +Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. + +Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. + +Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: + +```html + + + + +Odin Links and Images + + + +About Page
+ + +``` + +Back in the `index` page, add the following anchor element to create a link to the `about` page: + +```html + +Homepage
+ click me + + About + +``` + +Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. + +This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. + +But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. + +Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. + +Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. + +To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. + +```html + +Homepage
+ About + +``` + +Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. + +In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. + +```html + +Homepage
+ About + +``` + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML File Structure video above. + +## --text-- + +What is the difference between an absolute and a relative link? + +## --answers-- + +An absolute link is a link to another page on the current website. A relative link is a link to another website. + +--- + +An absolute link is a link to another website. A relative link is a link another page on the current website. + +--- + +There is no difference between absolute and relative links. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-e.md new file mode 100644 index 00000000000..ae008078088 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-e.md @@ -0,0 +1,98 @@ +--- +id: 637f702372c65bc8e73dfe32 +videoId: 0xoztJCHpbQ +title: Links and Images Question E +challengeType: 15 +dashedName: links-and-images-question-e +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+``
+
+---
+
+``
+
+---
+
+`` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-f.md new file mode 100644 index 00000000000..e1af2d6a659 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-f.md @@ -0,0 +1,93 @@ +--- +id: 637f701c72c65bc8e73dfe31 +title: Links and Images Question F +challengeType: 15 +dashedName: links-and-images-question-f +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `
` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-g.md
new file mode 100644
index 00000000000..5bc84fa6c96
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+title: Links and Images Question G
+challengeType: 15
+dashedName: links-and-images-question-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-h.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-h.md
new file mode 100644
index 00000000000..71157081ae7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-question-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+title: Links and Images Question H
+challengeType: 15
+dashedName: links-and-images-question-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +
Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Read about the four main image formats that can be used on the web.
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+TIFF, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-a.md
new file mode 100644
index 00000000000..8698b62aca8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Question A
+challengeType: 15
+dashedName: working-with-text-question-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua.
+
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ nisi ut aliquip ex ea commodo consequat.
+
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `` tag. + +Changing our example from before to use paragraph elements fixes the issue: + + + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. + +## --text-- + +How do you create a paragraph in HTML? + +## --answers-- + +`
This is a paragraph
` + +--- + +`This is a paragraph
` + +--- + +`This is a paragraph` + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-b.md new file mode 100644 index 00000000000..17d3c900359 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-b.md @@ -0,0 +1,39 @@ +--- +id: 637f4e5f72c65bc8e73dfe28 +title: Working With Text Question B +challengeType: 15 +dashedName: working-with-text-question-b +--- + +# --description-- + +Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. + +There are 6 different levels of headings starting from `` to `
`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. + +Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `
` tag. + + + +Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. + +# --question-- +## --text-- + +How many different levels of headings are there and what is the difference between them? + +## --answers-- + +There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. + +--- + +There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. + +--- + +There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-c.md new file mode 100644 index 00000000000..6ccf0e06658 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-c.md @@ -0,0 +1,47 @@ +--- +id: 637f4e6672c65bc8e73dfe29 +videoId: gW6cBZLUk6M +title: Working With Text Question C +challengeType: 15 +dashedName: working-with-text-question-c +--- + +# --description-- + +The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. + +You can use `strong` on its own: + + + +But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: + + + +Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Bold and Italic Text Video above. + +## --text-- + +What element should you use to make text bold and important? + +## --answers-- + +`This is an important message` + +--- + +`
This is an important message
` + +--- + +`This is an important message` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-d.md new file mode 100644 index 00000000000..e686b2698e0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-d.md @@ -0,0 +1,38 @@ +--- +id: 637f4e6e72c65bc8e73dfe2a +title: Working With Text Question D +challengeType: 15 +dashedName: working-with-text-question-d +--- + +# --description-- + +The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. + +To use `em` on its own: + + +Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: + + + +# --question-- +## --text-- + +What element should you use to make text italicized to add emphasis? + +## --answers-- + +`This is an italic message` + +--- + +`This is an italic message` + +--- + +`This is an italic message ` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-e.md new file mode 100644 index 00000000000..a0a7ba2fda9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-e.md @@ -0,0 +1,65 @@ +--- +id: 637f4e7972c65bc8e73dfe2b +title: Working With Text Question E +challengeType: 15 +dashedName: working-with-text-question-e +--- + +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the `body` element is the parent and the `p` is the child: + +```html + + + + +Lorem ipsum dolor sit amet.
+ + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: + +```html + + + + +Lorem ipsum dolor sit amet.
+Ut enim ad minim veniam.
+ + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship do two elements have if they are at the same level of nesting? + +## --answers-- + +The elements are each other's parents. + +--- + +The elements are each other's children. + +--- + +The elements are siblings. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-f.md new file mode 100644 index 00000000000..7d440cfab25 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-f.md @@ -0,0 +1,66 @@ +--- +id: 637f4e8072c65bc8e73dfe2c +title: Working With Text Question F +challengeType: 15 +dashedName: working-with-text-question-f +--- + +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the body element is the parent and the paragraph is the child: + +```html + + + + +Lorem ipsum dolor sit amet.
+ + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: + +```html + + + + +Lorem ipsum dolor sit amet.
+Ut enim ad minim veniam.
+ + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship does an element have with any nested element within it? + +## --answers-- + +The element within the other element is called the parent element. + +--- + +The element within the other element is called the child element. + +--- + +The element within the other element is called the sibling element. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-g.md new file mode 100644 index 00000000000..5f5d141fa46 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-g.md @@ -0,0 +1,48 @@ +--- +id: 637f4e8772c65bc8e73dfe2d +title: Working With Text Question G +challengeType: 15 +dashedName: working-with-text-question-g +--- + +# --description-- + +HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. + +Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: + +```html +View the html to see the hidden comments
+ + + +Some paragraph text
+ + +``` + +# --question-- + +## --assignment-- + +To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. + +## --text-- + +How do you create HTML comments? + +## --answers-- + +`/* This is an HTML comment */` + +--- + +`` + +--- + +`<-- This is an HTML comment --!>` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-h.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-h.md new file mode 100644 index 00000000000..c20b4de097a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-question-h.md @@ -0,0 +1,65 @@ +--- +id: 637f4e3e72c65bc8e73dfe24 +videoId: kcHKFZBVtf4 +title: Working with Text Question H +challengeType: 15 +dashedName: working-with-text-question-h +--- + +# --description-- + +If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. + +Unordered lists are created using the `- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
- `
+
+---
+
+`
- `. However, each list item in an ordered list begins with a number instead:
+
+
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`
- `
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-question-i.md b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-question-i.md
new file mode 100644
index 00000000000..05765087c87
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-question-i.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+title: Working with Text Question I
+challengeType: 15
+dashedName: working-with-text-question-i
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `
- ` element, and each item within the list is created using the list item element `
- `.
+
+Each list item in an unordered list begins with a bullet point:
+
+
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `
Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- +## --text-- + +What is an attribute? +## --answers-- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. + +--- + +An HTML attribute is used to tell the browser what the element contains. + +--- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-c.md new file mode 100644 index 00000000000..8863b087456 --- /dev/null +++ b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-c.md @@ -0,0 +1,55 @@ +--- +id: 637f703072c65bc8e73dfe34 +title: Links and Images Question C +challengeType: 15 +dashedName: links-and-images-question-c +--- + +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named `odin-links-and-images`. + +- Within that directory, create a new file named `index.html`. + +- Fill in the usual HTML boilerplate. + +- finally, add the following `h1` to the `body`: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --text-- + +What attribute tells links where to go to? + +## --answers-- + +`src` + +--- + +`href` + +--- + +`link` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-d.md new file mode 100644 index 00000000000..37eebffbabf --- /dev/null +++ b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-d.md @@ -0,0 +1,112 @@ +--- +id: 637f702872c65bc8e73dfe33 +videoId: ta3Oxx7Yqbo +title: Links and Images Question D +challengeType: 15 +dashedName: links-and-images-question-d +--- + +# --description-- + + +Generally, there are two kinds of links you will create: + +- Links to pages on other websites on the internet + +- Links to pages located on your own websites + + +## Absolute Links +Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. + +You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. + +`https://www.theodinproject.com/about` + +## Relative Links +Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. + +Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. + +Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: + +```html + + + + +About Page
+ + +``` + +Back in the `index` page, add the following anchor element to create a link to the `about` page: + +```html + +Homepage
+ click me + + About + +``` + +Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. + +This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. + +But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. + +Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. + +Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. + +To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. + +```html + +Homepage
+ About + +``` + +Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. + +In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. + +```html + +Homepage
+ About + +``` + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML File Structure video above. + +## --text-- + +What is the difference between an absolute and a relative link? + +## --answers-- + +An absolute link is a link to another page on the current website. A relative link is a link to another website. + +--- + +An absolute link is a link to another website. A relative link is a link another page on the current website. + +--- + +There is no difference between absolute and relative links. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-e.md new file mode 100644 index 00000000000..ae008078088 --- /dev/null +++ b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-e.md @@ -0,0 +1,98 @@ +--- +id: 637f702372c65bc8e73dfe32 +videoId: 0xoztJCHpbQ +title: Links and Images Question E +challengeType: 15 +dashedName: links-and-images-question-e +--- + +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+``
+
+---
+
+``
+
+---
+
+`Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-g.md
new file mode 100644
index 00000000000..5bc84fa6c96
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+title: Links and Images Question G
+challengeType: 15
+dashedName: links-and-images-question-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-h.md
new file mode 100644
index 00000000000..71157081ae7
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-question-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+title: Links and Images Question H
+challengeType: 15
+dashedName: links-and-images-question-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Read about the four main image formats that can be used on the web.
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+TIFF, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-question-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-question-a.md
new file mode 100644
index 00000000000..8698b62aca8
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-question-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Question A
+challengeType: 15
+dashedName: working-with-text-question-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua.
+
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ nisi ut aliquip ex ea commodo consequat.
+
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `` tag. + +Changing our example from before to use paragraph elements fixes the issue: + + + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. + +## --text-- + +How do you create a paragraph in HTML? + +## --answers-- + +`
This is a paragraph
` + +--- + +`This is a paragraph
` + +--- + +`This is a paragraph` + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-question-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-question-b.md new file mode 100644 index 00000000000..17d3c900359 --- /dev/null +++ b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-question-b.md @@ -0,0 +1,39 @@ +--- +id: 637f4e5f72c65bc8e73dfe28 +title: Working With Text Question B +challengeType: 15 +dashedName: working-with-text-question-b +--- + +# --description-- + +Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. + +There are 6 different levels of headings starting from `