The following is a review written to the Web Dev team at ALC Everett about their website: Illuminati Xtremists Alliance
Amazing work here team. I’m very impressed that you have taken on an entier web project from concept to execution. You are off to an amazing start and with diligent study and practice you will surely achieve what ever goals you set out to accomplish.
While reading this document please keep that in mind, I will be direct with my critique and you should not mistake this for disappointment or any sense of failure.
CSS Reset
Download and link to a CSS reset style sheet. The CSS reset script will clear up cross browser inconsistencies with your design.
- Read about CSS reset: cssreset.com/which-css-reset-should-i-use/
- Download CSS reset code from: cssreset.com/
Understanding the Box Model
You need to do research into the box model. The manner in which you positioned elements on the page makes logical sense but it not necessary when using CSS attributes like float. Please familurize yourself with The Box Model™.
Read: css-tricks.com/the-css-box-model/
Watch: youtube.com/results?search_query=css+box+model
Once you have a better understanding of the box model you can apply floats to your elements to get them to position how you want while maintaining flexibility.
The site breaks when viewed on screens that are smaller than those you developed the site on, this is because you are positioning with absolute values rather than relative values. Example of a absolute value would be
.Header img{
margin-left: 1000px;
margin-top: -445px;
width: 250px;
}
The margins are set in pixels (e.g. 1000px). This same thing could be expressed with relative values like so:
.Header img{
margin-left: 50%;
margin-top: -445px;
width: 250px;
}
Padding!
Lots of elements are flush against their containers, you need to add padding across the site.
Please look into CSS padding (this relates to the box model).
Color and readability
The style choice is nice but some elements and text are hard to read, see this example:
The yellow text on light portions of the pictures are impossible to read. Please fix this. Use alternative colors or apply drop shadows or text outline (called stroke) to make text pop.
Conclusions
If you focus on these areas you’ll improve the site quite a bit and we should be ready to put it live.
Please reach out to me and make solid request (ask me to help you directly and at a particular time) to review these things with you if you need.