Tell us what’s happening:
Why does this keep getting an error even though I have done the command? Why is this so strange?
this is the error:
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 ).
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" />
<title>Document Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav id="navbar">
<header>Documentation</header>
<ul>
<li><a href="#Introduction" class="nav-link">Introduction</a></li>
<li>
<a href="#Hello_world" class="nav-link">Hello World</a>
</li>
<li>
<a href="#What_you_will_learn" class="nav-link"
>What you will learn</a
>
</li>
<li><a href="#html5" class="nav-link">HTML5</a></li>
<li><a href="#css" class="nav-link">CSS</a></li>
<li><a href="#javascript" class="nav-link">Javascript</a></li>
<li><a href="#framework" class="nav-link">Framework</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<article>
<code>
"Hello World! This is your starting point to delve into programming,
especially as a frontend developer."
</code>
<p>
Welcome to the developer documentation for HTML5, CSS, JavaScript,
and related frameworks. This guide aims to provide a comprehensive
overview and practical examples to help developers effectively
utilize these technologies in their projects. Whether you are a
beginner starting out or an experienced developer looking to enhance
your skills, this documentation covers essential concepts and
advanced techniques to support your development journey.
</p>
<p>
Modern web development involves a combination of various
technologies and tools. HTML5 provides the structure and foundation
for web pages, CSS is used for styling and layout, and 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>
<ul>
<li>
Client-side JavaScript extends the core language by supplying
objects to control a browser and its Document Object Model (DOM).
For example, client-side extensions allow an application to place
elements on an HTML form and respond to user events such as mouse
clicks, form input, and page navigation.
</li>
<li>
Client-side JavaScript extends the core language by supplying
objects to control a browser and its Document Object Model (DOM).
For example, client-side extensions allow an application to place
elements on an HTML form and respond to user events such as mouse
clicks, form input, and page navigation.
</li>
</ul>
</article>
</section>
<section class="main-section" id="Hello_world">
<header>Hello world</header>
<article>
To get started with writing JavaScript, open the Scratchpad and write
your first "Hello world" JavaScript code:
<code
>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");
</code>
Hello world This is your starting point to delve into programming,
especially as a frontend developer.
</article>
</section>
<section class="main-section" id="What_you_will_learn">
<header>What you will learn</header>
<article>
<ul>
<li>
HTML5: Learn the latest features of HTML5, including new semantic
elements, multimedia capabilities, and improved form controls.
</li>
<li>
CSS: Understand how to style your web pages with CSS, using modern
layout techniques such as Flexbox and Grid, and adding animations
and transitions.
</li>
<li>
JavaScript: Discover how to make your web pages interactive with
JavaScript, including DOM manipulation, event handling, and using
ES6+ features.
</li>
<li>
Frontend Libraries: Get introduced to popular frontend libraries
such as React and learn how to integrate them into your projects.
</li>
</ul>
<p>
By following this documentation, you will gain a solid understanding
of web development fundamentals and be well-equipped to build
sophisticated web applications. Let's get started!
</p>
</article>
</section>
<section class="main-section" id="html5">
<header>HTML5</header>
<article>
<p>
HTML5 is the latest version of the Hypertext Markup Language, the
standard language for creating web pages. It introduces new
elements, attributes, and behaviors, providing more powerful and
flexible ways to structure and present content on the web.
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis
deserunt sapiente corrupti consequuntur nisi rerum voluptatem qui!
Blanditiis hic, laboriosam recusandae quae fuga ipsa voluptatum
cupiditate quos, ut, quisquam optio.
</p>
<header>Key Features</header>
<ul>
<li>
Semantic Elements: New tags like
<span>header, footer, article, and section</span> help create a
more meaningful document structure.
</li>
<li>
Multimedia: Native support for audio and video elements without
the need for external plugins.
</li>
<li>
Graphics: The <span>canvas</span> element and SVG support for
drawing graphics directly on the web page.
</li>
<li>
Forms: Enhanced form controls and validation features for better
user input handling.
</li>
</ul>
<code>
<span> <h1>Hello World!</h1> </span>
<span> <p>Hello World!</p> </span>
</code>
</article>
</section>
<section class="main-section" id="css">
<header>CSS <span>( Cascading Style Sheets)</span></header>
<article>
<p>
CSS (Cascading Style Sheets) is a style sheet language used for
describing the presentation of a document written in HTML. CSS
enables developers to separate content from design, allowing for
more flexible and maintainable web pages.
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis
deserunt sapiente corrupti consequuntur nisi rerum voluptatem qui!
Blanditiis hic, laboriosam recusandae quae fuga ipsa voluptatum
cupiditate quos, ut, quisquam optio.
</p>
<code>
* { font-family: Arial, sans-serif; background-color: #f0f0f0}</code
>
<header>Key Features</header>
<ul>
<li>
Selectors: Apply styles to specific HTML elements or groups of
elements.
</li>
<li>
Box Model: Control the layout and spacing of elements using
properties like margin, padding, border, and width.
</li>
<li>
Flexbox and Grid: Advanced layout models for creating responsive
designs.
</li>
<li>
Animations and Transitions: Add dynamic effects to elements for a
better user experience.
</li>
</ul>
</article>
</section>
<section class="main-section" id="javascript">
<header>Javascript</header>
<article>
<p>
JavaScript is a versatile, high-level programming language that
enables developers to create dynamic and interactive web content. It
is an essential part of the modern web, working alongside HTML and
CSS.
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis
deserunt sapiente corrupti consequuntur nisi rerum voluptatem qui!
Blanditiis hic, laboriosam recusandae quae fuga ipsa voluptatum
cupiditate quos, ut, quisquam optio.
</p>
<header>Key Features</header>
<ul>
<li>
DOM Manipulation: Interact with and modify the HTML and CSS of a
web page in real-time.
</li>
<li>
Event Handling: Respond to user actions like clicks, form
submissions, and key presses.
</li>
<li>
AJAX: Communicate with servers asynchronously to update web
content without reloading the page.
</li>
<li>
ES6+ Features: Modern JavaScript syntax and features such as arrow
functions, template literals, classes, and modules.
</li>
</ul>
<code>
function changeText() { document.getElementById('demo').innerText =
'Hello, JavaScript!'; }
</code>
</article>
</section>
<section class="main-section" id="framework">
<header>ReactJs</header>
<article>
<p>
React is a popular JavaScript library for building user interfaces,
particularly single-page applications. It allows developers to
create reusable UI components and manage the application's state
efficiently.
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis
deserunt sapiente corrupti consequuntur nisi rerum voluptatem qui!
Blanditiis hic, laboriosam recusandae quae fuga ipsa voluptatum
cupiditate quos, ut, quisquam optio.
</p>
<header>Key Features</header>
<ul>
<li>
Component-Based: Build encapsulated components that manage their
own state.
</li>
<li>
Virtual DOM: Efficiently update and render components with minimal
DOM manipulation.
</li>
<li>
JSX: A syntax extension that allows mixing HTML with JavaScript
for easier component creation.
</li>
</ul>
<code>
import React from 'react'; import ReactDOM from 'react-dom';
function App() { return ( <div> <h1>Welcome to
React</h1> <p>This is a simple React
component.</p> </div> ); } ReactDOM.render(<App
/>, document.getElementById('root'));
</code>
</article>
</section>
</main>
</body>
</html>
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page`Preformatted text`