Tell us what’s happening:
These are the problems that I can’t solve. “ 8. Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_) for the id’s.
20. Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id).”
Like I don’t know how to do the 20 point and I did the 8 one twice but it’s not proving.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="full-page">
<nav id="navbar">
<header>CSS Magic ✨</header>
<ul>
<li><a href="#Introduction_to_CSS" class="nav-link">Introduction to CSS</a></li>
<li><a href="#Basic_Concepts" class="nav-link">Basic Concepts</a></li>
<li><a href="#CSS_Selectors" class="nav-link">CSS Selectors</a></li>
<li><a href="#CSS_Box_Model" class="nav-link">CSS Box Model</a></li>
<li><a href="#CSS_Layout" class="nav-link">CSS Layout</a></li>
<li><a href="#Styling_Text" class="nav-link">Styling Text</a></li>
<li><a href="#Backgrounds_and_Borders" class="nav-link">Backgrounds and Borders</a></li>
<li><a href="#Responsive_Design" class="nav-link">Responsive Design</a></li>
<li><a href="#Advanced_Topics" class="nav-link">Advanced Topics</a></li>
<li><a href="#Best_Practices" class="nav-link">Best Practices</a></li>
</ul>
</nav>
<div id="main-doc">
<section id="Introduction_to_CSS" class="main-section">
<header>Introduction to CSS</header>
<p>What is CSS? CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It is a cornerstone technology of the web, alongside HTML and JavaScript, that enables the separation of content from design.
Importance of CSS in Web Development CSS is essential for web development because it allows developers to:</p>
<ul><li><b>Control Layout and Appearance:</b> Define how HTML elements are displayed on the screen, ensuring a consistent look across different pages and devices.</li>
<li><b>Enhance User Experience:</b> Improve the visual appeal and usability of web pages by applying styles like colors, fonts, spacing, and animations.</li>
<li><b>Responsive Design:</b> Create flexible layouts that adapt to various screen sizes and devices, ensuring an optimal viewing experience for all users.</li>
<li><b>Maintainability:</b> Keep the style information separate from the content, making it easier to manage and update the look of a website without altering the HTML structure.</li>
</ul>
</section>
<section id="Basic_Concepts" class="main-section">
<header>Basic Concepts</header>
<p><b>Syntax</b> CSS is composed of rules that specify how HTML elements should be styled. Each rule consists of a selector and a declaration block.</p>
<pre><code>
selector {
property: value;
}
</code></pre>
<ul>
<li><b>Selector:</b> Targets the HTML element to be styled.</li>
<li><b>Declaration Block:</b> Contains one or more declarations separated by semicolons. Each declaration includes a CSS property and its value, separated by a colon.</li>
</ul>
<p>Selectors Selectors are used to "select" the HTML elements you want to style. Here are a few basic types:</p>
<ul>
<li><b>Element Selector:</b> Targets all elements of a given type.
<pre><code> p {
color: blue;
}
</code></pre>
</li>
<li><b>ID Selector:</b> Targets a single unique element by its ID.
<pre><code>
#unique-id {
font-size: 20px;
}
</code></pre>
</li>
<li>
<b>Class Selector:</b> Targets elements with a specific class attribute.
<pre><code>
.class-name {
margin: 10px;
}
</code></pre>
</li>
</ul>
<p><b>Properties and Values</b> CSS properties define the styles to be applied to elements, and values specify the settings for those properties.</p>
<pre><code>
color: red; /* Property: color, Value: red */
background-color: yellow; /* Property: background-color, Value: yellow */
</code></pre>
</section>
<section id="CSS_selector" class="main-section">
<header>CSS Selectors</header>
<p><b>Selectors</b> in CSS are patterns used to select and style specific HTML elements. They help apply styles efficiently without modifying the HTML structure.</p>
<h3>Basic Selectors</h3>
<ul>
<li>
<b>Element Selector:</b> Targets all elements of a type.
<pre><code>
p {
color: blue;
}
</code></pre>
</li>
</ul>
</section>
<section id="CSS_Box_Model" class="main-section">
<header>CSS Box Model</header>
<p><b>Box Model</b> explains how elements are structured in terms of spacing and layout.</p>
<ul>
<li><b>Content:</b> The actual content inside the element.</li>
<li><b>Padding:</b> Space between content and border.</li>
<li><b>Border:</b> The outline surrounding the padding.</li>
<li><b>Margin:</b> Space outside the border separating elements.</li>
</ul>
<pre><code>
div {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
</code></pre>
</section>
<section id="CSS_Layout" class="main-section">
<header>CSS Layout</header>
<p><b>CSS Layout</b> helps position elements on a webpage.</p>
<ul>
<li><b>Block & Inline:</b> Block takes full width, inline takes only necessary space.</li>
<li><b>Flexbox:</b> A modern layout system for flexible design.</li>
<pre><code>
.container {
display: flex;
justify-content: center;
}
</code></pre>
<li><b>Grid:</b> A two-dimensional layout system.</li>
<pre><code>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
</code></pre>
<li><b>Positioning:</b> absolute, relative, fixed, sticky.</li>
</ul>
</section>
<section id="Styling_Text" class="main-section">
<header>Styling Text</header>
<p><b>Text styling</b> controls font, size, spacing, and appearance.</p>
<ul>
<li><b>Font Family:</b> Defines text style.</li>
<pre><code>
p {
font-family: Arial, sans-serif;
}
</code></pre>
<li><b>Font Size & Weight:</b> Adjust text size and boldness.</li>
<pre><code>
h1 {
font-size: 24px;
font-weight: bold;
}
</code></pre>
<li><b>Line Height & Letter Spacing:</b> Adjust readability.</li>
<pre><code>
p {
line-height: 1.5;
letter-spacing: 1px;
}
</code></pre>
</ul>
</section>
<section id="Backgrounds_and_Borders" class="main-section">
<header>Backgrounds and Borders</header>
<p><b>Backgrounds</b> and <b>Borders</b> enhance design aesthetics.</p>
<ul>
<li><b>Background Color:</b> Changes element background.</li>
<pre><code>
div {
background-color: lightblue;
}
</code></pre>
<li><b>Background Image:</b> Sets an image as background.</li>
<pre><code>
body {
background-image: url('image.jpg');
background-size: cover;
}
</code></pre>
<li><b>Borders:</b> Define element boundaries.</li>
<pre><code>
div {
border: 2px dashed red;
}
</code></pre>
<li><b>Border Radius:</b> Rounds corners.</li>
<pre><code>
button {
border-radius: 10px;
}
</code></pre>
</ul>
</section>
<section id="Responsive_Design" class="main-section">
<header>Responsive Design</header>
<p><b>Responsive Design</b> ensures adaptability across devices.</p>
<ul>
<li><b>Media Queries:</b> Apply styles based on screen size.</li>
<pre><code>
@media (max-width: 600px) {
body {
background-color: gray;
}
}
</code></pre>
<li><b>Flexible Units:</b> Use %, em, rem, vh, vw instead of px.</li>
<li><b>Flexbox & Grid:</b> Make layouts adaptable.</li>
</ul>
</section>
<section id="Advanced_Topics" class="main-section">
<header>Advanced Topics</header>
<p><b>Advanced CSS</b> techniques for better design.</p>
<ul>
<li><b>Transitions:</b> Smooth animations.</li>
<pre><code>
button {
transition: background-color 0.3s ease;
}
</code></pre>
<li><b>Animations:</b> Keyframes for custom animations.</li>
<pre><code>
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
</code></pre>
<li><b>Variables:</b> Reusable CSS values.</li>
<pre><code>
:root {
--main-color: purple;
}
p {
color: var(--main-color);
}
</code></pre>
</ul>
</section>
<section id="Best_Practices" class="main-section">
<header>Best Practices</header>
<p><b>CSS Best Practices</b> improve maintainability and efficiency.</p>
<ul>
<li><b>Use External Stylesheets:</b> Keep CSS separate from HTML.</li>
<li><b>Organize Code:</b> Group related styles together.</li>
<li><b>Use Class Over ID:</b> IDs are for unique elements, classes are reusable.</li>
<li><b>Optimize Performance:</b> Minimize CSS, remove unused styles.</li>
<li><b>Use Preprocessors:</b> SASS/SCSS for better organization.</li>
</ul>
</section>
</div>
</div>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
background-color: white;
color: black;
line-height: 23px;
overflow-x: hidden;
}
#full-page {
display: grid;
grid-template-columns: 250px auto;
max-width: 100%;
overflow-x: hidden;
}
#navbar {
border-right: 2px solid black;
position: fixed;
left: 0;
top: 0;
width: 250px;
height: 100%;
background-color: #333;
padding: 20px;
overflow-y: auto;
}
#navbar header {
color: white;
padding: 10px;
}
#navbar ul {
list-style: none;
padding: 0;
}
#navbar ul li {
margin: 15px 0;
}
#navbar ul li a {
color: white;
text-decoration: none;
display: block;
padding: 20px;
border-radius: 5px;
transition: 0.3s;
font-size: 20px;
}
#navbar ul li a:hover {
background-color: #555;
}
#main-doc {
}
.main-section {
padding-left: 50px;
padding-right: 50px;
text-align: justify;
margin-left: 260px;
padding: 20px;
max-width: 1000px;
width: 700px;
scroll-margin-top: 80px;
}
header {
font-size: 30px;
font-weight: 500px;
margin-bottom: 20px;
margin-top: 20px;
}
h3 {
margin-left: 10px;
font-weight: 300px;
}
p {
margin-bottom: 5px;
color: #4D4E53;
padding-left: 20px;
}
b {
color: black;
}
ul {
padding-left: 70px;
padding-top: 10px;
}
ul li {
padding-bottom: 10px;
line-height: 20px;
}
pre {
background-color: #F7F7F7;
width: 400px;
margin: 10px 0 10px 40px;
border-radius: 10px;
}
/* 🖥️ Large Screens (Desktops, Big Laptops) */
@media (max-width: 1440px) {
.main-section {
max-width: 1100px;
padding: 18px;
}
}
/* 💻 Medium Screens (Laptops & Tablets in Landscape) */
@media (max-width: 1024px) {
.main-section {
max-width: 500px;
padding: 15px;
}
}
/* 📱 Small Tablets & Large Phones */
@media (max-width: 768px) {
.main-section {
max-width: 95%;
padding: 12px;
font-size: 16px;
}
}
/* 📱📏 Small Phones */
@media (max-width: 480px) {
.main-section {
max-width: 100%;
padding: 10px;
font-size: 15px;
}
}
/* 📱📏 Super Small Phones (300px & below) */
@media (max-width: 300px) {
.main-section {
padding: 5px;
font-size: 14px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (iPad; CPU OS 17_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page