Tell us what’s happening:
Hi folks, I’m in the process of redoing my projects since this is my first time coding (just started my journey with FCC).
I’m adapting every example and doing something really similar but slightly different. If this isn’t that valuable for the portfolio, please let me know.
So I finished this one project and the last requirement “Your Technical Documentation project should use at least one media query.” showed up as error. I really don’t have any clue how to use @media queries that much with what I’ve learnt as of yet, so I copied this one from a previous asignment since nothing I was thinking made any sense.
I wanted to ask if this makes sense from a perspective of someone looking at my code:
@media (prefers-reduced-motion: no-preference) {
- {
scroll-behavior: smooth;
}
}
Your code so far
<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">General Coding information</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>
<p><span class="code-caveat">(* lesser and greater than symbols are separated to show code and not apply it in the example)</span></p>
</main>
</body>
</html> ```
``` @media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
body {
display: flex;
font-family: Arial, sans-serif;
line-height: 1.3rem;
margin: 0;
padding: 0;
}
nav {
background-color: #333;
color: white;
width: 200px;
position: fixed;
top: 0;
left: 0;
height: 100%;
}
.navbar-header {
font-size: 1.5em;
font-weight: bold;
color: whitesmoke;
margin: 10px 0 10px 10px ;
}
.nav-link {
display: block;
text-decoration: none;
text-transform: uppercase ;
letter-spacing: 0.1rem;
color: white;
transition: background-color 0.3s;
position: relative;
}
a {
border-top: 1px solid white;
padding: 10px
}
a:last-child {
border-bottom: 1px solid white;
}
.nav-link:hover {
background-color: #555;
}
main {
margin-left: 250px;
padding: 20px 40px 0 20px;
}
.main-section {
margin-bottom: 40px;
}
header {
font-size: 2em;
margin-bottom: 20px;
}
p {
line-height: 1.8rem;
margin-bottom: 20px;
}
span {
font-weight: bold;
font-size: 1.1rem;
text-decoration: underline;
}
.code-caveat {
font-weight: normal;
font-size: 0.75rem;
text-decoration: none;
font-style: italic;
}
code {
display: block;
background-color: #f7f7f7;
border-radius: 4px;
margin: 20px;
padding: 15px;
}
li {
margin: 10px 0 5px 20px;
list-style:circle
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
Hello! Welcome to the forum!