chore(i18n,learn): processed translations (#49400)

2026-09-24 23:01:18 +08:00 · 2023-02-16 16:23:54 +01:00
parent e22fd0f7b6
commit ac08298c7b
53 changed files with 329 additions and 329 deletions
@@ -9,7 +9,7 @@ dashedName: passing-values-to-functions-with-arguments

 # --description--

-إن <dfn>الوسائط (parameters)</dfn> متغيرات تعمل كعناصر ناقلة للقيم الذي يجب أن تكون مدخلة للوظيفة (function) عند تفعيلها. عندما يتم تعريف الوظيفة، فإنها تُعرَّف عادة مع واحد أو أكثر من وسيط. القيم الفعلية التي تدخل (أو <dfn>"تمرر"</dfn>) إلى وظيفة عند استدعائها هي معروفة باسم <dfn>الحجج (arguments)</dfn>.
+إن <dfn>الوسائط (parameters)</dfn> متغيرات تعمل كعناصر ناقلة للقيم الذي تعطى لوظيفة (function) عند تفعيلها. عندما يتم تعريف وظيفة، فإنها تُعرَّف عادة مع واحد أو أكثر من الوسائط. القيم الفعلية التي تدخل (أو <dfn>"تمرر"</dfn>) إلى وظيفة عند استدعائها هي معروفة باسم <dfn>المعطيات (arguments)</dfn>.

 إليك وظيفة ذات وسيطين، `param1` و `param2`:

@@ -19,11 +19,11 @@ function testFun(param1, param2) {
 }
 ```

-ثم يمكننا استدعاء `testFun` مثل: `testFun("Hello", "World");`. لقد تمريرنا حجج من نوع مقطع, `Hello` و `World`. داخل الحجة، `param1` سيتساوى مع المقطع `Hello` و `param2` سيتساوى مع المقطع `World`. لاحظ أنه يمكنك تنفيذ `testFun` مرة أخرى مع معطيات (arguments) مختلفة ووسائط (parameters) لتأخذ قيمة المعطيات الجديدة.
+ثم يمكننا تفعيل `testFun` مثل: `testFun("Hello", "World");`. لقد مرَّرنا معطيين من نوع مقطع نصي، `Hello` و `World`. داخل الوظيفة، `param1` سيتساوى مع المقطع `Hello` و `param2` سيتساوى مع المقطع `World`. لاحظ أنه يمكنك تنفيذ `testFun` مرة أخرى مع معطيات (arguments) مختلفة ووسائط (parameters) لتأخذ قيمة المعطيات الجديدة.

 # --instructions--

-<ol><li>أنشاء وظيفة تسمى <code>functionWithArgs</code> تقبل حجج وتخرج المجموع الخاص بهم إلى وحدة التحكم.</li><li>استدعي الوظيفة برقمين كحجتين.</li></ol>
+<ol><li>أنشئ وظيفة تسمى <code>functionWithArgs</code> تقبل معطييّن وتخرج المجموع الخاص بهم إلى الكونسول.</li><li>استدعي الوظيفة برقمين كحجتين.</li></ol>

 # --hints--

@@ -55,7 +55,7 @@ if (typeof functionWithArgs === 'function') {
 assert(logOutput == 16);
 ```

-يجب عليك استدعاء `functionWithArgs` برقمين بعد تعريفه.
+يجب عليك استدعاء `functionWithArgs` برقمين بعد تعريفها.

 ```js
 assert(
@@ -23,11 +23,11 @@ const answer = plusThree(5);

 يحتوي `answer` على قيمة `8`.

-تأخذ `plusThree` قيمة <dfn>معطى</dfn> من `num` وتنتج قيمة تساوي `num + 3`.
+تأخذ `plusThree` قيمة من <dfn>المعطى</dfn> `num` وتنتج قيمة تساوي `num + 3`.

 # --instructions--

-أنشئ الوظيفة `timesFive` التي تقبل معطى واحد، وتضربه في `5`، وتنتج قيمة جديدة.
+أنشئ الوظيفة `timesFive` التي تقبل معطى واحد، وتضربه في `5`، وتنتج (returns) قيمة جديدة.

 # --hints--

@@ -37,7 +37,7 @@ const el = document.getElementById('welcome-section')
 assert(!!el);
 ```

-Your `#welcome-section` element should contain an `h1` element.
+Dein `#welcome-section`-Element sollte ein `h1`-Element enthalten.

 ```js
 assert.isAbove(
@@ -19,7 +19,7 @@ dashedName: build-a-survey-form
 1. Innerhalb des Formular-Elements **musst** du deine E-Mail in ein `input`-Feld mit einer `id` von `email` eingeben
 1. Wenn du eine falsch formatierte E-Mail angibst, wird dir ein HTML5-Validierungsfehler ausgegeben
 1. Innerhalb des Formulars kannst du eine Zahl in das `input`-Feld, das die `id` von `number` hat, eingeben
-1. The number input should not accept non-numbers, either by preventing you from typing them or by showing an HTML5 validation error (depending on your browser).
+1. Das Nummernfeld sollte ausschließlich Nummern als Eingabewert akzeptieren – entweder, indem es dich davon abhält, andere Werte einzugeben, oder durch Ausgabe eines HTML5-Validierungsfehlers (abhängig vom Browser).
 1. Wenn du eine Nummer eingibst, die außerhalb des Bereichs der Zahleneingabe liegt, wird dir ein HTML5-Validierungsfehler ausgegeben. Der genannte Bereich wird durch die `min`- und `max`-Attribute festgelegt
 1. Für die Namen-, E-Mail- und Nummern-Eingabefelder findest du zugehörige `label`-Elemente im Formular, welches den Nutzen jedes Felds der folgenden IDs beschreibt: `id="name-label"`, `id="email-label"`, und `id="number-label"`
 1. Für die Namen-, E-Mail- und Nummern-Eingabefelder findest du einen Platzhalter-Text, der eine Beschreibung oder Anweisung für jedes Feld enthält
@@ -8,24 +8,24 @@ dashedName: build-a-technical-documentation-page

 # --description--

-**Objective:** Build an app that is functionally similar to <a href="https://technical-documentation-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://technical-documentation-page.freecodecamp.rocks</a>
+**Aufgabe:** Erstelle eine Anwendung, die eine ähnliche Funktionalität wie <a href="https://technical-documentation-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://technical-documentation-page.freecodecamp.rocks</a> aufweist

 **User Stories:**

 1. Du kannst ein `main`-Element mit einer entsprechenden `id="main-doc"` sehen, das den Hauptinhalt der Seite enthält (technische Dokumentation)
-1. Within the `#main-doc` element, you can see several `section` elements, each with a class of `main-section`. Es sollten mindestens 5 sein
+1. Innerhalb des `#main-doc`-Elements kannst du mehrere `section`-Elemente sehen, jedes mit einer `main-section`-Klasse. Es sollten mindestens 5 sein
 1. Das erste Element innerhalb jeder `.main-section` sollte ein `header`-Element sein, das einen Text enthält, der das Thema dieses Abschnitts beschreibt.
-1. Each `section` element with the class of `main-section` should also have an `id` that corresponds with the text of each `header` contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding `id="JavaScript_and_Java"`)
-1. The `.main-section` elements should contain at least ten `p` elements total (not each)
-1. The `.main-section` elements should contain at least five `code` elements total (not each)
-1. The `.main-section` elements should contain at least five `li` items total (not each)
+1. Jedes `section`-Element der Klasse `main-section` sollte auch eine `id` haben, die mit dem Text von jedem `header` übereinstimmt. Alle Leerzeichen sollten durch Unterstriche ersetzt werden (z.B. sollte der Abschnitt, der die Überschrift „JavaScript und Java“ enthält, eine entsprechende `id="JavaScript_and_Java"` enthalten)
+1. Die `.main-section`-Elemente sollten mindestens zehn `p`-Elemente enthalten (insgesamt)
+1. Die `.main-section`-Elemente sollten mindestens fünf `code`-Elemente enthalten (insgesamt)
+1. Die `.main-section`-Elemente sollten mindestens fünf `li`-Elemente enthalten (insgesamt)
 1. You can see a `nav` element with a corresponding `id="navbar"`
 1. Das navbar-Element sollte ein `header`-Element enthalten, das einen Text enthält, der das Thema der technischen Dokumentation beschreibt
