chore(i18n,learn): processed translations (#45493)
This commit is contained in:
camperbot
GitHub
@@ -7,9 +7,9 @@ dashedName: step-2
|
||||
|
||||
# --description--
|
||||
|
||||
Você já deve estar familiarizado com a tag `meta`. Ela é usada para especificar informações sobre a página como título, descrição, palavras-chave e autor.
|
||||
Você já deve estar familiarizado com o elemento `meta`. Ele é usado para especificar informações sobre a página como título, descrição, palavras-chave e autor.
|
||||
|
||||
Dê à página uma tag `meta` com um valor apropriado para `charset`.
|
||||
Dê à página um elemento `meta` com um valor apropriado para `charset`.
|
||||
|
||||
O atributo `charset` especifica a codificação de caracteres da página e, hoje em dia, `UTF-8` é a única codificação suportada pela maioria dos navegadores.
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-3
|
||||
|
||||
# --description--
|
||||
|
||||
Continuando com as tags `meta`, uma definição de `viewport` informa ao navegador como renderizar a página. Sua inclusão melhora a acessibilidade visual no celular e a _SEO_ (otimização de mecanismos de busca).
|
||||
Continuando com os elementos `meta`, uma definição de `viewport` informa ao navegador como renderizar a página. Sua inclusão melhora a acessibilidade visual no celular e a _SEO_ (otimização de mecanismos de busca).
|
||||
|
||||
Adicione uma definição de `viewport` com um atributo `content` detalhando a `width` (largura) e a `initial-scale` (escala inicial) da página.
|
||||
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 61329d52e5010e08d9b9d66b
|
||||
title: Etapa 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Outro elemento `meta` importante para a acessibilidade e para a SEO é a `description`. O valor do atributo `content` é usado pelos mecanismos de busca para fornecer uma descrição de sua página.
|
||||
|
||||
Adicione um elemento `meta` com o atributo `name` definido como `description`, e dê a ele um atributo `content`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar um novo elemento `meta` à `head`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('meta').length, 3);
|
||||
```
|
||||
|
||||
Você deve dar ao elemento `meta` um atributo `name` de `description`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('meta[name="description"]'));
|
||||
```
|
||||
|
||||
Você deve dar ao elemento `meta` um atributo `content`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelector('meta[name="description"]')?.content);
|
||||
```
|
||||
|
||||
O valor do atributo `content` não deve ter mais de 165 caracteres. _Esse é o tamanho máximo da descrição para o Google._
|
||||
|
||||
```js
|
||||
assert.isAtMost(document.querySelector('meta[name="description"]')?.content?.length, 165);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 6133acc353338c0bba9cb553
|
||||
title: Etapa 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Por fim, em `head`, o elemento `title` é útil para que os leitores de tela entendam o conteúdo de uma página. Além disso, ele é uma parte importante para a _SEO_.
|
||||
|
||||
Dê à sua página um `title` que seja descritivo e conciso.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar um elemento `title` à `head`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('head > title'));
|
||||
```
|
||||
|
||||
Você não deve permitir que o `title` seja maior do que 60 caracteres.
|
||||
|
||||
```js
|
||||
assert.isAtMost(document.querySelector('head > title')?.textContent?.length, 60);
|
||||
```
|
||||
|
||||
Tente ser mais descritivo com o elemento `title`. _Dica: use ao menos 15 caracteres_
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelector('head > title')?.textContent?.length, 15);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
id: 614ccc21ea91ef1736b9b578
|
||||
title: Etapa 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Boas-vindas à primeira parte do questionário com acessibilidade. Como você está se tornando um desenvolvedor HTML e CSS experiente, já iniciaremos com o boilerplate básico.
|
||||
|
||||
Inicie esta jornada de acessibilidade, fornecendo um atributo `lang` ao seu elemento `html`. Isto ajudará os leitores de tela a identificar o idioma da página.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar ao elemento `html` um atributo `lang`. _Dica: você pode usar o valor `en` para o inglês._
|
||||
|
||||
```js
|
||||
assert.match(code, /<html\s+lang=('|")[\w\-]+?\1\s*>/i);
|
||||
// TODO: This should/could be fixed in the builder.js
|
||||
// assert.notThrow(Intl.getCanonicalLocales(document.querySelector('html').lang));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
--fcc-editable-region--
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user