Mark up and style in accordance with a design task

I'm studying MOOC in HTML, CSS and Javascript. And did weekly assignment task which was reviewed by 5 random course learners (I reviewed 5 other student's assignments as well). Unfortunately, I received like mere 3-5 words-long reviews, though all are positive.

Could anybody, please have a look at my code and point out any issues or inconsistencies to the best practices?

Design to implement:

My implementation (hosted on AWS)

Code of my implementation:

```


Online dating

fieldset {
background: lightyellow;
border: 10px solid yellow;
margin-bottom: 10px;
width: 720px;
}
label {
display: inline-block;
width: 180px;
vertical-align: top;
text-align: right;
}
textarea {
width: 360px;
height: 50px;
}
.labelOfRadioOrCheckbox {
width: auto;
}
.sliderLabel {
color: white;
width: 4em;
text-align: center;
}
.darkRedBackground {
background: #A72B26;
}
.purpleBackground {
background: #832F82;
}


Please Enter Your Details For Our Dating Website!


Your Face

Your image:


Image preview:




Your General Details

Name:


Gender:
Male

Female

Age:


Date of birth:


Favorite color:


Which country:

Select
Russia
United States
Italy
France
Australia




Your Indicators

Height:
Short

Tall

Salary:
Poor

Rich



Your Contact Information
Email:

A few things:

• Don't use



s as a design element (i.e. breaking lines for a layout). Use CSS's display: block or surround with ` or
elements.
s are meant for line breaks in text, without breaking the context of a paragraph.



• The for= attribute on elements only works for input elements like , and , it does not work for . Also, the element must have a src= attribute according to the specs.

-
If the label and the input are close, you don't really need to dirty your ID space with unneeded IDs. You can use the following pattern:

Email: 

This also allows you to use the very handy trick of label { display: block; } to instantly break lines easily.

Design-wise:

• Try to use more subtle colors, colors with lower contrast and lower hue and brightness value. Black on yellow is what they reserve for WARNING! signs. (I realize that the design is a given by your professor/teacher, that doesn't mean you can't improve on it and make it look better)

• Try not constraining yourself to a single, set, width. Today, more people tend to surf the web through a mobile device with lower resolutions. Make sure your site looks good for those people.

• Avoid class names like darkBackground and purpleBackground, classes are not design tools. They are semantic tools that happen to be useful with design. Class names like lowerBound and higherBound` sound a whole lot better, it also instantly tells the reader what these elements are.

StackExchange Code Review Q#106048, answer score: 2