Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

Hello everyone !

I’m struggling with the last part of this project : the media queries.
“Your Technical Documentation project should use at least one media query.”

I did 4 media queries and I can’t submit my code, it doesn’t work. Everything’s good but not this, even though I put media queries.

I put them at the end of the code, thinking it would work, but it won’t. It doesn’t even display the way it should, it works just fine in VSCode but not in the preview here.

To test it, I put another media queries that changed the color avec the header. It worked in the preview, but I still can’t submit my project.

I don’t understand.

Thanks in advance ! :slight_smile:

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Technical Documentation Page</title>
  </head>

  <body>
    <nav id="navbar">
      <header>Documentation HTML</header>
      <ul>
        <li>
          <a class="nav-link" href="#Introduction">Introduction</a>
        </li>
        <li>
          <a class="nav-link" href="#Balise_head">Balise head</a>
        </li>
        <li>
          <a class="nav-link" href="#Balise_title">Balise title</a>
        </li>
        <li>
          <a class="nav-link" href="#Balise_body">Balise body</a>
        </li>
        <li>
          <a class="nav-link" href="#Balise_header">Balise header</a>
        </li>
        <li>
          <a class="nav-link" href="#Balise_footer">Balise footer</a>
        </li>
        <li>
          <a class="nav-link" href="#References">References</a>
        </li>
      </ul>
    </nav>

    <main id="main-doc">
      <section class="main-section" id="Introduction">
        <header>Introduction</header>
        <p>
          HTML signifie « HyperText Markup Language » qu'on peut traduire par «
          langage de balises pour l'hypertexte ». Il est utilisé afin decréer et
          de représenter le contenu d'une page web et sa structure.D'autres
          technologies sont utilisées avec HTML pour décrire laprésentation
          d'une page (<a
            href="https://developer.mozilla.org/fr/docs/Web/CSS"
            target="_blank"
            >CSS</a
          >) et/ou ses fonctionnalités interactives (<a
            href="https://developer.mozilla.org/fr/docs/Web/JavaScript"
            target="_blank"
            >JavaScript</a
          >)
        </p>
        <p>
          L'« hypertexte » désigne les liens qui relient les pages web
          entreelles, que ce soit au sein d'un même site web ou entre
          différentssites web. Les liens sont un aspect fondamental du Web. Ce
          sont euxqui forment cette « toile » (ce mot est traduit par web en
          anglais).En téléchargeant du contenu sur l'Internet et en le reliant à
          despages créées par d'autres personnes, vous devenez un
          participantactif du World Wide Web.
        </p>
        <p>
          Le langage HTML utilise des « balises » pour annoter du texte,
          desimages et d'autres contenus afin de les afficher dans un
          navigateurweb. Le balisage HTML comprend des « éléments » spéciaux
          tels que :
        </p>
        <ul>
          <li><code>&lt;head&gt;</code></li>
          <li><code>&lt;title&gt;</code></li>
          <li><code>&lt;body&gt;</code></li>
          <li><code>&lt;header&gt;</code></li>
          <li><code>&lt;footer&gt;</code></li>
          <li>etc</li>
        </ul>
        <p>
          En HTML, les balises sont insensibles à la casse et peuvent aussibien
          être écrites en minuscules, en majuscules voire avec un mélangedes
          deux.
        </p>
      </section>

      <section class="main-section" id="Balise_head">
        <header>Balise head</header>
        <p>
          L'élément HTML
          <code> &lt;head&gt; </code>
          fournit des informations générales (métadonnées) sur le document,
          incluant son titre et des liens ou des définitions vers des scripts et
          feuilles de style.
        </p>
        <p>
          <strong>Note :</strong>L'élément

          <code> &lt;head&gt; </code>contient principalement des données
          destinées au traitement automatisé et pas nécessairement lisibles par
          des humains. Pour afficher des informations lisibles pour les
          utilisateurs dans des en-têtes ou titre, voir l'élément
          header
        </p>
        <p>Exemple :</p>
        <code>
          &lt;html&gt;<br />
          &emsp;&lt;head&gt;<br />
          &emsp;&emsp;&lt;title&gt;Titre du document&lt;/title&gt;<br />
          &emsp;&lt;/head&gt;<br />
          &lt;/html&gt;
        </code>
        <p>
          <strong>Note :</strong>La plupart des navigateurs conformes à HTML5
          construisent automatiquement l'élément <code> &lt;head&gt; </code> si
          les balises sont omises dans le balisage.
        </p>
      </section>

      <section class="main-section" id="Balise_title">
        <header>Balise title</header>
        <p>
          L'élément <code> &lt;title&gt; </code> définit le titre du document
          (qui est affiché dans la barre de titre du navigateur ou dans l'onglet
          de la page). Cet élément ne peut contenir que du texte, les balises
          qu'il contiendrait seraient ignorées.
        </p>
        <p>
          <strong>Note :</strong>L'élément <code> &lt;title&gt; </code> est
          toujours utilisé au sein de l'élément <code> &lt;head&gt; </code>
        </p>
        <p>
          Pour le référencement (SEO), le titre d'une page fait partie des
          éléments principaux qui sont scannés lors de l'indexation d'une page.
          C'est aussi le texte qui est affiché parmi les résultats du moteur de
          recherche, de façon proéminente et donc visible par les utilisateurs
          qui trouvent votre site grâce à un moteur de recherche. Ainsi il
          vaudra mieux avoir des titres descriptifs plutôt que des titres trop
          courts ou trop vagues
        </p>
      </section>

      <section class="main-section" id="Balise_body">
        <header>Balise body</header>
        <p>
          L'élément HTML <code> &lt;body&gt; </code> représente le contenu
          principal du document HTML. Il ne peut y avoir qu'un élément
          <code> &lt;body&gt; </code> par document.
        </p>
        <p>Exemple :</p>
        <code>
          &lt;html&gt;<br />
          &emsp;&lt;head&gt;<br />
          &emsp;&emsp;&lt;title&gt;Titre du document&lt;/title&gt;<br />
          &emsp;&lt;/head&gt;<br />
          &emsp;&lt;body&gt;<br />
          &emsp;&emsp;&lt;h1&gt;Exemple de titre&lt;/h1&gt;<br />
          &emsp;&lt;/body&gt;<br />
          &lt;/html&gt;
        </code>
      </section>

      <section class="main-section" id="Balise_header">
        <header>Balise header</header>
        <p>
          L'élément HTML <code> &lt;header&gt; </code> représente du contenu
          introductif, généralement un groupe de contenu introductif ou de
          contenu aidant à la navigation. Il peut contenir des éléments de
          titre, mais aussi d'autres éléments tels qu'un logo, un formulaire de
          recherche, le nom d'auteur, etc.
        </p>
        <p>Exemple :</p>
        <code>
          &lt;html&gt;<br />
          &emsp;&lt;head&gt;<br />
          &emsp;&emsp;&lt;title&gt;Titre du document&lt;/title&gt;<br />
          &emsp;&lt;/head&gt;<br />
          &emsp;&lt;body&gt;<br />
          &emsp;&emsp;&lt;header&gt;<br />
          &emsp;&emsp;&emsp;&lt;h1&gt;Exemple de titre&lt;/h1&gt;<br />
          &emsp;&emsp;&lt;/header&gt;<br />
          &emsp;&emsp;&lt;main&gt;<br />
          &emsp;&emsp;&emsp;&lt;p&gt;Exemple de paragraphe&lt;/p&gt;<br />
          &emsp;&emsp;&lt;/main&gt;<br />
          &emsp;&lt;/body&gt;<br />
          &lt;/html&gt;
        </code>
      </section>

      <section class="main-section" id="Balise_footer">
        <header>Balise footer</header>
        <p>
          L'élément HTML <code> &lt;footer&gt; </code> représente le pied de
          page de la section ou de la racine de sectionnement la plus proche. Un
          élément <code> &lt;footer&gt; </code> contient habituellement des
          informations sur l'autrice ou l'auteur de la section, les données
          relatives au droit d'auteur (copyright) ou les liens vers d'autres
          documents en relation.
        </p>
        <p>Exemple :</p>
        <code>
          &lt;html&gt;<br />
          &emsp;&lt;head&gt;<br />
          &emsp;&emsp;&lt;title&gt;Titre du document&lt;/title&gt;<br />
          &emsp;&lt;/head&gt;<br />
          &emsp;&lt;body&gt;<br />
          &emsp;&emsp;&lt;header&gt;<br />
          &emsp;&emsp;&emsp;&lt;h1&gt;Exemple de titre&lt;/h1&gt;<br />
          &emsp;&emsp;&lt;/header&gt;<br />
          &emsp;&emsp;&lt;main&gt;<br />
          &emsp;&emsp;&emsp;&lt;p&gt;Exemple de paragraphe&lt;/p&gt;<br />
          &emsp;&emsp;&lt;/main&gt;<br />
          &emsp;&emsp;&lt;footer&gt;<br />
          &emsp;&emsp;&emsp;&lt;p&gt;Exemple de footer&lt;/p&gt;<br />
          &emsp;&emsp;&lt;/footer&gt;<br />
          &emsp;&lt;/body&gt;<br />
          &lt;/html&gt;
        </code>
      </section>

      <section class="main-section" id="References">
        <header>References</header>
        <p>
          Toute la documentation sur cette page vient du site
          <a href="https://developer.mozilla.org/fr/" target="_blank">MDN</a>
        </p>
      </section>
    </main>
  </body>
