Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

I have the media query, but it does not accept it. It’s the last thing on my project everything else is fine, what am i doing wrong? My browsers can read it and run it and it is located at the very end of my CSS file.

Your code so far

This is my media query:

@media (max-width: 1000px) {
code {
background-color: #1d156b;
color: white;
}
}

What is wrong with it?

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.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

The media query seems fine to me. I don’t know what you mean by “does not accept it”.

I mean this.

Nice to see you back in the community @yuriigormayal !

Could you please post your complete code for us to see using ``` before and after the html and the css complete codes?

This will allow the community to offer direct and accurate guidance to help you resolve the problem.

Thank you!

Happy coding!

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<meta charset="utf-8"/>
	<title>HTML Doc Page</title>
	<link rel="stylesheet" href="techdoc.css"/>
  </head>
  <body>
	<nav id="navbar">
	  <header id="menu">HTML Doc Page</header>
		<ul>
		   <li><a href="#What_is_HTML?" class="nav-link">What is HTML?</a></li>
           <li><a href="#CSS" class="nav-link">CSS</a></li>
           <li><a href="#JavaScript" class="nav-link">JavaScript</a></li>
           <li><a href="#Elements_and_Tags" class="nav-link">Elements and Tags</a></li>
           <li><a href="#Expected_Knowledge" class="nav-link">Expected Knowledge</a></li>
		</ul>
	 </nav>
	  
    <main id="main-doc">
	<section class="main-section" id="What_is_HTML?">
	<header id="What-Html">What is HTML?</header>

      <p class="normalp">The HyperText Markup Language or HTML 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 class="normalp">Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for its appearance.</p>

      <p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML" target="_blank">wikipedia</a> for more information.</p>
	  
	  </section>
	  <section class="main-section" id="CSS">
	  <header id="thecss">CSS</header>

      <p class="normalp">Cascading Style Sheets (CSS) 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). CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>

      <p class="normalp">CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts. This separation can improve content accessibility; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.</p>
	  
	  <p>Here are a couple of CSS examples:</p>
	  <code>#game {
  max-width: 500px;
  max-height: 400px;
  background-color: #ffffff;
  color: #ffffff;
  margin-top: 30px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}    </code>
<p></p>
    <code>
	  body {
	  background-color: #fdfaec;
	  color: #524100;
	  font-family: timesnewroman;
}
	</code>

	  
	  <p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/CSS" target="_blank">wikipedia</a> for more information.</p>
	  
	  </section>
	  <section class="main-section" id="JavaScript">

      <header id="thejavascript">JavaScript</header>

     <p class="normalp">JavaScript, 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, often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.</p>

     <p class="normalp">JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.[11] It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM).</p>
	 
	  <p>Here are a couple of JavaScript examples:</p>
	  <code>
	    const life = "eternal";
	  </code>
	  <p></p>
	  <code>
	    let someEvenNumbers = [2, 4, 6, 8, 10, 12, 14, 16];
	  </code>
	  <p></p>
	  <code>
	    let button1 = document.querySelector("#button1");
	  </code>
	 
     <p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">wikipedia</a> for more information.</p>	 
	 
	 <section class="main-section" id="Elements_and_Tags">
   
     <header id="eltag">Elements and Tags</header>

     <p class="normalp">As is generally understood, the position of an element is indicated as spanning from a start tag and is terminated by an end tag. This is the case for many, but not all, elements within an HTML document. The distinction is explicitly emphasised in HTML 4.01 Specification:</p>

     <p class="normalp">Elements are not tags. Some people refer to elements as tags (e.g., "the P tag"). Remember that the element is one thing, and the tag (be it start or end tag) is another. For instance, the HEAD element is always present, even though both start and end HEAD tags may be missing in the markup.</p>

     <p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_element" target="_blank">wikipedia</a> for more information.</p>

    <h1 id="blockel">Block Elements</h1>

    <p class="normalp">Block elements, or block-level elements, have a rectangular structure. By default, these elements will span the entire width of its parent element, and will thus not allow any other element to occupy the same horizontal space as it is placed on.</p>
	
	<p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_element#Block_elements" target="_blank">wikipedia</a> for more information.</p>	 

    <h1 id="inel">Inline Elements</h1>

      <p class="normalp">Inline elements are treated as part of the flow of document text; they cannot have margins, width, or height set, and do break across lines.</p>
	  
	  <p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_element#Document_body_elements" target="_blank">wikipedia</a> for more information.</p>

    <h1 id="form">Forms</h1>

      <p class="normalp">A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.</p>
	  
	  <p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_form" target="_blank">wikipedia</a> for more information.</p>

    <h1 id="anchor">Anchor</h1>

      <p class="normalp">An anchor element is called an anchor because web designers can use it to "anchor" a URL to some text on a web page. When users view the web page in a browser, they can click the text to activate the link and visit the page whose URL is in the link.</p>

      <p class="normalp">In HTML, an anchor can be either the origin (the anchor text) or the target (destination) end of a hyperlink.</p>

      <p class="normalp">With the attribute href, the anchor becomes a hyperlink to either another part of the document or another resource (e.g. a webpage) using an external URL. Alternatively (and sometimes concurrently), with the name or id HTML attributes set, the element becomes a link target.</p>
	
	  <p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_element#Anchor" target="_blank">wikipedia</a> for more information.</p>

    <h1 id="attributes">Attributes</h1>

      <p class="normalp">HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to a HTML start tag.</p>

      <p class="normalp">Several basic attributes types have been recognized, including: required attributes, needed by a particular element type for that element type to function correctly; optional attributes, used to modify the default functionality of an element type; standard attributes, supported by many element types; and event attributes, used to cause element types to specify scripts to be run under specific circumstances.</p>

      <p class="normalp">Some attribute types function differently when used to modify different element types. For example, the attribute name is used by several element types, but has slightly different functions in each.</p>
	
	  <p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_attribute" target="_blank">wikipedia</a> for more information.</p>
	  
	  </section>
	  
	  <section class="main-section" id="Expected_Knowledge">

      <header id="know">Expected Knowledge</header>
	  
	  <p>Some things you need to know before jumping into coding:</p>
	  <ul>
	    <li>How to read</li>
		<li>How to write</li>
		<li>How to listen</li>
		<li>How to be patient</li>
		<li>How to browse the Web</li>
	  </ul>

      <p class="normalp">In order to dive into HTML (and of course, CSS and JavaScript) one has to know how to read and write, how to handle a computer amd browse the web, and how to be patient, focused and determined. A little bit of math wouldn't hurt. It's not much, basically anyone can dive into it and, who knows, make a fine living.</p>
	  
	  <footer>This project was based on <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page" target="_blank">freeCodeCamp</a> and the vast majority of the info displayed here was taken from Wikipedia.</footer>
	  
	  </section>

    </main>
	<hr>
  </body>
</html>
* {
	box-sizing: border-box;
}

body {
	background-color: #fdfaec;
	color: #524100;
	font-family: timesnewroman;
}

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4);
}

#navbar ul {
  height: 88%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  color: #4d4e53;
  border-top: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
}

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

header {
  font-size: 30px;
  font-weight: bold;
  margin: 10px;
  text-align: center;
}

#main-doc header {
  text-align: left;
  margin: 0px;
}


h1 {
	font-size: 24px;
	font-style: italic;
}

li {
	padding-left: 10px;
}

code {
	background-color: #ced2d9;
}

.normalp {
	text-align: left;
	text-justify: auto;
	font-size: 20px;
}

.linkp {
	text-align: center;
	text-justify: auto;
	border: 20px solid transparent;
}

a {
	color: #4d4d4d;
}

a:visited {
  color: black;
}

a:hover {
  color: brown;
}

a:active {
  color: #ffffff;
}

@media (max-width: 1000px) {
	code {
	background-color: #1d156b;
	color: white;	
}
} 

My only problem is with the media query, I really don’t understand.

You should specify the media type. Here is a link to help.

Anyway, I’ve even tried to copy the media query from the project source code, and it still does not accept it. The media query presented in the City Skyline project is also not specified. I’ll try to mimic the Piano one, if it doesn’t work I don’t know what to do.


mq4

mq6

If it doesn’t work, post the updated code here. Also, make the code organized, do not break it, I’ll have an easier time working with it.

Tried to mimic the piano one and nothing.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<meta charset="utf-8"/>
	<title>HTML Doc Page</title>
	<link rel="stylesheet" href="techdoc.css"/>
  </head>
  <body>
	<nav id="navbar">
	  <header id="menu">HTML Doc Page</header>
		<ul>
		   <li><a href="#What_is_HTML?" class="nav-link">What is HTML?</a></li>
           <li><a href="#CSS" class="nav-link">CSS</a></li>
           <li><a href="#JavaScript" class="nav-link">JavaScript</a></li>
           <li><a href="#Elements_and_Tags" class="nav-link">Elements and Tags</a></li>
           <li><a href="#Expected_Knowledge" class="nav-link">Expected Knowledge</a></li>
		</ul>
	 </nav>
	  
    <main id="main-doc">
	<section class="main-section" id="What_is_HTML?">
	<header id="What-Html">What is HTML?</header>

      <p class="normalp">The HyperText Markup Language or HTML 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 class="normalp">Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for its appearance.</p>

      <p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML" target="_blank">wikipedia</a> for more information.</p>
	  
	  </section>
	  <section class="main-section" id="CSS">
	  <header id="thecss">CSS</header>

      <p class="normalp">Cascading Style Sheets (CSS) 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). CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>

      <p class="normalp">CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts. This separation can improve content accessibility; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.</p>
	  
	  <p>Here are a couple of CSS examples:</p>
	  <code>#game {
  max-width: 500px;
  max-height: 400px;
  background-color: #ffffff;
  color: #ffffff;
  margin-top: 30px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}    </code>
<p></p>
    <code>
	  body {
	  background-color: #fdfaec;
	  color: #524100;
	  font-family: timesnewroman;
}
	</code>

	  
	  <p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/CSS" target="_blank">wikipedia</a> for more information.</p>
	  
	  </section>
	  <section class="main-section" id="JavaScript">

      <header id="thejavascript">JavaScript</header>

     <p class="normalp">JavaScript, 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, often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.</p>

     <p class="normalp">JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.[11] It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM).</p>
	 
	  <p>Here are a couple of JavaScript examples:</p>
	  <code>
	    const life = "eternal";
	  </code>
	  <p></p>
	  <code>
	    let someEvenNumbers = [2, 4, 6, 8, 10, 12, 14, 16];
	  </code>
	  <p></p>
	  <code>
	    let button1 = document.querySelector("#button1");
	  </code>
	 
     <p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">wikipedia</a> for more information.</p>	 
	 
	 <section class="main-section" id="Elements_and_Tags">
   
     <header id="eltag">Elements and Tags</header>

     <p class="normalp">As is generally understood, the position of an element is indicated as spanning from a start tag and is terminated by an end tag. This is the case for many, but not all, elements within an HTML document. The distinction is explicitly emphasised in HTML 4.01 Specification:</p>

     <p class="normalp">Elements are not tags. Some people refer to elements as tags (e.g., "the P tag"). Remember that the element is one thing, and the tag (be it start or end tag) is another. For instance, the HEAD element is always present, even though both start and end HEAD tags may be missing in the markup.</p>

     <p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_element" target="_blank">wikipedia</a> for more information.</p>

    <h1 id="blockel">Block Elements</h1>

    <p class="normalp">Block elements, or block-level elements, have a rectangular structure. By default, these elements will span the entire width of its parent element, and will thus not allow any other element to occupy the same horizontal space as it is placed on.</p>
	
	<p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_element#Block_elements" target="_blank">wikipedia</a> for more information.</p>	 

    <h1 id="inel">Inline Elements</h1>

      <p class="normalp">Inline elements are treated as part of the flow of document text; they cannot have margins, width, or height set, and do break across lines.</p>
	  
	  <p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_element#Document_body_elements" target="_blank">wikipedia</a> for more information.</p>

    <h1 id="form">Forms</h1>

      <p class="normalp">A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.</p>
	  
	  <p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_form" target="_blank">wikipedia</a> for more information.</p>

    <h1 id="anchor">Anchor</h1>

      <p class="normalp">An anchor element is called an anchor because web designers can use it to "anchor" a URL to some text on a web page. When users view the web page in a browser, they can click the text to activate the link and visit the page whose URL is in the link.</p>

      <p class="normalp">In HTML, an anchor can be either the origin (the anchor text) or the target (destination) end of a hyperlink.</p>

      <p class="normalp">With the attribute href, the anchor becomes a hyperlink to either another part of the document or another resource (e.g. a webpage) using an external URL. Alternatively (and sometimes concurrently), with the name or id HTML attributes set, the element becomes a link target.</p>
	
	  <p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_element#Anchor" target="_blank">wikipedia</a> for more information.</p>

    <h1 id="attributes">Attributes</h1>

      <p class="normalp">HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to a HTML start tag.</p>

      <p class="normalp">Several basic attributes types have been recognized, including: required attributes, needed by a particular element type for that element type to function correctly; optional attributes, used to modify the default functionality of an element type; standard attributes, supported by many element types; and event attributes, used to cause element types to specify scripts to be run under specific circumstances.</p>

      <p class="normalp">Some attribute types function differently when used to modify different element types. For example, the attribute name is used by several element types, but has slightly different functions in each.</p>
	
	  <p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_attribute" target="_blank">wikipedia</a> for more information.</p>
	  
	  </section>
	  
	  <section class="main-section" id="Expected_Knowledge">

      <header id="know">Expected Knowledge</header>
	  
	  <p>Some things you need to know before jumping into coding:</p>
	  <ul>
	    <li>How to read</li>
		<li>How to write</li>
		<li>How to listen</li>
		<li>How to be patient</li>
		<li>How to browse the Web</li>
	  </ul>

      <p class="normalp">In order to dive into HTML (and of course, CSS and JavaScript) one has to know how to read and write, how to handle a computer amd browse the web, and how to be patient, focused and determined. A little bit of math wouldn't hurt. It's not much, basically anyone can dive into it and, who knows, make a fine living.</p>
	  
	  <footer>This project was based on <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page" target="_blank">freeCodeCamp</a> and the vast majority of the info displayed here was taken from Wikipedia.</footer>
	  
	  </section>

    </main>
	<hr>
  </body>
</html>

CSS

* {
	box-sizing: border-box;
}

body {
	background-color: #fdfaec;
	color: #524100;
	font-family: timesnewroman;
}

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4);
}

#navbar ul {
  height: 88%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  color: #4d4e53;
  border-top: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
}

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

header {
  font-size: 30px;
  font-weight: bold;
  margin: 10px;
  text-align: center;
}

#main-doc header {
  text-align: left;
  margin: 0px;
}


h1 {
	font-size: 24px;
	font-style: italic;
}

li {
	padding-left: 10px;
}

code {
	background-color: #ced2d9;
}

.normalp {
	text-align: left;
	text-justify: auto;
	font-size: 20px;
}

.linkp {
	text-align: center;
	text-justify: auto;
	border: 20px solid transparent;
}

a {
	color: #4d4d4d;
}

a:visited {
  color: black;
}

a:hover {
  color: brown;
}

a:active {
  color: #ffffff;
}

@media (max-width: 1000px) {
	code {
	background-color: #1d156b;
	color: white;	
}
}

The forum breaks the code when I post them here. I don’t use the forum too much. I just want to know if there’s something wrong with the media query, I’ve tried everything and it still isn’t accepted.

Proof it works on the browser. Again, it is the only problem in my way, otherwise the project is complete. Thank you all for your time.


I’m happy that you completed the projects. However, in the future, make sure you use the correct CSS file name to connect your CSS to HTML.
This was the name you used

techdoc.css

While this was the name to be used.

styles.css

Is there anything else that I can help you with?

2 Likes

Unbelievable. I do that way here on my computer and forgot to change the name when moving it here. And this point didn’t even cross my mind because the test accepted everything else. Anyway, thank you very much.

1 Like

You are very welcome. Keep doing the good work.

1 Like

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 (').

2 Likes