HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Demo of advertisment website

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
websiteadvertismentdemo

Problem

A fully functional demo URL: http://69.24.73.172/demos/index.html

Note that in FireFox there is a small horizontal scrollbar bug which I have fixed at home.

HTML:

```





Welcome to Scirra.com























Home
Forum
Contruct
Arcade
Manual
Support
Contact



Homepage
Construct
Products
Community Forum
Contact Us








Scirra software allows you to bring your imagination to life





Export your creations to HTML5 pages





Another description of some image





Something motivational to tell people




Latest from Twitter

The news on the block is this. Something has happened some news or something. About 6 hours ago
Another thing has happened lets tell the world some news or something. Lots to think about. Lots to do.About 6 hours ago
Shocker! Santa Claus is not real. This is breaking news, we must spread it. About 6 hours ago

Solution

-
You should add the meta viewport tag to ensure mobile browsers have a good standard viewport:



-
You should specify sans-serif as the last resort for your font stack. Also if you want Helvetica to be used, move it to the front. If not, you can simply leave it out. That's because one can assume that on every system where Helvetica is installed, there is also Arial.

font-family: Helvetica, Arial, Verdana, sans-serif;


-
Something small: If you have a hex-based color value like #0066ff, #ffffff or #000000 for example, you can write the shorter version: #06f, #fff and #000

-
Ommit the unit for zero values like 0px: box-shadow: 0 0 5px #555;

-
You're resetting the margin on a lot of elements. Group this together to decrease repetition:

h1, h2, h3, h4, h5, h6,
p, blockquote {
    margin: 0;
}


If you want to set a bottom margin, you only need margin-bottom: 10px;, not margin: 0 0 10px 0;

-
For clearfixing, you don't need a new div element. Add the following rule declaration to your CSS and add clearfix to the element you need to fix. (e.g. a navigation with floated items)

clear:after {
    content: "";
    display: table;
    clear: both;
}


-
There is no reason to prefix border-radius anymore. You can use the unprefixed version safely.

For the time, I'll stop here. I'd be great to hear some feedback. I have a few things in mind, but I don't know if you want to go this deep. No offense. ;) Feel free to ask questions, if you have them.

Code Snippets

<meta name="viewport" content="width=device-width, initial-scale=1.0">
font-family: Helvetica, Arial, Verdana, sans-serif;
h1, h2, h3, h4, h5, h6,
p, blockquote {
    margin: 0;
}
clear:after {
    content: "";
    display: table;
    clear: both;
}

Context

StackExchange Code Review Q#1077, answer score: 8

Revisions (0)

No revisions yet.