HTML5 and CSS3 Project

A first look at . . .

HTML5

This is my first adventure with setting up an HTML5 document. I will be using some of the basic elements used to create a valid HTML5 web page. Some of these elements/tags are nav, header, hgroup, section aside, article, and footer. These are what researchers, after a number of studies, said people are commonly naming the id's it div tags, therefore it would now make more sense to replace the word div with something more descriptive.

The first two things I did were to change the doctype to HTML5 doctype, and changed the character encoding to HTML specifications. Then I renamed the div for the masthead to header, and the div for the navigation to nav. Then I added an hgroup, next a section with a header and paragraphs, plus another section with a header and paragraphs. I also added a footer tag to replace the div tag in the footer. Finally, I added code to both the source code and the CSS so that older browsers, including IE would know how display without too many problems even though they are not familiar with HTML5.

CSS3

Next, I explored some of the new CSS3 codes. I wanted to make the h tags stand out more, so I added code in the CSS to create white drop shadows, which I think look really cool. Next I wanted to make the text in the paragraphs easier to read, so I coded columns into the CSS, and to make them even more readable, I added a rule in between the columns.

Then I decided to play around a bit with rounded borders and shadows. I added rounded corners to the masthead and the main content areas. It looked really kind of cool, but I did not like the way some of the shadows over lapped into the other elements, so I made adjustments to some of the margins. Next, after a bit of playing around, I added two inner glows to the masthead to try and make it stand out a bit more, and I changed the rounded corners back to square, as I thought that it made it look better, just not an afterthought.

Return to top