Tell us what’s happening:
I am stocked.
please help me place the nav element in the left side of the page and style them properly.
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>
<title>Technical Documentation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main-doc">
<nav id="navbar">
<header>Table of content:<header>
<ul>
<li><a href="#Introduction" class="nav-link">Introduction</a></li>
<li><a href="#Painting_and_drawing" class="nav-link">Painting_and_drawing</a></li>
<li><a href="#Hardware_and_software" class="nav-link">Hardware_and_software</a></li>
<li><a href="#Elements_of_3D_graphics" class="nav-link">Elements_of_3D_graphics</a></li>
<li><a href="#Two-Dimensional_Graphics"class="nav-link">Two-Dimensional_Graphics</a></li>
<li><a href="#Shapes" class="nav-link">Shapes</a></li>
</ul>
</nav>
<section class="main-section" id="Introduction">
<header>Introduction</header>
<code><p>The term "computer graphics" refers to anything involved in the creation or manipulation of images on a computer, including animated images. It is a very broad field, and one in which changes and advances seem to come at a dizzying pace. It can be difficult for a beginner to know where to start. However, there is a core of fundamental ideas that are part of the foundation of most applications of computer graphics. This book attempts to cover those foundational ideas, or at least as many of them as will fit into a one-semester college-level course. While it is not possible to cover the entire field in a first course—or even a large part of it—this should be a good place to start.</p>
<p>This short chapter provides an overview and introduction to the material that will be covered in the rest of the book, without going into a lot of detail.</p></code>
<ul>
<li>Painting and drawing</li>
<li>Hardware and software</li>
<li>Elements of 3D graphics</li>
</ul>
</section>
<section class="main-section" id="Painting_and_drawing">
<header>Painting and drawing</header>
<code><p>A modern flat-screen computer monitor is not a raster in the same sense. There is no moving electron beam. The mechanism that controls the colors of the pixels is different for different types of screen. But the screen is still made up of pixels, and the color values for all the pixels are still stored in a frame buffer. The idea of an image consisting of a grid of pixels, with numerical color values for each pixel, defines raster graphics.</p></code>
</section>
<section class="main-section" id="Hardware_and_software">
<header>Hardware and software</header>
<code><p>OpenGL shaders are written in GLSL (OpenGL Shading Language). Like OpenGL itself, GLSL has gone through several versions. We will spend some time later in the course studying GLSL ES, the version used with WebGL and OpenGL ES. GLSL uses a syntax similar to the C programming language</p>
<p>To draw a line or perform some other graphical operation, the CPU simply has to send commands, along with any necessary data, to the GPU, which is responsible for actually carrying out those commands. The CPU offloads most of the graphical work to the GPU, which is optimized to carry out that work very quickly. The set of commands that the GPU understands make up the API of the GPU. OpenGL is an example of a graphics API, and most GPUs support OpenGL in the sense that they can understand OpenGL commands, or at least that OpenGL commands can efficiently be translated into commands that the GPU can understand.</p></code>
</section>
<section class="main-section" id="Elements_of_3D_graphics">
<header>Elements of 3D graphics</header>
<code><p>First, the geometry.... We start with an empty 3D space or "world." Of course, this space exists only conceptually, but it's useful to think of it as real and to be able to visualize it in your mind. The space needs a coordinate system that associates each point in the space with three numbers, usually referred to as the x, y, and z coordinates of the point. This coordinate system is referred to as "world coordinates."</p></code>
</section>
<section class="main-section" id="Two-Dimensional_Graphics">
<header>Two-Dimensional Graphics</header>
<code> <p>With this chapter, we begin our study of computer graphics by looking at the two-dimensional case. Things are simpler and a lot easier to visualize in 2D than in 3D, but most of the ideas that are covered in this chapter will also be very relevant to 3D.</p>
<p>The chapter begins with four sections that examine 2D graphics in a general way, without tying it to a particular programming language or graphics API.Java with Graphics2D, JavaScript with HTML graphics, and SVG. We will see how these languages use many of the general ideas from earlier in the chapter.</p></code>
<ul>
<li>Pixels, Coordinates, and Colors</li>
<li>Shapes</li>
</ul>
</section>
<section class="main-section" id="Shapes">
<header>Shapes</header>
<code> <p>We have been talking about low-level graphics concepts like pixels and coordinates, but fortunately we don't usually have to work on the lowest levels. Most graphics systems let you work with higher-level shapes, such as triangles and circles, rather than individual pixels. And a lot of the hard work with coordinates is done using transforms rather than by working with coordinates directly. In this section and the next, we will look at some of the higher-level capabilities that are typically provided by 2D graphics APIs.</p>
<p>In a graphics API, there will be certain basic shapes that can be drawn with one command, whereas more complex shapes will require multiple commands. Exactly what qualifies as a basic shape varies from one API to another. In the WebGL API, for example, the only basic shapes are points, lines, and triangles. In this subsection, I consider lines, rectangles, and ovals to be basic.</p></code>
</section>
</main>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page