</html>

* {
  box-sizing: border-box;
}

body {
  display: grid;
  grid-template-columns: 30% 70%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 30px 30px 30px 0;
  min-height: 100vh;
}

a {
  text-decoration: none;
}

#navbar ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
}

#navbar li {
  list-style: none;
}

header {
  font-size: 1.5rem;
  color: red;
}

.main-section:not(:first-of-type) {
  margin-top: 50px;
}

.main-section code {
  background-color: rgba(128, 128, 128, 0.304);
}

/* -----MEDIA QUERIES */

body {
  @media screen and (max-width: 950px) {
    display: block;
    margin: 30px 0;
  }
}

#nav-bar ul {
  @media screen and (max-width: 950px) {
    flex-direction: row;
  }
  @media screen and (max-width: 750px) {
    flex-wrap: wrap;
  }
}

#main-doc {
  @media screen and (max-width: 950px) {
    margin: auto 30px;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

Your all @media queries are in the wrong position. media query is a css selector, not a property of it.

here’s a step-by-step guide to coding a media query:

  1. Identify the Conditions: Determine the conditions under which you want your styles to apply. This could include things like screen size, device orientation, resolution, etc.

  2. Define the Media Query: Start by using the @media rule in your CSS file. After @media, specify the media type (e.g., screen, print, all) followed by any additional conditions enclosed in parentheses. For example: @media screen and (max-width: 768px) { }

  3. Specify the Styles: Within the curly braces { } of your media query, define the CSS properties and values that you want to apply when the conditions are met. These styles will only be applied if the conditions specified in the media query are true.

  4. Test and Adjust: Test your media query in different scenarios to ensure that it behaves as expected. You may need to adjust the conditions or styles based on the specific requirements of your project and the devices you’re targeting.

  5. Repeat as Needed: You can include multiple media queries in your CSS file to target different conditions or breakpoints. This allows you to create responsive designs that adapt to various screen sizes and devices.

By following these steps, you can effectively use media queries to create responsive and adaptive designs that provide a consistent user experience across different devices and screen resolutions.

Thanks ! :slight_smile:
I always did the media queries like above, I will do it the other way now !

Your welcome. Keep it up, happy Coding :slightly_smiling_face:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.