freeCodeCamp/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-buil.../613e2546d0594208229ada50.md

2.1 KiB

id title challengeType dashedName
613e2546d0594208229ada50 Step 7 0 step-7

--description--

All'interno dell'elemento header, dai contesto alla pagina annidando degli elementi img, h1 e nav.

L'elemento img dovrebbe puntare al link https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg e avere un id con il valore logo.

L'elemento h1 dovrebbe contenere il testo HTML/CSS Quiz.

--hints--

Dovresti aggiungere un elemento img all'elemento header.

assert.exists(document.querySelector('header > img'));

Dovresti aggiungere un elemento h1 all'elemento header.

assert.exists(document.querySelector('header > h1'));

Dovresti aggiungere un elemento nav all'elemento header.

assert.exists(document.querySelector('header > nav'));

Dovresti posizionare gli elementi img, h1 e nav in questo ordine.

assert.exists(document.querySelector('img + h1 + nav'));

Dovresti dare all'elemento img un attributo src con il valore https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg.

assert.equal(document.querySelector('img')?.src, 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');

Dovresti dare all'elemento img un attributo id con il valore logo.

assert.equal(document.querySelector('img')?.id, 'logo');

Dovresti dare all'elemento h1 il testo HTML/CSS Quiz.

assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz');

--seed--

--seed-contents--

<!DOCTYPE html>
<html lang="en">
  <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" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
--fcc-editable-region--
    <header>

    </header>
--fcc-editable-region--
    <main></main>
  </body>
</html>

body {
    background: #f5f6f7;
    color: #1b1b32;
    font-family: Helvetica;
    margin: 0;
}