HTML & CSS Practice Test (with solutions) – Problems, exercises, questions

HTML, CSS

0 Comments

Test yourself with real HTML & CSS practice test questions and coding exercises. Detailed solutions are available for most problems. More advanced problems are available in the second half of the test.

HTML Practice Problems (no CSS)

These questions are geared toward those that have just learned HTML but not CSS yet. More advanced problems that include CSS are available in the second half of this practice test (see the table of contents).

Guides and tools you may need to solve these problems:

Which attribute tells the browser where to go when a hyperlink is clicked?

Open HTML Editor

What HTML tag creates a bulleted list?

Open HTML Editor

Create the following web page (using only HTML):

  • All of the HTML code you'll need was taught in our HTML tutorial.
  • URL for the image: https://www.delidded.com/logo.png

Open HTML Editor

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">

    <title>Delidded Web Design</title>
</head>

<body>

<a href="https://www.delidded.com">
    <img src="https://www.delidded.com/logo.png" alt="Delidded logo">
</a>

<h1>Delidded Web Design</h1>

<p>
    Making <strong>great</strong> sites since:
    <br>
    2018
</p>

<h2>Our services</h2>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>And <em>Javascript</em> programming</li>
</ul>

</body>
</html>

Create the following web page (using only HTML):

Open HTML Editor

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">

    <title>Delidded Web Design</title>
</head>

<body>

<p>
    Want a free quote?
    <a href="/html-css-practice-test/" target="_blank">Contact us</a>
</p>

<h2>FREE Code Sample (written in <em>CSS</em>)</h2>

<pre>
/* This code makes all h1 tags red */
h1 {
	color: red;
}
</pre>

</body>
</html>

Create the following table (using only HTML)

Open HTML Editor

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">

    <title>March Bills</title>
</head>

<body>

<h2>March Bills</h2>

<table>
    <tr>
        <th></th>
        <th>Price</th>
        <th>Due Date</td>
    </tr>

    <tr>
        <td>Phone</td>
        <td>$50</td>
        <td>March 1st</td>
    </tr>

    <tr>
        <td>Car insurance</td>
        <td>$100</td>
        <td>March 5th</td>
    </tr>

    <tr>
        <td>Internet</td>
        <td>$70</td>
        <td>March 10th</td>
    </tr>
</table>

</body>
</html>

Leave a Comment