Tell us what’s happening:
Hello, I need help on my HTML code because none of my header seems seen by the verification, i always get the same error “none of your header should be empty”.
did i wrote something wrong ?
Any advice ?
Thank you !
Your code so far
<!-- file: index.html -->
<!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"/>
</head>
<body>
<nav id="navbar">
<header>CSS Viewport meta tag</header>
<li >
<a class="nav-link" href="#Viewport_meta_tag">Viewport meta tag</a>
</li>
<li >
<a class="nav-link" href="#Background">Background</a>
</li>
<li>
<a class="nav-link" href="#Viewport_basics">Viewport basics</a>
</li>
<li>
<a class="nav-link" href="#Screen_density">Screen density</a>
</li>
<li>
<a class="nav-link"href="#Viewport_width_and_screen_width">Viewport width and screen width</a>
</li>
</nav>
<main id="main-doc">
<section class="main-section" id="Viewport_meta_tag"><header>Viewport meta tag</header>
<p>This article describes how to use the "viewport" <code>< meta ></code> tag to control the viewport's size and shape.<p>
</section>
<section class="main-section"id ="Background"><header>Background</header>
<article>
<p>The browser's viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.</p>
<p>Some mobile devices and other narrow screens render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then zoom and pan to look more closely at different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.</p>
<p>This is done because not all pages are optimized for mobile and break (or at least look bad) when rendered at a small viewport width. This virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices.</p>
<p>However, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques. The viewport <meta> element mitigates this problem of virtual viewport on narrow screen devices.</p>
</article>
</section>
<section class="main-section" id="Viewport_basics"><header>Viewport basics</header>
<ul>
<p>The viewport is a comma-separated list of feature and value pairs. A typical mobile-optimized site contains something like the following:</p>
<p>Not all devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations.</p>
<p>
<li>
<p class="code-list"><code>width</code></p>
<p>The basic attributes of the "viewport" <code>< meta ></code> element include:
</p>
</li>
<li><p class="code-list"><code>height</code></p>
<p>
Controls the (minimum) size of the viewport (see viewport width and screen width). It can be set to a specific number of pixels like <code>width=600</code> or to the special value <code>device-width</code>, which is the physical size of the device screen in CSS pixels. This value establishes the value of the vw unit. Minimum: 1. Maximum: 10000. Negative values: ignored.
</p>
</li>
<li><p class="code-list"><code>initial-scale</code></p>
<p>
Controls the zoom level when the page is first loaded. Minimum: 0.1. Maximum: 10. Default: 1. Negative values: ignored.
</p>
</li>
<li><p class="code-list"><code>minimum-scale</code></p>
<p>
Controls how much zoom out is allowed on the page. Minimum: 0.1. Maximum: 10. Default: 0.1. Negative values: ignored.
</p>
</li>
<li><p class="code-list"><code>maximum-scale</code></p>
<p>
Controls how much zoom in is allowed on the page. Any value less than 3 fails accessibility. Minimum: 0.1. Maximum: 10. Default: 10. Negative values: ignored.
</p>
</li>
</ul>
</section>
<section class="main-section" id="Screen_density"><header>Screen density</header>
<p>
Screen resolutions have risen to the size that individual pixels are indistinguishable by the human eye. For example, smartphones often have small screens with resolutions upwards of 1920–1080 pixels (≈400dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially, this caused usability and readability problems on many touch-optimized websites.
</p>
<p>
On high dpi screens, pages with <code>initial-scale=1</code> will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images may not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties.
</p>
<p>
The default pixel ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor (density/150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.
</p>
</section>
<section class="main-section" id="Viewport_width_and_screen_width"><header>Viewport width and screen width</header>
<p>
Sites can set their viewport to a specific size. For example, the definition <code>"width=320, initial-scale=1"</code> can be used to fit precisely onto a small phone display in portrait mode. This can cause problems when the browser renders a page at a larger size. To fix this, browsers will expand the viewport width if necessary to fill the screen at the requested scale. This is especially useful on large-screen devices.
</p>
<p>
For pages that set an initial or maximum scale, this means the <code>width</code> property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:
</p>
</section>
</main>
</body>
</html>
/* file: styles.css */
header{
font-size:30px;
}
code{
background-color:lightgrey;
border-radius:4px;
padding:2px 3px;
margin:2px;
}
p{
padding-left:15px;
text-align:justify;
}
ul{
padding:0;
}
li{
list-style-type:none;
}
li p:not(.code-list){
list-style-type:none;
padding-left:35px;
}
nav{
width:300px;
height:100%;
position:fixed;
border:1px solid black;
padding:4px;
}
main{
position:absolute;
left:340px;
top:25px;
}
a:active , a:hover, a:visited{
color:black;
}
a{
font-size:30px;
color:black;
text-decoration: none;
}
#navbar li{
padding:12px 8px 7px 10px ;
border-bottom:1px solid black;
}
#navbar header{
font-weight:bold;
font-size:28px;
padding:12px 8px 7px 10px ;
}
#navbar li:first-of-type{
border-top:1px solid black;
}
@media (max-width:700px) {
main{
position:absolute;
left:0px;
}
#navbar{
visibility: hidden;
}
}
#navbar{
min-width:30px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 OPR/114.0.0.0
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page