HTML & CSS Practice Problems (with solutions)

HTML, CSS

0 Comments

HTML & CSS Practice Problems

This section includes coding exercises that test your knowledge of both HTML and CSS. If you just want to test yourself on one of these topics, but not the other, you can also do that. The HTML and CSS solutions are separate and can be viewed independently.

Guides you may need to solve these problems:

Write the HTML & CSS code to recreate the following buttons

  • Try moving your mouse over each of the buttons to see how it changes.
  • You don't have to use the same colors we did. Pick your own colors.

Open HTML Editor

HTML

<input type="button" class="btn" value="Button 1">
<input type="button" class="btn gray" value="Button 2">

CSS

.btn {
    /* Add some space to the right of each button (so they don't touch) */
    margin-right: 10px;
    /* Add some space around the text inside the button */
    padding: 8px 15px;

    color: white;
    background-color: #3498db;

    font-weight: bold;
    font-family: Arial, sans-serif;
    font-size: 14px;

    border: none;
    /* rounded corners */
    border-radius: 5px;
}

/* Style differently when mouse is hovering over button */
.btn:hover {
    background-color: #3cb0fd;
    /* change the mouse cursor */
    cursor: pointer;
}

.btn.gray {
    background-color: #737373;
}

.btn.gray:hover {
    background-color: #8c8c8c;
}

Write the HTML & CSS code to recreate the following page

  • URL for logo: https://www.delidded.com/logo.png
  • Don't worry about getting the colors exact.

Open HTML Editor

HTML

<div id="header">
	<a id="logo" href="/">
        <img src="https://www.delidded.com/logo.png" alt="Delidded.com Logo" height="36">
    </a>

    <!-- Using ul tag to hold menu links, which makes them easier to style. -->
	<ul id="menu">
		<li><a href="/html/">HTML</a></li>
		<li><a href="/css/">CSS</a></li>
		<li><a href="/javascript/">JavaScript</a></li>
	</ul>

    <!-- 2nd menu that will be on the right side of the header -->
	<ul id="menu-right">
		<li><a href="/login/">Login</a></li>
	</ul>
</div>

<div id="main">
	<h2>Delidded Web Design</h2>

	<p>Welcome to <span class="domain">delidded.com</span>.</p>
</div>

CSS

/*
The body tag has some margin by default on most browsers,
which will make our blue header have some white space around the edges,
so we're removing the margin.
*/
body {
	margin: 0;
}

#header {
	background-color: #2DAACD;
	height: 40px;
}

/* Add some space on each side of the logo */
#logo {
	margin-right: 20px;
	margin-left: 10px;
}

/* Remove default border around images on some browsers */
#logo img {
	border: none;
}

/* Style both of the menus in the header */
#header ul {
	margin: 0;
	padding: 0;

    /* Allow the menu to sit next to the logo (instead of its own line) */
	display: inline-block;

    /* Align menus at the top of header,
       so we can center the link text later. */
	vertical-align: top;
}

/* Style the li tags holding the menu links */
#header ul li {
    /* Add some space to the right of each menu link */
	margin-right: 20px;

    /* Display menu items next to each other horizontally (instead of vertically) */
	display: inline-block;

    /* Make the line-height for the menu links the same height as #header,
       which will center the text vertically. */
	line-height: 40px;
}

/* Style all links in the header */
#header a {
	color: white;

    /* Remove the default underline on links. */
	text-decoration: none;
}

/* Add some space around the text in the main section */
#main {
	padding: 10px;
}

/* Move the Login menu to the right side of the header */
#menu-right {
    float: right;
}

/* Style our domain name */
.domain {
	color: green;
	font-weight: bold;
}

More questions coming soon

This page is a work in progress. We'll be updating the page as new questions are created.

If you have any suggestions for the types of problems you'd like to see (or any other suggestions that will improve the practice test), please let us know in the comments.

Leave a Comment