Tell us what’s happening:
I wrote the code as per instructions and its working fine.
navigation is working fine.
error:
{1.
Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).}
{2.
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
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tilt+Prism&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"></link>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Documentation page</title>
</head>
<body>
<nav id="navbar">
<header id="title">PC Building Documentation</header>
<ul>
<li>
<a class="nav-link" href="#introduction">Introduction</a>
</li>
<li><a class="nav-link" href="#understanding_PC_Components">Understanding PC Components</a></li>
<li><a class="nav-link" href="#planning_Your_PC_Build">Planning Your PC Build</a></li>
<li><a class="nav-link" href="#step-by-Step_Assembly_Process">Step-by-Step Assembly Process</a></li>
<li><a class="nav-link" href="#bios_Configuration_and_Software_Installation">BIOS Configuration and Software Installation</a></li>
<li><a class="nav-link" href="#cable_Management_and_System_Testing">Cable Management and System Testing</a></li>
<li><a class="nav-link" href="#troubleshooting_Common_Issuess">Troubleshooting Common Issuess</a></li>
<li><a class="nav-link" href="#advanced_Topics_and_Upgrades">Advanced Topics and Upgrades</a></li>
<li><a class="nav-link" href="#conclusion">Conclusion</a></li>
</ul>
</nav>
<h1>Build Your Gaming Pc Now!!!</h1>
<main id="main-doc">
<section class="main-section" id="introduction">
<header>Introduction</header>
<article>
<p>Building a PC from scratch can be an exciting and rewarding experience. Whether you're a seasoned computer enthusiast or a beginner, this comprehensive guide aims to provide you with the necessary documentation to successfully build your own PC. By following this guide, you will gain a deeper understanding of the components, assembly process, and troubleshooting techniques required to create a fully functional personal computer.</p>
<ul><li>Building a PC offers flexibility, customization, and potential cost savings compared to pre-built systems.</li>
<li>It allows you to choose high-quality components tailored to your specific needs and preferences.</li>
<li>By building your own PC, you gain a deeper understanding of computer hardware and its functionality.</li>
<li>The satisfaction and sense of accomplishment from successfully building and using your custom PC are unparalleled.</li>
</ul>
<code>I hope you will find this information usefull.</code>
</article>
</section>
<section class="main-section" id="understanding_PC_Components">
<header>Understanding PC Components</header>
<article>
<p>In this section, we will delve into the various components that make up a PC. We will explore the central processing unit (CPU), graphics processing unit (GPU), motherboard, memory (RAM), storage drives, power supply unit (PSU), cooling solutions, and peripherals. You will learn about the roles each component plays in the overall functionality of the PC.</p>
<ul><li>CPUs are the brain of the computer, responsible for executing instructions and performing calculations.</li>
<li>GPUs handle graphics processing, crucial for gaming, video editing, and other visually intensive tasks.</li>
<li>The motherboard acts as the central hub, connecting and coordinating communication between components.</li>
<li>RAM provides temporary storage for data that the CPU can access quickly.</li>
<li>Storage drives store your operating system, files, and programs, with options like solid-state drives (SSDs) and hard disk drives (HDDs).</li>
<li>The PSU supplies power to all components, converting AC power from the outlet to DC power for the computer.</li>
<li>Cooling solutions such as fans and heatsinks prevent overheating and maintain optimal performance.</li>
<li>Peripherals include monitors, keyboards, mice, and other external devices used for input, output, and control.</li>
</ul>
<code>Please do you research before buying any product.</code>
</article>
</section>
<section class="main-section" id="planning_Your_PC_Build">
<header>Planning Your PC Build</header>
<article>
<p>Before you start assembling your PC, proper planning is essential. We will discuss factors to consider when selecting components such as budget, performance requirements, compatibility, and future upgradability. This section will help you make informed decisions based on your needs and preferences.</p>
<ul>
<li>Setting a budget helps determine the balance between performance and affordability.</li>
<li>Defining performance requirements ensures you choose components that meet your specific needs.</li>
<li>Researching and selecting components involves comparing specifications, reviews, and compatibility.</li>
<li>Ensuring compatibility among components is crucial to avoid issues during assembly.</li>
<li>Considering future upgradability allows you to plan for potential component replacements or additions.</li>
</ul>
<code>Make sure your selected components are compatible with each another.</code>
</article>
</section>
<section class="main-section" id="step-by-Step_Assembly_Process">
<header>Step-by-Step Assembly Process</header>
<article>
<p>Here, we will provide a detailed step-by-step guide on assembling your PC. You will learn how to prepare the workspace, install the CPU, attach the CPU cooler, insert the RAM, mount the motherboard, connect storage drives, install the GPU, connect the PSU, and connect peripherals. Each step will be explained thoroughly to ensure a smooth and error-free assembly process.</p>
<ul>
<li>Preparing the workspace involves finding a clean, well-lit area with sufficient space to work comfortably.</li>
<li>Installing the CPU includes aligning it correctly, applying thermal paste, and securing the CPU cooler.</li>
<li>Inserting the RAM involves matching the notches and firmly seating the modules into the slots.</li>
<li>Mounting the motherboard requires aligning it with the case and securing it with screws.</li>
<li>Connecting storage drives involves attaching cables and mounting them in drive bays or slots.</li>
<li>Installing the GPU requires aligning it with the PCIe slot and securing it with screws or clips.</li>
<li>Connecting the PSU involves plugging in the necessary power cables to the motherboard and components.</li>
<li>Connecting peripherals includes attaching cables to the appropriate ports on the motherboard or GPU.</li>
</ul>
<code>Must watch a tutorial on youtube before assembling the parts {I will give a link to the video below}.</code>
</article>
</section>
<section class="main-section" id="bios_Configuration_and_Software_Installation">
<header>BIOS Configuration and Software Installation</header>
<article>
<p>After assembling the hardware, we will guide you through the process of configuring the basic input/output system (BIOS) settings and installing the operating system (OS). This section will cover essential BIOS settings, such as boot priority, enabling XMP profiles, and updating firmware. Additionally, we will provide guidance on installing device drivers and necessary software for optimal performance.</p>
<ul>
<li>Accessing the BIOS involves pressing a specific key during the boot process to enter the setup utility.</li>
<li>Configuring BIOS settings may include adjusting boot priority, enabling XMP profiles for RAM overclocking, or updating firmware.</li>
<li>Installing the OS requires creating a bootable USB or DVD and following the installation prompts.</li>
<li>Installing device drivers ensures proper functionality and compatibility with hardware components.</li>
<li>Installing essential software involves installing antivirus programs, productivity tools, and other desired applications.</li>
</ul>
<code>Make sure to buy an external DVD writer and reader.</code>
</article>
</section>
<section class="main-section" id="cable_Management_and_System_Testing">
<header>Cable Management and System Testing</header>
<article>
<p>Proper cable management is crucial for maintaining a clean and organized PC build. We will discuss techniques for routing and tidying cables to optimize airflow and improve aesthetics. Furthermore, we will guide you through essential system testing procedures to ensure that all components are functioning correctly and efficiently.</p>
<ul>
<li>Organizing and securing cables prevents tangling, improves airflow, and eases future maintenance.</li>
<li>Routing cables for optimal airflow involves keeping them away from fans and blocking airflow paths.</li>
<li>Managing cable length minimizes clutter and improves aesthetics inside the PC case.</li>
<li>Enhancing aesthetics by using cable ties, Velcro straps, or cable management accessories improves the overall appearance.</li>
</ul>
<code>Trust me this is more important than you think.</code>
</article>
</section>
<section class="main-section" id="troubleshooting_Common_Issues">
<header>Troubleshooting Common Issues</header>
<article>
<p>Even with careful planning and execution, issues may arise during or after the PC build. In this section, we will address common problems and their troubleshooting steps. From debugging hardware conflicts to resolving software-related issues, we will equip you with the knowledge to overcome challenges effectively.</p>
<ul>
<li>Powering on and performing an initial boot helps ensure all components receive power and initiate the startup process.</li>
<li>Checking component functionality involves verifying that all hardware is detected, and devices are working as intended.</li>
</ul>
<code>You always have Google and Youtube for help [ CHATGPT ] too at the last you always contact a proffessional.</code>
</article>
</section>
<section class="main-section" id="advanced_Topics_and_Upgrades">
<header>Advanced Topics and Upgrades</header>
<article>
<p>For those interested in expanding their knowledge or planning future upgrades, this section will explore advanced topics such as overclocking, custom water cooling, and hardware upgrades. We will provide an overview of these concepts and direct you to additional resources for further exploration.</p>
<ul>
</ul>
</article>
</section>
<section class="main-section" id="conclusion">
<header>Conclusion</header>
<article>
<p>By following this PC building documentation, you will gain the skills and confidence to create your own custom PC. Building a PC allows you to tailor your system to your exact needs, offers potential cost savings, and provides a deeper understanding of how computers work. Remember, building a PC is an iterative process, and continuous learning is part of the journey. Enjoy the experience and embrace the world of PC building!</p>
<p>Building your own PC is a big Achievement</p>
<ul>
</ul>
</article>
</section>
<address>
<p>Made By Amandeep Singh</p>
<p>My Github: <a href="https://github.com/WeebAman">Click Here</a></p>
<p>I have all the rights for this documentation.</p>
</address>
</main>
</body>
</html>
CSS{
html{
display:block;
background-color: #2b3633;
color:white;
font-size:20px;
margin:100px;
margin-top:90px;
font-family: ‘Roboto’, sans-serif;
margin-bottom:1000px;
}
a{
color:white;;
text-decoration:none;
}
/**{
border:solid 1px;
}
*/
h1{
text-align:center;
margin-left:500px;
color:#7bd4c1;
font-family: ‘Tilt Prism’, cursive;
font-size:50px;
}
#title{
text-align:center;
margin-bottom:50px;
}
header{
font-family: ‘Tilt Prism’, cursive;
font-weight:800;
margin-top:70px;
color:#7bd4c1;
font-size:50px;
}
#navbar {
position: fixed;
min-width: 400px;
top: 0px;
left: 0px;
width: 300px;
height: 100%;
border-right: solid;
border-color: rgba(0, 22, 22, 0.4);
}
#main-doc{
margin-left:350;
}
li{
color:#6ee6cc;
}
#navbar ul{
overflow-y:scroll;
overflow-x:hidden;
padding:0;
height:70%;
list-style-type: none;
border-bottom:100px
}
#navbar li{
border:none;
border-bottom:solid rgba(0, 22, 22, 0.4) 5px;
padding:30 0 30 0;
font-size:21px;
text-align:center;
}
#navbar li:first-of-type{
border-top:solid rgba(0, 22, 22, 0.4) 5px;;
}
.main-section{
font-size:25px;
padding-bottom:70px;
border-bottom:solid white 5px;
}
address{
color:cyan;
}
@media only screen and (max-width: 815px) {
/* For mobile phones: */
#navbar ul {
border: 1px solid;
height: 207px;
}
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 Edg/114.0.1823.43
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: