Tell us what’s happening:
I always get the error message number 8. and I’ve checked the code several times and is still shows up.
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">
<title>Technical Documentation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header>CSS Documentation</header>
<a href="#introduction_to_css" class="nav-link">Introduction to CSS</a>
<a href="#selectors_and_combinators" class="nav-link">Selectors and Combinators</a>
<a href="#the_box_model_and_layout" class="nav-link">The Box Model and Layout</a>
<a href="#responsive_design_and_media_queries" class="nav-link">Responsive Design and Media Queries</a>
<a href="#common_properties" class="nav-link">Common Properties</a>
</nav>
<main id="main-doc">
<section class="main-section" id="introduction_to_css">
<header>
<h1>Introduction to CSS</h1>
</header>
<p>CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation and formatting of HTML elements on a webpage.</p>
<p>It controls the layout, color, fonts, and spacing of elements, allowing web developers to design visually appealing and consistent web pages across multiple devices.</p>
<ul>
<li><b>CSS Syntax:</b> CSS is written using selectors that target HTML elements and apply styles through properties and values.</li>
<li><b>Example Syntax:</b></li>
</ul>
<code>
selector {<br>
property: value;<br>
}
</code>
<p><b>Example:</b></p>
<code>
h1 {<br>
color: blue;<br>
font-size: 24px;<br>
}
</code>
</section>
<section class="main-section" id="selectors_and_combinators">
<header>
<h1>Selectors and Combinators</h1>
</header>
<p>CSS Selectors are patterns used to select and style HTML elements. There are several types of selectors:</p>
<ul>
<li><b>Basic Selectors:</b>
<ul>
<li><b>Element Selector:</b> Targets an HTML element. E.g., <code>p { }</code></li>
<li><b>Class Selector:</b> Targets elements with a specific class. E.g., <code>.my-class { }</code></li>
<li><b>ID Selector:</b> Targets a specific element with an ID. E.g., <code>#my-id { }</code></li>
</ul>
</li>
<li><b>Combinators:</b> These are used to target elements based on their relationship to others.
<ul>
<li><b>Descendant Selector:</b> Targets all elements that are descendants of a specified element. E.g., <code>div p { }</code></li>
<li><b>Child Selector:</b> Targets only direct children of an element. E.g., <code>div > p { }</code></li>
</ul>
</li>
<li><b>Advanced Selectors:</b>
<ul>
<li><b>Attribute Selectors:</b> Targets elements based on their attributes. E.g., <code>input[type="text"] { }</code></li>
<li><b>Pseudo-classes:</b> Apply styles to elements in a specific state. E.g., <code>a:hover { }</code></li>
<li><b>Pseudo-elements:</b> Target specific parts of elements, like first lines or letters. E.g., <code>p::first-line { }</code></li>
</ul>
</li>
</ul>
</section>
<section class="main-section" id="the_box_model_and_layout">
<header>
<h1>The Box Model and Layout</h1>
</header>
<p>The CSS Box Model is fundamental for understanding how elements are structured and displayed on a webpage.</p>
<p>Every HTML element is a rectangular box consisting of:</p>
<ul>
<li><b>Content:</b> The actual content of the element (text, image, etc.)</li>
<li><b>Padding:</b> Space between the content and the border.</li>
<li><b>Border:</b> The edge surrounding the padding (optional).</li>
<li><b>Margin:</b> Space outside the border, separating the element from other elements.</li>
</ul>
<p><b>Example:</b></p>
<code>
div {<br>
width: 200px;<br>
padding: 10px;<br>
border: 1px solid black;<br>
margin: 20px;<br>
}
</code>
<h2>Layout Techniques:</h2>
<ul>
<li><code>float:</code> Allows elements to float to the left or right of their container, causing surrounding text or elements to wrap around them.</li>
<li><code>display:</code> Controls how an element is displayed on the page.
<ul>
<li><code>block:</code> The element is displayed as a block-level element.</li>
<li><code>inline:</code> The element is displayed inline with the content.</li>
<li><code>flex:</code> Enables flexible layouts.</li>
<li><code>grid:</code> Enables grid layouts for complex designs.</li>
</ul>
</li>
</ul>
</section>
<section class="main-section" id="responsive_design_and_media_queries">
<header>
<h1>Responsive Design and Media Queries</h1>
</header>
<p>Responsive Design ensures that websites look good on all devices by adjusting layout, images, and fonts based on screen size.</p>
<p>Media Queries allow you to apply CSS rules only when certain conditions, such as screen width or device orientation, are met.</p>
<p><b>Syntax:</b></p>
<code>
@media (max-width: 768px) {<br>
body {<br>
font-size: 14px;<br>
}<br>
}
</code>
<ul>
<li><code>max-width:</code> Applies styles when the viewport is at or below the specified width.</li>
<li><code>min-width:</code> Applies styles when the viewport is at or above the specified width.</li>
</ul>
</section>
<section class="main-section" id="common_properties">
<header>
<h1>Common Properties</h1>
</header>
<p>CSS offers a wide range of properties to control the appearance of HTML elements.</p>
<p>Here are some of the most common ones:</p>
<ul>
<li><b>Text Styling:</b>
<ul>
<li><code>color:</code> Sets the text color. E.g., <code>color: red;</code></li>
<li><code>font-size:</code> Defines the size of the text. E.g., <code>font-size: 16px;</code></li>
<li><code>font-family:</code> Specifies the font type. E.g., <code>font-family: Arial, sans-serif;</code></li>
<li><code>text-align:</code> Aligns text within an element. E.g., <code>text-align: center;</code></li>
</ul>
</li>
<li><b>Background and Borders:</b>
<ul>
<li><code>background-color:</code> Sets the background color of an element. E.g., <code>background-color: lightblue;</code></li>
<li><code>background-image:</code> Sets a background image. E.g., <code>background-image: url('image.jpg');</code></li>
<li><code>border:</code> Sets the border for an element. E.g., <code>border: 1px solid black;</code></li>
</ul>
</li>
<li><b>Spacing:</b>
<ul>
<li><code>margin:</code> Sets the margin for an element. E.g., <code>margin: 20px;</code></li>
<li><code>padding:</code> Sets the padding for an element. E.g., <code>padding: 10px;</code></li>
</ul>
</li>
</ul>
</section>
</main>
</body>
</html>
* Global Styles */
* {
font-family: helvetica, arial, sans-serif; /* Ensure sans-serif fallback */
}
code {
background-color: #f4f4f4; /* Background for code snippets */
color: #d63384; /* Code text color */
padding: 0.4rem 0.6rem; /* Padding around code */
border-radius: 5px; /* Rounded corners */
font-family: monospace; /* Monospace font for code */
font-size: 1rem; /* Font size for code */
display: inline-block; /* Inline-block display for code */
margin: 0.25rem 0; /* Margin around code snippets */
}
/* Navbar Styles */
#navbar {
position: fixed;
display: flex;
flex-direction: column;
left: 0;
top: 0;
width: 250px; /* Set the width of the navbar */
height: 100vh; /* Full height of the viewport */
background-color: #f4f4f4; /* Light background for navbar */
border-right: 2px solid #ccc; /* Right border for separation */
}
/* Navbar Header */
#navbar header {
background-color: #EAEAEA; /* Header background */
padding: 16px; /* Padding inside header */
border-bottom: solid 1px; /* Bottom border for header */
font-weight: bold; /* Bold text */
}
/* Navbar Links */
#navbar a {
margin: 0.5rem 0; /* Spacing between links */
padding: 0.5rem; /* Internal padding for clickable area */
text-decoration: none; /* Remove underline from links */
color: #000; /* Link text color */
border-bottom: solid 1px; /* Bottom border for each link */
transition: background-color 0.3s ease; /* Smooth hover transition */
}
/* Navbar Link Hover Effect */
#navbar a:hover {
background-color: #FFCFE7; /* Change background on hover */
}
/* Main Document Styles */
#main-doc {
margin-left: 250px; /* Space for navbar */
padding: 1rem; /* Padding for main content */
}
/* Responsive Styles */
@media (max-width: 768px) {
body {
font-size: 14px; /* Smaller font size for mobile */
}
#navbar {
width: 200px; /* Adjust navbar width for smaller screens */
}
#main-doc {
margin-left: 200px; /* Match margin to navbar width on smaller screens */
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0.1 Safari/605.1.15
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
