I am making a website using just HTML and CSS for a classroom project (we are in the 2nd week of boot-camp.) I have my site made, and want to get others' opinion on the code. I am mostly looking to have the site scale properly on different browsers, but other input is appreciated as well.
body {
font-family: 'Anton', sans-serif;
margin: auto;
}
.top {
background-color: #F25266;
border: #666561 solid 1em;
}
h1 {
color:#F4EF6B;
text-decoration: underline;
text-align: center;
}
.middle {
background-color:#ECECEC;
border-left: #666561 1em solid;
border-right: #666561 1em solid;
}
.pic {
display: block;
margin: auto;
width: 40%;
}
form > label{
color: #2E90BF;
column-count: 1
}
form > input {
background-color: #2E90BF;
border-color: #666561;
width: 14.2%;
column-count: 1
}
#button_one {
font-family: 'Anton', sans-serif;
color:#FFF;
background: #2E90BF;
border-color: #000;
height: 2em;
width: 100%;
font-size: 1em;
cursor: pointer;
margin-top: 1em;
}
#button_one:active {
background-color: #2E90BF;
transform: translateY(4px);
}
.bottom {
background-color:#F25266;
border: #666561 solid 1em;
}
ul {
list-style: none;
column-count: 10;
}
a:link {
color: #6DBF2E;
}
a:visited {
color: #6DBF2E;
}
a:hover {
color: yellow;
}<!DOCTYPE html>
<html>
<head>
<title>Edit User</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<!-- Link to CSS Sheet -->
<link type="text/css" rel="stylesheet" href="assets/stylesheets/style.css" />
</head>
<body background>
<div class="top">
<h1 style>User Information</h1>
</div>
<div class="middle">
<img src="https://i.pinimg.com/736x/57/7b/3c/577b3c221b6ebdc218c347d1260a102e--japanese-haiku-poetry-lessons.jpg" alt="Haiku Example Pic" class="pic"/>
<form>
<label>E-Mail:</label>
<input>
<label>Password: </label>
<input>
<label>Confirm Password: </label>
<input>
<label>First Name: </label>
<input>
<label>Last Name: </label>
<input>
</br>
<button type="submit" id="button_one">Submit</button>
</form>
</div>
<div class="bottom">
<ul>
<li><a href="form_create_haiku.html"><span>Create Haiku</span></a></li>
<li><a href="form_edit_haiku.html">Edit Haiku</a></li>
<li><a href="form_edit_user.html">Edit User</a></li>
<li><a href="form_signup_user.html">Signup User</a></li>
<li><a href="haiku_list.html">List</a></li>
<li><a href="haiku_one.html">One</a></li>
<li><a href="haiku_rules.html">Rules</a></li>
<li><a href="index.html">Index</a></li>
<li><a href="user_list.html">User List</a></li>
<li><a href="user_one.html">User One</a></li>
</ul>
</div>
</body>
</html>1 Answer 1
About the HTML
It’s typically a good idea to add a meta-charset element, which gives the character encoding of the page (e.g., "UTF-8"). This should be the first element in the head element:
<head>
<meta charset="utf-8" />
<!-- ... -->
</head>
The body element can’t have a background attribute (it’s obsolete).
You should associate each label with its input. This can be done with the for attribute or by nesting the input inside the label. You can easily test if it works correctly: click the label, and the corresponding input should get the focus.
You have the closing tag </br>, but miss the opening tag -- however, the br element has no closing tag to begin with, so you probably want to use <br> or <br />. But it doesn’t seem to be correct to use br in this context anyway. br must only be used for meaningful line-breaks. If you just need some vertical space, use CSS instead.
The list seems to be navigation. If that’s the case, you could use the nav element:
<nav class="bottom">
<ul>
<!-- ... -->
</ul>
</nav>