Technical Documentation Page - Build a Technical Documentation Page

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

1 Like

:balloon:Hello! Welcome to the forum!

The purpose of the media query, in this case, is to make your Technical Documentation page responsive to whichever device a user would like to view it on. The term responsive here can be a bit ambiguous since the real meaning is that the content fits properly (and is usable) equally well when view on a mobile device, tablet, or full screen desktop, etc.

There are lots of good examples to look at online like w3 schools and mdn, etc.

A good strategy to tackle the different screen sizes is to decide on the screen size you will use as your basis and then use the media query to style the other sizes by just adding amendments to your existing styles. The convention is either mobile first or desktop first and really it is up to you to decide which you are most comfortable with.

Does this help?
Keep up the good progress!

Happy Coding! :slightly_smiling_face:

4 Likes

Thanks a lot, it does help. I sincerely haven’t understood a lot of what you wrote, but I now can start googling and using those site resources to help understand how to define sizes to latter understand how to use the media query to apply under those circumstances!

I’m just that level of beginner, but undeterred!

4 Likes

Welcome to the community @alltaken !

Here is a great article found in fCC News category, which is accessible through the menu.

Example:
on @media query.

FCC News Media Query
https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/

The search at the top right of the page can be used to search for help, as well.

But, for now, here is an example of a @media query.

@media only screen and (max width: 478px) {
body{
color: lightgreen; 
}
}

I hope this helps you continue on your coding path. 

@ios-man deserves the solution, if any of this works for providing great guidance.

Happy coding!
4 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.