Tell us what’s happening:
Hello,
I’m trying to finish the HTML part of this assignment, but I just can’t figure out what they mean by: “Your Technical Documentation project should use at least one media query.” When I search for “media query” only CSS-topics show up on my screen.
I also don’t know how to put some meaningful on my page, so I just copy-pasted some codes.
Any tips without spilling to much info of course.
Thanks in advance, Roy
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>"Responsive Web Design"</title>
</head>
<body>
<main id="main-doc">
<section class="main-section" id="About_Markdown">
<header><h2>About Markdown</h2></header>
<p>Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup languages.</p>
<p>Using Markdown is different than using a WYSIWYG editor. In an application like Microsoft Word, you click buttons to format words and phrases, and the changes are visible immediately.</p>
<p>Markdown isn’t like that. When you create a Markdown-formatted file, you add Markdown syntax to the text to indicate which words and phrases should look different.</p>
<p>For example, to denote a heading, you add a number sign before it (e.g., # Heading One). Or to make a phrase bold, you add two asterisks before and after it (e.g., **this text is bold**). It may take a while to get used to seeing Markdown syntax in your text, especially if you’re accustomed to WYSIWYG applications.</p>
<code>if (true) { var x = 5; } console.log(x); // 5</code>
</section>
<section class="main-section" id="cheat_sheet">
<header>
<h2>Cheat Sheet</h2>
</header>
<h3>Overview</h3
<p>This Markdown cheat sheet provides a quick overview of all the Markdown syntax elements. It can’t cover every edge case, so if you need more information about any of these elements, refer to the reference guides for basic syntax and extended syntax.</p>
<h3>Basic Syntax</h3>
<p>These are the elements outlined in John Gruber’s original design document. All Markdown applications support these elements.</p>
<table class="table-basic-syntax">
<tr>
<th>Element</th>
<th>Markdown Syntax</th>
</tr>
<tr>
<td>Heading</td>
<td># H1<br>
## H2<br>
### H3</td>
</tr>
<tr>
<td>Bold</td>
<td>**bold text**</td>
</tr>
<tr>
<td>Italic</td>
<td>*italicized text*</td>
</tr>
<tr>
<td>BLockquote</td>
<td> > blockquote</td>
</tr>
<tr>
<td>Unordered List</td>
<td>
<ul>
<li>-first item</li>
<li>-seconde item</li>
<li>-third item</li>
</ul>
</td>
</tr>
<tr>
<td>Ordered List</td>
<td>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</td>
</tr>
<tr>
<td>Code</td>
<td>`code`</td>
</tr>
<tr>
<td>Horizontal Rule</td>
<td>---</td>
</tr>
<tr>
<td>Link</td>
<td>[title](https://www.example.com)</td>
</tr>
<tr>
<td>Image</td>
<td></td>
</tr>
</table>
<code>if (true) { var x = 5; } console.log(x); // 5</code>
</section>
<section class="main-section" id="basic_syntax">
<header><h2>Basic Syntax</h2></header>
<h3>Overview</h3>
<p>Nearly all Markdown applications support the basic syntax outlined in the original Markdown design document. There are minor variations and discrepancies between Markdown processors — those are noted inline wherever possible.</p>
<code>if (true) { var x = 5; } console.log(x); // 5</code>
</section>
<section class="main-section" id="extended_syntax">
<header><h2>Extended Syntax</h2></header>
<h3>Overview</h3>
<p>Nearly all Markdown applications support the basic syntax outlined in the original Markdown design document. There are minor variations and discrepancies between Markdown processors — those are noted inline wherever possible.</p>
<code>if (true) { var x = 5; } console.log(x); // 5</code>
</section>
<section class="main-section" id="hacks">
<header><h2>Hacks</h2></header>
<h3>Overview</h3>
<p>The majority of people using Markdown will find that the basic and extended syntax elements cover their needs. But chances are that if you use Markdown long enough, you’ll inevitably discover that it doesn’t support something you need. This page provides tips and tricks for working around Markdown’s limitations.</p>
<h3>Underline</h3>
<p>Underlined text is not something you typically see in web writing, probably because underlined text is nearly synonymous with links. However, if you’re writing a paper or a report, you may need the ability to underline words and phrases. A couple of applications like Bear and Simplenote provide support for underlining text, but Markdown doesn’t natively support underlining. If your Markdown processor supports HTML, you can use the <ins> HTML tag to underline text in your document.</p>
<code>if (true) { var x = 5; } console.log(x); // 5</code>
</section>
<nav id="navbar">
<header>Markdown Guide</header>
<a class="nav-link" href="#About_Markdown">About Markdown</a>
<a class="nav-link" href="#cheat_sheet">Cheat Sheet</a>
<a class="nav-link" href="#basic_syntax">Basic Syntax</a>
<a class="nav-link" href="#extended_syntax">Extended Syntax</a>
<a class="nav-link" href="#hacks">Hacks</a>
</nav>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36
Challenge: Responsive Web Design Projects - Build a Technical Documentation Page
Link to the challenge: