Answer to Question #309431 in HTML/JavaScript Web Application for Urooj

Question #309431

Create an HTML & CSS quick-reference guide that covers all of the tags we've covered so far (and a few extras) with a description of how to use them and code examples.

Use an external stylesheet.
Be creative with your styling, but keep it professional.
Use the <code> and <pre> HTML tags to include code examples.
Include a minimum of 10 HTML tags.
Include a minimum of 8 CSS properties.
Include a variety of different headers.
Make sure the code is indented and spaced properly.

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <ol>
        <li><pre>Tag h1:</pre> <code><h1>Headling 1</h1></code></li>
        <li><pre>Tag a:</pre> <code><a href="">Link tag</a></code></li>
        <li><pre>Tag p:</pre> <code><p>Paragraph text tag</p></code></li>
        <li><pre>Tag header:</pre> <code><header>Header of cite</header></code></li>
        <li><pre>Tag footer:</pre> <code><footer>Footer of cite</footer></code></li>
        <li><pre>Tag main:</pre> <code><main>Main section of cite</main></code></li>
        <li><pre>Tag section:</pre> <code><section>One of the section list</section></code></li>
        <li><pre>Tag input:</pre> <code><input type="text">Input example</input></code></li>
        <li><pre>Tag button:</pre> <code><button type="button">Button</button></code></li>
        <li><pre>Tag nav:</pre> <code><nav>Navbar tag</nav></code></li>
    </ol>
    <ol>
        <li><pre>Font size</pre> <code><p style="font-size: 18px;">Example</p></code></li>
        <li><pre>Font weight</pre> <code><p style="font-weight: 700;">Example</p></code></li>
        <li><pre>Color</pre> <code><p style="color: red;">Example</p></code></li>
        <li><pre>Border</pre> <code><p style="border: 1px solid gray;">Example</p></code></li>
        <li><pre>Padding</pre> <code><p style="padding: 12px;">Example</p></code></li>
        <li><pre>Text transform</pre> <code><p style="text-transform: uppercase;">Example</p></code></li>
        <li><pre>Transform</pre> <code><p style="transform: rotateY(180deg); display: inline-block;">Example</p></code></li>
        <li><pre>Letter spacing</pre> <code><p style="letter-spacing: 2px;">Example</p></code></li>
    </ol>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #309431 in HTML/JavaScript Web Application for Urooj

Comments

Leave a comment

Related Questions