Technical Documentation Page - Build a Technical Documentation Page

hi guys,
i’m unsure what to do with media queries.

<!-- file: index.html -->
<main id="main-doc">
  <nav id="navbar">
    <header>
      <a href="#Introduction" class="nav-link">Introduction</a>
      <a href="#What_you_should_already_know"  class="nav-link">What you should already know</a>
      <a href="#JavaScript_and_Java"  class="nav-link">JavaScript and Java</a>
      <a href="#Hello_world"  class="nav-link">Hello world</a>
      <a href="#Variables"  class="nav-link">Variables</a>
    </header>
  </nav>
  <!-- СЕКЦИЯ -->
<section class="main-section" id="Introduction">
  <header>
    <p>Introduction</p>
    </header>
       <p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
    <p>JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:</p>
</section>
 <!-- СЕКЦИЯ -->
<section class="main-section" id="What_you_should_already_know">
  <header>
    <p>What you should already know</p>
    </header>
<p>avaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.</p>
<ul>
  <li>A general understanding of the Internet and the World Wide Web (WWW).</li>
    <li>A general understanding of the Internet and the World Wide Web (WWW).</li>
      <li>A general understanding of the Internet and the World Wide Web (WWW).</li>
    <li>A general understanding of the Internet and the World Wide Web (WWW).</li>
      <li>A general understanding of the Internet and the World Wide Web (WWW).</li>
    <li>A general understanding of the Internet and the World Wide Web (WWW).</li>
  <ul>
<p>
  In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype-based object model instead of the more common class-based object model. The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements. Functions can be properties of objects, executing as loosely typed methods.
  </p>
  <code>&lt;div&gt;</code> 
  <code>&lt;div&gt;</code>
  <code>&lt;div&gt;</code>
  <code>&lt;div&gt;</code>
  <code>&lt;div&gt;</code>
<p>avaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.</p>
</section>
 <!-- СЕКЦИЯ -->
<section class="main-section" id="JavaScript_and_Java">
  <header>
    <p>JavaScript and Java</p>
    </header>
</section>
 <!-- СЕКЦИЯ -->
<section class="main-section" id="Hello_world">
  <header>
    <p>Hello world</p>
     </header>
    <p>avaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.</p>
   
</section>
 <!-- СЕКЦИЯ -->
<section class="main-section" id="Variables">
  <header>
    <p>Variables</p>
     </header>
    <p>avaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.</p>
   
</section>
  
  </main>
/* file: styles.css */


@media(max-width:600px){
  section {
    background-color: blue;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

Hello @asiyakylik !

Good attempt!

Here is a great article found in fCC News category explaining @media queries and how to use them.

FCC News Media Query

Keep up the good progress!

I’m a little new to web design, but I believe user interface design (or “UI” design) on the web today is mobile-first. That is, you start by thinking about how your page will look on screens <400px, and then when the screen is between 400px and 600px, etc.

So, notice how user stories 14 and 15 are written:

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

Your technical documentation should use at least one media query

The special styling occurs when the screen is large enough to be considered “regular size.” When the screen is at least “regular size,” the nav bar should be on the left edge of the page. But when the screen is smaller than “regular size,” the nav bar should be somewhere else (you decide). The “should always be visible to the user” part seems like just a precaution for you not to do anything strange with the nav bar. Keep it visible, just put it somewhere else on the page.

Notice that @media is perfect for manipulating styles like this, because @media can be used to detect the screen width. Your code already demonstrates that you know what it does – changes styles based on screen width. Think about what you want the page and the nav bar to do below “regular size” and above “regular size.” (You’ll have to figure out what that “regular size” should be.)

Hello, again, @asiyakylik !

I just realized that the basic boiler plate is completely missing from the technical code.
This means that the connection between the html index and the css styles is also missing.

Once that is added, and a tiny adjustment to the @media query, your code should pass for you.

Keep up the great job.

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