Step 15 I can not get passed it. I get the following error, Your Technical Documentation project should use at least one media query.
<!-- file: index.html -->
/* file: styles.css */
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36
Technical Documentation Page - Build a Technical Documentation Page
Please post your code. thanks
To learn more about media queries: Using media queries - CSS: Cascading Style Sheets | MDN (mozilla.org)
body {
margin: 0;
padding: 0;
}
#navbar {
background-color: #333;
color: white;
width: 200px;
position: fixed;
top: 0;
left: 0;
height: 100%;
overflow-y: auto;
}
.navbar-header {
font-size: 1.5em;
font-weight: bold;
color: whitesmoke;
margin: 10px;
}
.nav-link {
display: block;
text-decoration: none;
color: white;
padding: 10px;
transition: background-color 0.3s;
}
.nav-link:hover {
background-color: #555;
}
.main-section {
padding: 20px;
}
header {
font-size: 1.2em;
font-weight: bold;
}
#navbar {
background-color: #333;
color: white;
width: 200px;
position: fixed;
top: 0;
left: 0;
height: 100%;
}
@media (min-width: 768px) {
#navbar {
width: 250px;
}
}
Hello!
Can you please post your head element code as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Technical Documentation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header class="navbar-header">Technical Documentation</header>
<a class="nav-link" href="#HTML_and_CSS">HTML and CSS</a>
<a class="nav-link" href="#JavaScript">JavaScript</a>
<a class="nav-link" href="#Python">Python</a>
<a class="nav-link" href="#React">React</a>
<a class="nav-link" href="#APIs">APIs</a>
</nav>
<main id="main-doc">
<section id="HTML_and_CSS" class="main-section">
<header>HTML and CSS</header>
<p><span>The HyperText Markup Language or HTML</span> is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
<p>HTML code example: *</p>
<code> < p > this a paragraph element in HTML < /p > </p></code>
<p><span>Cascading Style Sheets (CSS)</span> is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
<p>CSS code example: *</p>
<code> p { text - align: is the CSS selector applied to align text of the paragraph element } </code>
</section>
<section id="JavaScript" class="main-section">
<header>JavaScript</header>
<p><span>JavaScript</span>, often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2023, 98.7% of websites use JavaScript on the client side for webpage behavior,[10] often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.</p>
<p>JS code example: *</p>
<code> function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code>
</section>
<section id="Python" class="main-section">
<header>Python</header>
<p><span>Python</span> is a high-level, general-purpose programming language. Its design philosophy emphasizes code readability with the use of significant indentation.</p>
<p>Python code example: *</p>
<code> print('Hello, world!') </code>
</section>
<section id="React" class="main-section">
<header>React</header>
<p><span>React</span> (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies.</p>
<p>React code example: *</p>
<code> const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(< h1 >Hello, world!< /h1 >); </code>
</section>
<section id="APIs" class="main-section">
<header>APIs</header>
<p>An <span>Application Programming Interface (API)</span> is a way for two or more computer programs to communicate with each other. It is a type of software interface, offering a service to other pieces of software.[1] A document or standard that describes how to build or use such a connection or interface is called an API specification. A computer system that meets this standard is said to implement or expose an API. The term API may refer either to the specification or to the implementation. Whereas a system's user interface dictates how its end-users interact with the system in question, its API dictates how to write code that takes advantage of that system's capabilities.</p>
<p>Common font API's examples:</p>
<li>Google Fonts</li>
<li>Font Awesome</li>
<li>Mapbox</li>
<li>Adobe</li>
<li>GitHub</li>
</section>
</main>
</body>
</html>
I sure can and sorry i thought entered the data when i first opened the post.
Where is your <link> tag for CSS file?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Technical Documentation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header class="navbar-header">Technical Documentation</header>
<a class="nav-link" href="#HTML_and_CSS">HTML and CSS</a>
<a class="nav-link" href="#JavaScript">JavaScript</a>
<a class="nav-link" href="#Python">Python</a>
<a class="nav-link" href="#React">React</a>
<a class="nav-link" href="#APIs">APIs</a>
</nav>
<main id="main-doc">
<section id="HTML_and_CSS" class="main-section">
<header>HTML and CSS</header>
<p><span>The HyperText Markup Language or HTML</span> is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
<p>HTML code example: *</p>
<code> < p > this a paragraph element in HTML < /p > </p></code>
<p><span>Cascading Style Sheets (CSS)</span> is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
<p>CSS code example: *</p>
<code> p { text - align: is the CSS selector applied to align text of the paragraph element } </code>
</section>
I asked for :
<link rel="stylesheet" href="styles.css">
It should be between your <head> </head>
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