-1. Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section`
-1. The `header` element in the `#navbar` must come before any link (`a`) elements in the navbar
-1. Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world")
-1. When you click on a navbar element, the page should navigate to the corresponding section of the `#main-doc` element (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id, and contains the corresponding header)
-1. On regular sized devices (laptops, desktops), the element with `id="navbar"` should be shown on the left side of the screen and should always be visible to the user
+1. Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. Es sollte eines für jedes Element der Klasse `main-section` geben
+1. Das `header`-Element in der `#navbar` muss vor jedem Link-Element (`a`) in der Navigationsleiste stehen
+1. Jedes Element der Klasse `nav-link` sollte einen Text enthalten, der zu dem entsprechenden `header`-Text jeder `section` passt (wenn du z.B. einen Header bzw. eine Sektion mit „Hello world" hast, sollte deine Navigationsleiste ein Element mit eben jenem Text enthalten)
+1. Wenn du auf ein Element der Navigationsleiste klickst, sollte die Seite zu der entsprechenden Sektion des `#main-doc`-Elements navigieren (klickst du z.B. auf ein `.nav-link`-Element, das den Text „Hello World" enthält, sollte die Seite zu einem `section`-Element mit dieser ID navigieren und nun den entsprechenden Header enthalten)
+1. Auf Geräten mit regulärer Größe (Laptops, Desktop-PCs) sollte das Element mit der `id="navbar"` auf der linken Seite des Bildschirms angezeigt werden und für den Nutzer immer sichtbar sein
 1. Deine technische Dokumentation sollte mindestens eine Media Query verwenden

 Erfülle die folgenden User Stories und bestehe alle Tests, um dieses Projekt abzuschließen. Gib dem Ganzen deinen persönlichen Stil. Viel Spaß beim Programmieren!
@@ -95,7 +95,7 @@ els.forEach(el => {
 assert(els.length > 0)
 ```

-Each `.main-section` should have an `id` that matches the text of its first child, having any spaces in the child's text replaced with underscores (`_`) for the id's.
+Jede `.main-section` sollte eine `id` haben, die dem Text seines ersten untergeordneten Elementes entspricht, wobei bei den IDs Leerzeichen mit Unterstrichen (`_`) ersetzt werden.

 ```js
 const els = document.querySelectorAll('.main-section')
@@ -190,7 +190,7 @@ navLinks.forEach((navLink) => {
 assert(!!header)
 ```

-Each `.nav-link` should have text that corresponds to the `header` text of its related `section` (e.g. if you have a "Hello world" section/header, your `#navbar` should have a `.nav-link` which has the text "Hello world").
+Jedes `.nav-link`-Element sollte einen Text beinhalten, der dem `header`-Text der jeweiligen `section` entspricht (wenn du z.B. ein "Hello-World"-Sektion/Header hast, sollte dein `#navbar` ein `.nav-link` mit dem Text "Hello World" haben).

 ```js
 const headerText = Array.from(document.querySelectorAll('.main-section')).map(el =>
@@ -9,24 +9,24 @@ dashedName: step-29

 Finally, create a new `75%` selector between your `50%` and `100%` selectors. Give this new selector a `background-color` property set to `yellow`.

-With that, your animation is much smoother and your Ferris wheel is complete.
+Damit ist deine Animation viel flüssiger und dein Ferris-Wheel komplett.

 # --hints--

-You should create a new `75%` selector in your `@keyframes cabins` rule.
+Du solltest einen neuen `75%`-Selektor in deiner `@keyframes cabins`-Regel erstellen.

 ```js
 const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules;
 assert(rules?.[0]?.keyText === '75%' || rules?.[1]?.keyText === '75%' || rules?.[2]?.keyText === '75%' || rules?.[3]?.keyText === '75%' || rules?.[4]?.keyText === '75%');
 ```

-Your `75%` selector should be between your `50%` and `100%` selectors.
+Dein `75%`-Selektor sollte zwischen deinen `50%`- und `100%`-Selektoren stehen.

 ```js
 assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.keyText === '75%');
 ```

-Your `75%` selector should have a `background-color` property set to `yellow`.
+Dein `75%`-Selektor sollte eine `background-color`-Eigenschaft von `yellow` haben.

 ```js
 assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.style?.backgroundColor === 'yellow');
@@ -7,23 +7,23 @@ dashedName: step-21

 # --description--

-Within your `aside` element, create two `img` elements, a `blockquote` element, and a third `img` element. Give the `blockquote` element a `class` set to `image-quote`.
+Erstelle innerhalb deines `aside`-Elements zwei `img`-Elemente, ein `blockquote`-Element, und ein drittes `img`-Element. Gib dem `blockquote`-Element eine `class` mit dem Wert `image-quote`.

 # --hints--

-You should create three `img` elements within your `aside` element.
+Du solltest drei `img`-Elemente innerhalb deines `aside`-Elements erstellen.

 ```js
 assert(document.querySelectorAll('aside img')?.length === 3);
 ```

-You should create a `blockquote` element within your `aside` element.
+Du solltest ein `blockquote`-Element innerhalb deines `aside`-Elements erstellen.

 ```js
 assert.exists(document.querySelector('aside blockquote'));
 ```

-Your `blockquote` element should have a `class` set to `image-quote`.
+Dein `blockquote`-Element sollte eine `class` mit dem Wert `image-quote` haben.

 ```js
 assert(document.querySelector('aside blockquote')?.classList?.contains('image-quote'));
@@ -7,7 +7,7 @@ dashedName: step-115

 # --description--

-Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night.
+Kopiere und füge deine ganze `sky`-Klasse zusammen mit allen Eigenschaften und Werten in die Media Query ein. Du wirst ein anderes Farbschema für die Silhouette erstellen, welche sie von Tag zu Nacht ändert.

 Note: You are going to need to scroll past the editable region to copy the class.

@@ -1,6 +1,6 @@
 ---
 id: 60f8604682407e0d017bbf7f
-title: Step 26
+title: Schritt 26
 challengeType: 0
 dashedName: step-26
 ---
@@ -7,32 +7,32 @@ dashedName: step-7

 # --description--

-Now copy the set of seven `.key` elements, and paste two more sets into the `.keys` div.
+Kopiere nun die Menge von sieben `.key`-Elementen und füge zwei weitere Mengen in das `.keys`-div ein.

 # --hints--

-You should have 21 `.key` elements.
+Du solltest 21 `.key`-Elemente haben.

 ```js
 const keys = document.querySelectorAll('.key');
 assert(keys?.length === 21);
 ```

-You should have 15 `.black--key` elements.
+Du solltest 15 `.black--key`-Elemente haben.

 ```js
 const blackKeys = document.querySelectorAll('.black--key');
 assert(blackKeys?.length === 15);
 ```

-All `.key` elements should be within your `.keys` element.
+Alle `.key`-Elemente sollten sich innerhalb deines `.keys`-Elements befinden.

 ```js
 const keys = document.querySelector('.keys');
 assert(keys?.querySelectorAll('.key')?.length === 21);
 ```

-All `.black--key` elements should be within your `.keys` element.
+Alle `.black--key`-Elemente sollten sich innerhalb deines `.keys`-Elements befinden.

 ```js
 const keys = document.querySelector('.keys');
@@ -9,7 +9,7 @@ dashedName: step-67

 Gib dem `.note`-Selektor eine linke und rechte Padding-Einheit von `8px` und entferne die obere und untere Padding-Einheit. Setze außerdem die `text-indent`-Eigenschaft auf `-8px`.

-Mit diesen letzen Änderung ist deine Nährwertkennzeichnung fertig!
+With these last changes, your nutrition label is complete!

 # --hints--

@@ -1,38 +1,38 @@
 ---
 id: 6374f208de18c50e48ba767b
 videoId: LGQuIIv2RVA
-title: Introduction To HTML and CSS Question A
+title: Questão A de Introdução ao HTML e ao CSS
 challengeType: 15
 dashedName: introduction-to-html-and-css-question-a
 ---

 # --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!
+O HTML e o CSS são duas linguagens que trabalham em conjunto para criar tudo o que você vê quando está na internet. O HTML são os dados brutos que constituem uma página da web. Todos os textos, links, cards, listas e botões são criados em HTML. O CSS é o que adiciona estilo a esses elementos simples. O HTML coloca informações em uma página da web e o CSS posiciona essas informações, dá cor a elas, muda as fontes, o que dá a elas uma aparência melhor!

-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.
+Muitos recursos úteis seguem se referindo ao HTML e ao CSS como linguagens de programação. Se quisermos ser técnicos, no entanto, chamá-las assim não é algo preciso. Isso ocorre porque se tratam apenas de apresentar informações. Elas não são usadas para programar a lógica. O JavaScript, que você aprenderá na próxima seção, é uma linguagem de programação, pois é usada para fazer as páginas da web fazerem coisas. No entanto, há muito que você pode fazer apenas com o HTML e o CSS – e você, definitivamente, vai precisar dos dois. As lições a seguir visam dar a você as ferramentas necessárias para que possa seguir com sucesso ao alcançar o conteúdo do JavaScript.

 # --question--

 ## --assignment--

-Read <a href="https://brytdesigns.com/html-css-javascript-whats-the-difference#What_is_HTML" target="_blank">the HTML vs CSS vs JavaScript article</a>. It is a quick overview of the relationships between HTML, CSS, and JavaScript.
+Leia o artigo sobre <a href="https://brytdesigns.com/html-css-javascript-whats-the-difference#What_is_HTML" target="_blank">HTML, CSS e JavaScript</a> (texto em inglês). É uma visão geral rápida das relações entre HTML, CSS e JavaScript.

 ## --text--

-Which of the following statements is true?
+Qual das seguintes afirmações é verdadeira?

 ## --answers--

-CSS is used to create the basic structure of a webpage, and HTML is used to add style.
+O CSS é usado para criar a estrutura básica de uma página web e o HTML é usado para adicionar estilo.

 ---

-HTML is used to create the basic structure of a webpage, and CSS is used to add style.
+HTML é usado para criar a estrutura básica de uma página web e o CSS é usado para adicionar estilo.

 ---

-HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure.
+O HTML e o CSS são usados para adicionar estilo a uma página da web, enquanto o JavaScript é usado para criar a estrutura básica.


 ## --video-solution--
@@ -1,7 +1,7 @@
 ---
 id: 6376327e2724a688c04636e3
 videoId: LGQuIIv2RVA
-title: Introduction To HTML and CSS Question B
+title: Questão B de Introdução ao HTML e ao CSS
 challengeType: 15
 dashedName: introduction-to-html-and-css-question-b
 ---
@@ -9,15 +9,15 @@ dashedName: introduction-to-html-and-css-question-b
 # --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!
+O HTML e o CSS são duas linguagens que trabalham em conjunto para criar tudo o que você vê quando está na internet. O HTML são os dados brutos que constituem uma página da web. Todos os textos, links, cards, listas e botões são criados em HTML. O CSS é o que adiciona estilo a esses elementos simples. O HTML coloca informações em uma página da web e o CSS posiciona essas informações, dá cor a elas, muda as fontes, o que dá a elas uma aparência melhor!

-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.
+Muitos recursos úteis seguem se referindo ao HTML e ao CSS como linguagens de programação. Se quisermos ser técnicos, no entanto, chamá-las assim não é algo preciso. Isso ocorre porque se tratam apenas de apresentar informações. Elas não são usadas para programar a lógica. O JavaScript, que você aprenderá na próxima seção, é uma linguagem de programação, pois é usada para fazer as páginas da web fazerem coisas. No entanto, há muito que você pode fazer apenas com o HTML e o CSS – e você, definitivamente, vai precisar dos dois. As lições a seguir visam dar a você as ferramentas necessárias para que possa seguir com sucesso ao alcançar o conteúdo do JavaScript.

 # --question--

 ## --text--

-Between HTML and CSS, which should you use to add paragraphs of text on a webpage?
+Entre o HTML e o CSS, o que você deve usar para adicionar parágrafos de texto em uma página da web?

 ## --answers--

@@ -1,34 +1,34 @@
 ---
 id: 637633672724a688c04636e5
 videoId: LGQuIIv2RVA
-title: Introduction To HTML and CSS Question D
+title: Questão D de Introdução ao HTML e ao CSS
 challengeType: 15
 dashedName: introduction-to-html-and-css-question-d
 ---

 # --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!
+O HTML e o CSS são duas linguagens que trabalham em conjunto para criar tudo o que você vê quando está na internet. O HTML são os dados brutos que constituem uma página da web. Todos os textos, links, cards, listas e botões são criados em HTML. O CSS é o que adiciona estilo a esses elementos simples. O HTML coloca informações em uma página da web e o CSS posiciona essas informações, dá cor a elas, muda as fontes, o que dá a elas uma aparência melhor!

-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.
+Muitos recursos úteis seguem se referindo ao HTML e ao CSS como linguagens de programação. Se quisermos ser técnicos, no entanto, chamá-las assim não é algo preciso. Isso ocorre porque se tratam apenas de apresentar informações. Elas não são usadas para programar a lógica. O JavaScript, que você aprenderá na próxima seção, é uma linguagem de programação, pois é usada para fazer as páginas da web fazerem coisas. No entanto, há muito que você pode fazer apenas com o HTML e o CSS – e você, definitivamente, vai precisar dos dois. As lições a seguir visam dar a você as ferramentas necessárias para que possa seguir com sucesso ao alcançar o conteúdo do JavaScript.

 # --question--

 ## --text--

-What is the difference between HTML, CSS, and JavaScript?
+Qual é a diferença entre HTML, CSS e 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.
+O HTML serve para criar elementos interativos, o CSS é para a aparência e o JavaScript é para criar a estrutura de uma página da web.

 ---

-CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage.
+O CSS é para a aparência, o JavaScript é para criar elementos interativos e o HTML é para criar a estrutura de uma página da web.

 ---

-JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage.
+O JavaScript é para a aparência, o CSS é para criar a estrutura e o HTML é para criar elementos interativos de uma página da web.

 ## --video-solution--

@@ -1,53 +1,53 @@
 ---
 id: 637f704072c65bc8e73dfe36
 videoId: tsEQgGjSmkM
-title: Links and Images Question A
+title: Questão A de Links e imagens
 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.
+Para fazer alguns exercícios práticos usando links e imagens nesta lição, você precisa de um projeto de HTML para trabalhar.

- Create a new directory named `odin-links-and-images`.
+- Crie um diretório chamado `odin-links-and-images`.

- Within that directory, create a new file named `index.html`.
+- Dentro desse diretório, crie um arquivo e dê a ele o nome de `index.html`.

- Fill in the usual HTML boilerplate.
+- Preencha o boilerplate do HTML de sempre.

- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+- Por fim, adicione o seguinte `h1` ao `body`: `<h1>Homepage</h1>`

-## 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 `<a>` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser:
+## Elementos de âncora
+Para criar um link em HTML, use o elemento de âncora. Um elemento de âncora é definido agregando o texto ou outro elemento do HTML que você que seja um link à tag `<a>`. Adicione o seguinte ao `body` da página `index.html` que você criou e abra a página no navegador:

 ```html
 <a>click me</a>
 ```

-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.
+Você pode ter notado que, ao clicar nesse link, nada acontece. Isso ocorre porque uma tag de âncora sozinha não saberá para onde você quer ir. Você tem que informar a ela um destino. Você faz isso utilizando um atributo do HTML.

-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.
+Um atributo do HTML fornece informações adicionais para um elemento do HTML e sempre vai na tag de abertura do elemento. Um atributo é geralmente composto por duas partes: um nome e um valor. No entanto, nem todos os atributos requerem um valor. No seu caso, você precisa adicionar um atributo `href` (referência de hiperlink) à tag de abertura do elemento de âncora. O valor do atributo `href` é o destino para o qual você quer o seu link vá.

-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.
+Adicione o atributo `href` abaixo ao elemento âncora que você criou anteriormente e tente clicar novamente. Não se esqueça de atualizar o navegador para que as novas alterações possam ser aplicadas.

 ```html
 <a href="https://www.theodinproject.com/about">click me</a>
 ```

-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.
+Por padrão, qualquer texto agregado a uma tag de âncora sem um atributo `href` parecerá texto simples. Se o atributo `href` estiver presente, o navegador dará ao texto uma cor azul e vai sublinhá-lo para representar um 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.
+Vale a pena notar que você pode usar tags de âncora para vincular qualquer tipo de recurso na internet, não apenas outros documentos HTML. Você pode vincular vídeos, arquivos em PDF, imagens e assim por diante. Na maioria das vezes, no entanto, você vinculará a tag a outros documentos HTML.

 # --question--

 ## --assignment--

-Watch Kevin Powell’s HTML Links video above.
+Assista ao vídeo de Kevin Powell sobre links do HTML acima.

 ## --text--

-What HTML tag is used to create a link?
+Qual é a tag do HTML usada para criar um link?

 ## --answers--

@@ -1,53 +1,53 @@
 ---
 id: 637f703572c65bc8e73dfe35
 videoId: tsEQgGjSmkM
-title: Links and Images Question B
+title: Questão B de Links e imagens
 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.
+Para fazer alguns exercícios práticos usando links e imagens nesta lição, você precisa de um projeto de HTML para trabalhar.

- Create a new directory named `odin-links-and-images`.
+- Crie um diretório chamado `odin-links-and-images`.

- Within that directory, create a new file named `index.html`.
+- Dentro desse diretório, crie um arquivo e dê a ele o nome de `index.html`.

- Fill in the usual HTML boilerplate.
+- Preencha o boilerplate do HTML de sempre.

- finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+- Por fim, adicione o seguinte `h1` ao `body`: `<h1>Homepage</h1>`

-## 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 `<a>` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser:
+## Elementos de âncora
+Para criar um link em HTML, use o elemento de âncora. Um elemento de âncora é definido agregando o texto ou outro elemento do HTML que você que seja um link à tag `<a>`. Adicione o seguinte ao `body` da página `index.html` que você criou e abra a página no navegador:

 ```html
 <a>click me</a>
 ```

-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.
+Você pode ter notado que, ao clicar nesse link, nada acontece. Isso ocorre porque uma tag de âncora sozinha não saberá para onde você quer ir. Você tem que informar a ela um destino. Você faz isso utilizando um atributo do HTML. Um atributo do HTML fornece informações adicionais para um elemento do HTML e sempre vai na tag de abertura do elemento. Um atributo é geralmente composto por duas partes: um nome e um valor. No entanto, nem todos os atributos requerem um valor. No seu caso, você precisa adicionar um atributo `href` (referência de hiperlink) à tag de abertura do elemento de âncora. O valor do atributo `href` é o destino para o qual você quer o seu link vá. Adicione o atributo `href` abaixo ao elemento âncora que você criou anteriormente e tente clicar novamente. Não se esqueça de atualizar o navegador para que as novas alterações possam ser aplicadas.

 ```html
 <a href="https://www.theodinproject.com/about">click me</a>
 ```

-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.
+Por padrão, qualquer texto agregado a uma tag de âncora sem um atributo `href` parecerá texto simples. Se o atributo `href` estiver presente, o navegador dará ao texto uma cor azul e vai sublinhá-lo para representar um link. Vale a pena notar que você pode usar tags de âncora para vincular qualquer tipo de recurso na internet, não apenas outros documentos HTML. Você pode vincular vídeos, arquivos em PDF, imagens e assim por diante. Na maioria das vezes, no entanto, você vinculará a tag a outros documentos HTML.

 # --question--
 ## --text--

-What is an attribute?
+O que é um atributo?
 ## --answers--

-An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag.
+Um atributo do HTML fornece informações adicionais para um elemento do HTML e sempre vai na tag de fechamento do elemento.

 ---

-An HTML attribute is used to tell the browser what the element contains.
+Um atributo do HTML é usado para informar ao navegador o que o elemento contém.

 ---

-An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag.
+Um atributo do HTML fornece informações adicionais para um elemento do HTML e sempre vai na tag de abertura do elemento.


 ## --video-solution--
@@ -1,43 +1,43 @@
 ---
 id: 637f703072c65bc8e73dfe34
 videoId: tsEQgGjSmkM
-title: Links and Images Question C
+title: Questão C de Links e imagens
 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.
+Para fazer alguns exercícios práticos usando links e imagens nesta lição, você precisa de um projeto de HTML para trabalhar.

- Create a new directory named `odin-links-and-images`.
+- Crie um diretório chamado `odin-links-and-images`.

- Within that directory, create a new file named `index.html`.
+- Dentro desse diretório, crie um arquivo e dê a ele o nome de `index.html`.

- Fill in the usual HTML boilerplate.
+- Preencha o boilerplate do HTML de sempre.

- finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+- Por fim, adicione o seguinte `h1` ao `body`: `<h1>Homepage</h1>`

-## 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 `<a>` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser:
+## Elementos de âncora
+Para criar um link em HTML, use o elemento de âncora. Um elemento de âncora é definido agregando o texto ou outro elemento do HTML que você que seja um link à tag `<a>`. Adicione o seguinte ao `body` da página `index.html` que você criou e abra a página no navegador:

 ```html
 <a>click me</a>
 ```

-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.
+Você pode ter notado que, ao clicar nesse link, nada acontece. Isso ocorre porque uma tag de âncora sozinha não saberá para onde você quer ir. Você tem que informar a ela um destino. Você faz isso utilizando um atributo do HTML. Um atributo do HTML fornece informações adicionais para um elemento do HTML e sempre vai na tag de abertura do elemento. Um atributo é geralmente composto por duas partes: um nome e um valor. No entanto, nem todos os atributos requerem um valor. No seu caso, você precisa adicionar um atributo `href` (referência de hiperlink) à tag de abertura do elemento de âncora. O valor do atributo `href` é o destino para o qual você quer o seu link vá. Adicione o atributo `href` abaixo ao elemento âncora que você criou anteriormente e tente clicar novamente. Não se esqueça de atualizar o navegador para que as novas alterações possam ser aplicadas.

 ```html
 <a href="https://www.theodinproject.com/about">click me</a>
 ```

-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.
+Por padrão, qualquer texto agregado a uma tag de âncora sem um atributo `href` parecerá texto simples. Se o atributo `href` estiver presente, o navegador dará ao texto uma cor azul e vai sublinhá-lo para representar um link. Vale a pena notar que você pode usar tags de âncora para vincular qualquer tipo de recurso na internet, não apenas outros documentos HTML. Você pode vincular vídeos, arquivos em PDF, imagens e assim por diante. Na maioria das vezes, no entanto, você vinculará a tag a outros documentos HTML.

 # --question--

 ## --text--

-What attribute tells links where to go to?
+Qual atributo diz aos links para onde ir?

 ## --answers--

@@ -1,7 +1,7 @@
 ---
 id: 637f702872c65bc8e73dfe33
 videoId: ta3Oxx7Yqbo
-title: Links and Images Question D
+title: Questão D de Links e imagens
 challengeType: 15
 dashedName: links-and-images-question-d
 ---
@@ -9,26 +9,26 @@ dashedName: links-and-images-question-d
 # --description--


-Generally, there are two kinds of links you will create:
+Geralmente, existem dois tipos de links que você criará:

- Links to pages on other websites on the internet
+- Links para páginas em outros sites na internet

- Links to pages located on your own websites
+- Links para páginas localizadas em seus próprios sites


-## 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.
+## Links absolutos
+Os links para páginas em outros sites na internet são chamados de links absolutos. Um link absoluto típico será composto das seguintes partes: `protocol://domain/path`. Um link absoluto conterá sempre o protocolo e o domínio do destino.

-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.
+Você já viu um link absoluto em ação. O link que você criou para a página About do The Odin Project anteriormente era um link absoluto, pois contém o protocolo e domínio.

 `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.
+## Links relativos
+Os links para outras páginas dentro de seu próprio site são chamados de links relativos. Links relativos não incluem o nome de domínio. Já que estamos falando de outra página no mesmo site, eles assumem que o nome do domínio será o mesmo da página que você criou no link.

-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.
+Os links relativos incluem apenas o caminho do arquivo para a outra página, em relação à página em que você está criando o link. Isso é bastante abstrato. Vamos ver isso em ação usando um exemplo.

-Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it:
+No diretório `odin-links-and-images`, crie outro arquivo HTML chamado `about.html` e cole o seguinte código dentro dele:

 ```html
 <!DOCTYPE html>
@@ -44,7 +44,7 @@ Within the `odin-links-and-images` directory, create another HTML file named `ab
 </html>
 ```

-Back in the `index` page, add the following anchor element to create a link to the `about` page:
+De volta à página `index`, adicione o seguinte elemento de âncora para criar um link para a página `about`:

 ```html
 <body>
@@ -55,17 +55,17 @@ Back in the `index` page, add the following anchor element to create a link to t
 </body>
 ```

-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.
+Abra o arquivo `index.html` em um navegador e clique no link de about para se certificar de que tudo esteja ligado corretamente. Clicar no link deve enviá-lo para a página `about` na que você acabou de criar.

-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.
+Isso funciona porque as páginas `index` e `about` estão no mesmo diretório. Isso significa que você pode simplesmente usar o nome (`about.html`) como o valor do link `href`.

-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.
+Você, no entanto, geralmente vai querer organizar os diretórios do site um pouco melhor. Normalmente, você só teria o `index.html` no diretório raiz e todos os outros arquivos HTML em seus próprios diretórios.

-Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory.
+Crie um diretório chamado `pages` dentro do diretório `odin-links-and-images` e mova o arquivo `about.html` para este novo diretório.

-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.
+Atualize a página `index` no navegador e, em seguida, clique no link `about`. Agora, você terá um link quebrado. Isso ocorre porque o local do arquivo da página `about` foi alterado.

-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.
+Para corrigir isto, você só precisa atualizar o valor de `href` do link da página `about` para incluir o diretório de `pages/`, já que esse é o novo local de `about.html` em relação ao arquivo `index.html`.

 ```html
 <body>
@@ -74,9 +74,9 @@ To fix this, you just need to update the `about` link `href` value to include th
 </body>
 ```

-Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order.
+Atualize a página `index` no navegador e tente clicar no link para `about` novamente. Agora, estará tudo em ordem novamente.

-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.
+Em muitos casos, isso funcionará muito bem. No entanto, com essa abordagem, ainda podemos encontrar problemas inesperados. Adicionar `./` antes do link impedirá, na maioria dos casos, esses problemas. Ao adicionar `./`, você estará especificando para o código que ele deve começar a procurar o arquivo/diretório a partir de sua relação com o **diretório atual**.

 ```html
 <body>
@@ -89,23 +89,23 @@ In many cases, this will work just fine; however, you can still run into unexpec

 ## --assignment--

-Watch Kevin Powell’s HTML File Structure video above.
+Assista ao vídeo de Kevin Powell sobre a estrutura dos arquivos do HTML acima.

 ## --text--

-What is the difference between an absolute and a relative link?
+Qual é a diferença entre um link absoluto e um relativo?

 ## --answers--

-An absolute link is a link to another page on the current website. A relative link is a link to another website.
+Um link absoluto é um link para outra página no site atual. Um link relativo é um link para outro site.

 ---

-An absolute link is a link to another website. A relative link is a link another page on the current website.
+Um link absoluto é um link para outro site. Um link relativo é um link para outra página no site atual.

 ---

-There is no difference between absolute and relative links.
+Não há diferença entre um link absoluto e um relativo.

 ## --video-solution--

@@ -1,32 +1,32 @@
 ---
 id: 637f702372c65bc8e73dfe32
 videoId: 0xoztJCHpbQ
-title: Links and Images Question E
+title: Questão E de Links e imagens
 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.
+Os sites da web seriam muito chatos se apenas pudessem exibir texto. Felizmente, o HTML fornece uma grande variedade de elementos para exibir todos os tipos diferentes de mídias. O mais utilizado é o elemento de imagem.

-To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+Para exibir uma imagem em HTML, você usa o elemento `<img>`. Diferente dos outros elementos que você encontrou, o elemento `<img>` tem fechamento próprio. Os elementos vazios ou de fechamento próprio do HTML não precisam de uma tag de fechamento.

-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.
+Em vez de envolver o conteúdo com uma tag de abertura e fechamento, esse elemento incorpora uma imagem na página usando um atributo `src`, que informa ao navegador onde o arquivo da imagem está localizado. O atributo `src` funciona muito como o atributo `href` para tags de âncora. Ele pode incorporar uma imagem usando caminhos relativos e absolutos.

-For example, using an absolute path you can display an image located on The Odin Project site:
+Por exemplo, ao usar um caminho absoluto, você pode exibir uma imagem localizada no site do The Odin Project:

-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_gORbExZ"></iframe>

-To use images that you have on your own websites, you can use a relative path.
+Para usar imagens que você tem em seus próprios sites, você pode usar um caminho relativo.

- Create a new directory named `images` within the `odin-links-and-images` project.
+- Crie um diretório chamado `images` dentro do projeto `odin-links-and-images`.

- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created.
+- Em seguida, faça o download [desta imagem](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) e mova-a para o diretório `images` que você acabou de criar.

- Rename the image to `dog.jpg`.
+- Renomeie a imagem para `dog.jpg`.

-Finally add the image to the `index.html` file:
+Por fim, adicione a imagem ao arquivo `index.html`:

 ```html
 <body>
@@ -39,47 +39,47 @@ Finally add the image to the `index.html` file:
 </body>
 ```

-Save the `index.html` file and open it in a browser to view Charles in all his glory.
+Salve o arquivo `index.html` e abra-o em um navegador para conhecer o Charles e ver como ele é lindo.


-## Parent Directories
+## Diretórios pai

-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.
+Como usar a imagem do cachorro na página `about`? Primeiro, você precisa subir um nível no diretório de páginas para o diretório pai para depois poder acessar o diretório de imagens.

-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:
+Para subir para o diretório pai, você precisa usar dois pontos no caminho relativo, assim: `../.` Vamos ver isso em ação, dentro do `body` do arquivo `about.html`, adicione a seguinte imagem abaixo do título que você adicionou anteriormente:

 ```html
 <img src="../images/dog.jpg">
 ```

-To break this down:
+Em detalhes:

- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+- Primeiro, você vai ao diretório pai do diretório das páginas, que é o `odin-links-and-images`.

- Then, from the parent directory, you can go into the `images` directory.
+- Em seguida, a partir do diretório pai, você pode ir para o diretório `images`.

- Finally, you can access the `dog.jpg` file.
+- Por fim, você pode acessar o arquivo `dog.jpg`.

-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.
+Usando a metáfora que usamos anteriormente, usar `../` em um caminho de arquivo é como sair do quarto em que você está no momento, indo para o corredor principal para que você possa chegar à sala.

-## `Alt` attribute
+## Atributo `Alt`

-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+Além do atributo `src`, cada elemento de imagem deve ter também um atributo `alt` (texto alternativo).

-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.
+O atributo `alt` é usado para descrever uma imagem. Ele será usado no lugar da imagem, caso ela não possa ser carregada. Ele também é usado com leitores de tela para descrever a imagem para usuários com deficiência visual.

-This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+É assim que o logotipo do The Odin Project que você usou anteriormente fica com um atributo `alt` incluído:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_ExXjoEp"></iframe>

 # --question--

 ## --assignment--

-Watch Kevin Powell’s HTML Images Video above.
+Assista ao vídeo de Kevin Powell sobre imagens do HTML acima.

 ## --text--

-Which tag is used to display an image?
+Qual é a tag usada para exibir uma imagem?

 ## --answers--

@@ -1,32 +1,32 @@
 ---
 id: 637f701572c65bc8e73dfe30
 videoId: 0xoztJCHpbQ
-title: Links and Images Question G
+title: Questão G de Links e imagens
 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.
+Os sites da web seriam muito chatos se apenas pudessem exibir texto. Felizmente, o HTML fornece uma grande variedade de elementos para exibir todos os tipos diferentes de mídias. O mais utilizado é o elemento de imagem.

-To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+Para exibir uma imagem em HTML, você usa o elemento `<img>`. Diferente dos outros elementos que você encontrou, o elemento `<img>` tem fechamento próprio. Os elementos vazios ou de fechamento próprio do HTML não precisam de uma tag de fechamento.

-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.
+Em vez de envolver o conteúdo com uma tag de abertura e fechamento, esse elemento incorpora uma imagem na página usando um atributo `src`, que informa ao navegador onde o arquivo da imagem está localizado. O atributo `src` funciona muito como o atributo `href` para tags de âncora. Ele pode incorporar uma imagem usando caminhos relativos e absolutos.

-For example, using an absolute path you can display an image located on The Odin Project site:
+Por exemplo, ao usar um caminho absoluto, você pode exibir uma imagem localizada no site do The Odin Project:

-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_gORbExZ"></iframe>

-To use images that you have on your own websites, you can use a relative path.
+Para usar imagens que você tem em seus próprios sites, você pode usar um caminho relativo.

- Create a new directory named `images` within the `odin-links-and-images` project.
+- Crie um diretório chamado `images` dentro do projeto `odin-links-and-images`.

- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created.
+- Em seguida, faça o download [desta imagem](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) e mova-a para o diretório de imagens que você acabou de criar.

- Rename the image to `dog.jpg`.
+- Renomeie a imagem para `dog.jpg`.

-Finally add the image to the `index.html` file:
+Por fim, adicione a imagem ao arquivo `index.html`:

 ```html
 <body>
@@ -39,43 +39,43 @@ Finally add the image to the `index.html` file:
 </body>
 ```

-Save the `index.html` file and open it in a browser to view Charles in all his glory.
+Salve o arquivo `index.html` e abra-o em um navegador para conhecer o Charles e ver como ele é lindo.


-## Parent Directories
+## Diretórios pai

-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.
+Como usar a imagem do cachorro na página `about`? Primeiro, você precisa subir um nível no diretório de páginas para o diretório pai para depois poder acessar o diretório de imagens.

-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:
+Para subir para o diretório pai, você precisa usar dois pontos no caminho relativo, assim: `../.` Vamos ver isso em ação, dentro do `body` do arquivo `about.html`, adicione a seguinte imagem abaixo do título que você adicionou anteriormente:

 ```html
 <img src="../images/dog.jpg">
 ```

-To break this down:
+Em detalhes:

- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+- Primeiro, você vai ao diretório pai do diretório das páginas, que é o `odin-links-and-images`.

- Then, from the parent directory, you can go into the `images` directory.
+- Em seguida, a partir do diretório pai, você pode ir para o diretório `images`.

- Finally, you can access the `dog.jpg` file.
+- Por fim, você pode acessar o arquivo `dog.jpg`.

-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.
+Usando a metáfora que usamos anteriormente, usar `../` em um caminho de arquivo é como sair do quarto em que você está no momento, indo para o corredor principal para que você possa chegar à sala.

-## Alt attribute
+## Atributo alt

-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+Além do atributo `src`, cada elemento de imagem deve ter também um atributo `alt` (texto alternativo).

-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.
+O atributo `alt` é usado para descrever uma imagem. Ele será usado no lugar da imagem, caso ela não possa ser carregada. Ele também é usado com leitores de tela para descrever a imagem para usuários com deficiência visual.

-This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+É assim que o logotipo do The Odin Project que você usou anteriormente fica com um atributo alt incluído:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_ExXjoEp"></iframe>

 # --question--

 ## --text--

-How do you access a parent directory in a filepath?
+Como você acessa um diretório pai em um caminho de arquivo?

 ## --answers--

@@ -1,32 +1,32 @@
 ---
 id: 637f700b72c65bc8e73dfe2f
 videoId: 0xoztJCHpbQ
-title: Links and Images Question H
+title: Questão H de Links e imagens
 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.
+Os sites da web seriam muito chatos se apenas pudessem exibir texto. Felizmente, o HTML fornece uma grande variedade de elementos para exibir todos os tipos diferentes de mídias. O mais utilizado é o elemento de imagem.

-To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+Para exibir uma imagem em HTML, você usa o elemento `<img>`. Diferente dos outros elementos que você encontrou, o elemento `<img>` tem fechamento próprio. Os elementos vazios ou de fechamento próprio do HTML não precisam de uma tag de fechamento.

-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.
+Em vez de envolver o conteúdo com uma tag de abertura e fechamento, esse elemento incorpora uma imagem na página usando um atributo `src`, que informa ao navegador onde o arquivo da imagem está localizado. O atributo `src` funciona muito como o atributo `href` para tags de âncora. Ele pode incorporar uma imagem usando caminhos relativos e absolutos.

-For example, using an absolute path you can display an image located on The Odin Project site:
+Por exemplo, ao usar um caminho absoluto, você pode exibir uma imagem localizada no site do The Odin Project:

-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_gORbExZ"></iframe>

-To use images that you have on your own websites, you can use a relative path.
+Para usar imagens que você tem em seus próprios sites, você pode usar um caminho relativo.

- Create a new directory named `images` within the `odin-links-and-images` project.
+- Crie um diretório chamado `images` dentro do projeto `odin-links-and-images`.

- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created.
+- Em seguida, faça o download [desta imagem](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) e mova-a para o diretório de imagens que você acabou de criar.

- Rename the image to `dog.jpg`.
+- Renomeie a imagem para `dog.jpg`.

-Finally add the image to the `index.html` file:
+Por fim, adicione a imagem ao arquivo `index.html`:

 ```html
 <body>
@@ -39,59 +39,59 @@ Finally add the image to the `index.html` file:
 </body>
 ```

-Save the `index.html` file and open it in a browser to view Charles in all his glory.
+Salve o arquivo `index.html` e abra-o em um navegador para conhecer o Charles e ver como ele é lindo.


-## Parent Directories
+## Diretórios pai

-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.
+Como usar a imagem do cachorro na página `about`? Primeiro, você precisa subir um nível no diretório de páginas para o diretório pai para depois poder acessar o diretório de imagens.

-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:
+Para subir para o diretório pai, você precisa usar dois pontos no caminho relativo, assim: `../.` Vamos ver isso em ação, dentro do `body` do arquivo `about.html`, adicione a seguinte imagem abaixo do título que você adicionou anteriormente:

 ```html
 <img src="../images/dog.jpg">
 ```

-To break this down:
+Em detalhes:

- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+- Primeiro, você vai ao diretório pai do diretório das páginas, que é o `odin-links-and-images`.

- Then, from the parent directory, you can go into the `images` directory.
+- Em seguida, a partir do diretório pai, você pode ir para o diretório `images`.

- Finally, you can access the `dog.jpg` file.
+- Por fim, você pode acessar o arquivo `dog.jpg`.

-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.
+Usando a metáfora que usamos anteriormente, usar `../` em um caminho de arquivo é como sair do quarto em que você está no momento, indo para o corredor principal para que você possa chegar à sala.

-## Alt attribute
+## Atributo alt

-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+Além do atributo `src`, cada elemento de imagem deve ter também um atributo `alt` (texto alternativo).

-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.
+O atributo `alt` é usado para descrever uma imagem. Ele será usado no lugar da imagem, caso ela não possa ser carregada. Ele também é usado com leitores de tela para descrever a imagem para usuários com deficiência visual.

-This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+É assim que o logotipo do The Odin Project que você usou anteriormente fica com um atributo alt incluído:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_ExXjoEp"></iframe>

 # --question--

 ## --assignment--

-Read about the  <a href="https://www.internetingishard.com/html-and-css/links-and-images/#image-formats" target="_blank">four main image formats</a> that can be used on the web.
+Leia sobre os <a href="https://www.internetingishard.com/html-and-css/links-and-images/#image-formats" target="_blank">quatro formatos principais de imagens</a> que podem ser usados na web.

 ## --text--

-What are the four main image formats that you can use for images on the web?
+Quais são os quatro formatos principais de imagens que você pode usar na web?

 ## --answers--

-TIFF, GIF, PNG, and SVG.
+TIFF, GIF, PNG e SVG.

 ---

-JPG, PNG, GIF, and SVG.
+JPG, PNG, GIF e SVG.

 ---

-JPG, PDF, SVG, and GIF.
+JPG, PDF, SVG e GIF.

 ## --video-solution--

@@ -1,52 +1,52 @@
 ---
 id: 637f4e3e72c65bc8e73dfe24
 videoId: kcHKFZBVtf4
-title: Understand Ordered and Unordered List Question A
+title: Questão A sobre Entender listas ordenadas e não ordenadas
 challengeType: 15
 dashedName: understand-ordered-and-unordered-list-question-a
 ---

 # --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.
+Se você quer ter uma lista de itens onde a ordem não importa, como uma lista de compras de itens que podem ser comprados em qualquer ordem, então você pode usar uma lista não ordenada.

-Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+Listas não ordenadas são criadas usando o elemento `<ul>`. Cada item na lista é criado usando o elemento de item de lista `<li>`.

-Each list item in an unordered list begins with a bullet point:
+Cada item de lista de uma lista não ordenada começa com um ponto:

-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_powjajd"></iframe>

-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.
+Se você preferir criar uma lista de itens onde a ordem importa, por outro lado, como instruções passo a passo para uma receita ou seus 10 programas favoritos de TV, então pode usar uma lista ordenada.

-Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+Listas ordenadas são criadas usando o elemento `<ol>`. Cada item individual dentro deles é criado usando novamente o elemento de item de lista `<li>`. No entanto, cada item da lista em uma lista ordenada começa com um número:

-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_yLXYvYp"></iframe>

 # --question--

 ## --assignment--

-Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above.
+Assista os três primeiros minutos do vídeo de Kevin Powell sobre listas ordenadas e não ordenadas acima.

 ---

-Make an unordered shopping list of your favorite foods.
+Faça uma lista não ordenada de compras dos seus alimentos favoritos.

 ---

-Make an ordered list of todo’s you need to get done today.
+Faça uma lista ordenada de tarefas que você precisa fazer hoje.

 ---

-Make an unordered list of places you’d like to visit someday.
+Faça uma lista não ordenada de lugares que você gostaria de visitar um dia.

 ---

-Make an ordered list of your all time top 5 favorite video games or movies.
+Faça uma lista ordenada dos seus 5 melhores videogames ou filmes favoritos.

 ## --text--

-What HTML tag is used to create an unordered list?
+Qual é a tag do HTML usada para criar uma lista não ordenada?

 ## --answers--

@@ -1,32 +1,32 @@
 ---
 id: 637f4e4672c65bc8e73dfe25
 videoId: LGQuIIv2RVA
-title: Understand Ordered and Unordered List Question B
+title: Questão B sobre Entender listas ordenadas e não ordenadas
 challengeType: 15
 dashedName: understand-ordered-and-unordered-list-question-b
 ---

 # --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.
+Se você quer ter uma lista de itens onde a ordem não importa, como uma lista de compras de itens que podem ser comprados em qualquer ordem, então você pode usar uma lista não ordenada.

-Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+Listas não ordenadas são criadas usando o elemento `<ul>`. Cada item na lista é criado usando o elemento de item de lista `<li>`.

-Each list item in an unordered list begins with a bullet point:
+Cada item de lista de uma lista não ordenada começa com um ponto:

-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_powjajd"></iframe>

-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.
+Se você preferir criar uma lista de itens onde a ordem importa, por outro lado, como instruções passo a passo para uma receita ou seus 10 programas favoritos de TV, então pode usar uma lista ordenada.

-Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+Listas ordenadas são criadas usando o elemento `<ol>`. Cada item individual dentro deles é criado usando novamente o elemento de item de lista `<li>`. No entanto, cada item da lista em uma lista ordenada começa com um número:

-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_yLXYvYp"></iframe>

 # --question--

 ## --text--

-What HTML tag is used to create an ordered list?
+Qual é a tag do HTML usada para criar uma lista ordenada?

 ## --answers--

@@ -1,32 +1,32 @@
 ---
 id: 637f4e5172c65bc8e73dfe26
 videoId: LGQuIIv2RVA
-title: Understand Ordered and Unordered List Question C
+title: Questão C sobre Entender listas ordenadas e não ordenadas
 challengeType: 15
 dashedName: understand-ordered-and-unordered-list-question-c
 ---

 # --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.
+Se você quer ter uma lista de itens onde a ordem não importa, como uma lista de compras de itens que podem ser comprados em qualquer ordem, então você pode usar uma lista não ordenada.

-Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+Listas não ordenadas são criadas usando o elemento `<ul>`. Cada item na lista é criado usando o elemento de item de lista `<li>`.

-Each list item in an unordered list begins with a bullet point:
+Cada item de lista de uma lista não ordenada começa com um ponto:

-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_powjajd"></iframe>

-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.
+Se você preferir criar uma lista de itens onde a ordem importa, por outro lado, como instruções passo a passo para uma receita ou seus 10 programas favoritos de TV, então pode usar uma lista ordenada.

-Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+Listas ordenadas são criadas usando o elemento `<ol>`. Cada item individual dentro deles é criado usando novamente o elemento de item de lista `<li>`. No entanto, cada item da lista em uma lista ordenada começa com um número:

-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_yLXYvYp"></iframe>

 # --question--

 ## --text--

-What HTML tag is used to create list items within both unordered and ordered lists?
+Qual é a tag do HTML usada para criar itens de lista dentro de listas ordenadas e não ordenadas?

 ## --answers--

@@ -1,14 +1,14 @@
 ---
 id: 637f4e5872c65bc8e73dfe27
 videoId: yqcd-XkxZNM
-title: Working With Text Question A
+title: Questão A de Trabalhando com textos
 challengeType: 15
 dashedName: working-with-text-question-a
 ---

 # --description--

-What would you expect the following text to output on an HTML page?
+O que você esperaria que o seguinte texto exibisse em uma página HTML?

 ```html
 <body>
@@ -20,27 +20,27 @@ What would you expect the following text to output on an HTML page?
 </body>
 ```

-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:
+Parece que há dois parágrafos do texto. Ou seja, pode-se esperar que sejam exibidos desse modo. No entanto, esse não é o caso, como você pode ver pelo resultado abaixo:

-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/xxrKqeV?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=xxrKqeV&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_xxrKqeV"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/xxrKqeV?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=xxrKqeV&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_xxrKqeV"></iframe>

-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.
+Quando o navegador encontrar novas linhas como essa em seu HTML, ele as comprimirá em um único espaço. O resultado desta compressão é que todo o texto é colocado em uma única linha.

-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 `<p>` tag.
+Se quiser criar parágrafos em HTML, é preciso utilizar o elemento de parágrafo, que acrescentará uma nova linha após cada um dos parágrafos. Um elemento de parágrafo é definido envolvendo o conteúdo do texto com uma tag `<p>`.

-Changing our example from before to use paragraph elements fixes the issue:
+Ao mudar nosso exemplo de antes para usar elementos dos parágrafos, corrigimos o problema:

-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/mdwbmdp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=mdwbmdp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_mdwbmdp"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/mdwbmdp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=mdwbmdp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_mdwbmdp"></iframe>

 # --question--

 ## --assignment--

-Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above.
+Assista o vídeo de Kevin Powell sobre Parágrafos e títulos do HTML acima.

 ## --text--

-How do you create a paragraph in HTML?
+Como se cria um parágrafo em HTML?

 ## --answers--

@@ -1,39 +1,39 @@
 ---
 id: 637f4e5f72c65bc8e73dfe28
 videoId: yqcd-XkxZNM
-title: Working With Text Question B
+title: Questão B de Trabalhando com textos
 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.
+Títulos são diferentes de outros elementos de texto do HTML: eles são exibidos maiores e com a fonte mais forte do que outros textos para representar que são títulos.

-There are 6 different levels of headings starting from `<h1>` to `<h6>`. 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.
+Existem 6 níveis diferentes de títulos, de `<h1>` até `<h6>`. O número dentro de uma tag de título representa o nível desse título. O título maior e mais importante é `h1`, enquanto `h6` é o menor título, de nível mais baixo.

-Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `<h1>` tag.
+Os títulos são definidos do mesmo modo que os parágrafos. Por exemplo, para criar um título `h1`, envolvemos o texto do título com uma tag `<h1>`.

-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_3" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/LYLPLbg?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=LYLPLbg&amp;user=TheOdinProjectExamples&amp;name=cp_embed_3" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_LYLPLbg"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_3" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/LYLPLbg?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=LYLPLbg&amp;user=TheOdinProjectExamples&amp;name=cp_embed_3" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_LYLPLbg"></iframe>

-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.
+Usar o nível correto de título é importante porque os níveis fornecem uma hierarquia para o conteúdo. Um título `h1` deve ser sempre usado para o título geral da página. Os títulos de nível inferior devem ser usados como títulos para o conteúdo em seções menores da página.

 # --question--
 ## --text--

-How many different levels of headings are there and what is the difference between them?
+Quantos níveis diferentes de títulos existem e qual é a diferença entre eles?

 ## --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.
+Existem 5 níveis diferentes de títulos. `h5` é o título menor e de menor importância, enquanto `h1` é a maior e mais importante.

 ---

-There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading.
+Existem 6 níveis diferentes de títulos. `h6` é o título maior e de maior importância, enquanto `h1` é o menor e menos importante.

 ---

-There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading.
+Existem 6 níveis diferentes de títulos. `h1` é o título maior e de maior importância, enquanto `h6` é o menor e menos importante.

 ## --video-solution--

@@ -1,34 +1,34 @@
 ---
 id: 637f4e6672c65bc8e73dfe29
 videoId: gW6cBZLUk6M
-title: Working With Text Question C
+title: Questão C de Trabalhando com textos
 challengeType: 15
 dashedName: working-with-text-question-c
 ---

 # --description--

-The `<strong>` 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 `<strong>` tag.
+O elemento `<strong>` deixa o texto em negrito. Ele também marca o texto semanticamente como importante. Isso afeta ferramentas, como leitores de tela, nas quais os usuários com deficiências visuais confiarão para poder usar o site. O tom de voz em alguns leitores de tela mudará para comunicar a importância do texto dentro de um elemento `strong`. Para definir um elemento `strong`, você envolve o conteúdo do texto em uma tag `<strong>`.

-You can use `strong` on its own:
+Para usar `strong` sozinho:

-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_4" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/qBjWXrB?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=qBjWXrB&amp;user=TheOdinProjectExamples&amp;name=cp_embed_4" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_qBjWXrB"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_4" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/qBjWXrB?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=qBjWXrB&amp;user=TheOdinProjectExamples&amp;name=cp_embed_4" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_qBjWXrB"></iframe>

-But you will probably find yourself using the `strong` element much more in combination with other text elements, like this:
+Você, provavelmente, usará o elemento `strong` muito mais em combinação com outros elementos de texto, como este:

-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_5" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqJr?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqJr&amp;user=TheOdinProjectExamples&amp;name=cp_embed_5" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqJr"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_5" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqJr?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqJr&amp;user=TheOdinProjectExamples&amp;name=cp_embed_5" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_wvewqJr"></iframe>

-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.
+Às vezes, você vai querer deixar o texto em negrito sem dar a ele um significado importante. Você aprenderá a fazer isso nas aulas de CSS, mais tarde no currículo.

 # --question--

 ## --assignment--

-Watch Kevin Powell’s HTML Bold and Italic Text Video above.
+Assista ao vídeo de Kevin Powell sobre Negrito e Itálico do HTML acima.

 ## --text--

-What element should you use to make text bold and important?
+Qual elemento você deve usar para deixar o texto em negrito e mostrar que é importante?

 ## --answers--

@@ -1,26 +1,26 @@
 ---
 id: 637f4e6e72c65bc8e73dfe2a
 videoId: gW6cBZLUk6M
-title: Working With Text Question D
+title: Questão D de Trabalhando com textos
 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 `<em>` tag.
+O elemento `em` torna o texto itálico. Ele também coloca ênfase semântica no texto, o que pode afetar coisas como leitores de tela. Para definir um elemento enfatizado, você encapsula o conteúdo do texto em uma tag `<em>`.

-To use `em` on its own:
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_6" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqpp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqpp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_6" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqpp"></iframe>
+Para usar `em` sozinho:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_6" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqpp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqpp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_6" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_wvewqpp"></iframe>

-Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements:
+Novamente, assim como ocorre com o elemento `strong`, você usará principalmente o elemento `em` com outros elementos de texto:

-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_7" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/VwWZzyj?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=VwWZzyj&amp;user=TheOdinProjectExamples&amp;name=cp_embed_7" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_VwWZzyj"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_7" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/VwWZzyj?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=VwWZzyj&amp;user=TheOdinProjectExamples&amp;name=cp_embed_7" style="width: 100%; overflow:hidden; display:block;" title="CodePen incorporado" loading="lazy" id="cp_embed_VwWZzyj"></iframe>

 # --question--
 ## --text--

-What element should you use to make text italicized to add emphasis?
+Qual é o elemento que você deve usar para deixar o texto em itálico para adicionar ênfase?

 ## --answers--

@@ -1,18 +1,18 @@
 ---
 id: 637f4e7972c65bc8e73dfe2b
 videoId: gW6cBZLUk6M
-title: Working With Text Question E
+title: Questão E de Trabalhando com textos
 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.
+Você deve ter notado que em todos os exemplos desta lição, você faz a indentação de elementos que estejam dentro de outros elementos. Isso é conhecido como aninhamento de elementos.

-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.
+Quando você aninha elementos dentro de outros elementos, cria um relacionamento de pai e filho entre eles. Os elementos aninhados são os filhos e o elemento dentro dos quais eles estão aninhados é o pai.

-In the following example, the `body` element is the parent and the `p` is the child:
+No exemplo seguinte, `body` é o pai e o elemento `p` é o filho:

 ```html
 <html>
@@ -24,9 +24,9 @@ In the following example, the `body` element is the parent and the `p` is the ch
 </html>
 ```

-Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+Assim como nas relações humanas, os elementos-pai do HTML podem ter muitos filhos. Elementos no mesmo nível de aninhamento são considerados irmãos.

-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:
+Por exemplo, os dois elementos `p` do código a seguir são irmãos, já que ambos são filhos de `body` e estão no mesmo nível de aninhamento um do outro:

 ```html
 <html>
@@ -39,27 +39,27 @@ For example, the two `p` elements in the following code are siblings, since they
 </html>
 ```

-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.
+Você usa a indentação para tornar o nível de aninhamento claro e legível para você e para outros desenvolvedores que trabalharão com o seu HTML no futuro. Recomenda-se a indentação de qualquer elemento filho com dois espaços.

-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.
+As relações de pai, filho e irmãos entre os elementos se tornarão muito mais importantes depois, ao começar a estilizar seu HTML com CSS e ao adicionar um comportamento com JavaScript. Agora, porém, é apenas importante conhecer a distinção entre o modo como os elementos estão relacionados e a terminologia utilizada para descrever as suas relações.

 # --question--

 ## --text--

-What relationship do two elements have if they are at the same level of nesting?
+Que relação existe entre dois elementos se eles estiverem no mesmo nível de aninhamento?

 ## --answers--

-The elements are each other's parents.
+Os elementos são os pais um do outro.

 ---

-The elements are each other's children.
+Os elementos são os filhos um do outro.

 ---

-The elements are siblings.
+Os elementos são irmãos.

 ## --video-solution--

@@ -1,18 +1,18 @@
 ---
 id: 637f4e8072c65bc8e73dfe2c
 videoId: gW6cBZLUk6M
-title: Working With Text Question F
+title: Questão F de Trabalhando com textos
 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.
+Você deve ter notado que em todos os exemplos desta lição, você faz a indentação de elementos que estejam dentro de outros elementos. Isso é conhecido como aninhamento de elementos.

-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.
+Quando você aninha elementos dentro de outros elementos, cria um relacionamento de pai e filho entre eles. Os elementos aninhados são os filhos e o elemento dentro dos quais eles estão aninhados é o pai.

-In the following example, the body element is the parent and the paragraph is the child:
+No exemplo seguinte, body é o pai e o parágrafo é o filho:

 ```html
 <html>
@@ -24,9 +24,9 @@ In the following example, the body element is the parent and the paragraph is th
 </html>
 ```

-Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+Assim como nas relações humanas, os elementos-pai do HTML podem ter muitos filhos. Elementos no mesmo nível de aninhamento são considerados irmãos.

-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:
+Por exemplo, os dois parágrafos do código a seguir são irmãos, já que ambos são filhos de body e estão no mesmo nível de aninhamento um do outro:

 ```html
 <html>
@@ -39,27 +39,27 @@ For example, the two paragraphs in the following code are siblings, since they a
 </html>
 ```

-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.
+Você usa a indentação para tornar o nível de aninhamento claro e legível para você e para outros desenvolvedores que trabalharão com o seu HTML no futuro. Recomenda-se a indentação de qualquer elemento filho com dois espaços.

-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.
+As relações de pai, filho e irmãos entre os elementos se tornarão muito mais importantes depois, ao começar a estilizar seu HTML com CSS e ao adicionar um comportamento com JavaScript. Agora, porém, é apenas importante conhecer a distinção entre o modo como os elementos estão relacionados e a terminologia utilizada para descrever as suas relações.

 # --question--

 ## --text--

-What relationship does an element have with any nested element within it?
+Qual é a relação que um elemento tem com outro elemento aninhado dentro dele?

 ## --answers--

-The element within the other element is called the parent element.
+O elemento dentro do outro elemento é chamado de elemento pai.

 ---

-The element within the other element is called the child element.
+O elemento dentro do outro elemento é chamado de elemento filho.

 ---

-The element within the other element is called the sibling element.
+O elemento dentro do outro elemento é chamado de elemento irmão.


 ## --video-solution--
@@ -1,16 +1,16 @@
 ---
 id: 637f4e8772c65bc8e73dfe2d
 videoId: gW6cBZLUk6M
-title: Working With Text Question G
+title: Questão G de Trabalhando com textos
 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.
+Os comentários em HTML não são visíveis para o navegador. Eles nos permitem comentar o código para que outros desenvolvedores ou você mesmo no futuro possam lê-los e ter algum contexto sobre algo que pode não estar claro no código.

-Writing an HTML comment is simple: You just enclose the comment with `<!--` and `-->`tags. For example:
+Escrever um comentário em HTML é simples: basta envolver o comentário com as tags `<!--` e `-->`. Por exemplo:

 ```html
 <h1> View the html to see the hidden comments </h1>
@@ -26,11 +26,11 @@ Writing an HTML comment is simple: You just enclose the comment with `<!--` and

 ## --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.
+Para praticar um pouco o trabalho com textos em HTML, crie uma página simples de artigos de blog que use títulos diferentes e parágrafos. Coloque algum texto nos parágrafos em negritos e em itálico. Você pode usar o [Lorem Ipsum](https://loremipsum.io) para gerar texto fictício, no lugar do texto real, enquanto cria seus sites.

 ## --text--

-How do you create HTML comments?
+Como você cria comentários em HTML?

 ## --answers--

@@ -16,7 +16,7 @@ Write a function `mode` to find the value that appears most in an array.

 # --hints--

-`mode` повинен бути функцією.
+`mode` має бути функцією.

 ```js
 assert(typeof mode === 'function');
@@ -28,7 +28,7 @@ dashedName: combinations

 # --hints--

-`combinations` мають бути функцією.
+`combinations` має бути функцією.

 ```js
 assert(typeof combinations === 'function');
@@ -36,7 +36,7 @@ dashedName: department-numbers

 # --hints--

-`combinations` мають бути функцією.
+`combinations` має бути функцією.

 ```js
 assert(typeof combinations === 'function');
@@ -35,43 +35,43 @@ dashedName: i-before-e-except-after-c
 assert(typeof IBeforeExceptC == 'function');
 ```

-`IBeforeExceptC("receive")` повинен повертати булеве значення.
+`IBeforeExceptC("receive")` має повертати булеве значення.

 ```js
 assert(typeof IBeforeExceptC('receive') == 'boolean');
 ```

-`IBeforeExceptC("receive")` повинен повертати `true`.
+`IBeforeExceptC("receive")` має повертати `true`.

 ```js
 assert.equal(IBeforeExceptC('receive'), true);
 ```

-`IBeforeExceptC("science")` повинен повертати `false`.
+`IBeforeExceptC("science")` має повертати `false`.

 ```js
 assert.equal(IBeforeExceptC('science'), false);
 ```

-`IBeforeExceptC("imperceivable")` повинен повертати `true`.
+`IBeforeExceptC("imperceivable")` має повертати `true`.

 ```js
 assert.equal(IBeforeExceptC('imperceivable'), true);
 ```

-`IBeforeExceptC("inconceivable")` повинен повертати `true`.
+`IBeforeExceptC("inconceivable")` має повертати `true`.

 ```js
 assert.equal(IBeforeExceptC('inconceivable'), true);
 ```

-`IBeforeExceptC("insufficient")` повинен повертати `false`.
+`IBeforeExceptC("insufficient")` має повертати `false`.

 ```js
 assert.equal(IBeforeExceptC('insufficient'), false);
 ```

-`IBeforeExceptC("omniscient")` повинен повертати `false`.
+`IBeforeExceptC("omniscient")` має повертати `false`.

 ```js
 assert.equal(IBeforeExceptC('omniscient'), false);
@@ -30,7 +30,7 @@ Write a function that takes the initial number of prisoners and `k` as parameter

 # --hints--

-`josephus` повинен бути функцією.
+`josephus` має бути функцією.

 ```js
 assert(typeof josephus == 'function');
@@ -30,7 +30,7 @@ A positive integer is a Kaprekar number if:

 # --hints--

-`isKaprekar` повинен бути функцією.
+`isKaprekar` має бути функцією.

 ```js
 assert(typeof isKaprekar == 'function');
@@ -16,7 +16,7 @@ Write a function that takes `width` and `height` as parameters and returns the n

 # --hints--

-`knightTour` повинен бути функцією.
+`knightTour` має бути функцією.

 ```js
 assert(typeof knightTour == 'function');
@@ -12,7 +12,7 @@ dashedName: last-friday-of-each-month

 # --hints--

-`lastFriday` повинен бути функцією.
+`lastFriday` має бути функцією.

 ```js
 assert(typeof lastFriday == 'function');
@@ -25,7 +25,7 @@ dashedName: last-letter-first-letter

 # --hints--

-`findLongestChain` повинен бути функцією.
+`findLongestChain` має бути функцією.

 ```js
 assert(typeof findLongestChain == 'function');
@@ -12,7 +12,7 @@ dashedName: leap-year

 # --hints--

-`isLeapYear` повинен бути функцією.
+`isLeapYear` має бути функцією.

 ```js
 assert(typeof isLeapYear == 'function');
@@ -20,7 +20,7 @@ Explicitly implement long multiplication.

 # --hints--

-`mult` повинен бути функцією.
+`mult` має бути функцією.

 ```js
 assert(typeof mult == 'function');
@@ -29,7 +29,7 @@ The Look and say sequence is a recursively defined sequence of numbers.

 # --hints--

-`lookAndSay` повинен бути функцією.
+`lookAndSay` має бути функцією.

 ```js
 assert(typeof lookAndSay == 'function');
@@ -84,7 +84,7 @@ $PA = LU$

 # --hints--

-`luDecomposition` повинне бути функцією.
+`luDecomposition` має бути функцією.

 ```js
 assert(typeof luDecomposition == 'function');
@@ -68,7 +68,7 @@ dashedName: lychrel-numbers

 # --hints--

-`isLychrel` повинен бути функцією.
+`isLychrel` має бути функцією.

 ```js
 assert(typeof isLychrel === 'function');
@@ -29,7 +29,7 @@ There are several so-called "self-describing" or "self-descriptive" integers.

 # --hints--

-`isSelfDescribing` повинен бути функцією.
+`isSelfDescribing` має бути функцією.

 ```js
 assert(typeof isSelfDescribing == 'function');
@@ -30,7 +30,7 @@ dashedName: self-referential-sequence

 # --hints--

-`selfReferential`має бути функцією.
+`selfReferential` має бути функцією.

 ```js
 assert(typeof selfReferential === 'function');
@@ -19,7 +19,7 @@ dashedName: sum-digits-of-an-integer

 # --hints--

-`sumDigits`повинна бути функцією.
+`sumDigits` має бути функцією.

 ```js
 assert(typeof sumDigits == 'function');
@@ -16,7 +16,7 @@ Compute the **n**<sup>th</sup> term of a <em>series</em>, i.e. the sum of the **

 # --hints--

-`sum` має бути функцію.
+`sum` має бути функцією.

 ```js
 assert(typeof sum == 'function');
@@ -22,7 +22,7 @@ dashedName: word-wrap

 # --hints--

-перенесення має бути функцією.
+wrap має бути функцією.

 ```js
 assert.equal(typeof wrap, 'function');
@@ -18,7 +18,7 @@ dashedName: zeckendorf-number-representation

 # --hints--

-`zeckendorf` повинен бути функцією.
+`zeckendorf` має бути функцією.

 ```js
 assert.equal(typeof zeckendorf, 'function');
@@ -85,7 +85,7 @@ $$\begin{array}{|c|c|c|} \\hline P9 & P2              & P3\\\\ \\hline P8 & \bol

 # --hints--

-`thinImage` повинно бути функцією.
+`thinImage` має бути функцією.

 ```js
 assert.equal(typeof thinImage, 'function');
@@ -26,7 +26,7 @@ A 'zig-zag' array is a square arrangement of the first $N^2$ integers, where the

 # --hints--

-Зигзагоподібна матриця має бути функцією.
+ZigZagMatrix має бути функцією.

 ```js
 assert.equal(typeof ZigZagMatrix, 'function');