Build a HTML5/CSS3 Website Layout Without Images – Part 1

Build a HTML5/CSS3 Website Layout Without Images – Part 1

Ever since all the articles showcasing the new features in HTML5 and CSS3 started appearing around the web, I have had the idea of building a website layout without any images. With all the advancements in HTML5 & CSS3 (compared to previous respectable specs) it wouldn’t be too hard to create a decent-looking website that wouldn’t have to rely on images for the layout elements.

Build a HTML5/CSS3 Website Layout Without Images

[tut demo=”http://www.onextrapixel.com/examples/html5-css3-website-layout/” download=”http://www.onextrapixel.com/examples/html5-css3-website-layout/html5-css3-website-layout.zip”]

Here is the layout that we will be building:

HTML5/CSS3 Website Demo

The Contents of our Demo Folder

Folder

In the image above, you can see the contents of the folder containing our finished demo page – as promised: no images. We have an HTML page with our “advanced” markup, a CSS file containing the CSS3-powered styles and a folder containing some fonts that we are going to embed using @font-face.

As always, I recommend laying down the entire website’s content in the index.html file before you even think of touching CSS, so let’s jump right into it.

HTML5 – Making Your Coding Faster and Your Code Leaner

In addition to introducing new semantic elements, HTML5 also makes our code much shorter. I touched briefly on this in my previous article for building a jQuery-powered brush stroke navigation.

Doctype Declaration and The Head Tag

Let’s take a look at the doctype declaration and the head section of our HTML page:

<!DOCTYPE html>
<html lang=en>
<head>
	<meta charset=UTF-8>
	<title>Fictive Company Blog | a blog showcasing the übercoolness of HTML5 &amp; CSS3</title>
	<!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]-->
	<link href=styles.css rel=stylesheet />
</head>

Obviously, this is much cleaner than what you would have if you were writing HTML4 or XHTML. The doctype declaration is only four letters.

Here is how it used to be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The HTML5 way is much better, isn’t it? Next, we open the html tag and set the language of the document. (You can find the subtag for your language at the IANA Language Subtag Registry.) Another change to note here is the absence of quote marks surrounding the en value. You had to include the quote marks in XHTML if you wanted it to validate, but given that this is HTML5, they are no longer necessary.

This might seem like a small issue: how many (kilo)bytes can you save from a few quote marks? But that page won’t be loaded just once; over time, it will pay off. You may actually experience a different problem, you will keep adding the quote marks out of habit. If you use the brilliant Zen Coding plugin for your favorite text editor, it automatically adds the quotes. One solution is to find & replace them all with nothing after you are done working on the file.

Inside of the head element, we first define the character set and add the title. Pretty standard, sans the quotation marks. Moving on, we add a conditional comment within which we load a JavaScript file that will help us deal with Internet Explorer (IE) 8 and below.
A conditional comment is a type of HTML comment that Microsoft uses in IE to, essentially, target specific (or all) versions of its browser.

The comment we use here checks whether the browser opening the page is Internet Explorer with a version number lower than 9. Another comment we could have used is: < !-- [if lte IE 8] -- >; this would check whether the browser loading the page is IE with the version number lower than or equal to 8. Basically, there is no difference between the two comments; they both target the same range of IE versions so you can go with either one of them.

The reason for including Remy Sharp’s HTML5Shiv script is Internet Explorer’s lack of support for HTML5 elements. The problem with IE is the fact that it doesn’t apply any CSS styling to elements it doesn’t recognize. So, in order to force older versions of IE to render HTML5 elements correctly we have to create the unknown elements using JavaScript. If you are not content by just knowing that this solves the problem and want more details, check out John Resig’s HTML5 Shiv post.

Moving onto the body tag, we layout the header section of our page and it’s full of HTML5 elements:

<body>
<header>
	<hgroup>
		<h1>Fictive Company Blog</h1>
		<h2>a blog showcasing the übercoolness of HTML5 &amp; CSS3</h2>
	</hgroup>
	<nav id=global>
		<ul>
			<li><a href=#>Home</a></li>
			<li><a href=#>About</a></li>
			<li id=services>
				<a href=#>Services</a>
				<ul id=subMenu>
					<li><a href=#>Whatever</a></li>
					<li><a href=#>Your Heart</a></li>
					<li><a href=#>Desires</a></li>
				</ul>
			</li>
			<li><a href=#>Portfolio</a></li>
			<li><a href=#>Contact</a></li>
		</ul>
	</nav>
</header>

The Header Element

Immediately after opening the body tag, we make use of one of the new HTML5 elements – the header. Here is how the Word Wide Web Consortium (W3C) defines the header:

The header element represents a group of introductory or navigational aids.

Following their recommendation, the header element will contain our logo, the tagline and the main navigation. With the introduction of the header element, we have a markup element that can contain all those page elements that we intuitively consider a page header. (Or all those page elements that would be nested within a div element with the id of header.) The header element can be used more than once throughout the page and we will be using it again inside of the article elements which will contain the post entries.

The Hgroup Element

First inside of the header element is another new tag – hgroup. We will use the hgroup element to display our site’s logo and tagline within h1 and h2 tags, respectively.

The hgroup element is used to group a set of h1-h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

The hgroup element might seem like an unnecessary element unless you would normally wrap the headings in a div element in order for the title and subtitle(s) to have a common background or style. However, hgroup plays a role in the document outline. The outline algorithm checks your page and presents the heading structure. You can check the outline of your work with the Outliner tool. When the outline algorithm encounters the hgroup element, it will disregard all but the highest level heading (usually h1).

Now, there is one problem: the outline algorithm isn’t perfect or final. For example, the next element that we will discuss, the nav element, and the outline marks it as an “Untitled Section”. There have been some requests to the outline developers that the outline algorithm be changed so that it presents the nav element as “Navigation”. In any case, the hgroup element provides a way for you to group your headings and thus keep them more organized both structurally and semantically.

The Nav Element

We are moving onto the next HTML5 element – the nav element. Inside of the nav element, we will include the site’s main navigation wrapped in an unordered list.

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Using the nav element for your site’s main navigation is kind of a given, but chances are that your site will have more sections containing links; the question is which of these sections should you wrap with the nav tag. Here are some of the uses that I feel would be appropriate:

  • A table of contents (TOC) in a long document;
  • Breadcrumb navigation;
  • Previous/Next & pagination links and
  • Related posts.

According to the spec, these may or may not be proper uses of the nav element. The spec isn’t very clear and the examples they give aren’t very helpful. So, until the spec is final and more specific, we can only rely on the community for deciding on the correct uses of the nav element.

The Article Element

The next element that I want to introduce to you is the article. The main section of our demo page contains three post excerpts and we will wrap each one in the article tag.

<article>
	<header>
		<div class=time>
			<div class=year>2010</div>
			<div class=date>16<span>apr</span></div>
		</div>
		<h1>Sample Post 1</h1>
		<div class=comments>38</div>
	</header>
	<p>Curabitur ut congue hac, diam turpis[…]</p>
	<footer>
		<em>Written by:</em> <strong>Author Name</strong>
		<span class=newLine><em>Tags:</em> <a class=tags href=#>cool</a><a class=tags href=#>modern</a><a class=tags href=#>hype-friendly</a></span>
		<a class=button href=#>Continue Reading</a>
	</footer>
</article>

Here is W3C’s definition of the article element:

The article element represents a self-contained composition in a document […] that is intended to be independently distributable or reusable, e.g. in syndication.

This time the spec is clearer and a blog post (or its excerpt) is pretty much the best match (note the mention of syndication) for the article element. We can, of course, have multiple articles on a page.

You have surely noticed that we have nested a header and a footer element within the article. Both the header and the footer elements can be used more than once throughout a single HTML page. Since the header is “a group introductory or navigational aids”, we have included the date, the title and the number of comments within it. Next, we have a paragraph with the post excerpt, followed by the footer.

The Footer Element

Like I’ve said, the footer can be used more times on a single page if needed and it represents the footer section of a document page or a section of a page.

The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

We have four occurrences of the footer element in our demo page: one for each of the three article elements and a global footer for the entire page. The footer in the article element contains the name of the post’s author, the tags and a button linking the full version of the blog post.

Footer

Our global footer contains three section elements and a copyright notice. Both usages of the footer element are valid and adhere to the W3C recommendation.

The Section Element

The global footer section of our demo page contains three section elements. Within them, we list the blog’s popular posts, recent comments and a short biography of our fictive company.

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

The section element is quite tricky because the spec’s definition makes it sound similar to the div element. I ran into this trap when I started writing the code for the demo page; I had nested the three article elements inside of a section element. I soon discovered the error of my ways. One way of deciding whether to use section is to see if the section you want to wrap in a section element requires a title (heading). As you can see in the definition, the section element typically has a heading.

Another question useful for determining the validity of using the section element is: are you adding the element purely for styling purposes? If you are adding it simply because you need to target that section of the page with JavaScript or because you want to apply a common style to it, you should use a div element instead.

Wrapping the three article elements in our demo page with a section tag would be justified if the section element included a heading like “Recent blog posts”. That would make sense; otherwise the tag within which the article elements are nested is just a styling aid – something to help us target it with JavaScript or CSS.

The Aside Element

The last HTML5 element used for our demo is the aside; we have used it as a container for our page’s sidebar section.

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

As you can see from the spec, one of the perfectly suited uses of the aside element is the sidebar. In the graphic below, you can see the nested hierarchy of the aside element on our demo page.

Aside

We have nested two section elements and a nav element. The first section element contains our Twitter and RSS feed links and the second features the latest tweet. The second section element is also one of the rare cases where it doesn’t have a heading. It could have a heading, something like: “The latest tweet”, but I believe it is unnecessary because people are used to seeing blocks like this and the Twitter handle below the quote makes it all the more recognizable. The nav element in our sidebar is used to display the blogroll and, unlike the main navigation, it has a heading.

[tut demo=”http://www.onextrapixel.com/examples/html5-css3-website-layout/” download=”http://www.onextrapixel.com/examples/html5-css3-website-layout/html5-css3-website-layout.zip”]

Last Words

So, that’s the first part of the article. I have tried to keep it as short as possible and not spend too much time on the ambiguity of the HTML5 spec as it is not final yet. In the meantime, we will have to rely on the community and the good work of the HTML5 doctors to guide us through the implementation of the new elements into our websites.

Thank you for reading and stay tuned for the second part of the article where we will be discussing the CSS3 properties used for beautifying our layout.

As always, I look forward to any questions and comments. Please feel free to comment and start a discussion on the usage of the new elements as that will be the best way to crystallize their purpose.

Useful links

Marko is a freelance web designer & developer based in Serbia. He is always trying to improve his skills and create a better user experience for his clients. These days he is getting into writing and getting closer & closer to getting his degree in mechanical engineering.

Comments

  1. / Reply

    I have bookmarked this for reading later!! its definitely something to get to know!!
    cant wait to read it thoroughly…will comment again later!

    thanks

    :)

    1. / Reply

      You are welcome. :) Looking forward to reading your comments after you check out the article.

  2. / Reply

    I really like CSS3 and HTML5, I would love to use it my self.
    But when i open the page in my IE browser it looks like crap in comperesant to ff.

    I hope we can use this technique in the future tho it’s lovely !

    1. / Reply

      I hear you, it truly sucks to see an inferior rendering of your beautiful CSS3-powered website. On the other hand, we shouldn’t limit ourselves by looking at IE when choosing which technologies to implement. Also, I am hopeful (not too much, but still) that IE9 will be a turning point for Microsoft and that they will stop being so concerned with backwards compatibility. Fingers crossed, anyway. ;)

      Thank you for the kind words, Thomas. :)

  3. / Reply

    AMAZING.. But not all browser supported.. But thanks any way for the file source..

    1. / Reply

      You are welcome and yes, sadly, not all browsers support all of the HTML5 elements featured in the article…

    • Anni,
    • June 2, 2010
    / Reply

    Hi,

    This is great dive into HTML5 tutorial thank you very much.
    sadly Opera-10 is only the fully loaded browser for HTML5 right now.
    I see lot of problems in rounded edge’s – loading fonts – field validations in other browsers.

    Expecting more..!
    Anni

    1. / Reply

      Hi Anni,

      Thank you! :)

      Yes, when HTML5 forms (web forms 2.0) are concerned, Opera seems to be the only browser having full support. According to http://caniuse.com/, at least.

      I might be wrong, but I think that since Google introduced Chrome to the browser market, the browser vendors have never been faster in rolling out versions of their respective browsers with new features and, probably more important: packed with support for new web technologies. The next months should be very exciting: Opera 10.6 will have improved support for HTML5 video, Firefox 3.7 will support CSS animations and, of course, IE9 should come by the end of the year and it should have support for some HTML5 & CSS3 features. (Of course, I haven’t listed all of the improvements that these new versions will bring.)

      Is there anything that you would like to see covered in a future post on Onextrapixel?

        • Anni,
        • June 3, 2010
        / Reply

        Hi Marco,

        Thank you very much.

        I am working with HTML5 from past few months it’s really amazing the way RIA development with HTML5. Until expected W3C Candidate Recommendation stage during 2012 we don’t know what kind of new API’s going to embrace.

        This stage i am much exited with HTML5 forms.

        My expectations in part 2 or part 3 is little focus on
        Input types and client side validations – Local Storage and Session Storage specially with Dataset’s and Cross-document messaging.

        I think Mozilla dumps Firefox 3.7 from schedule may be it’s 4.0 by the end of 2010.

        Anni

        1. / Reply

          Hi Anni,

          Thanks for replying.

          I agree with you, the HTML5 forms feature such great functionality and make development much easier. The second part of this article will feature the CSS3 properties used to make the demo page look like it does (it is already written and will be published very soon). The third part (or maybe a separate article) could contain info and best practices on using HTML5 forms and Local & Session storage. We’ll take it into consideration. Thank you for your input, I really appreciate it! :)

          And thanks for the info on Firefox, that release schedule makes more sense actually.

  4. / Reply

    WOW! This will definitely help us start HTML5.

  5. / Reply

    hahah kind of funny. I actually just did this for my upcoming business site (http://divajn.eu) =D

    But decided to go with images for logo/header anyways in the end. Looks better [so far].

    looking forward to part 2 =D

    • John,
    • June 2, 2010
    / Reply

    Bring it on!…waiting for part two is this tut!

  6. / Reply

    Great tutorial my friend, can’t wait to read part two!

    1. / Reply

      Thanks, Nikola! Part two is coming soon, very soon. :)

  7. / Reply

    Awesome tutorial and such an great idea. I love the menu, very fancy!

    1. / Reply

      Thank you very much. :) I hope that you’ll enjoy the second part as well.

    • Ken,
    • June 3, 2010
    / Reply

    How did you make the stem of the blockquote balloon? I’ve been looking at the CSS and can’t figure out how you did that.

    Also, I notice that Google Chrome is rendering the mozilla-background-gradient correctly. Strange. Is there a regular background-gradient property that can be used that isn’t mozilla specific?

    1. / Reply

      Hi Ken,

      Well, answering your questions feels a bit like cheating because I explain the CSS3 properties, including the background gradients, in the upcoming second part of the article.

      – In addition to styling the blockquote element, I have made use of the :before & :after generated content and styled those. The :before & :after “elements” are basically two blocks stacked on top of each other and if you change the color of the :after element, I think that you will see how the effect is achieved. All credits for the technique go to Nicolas Gallagher.

      – Webkit browsers use the -webkit-gradient property for displaying background gradients and you’ll be able to read more about them in the second part of this article. Chrome isn’t using the property with the -moz- prefix to style the backgrounds. ;)

      Hope this clarifies the issues. Let me know if there is anything else I can help with. :)

    • MauxWebmaster,
    • June 3, 2010
    / Reply

    Great Post, dude!
    Great!
    Wait the second part!
    See You!

    1. / Reply

      Thanks, man! :) I hope that you’ll also like the second part. :)

  8. / Reply

    Hi Marko – this is one hell of a good post! Great job man!

    1. / Reply

      Hi Dejan,

      Thank you so much. :)

  9. / Reply

    its a god theme, may be i can make versi blogspot…hihihihi
    thanks…

    1. / Reply

      Thank you. :) Well, if you can make it work for you on Blogspot… :D

  10. / Reply

    where is support this template, may be on IE s*cks :D

    • Arnoud,
    • June 3, 2010
    / Reply

    Very nice. I love HTML 5 and CSS 3.
    But it’s a big shame that we cannot use this, without doing lots of extra work to make it look the same in Internet Explorer. Microsoft makes us stay in the ‘stone age’ forever.

    1. / Reply

      Thanks. :)

      Yeah, Internet Explorer is the bane of each web designer’s existence. ;) I am hoping that the release of IE9 will make our lives at least a bit easier.

  11. / Reply

    Nice article on HTML5 and CSS 3. we are ready to jump on html5.. now we need all browser html5 compatible.

    Thanks for article looking for part 2.

    cheers.

    • Rich,
    • June 3, 2010
    / Reply

    Nice! I found this article through script and style. I have been looking for a complete demo using html 5; I have found a couple but they all seem to be catered towards articles. why?

    1. / Reply

      Hi Rich,

      I am not sure I understand your question, could you elaborate, please? Thanks! :)

  12. / Reply

    Hey there, nice article (both of them)!!! Even though it’s little bit hard to deal with IE fallback’s I think we should implement more and more of those nice HTML5/CSS3 features…

    Just one doubt: why didn’t you use the “time” tag instead of “div.time” on the article’s header? Anything in particular?

    Congrats Marko!

    1. / Reply

      Hi Abraão,

      Thank you very much. :)

      Hehe, I was wondering if someone would mention the time element. Nice catch, man. :) The only reason for not using the the time element was that I wanted to show the CSS rotation and I couldn’t nest any div or span elements within the time tags (it doesn’t validate). I might talk about the time element in a future article.

      Thanks for reading.

    • Ruben Rojas,
    • June 5, 2010
    / Reply

    Excelent article, this is not an article, is a tutorial of html 5, here explain the parts of the file and it’s sections.

    Great, i will read the part 2 soon, thanks for share your experience and knowing.

  13. / Reply

    ur all gay

    • Bob,
    • June 7, 2010
    / Reply

    thats offensive to my people

  14. / Reply

    Great article, can’t wait for part two :-)

    1. / Reply

      Thanks, the second part is already available here.

    2. / Reply

      Agree, as always intresting post

  15. / Reply

    Great article Marko!

    Did you know there’s an html5 element called “time” you may want to use as opposed to using a div with class “time”?

  16. / Reply

    Sorry, I didn’t read the comments. Use of the time element was already requested and answered.

    1. / Reply

      No worries, glad you liked the article. :)

      BTW, thanks for the Twitter follow. :D

    • Saul,
    • July 13, 2010
    / Reply

    Fantastic article: clean, concise, and straight analysis of the integral updates of HTML5 and CSS3 and how to implement them regularly. Much love to your part of the world from the USA.

  17. Some real fantastic work here. It is intresting seeing the website with different browsers and really seeing how far behind IE8 and 7 are behind the rest. It does look real good in the latest version of firefox as expected.

    Once all the browsers catch-up this will really be the way that websites will be getting built in the future.

    • kralin,
    • July 29, 2010
    / Reply

    great work marco!

  18. / Reply

    Great post

    very good practice of HTML5

    Why you dont use time and datetime (html5 tag) ?

    Thank

  19. / Reply

    I agree there is a little ambiguity on the nav element presently but the document clearly states:

    “only sections that consist of major navigation blocks are appropriate for the nav element.” – http://dev.w3.org/html5/spec/Overview.html#the-nav-element

    I think it comes down to asking oneself whether the links are navigational in structure or just links to other parts of the site. I would put forward the argument that if the links are in the context of the hierarchy of the site (as breadcrumbs and pagination are) then semantically they are navigation rather than in site hyperlinks. This is only my opinion on the intention of the W3C spec.

  20. / Reply

    just amazing bro !
    thanks :)

    • maxim,
    • September 12, 2010
    / Reply

    Great tutorial. I am newbie in html though i will try it. I will try to implement it in blogger blog. I don’t know if anybody help me to solve my mistake or not.

  21. / Reply

    Good one. Bring Smile to me

    Hope you like the below one!
    Advocating on same philosophy ..the talk i gave recently
    http://sandbox.osscube.com/slides/2010-osidays-css3/index.html

    • Ruana,
    • December 11, 2010
    / Reply

    Very interesting article. I downloaded it to review the CSS later.
    A few words on the browsers issue. The one major problem for the near future that I see is that – despite the vendors seemingly have taken up the challenge that Google Chrome forced on them and release browsers with improved support for new web technologies it will be the users who’ll give us the most headache. That is the normal user who is not connected to the business of web design, web development, apps development, etc.. Users who still use IE 6 are found among those people. They bought their home computers some years ago and never made any updates whatsoever – except for their virus scanners virus signatures.

    Therefore spreading the word is vital. I mean not only talking and writing posts on the web community sites, designer blogs, and the likes but providing the information on sites the average web surfer visits on a regular basis, well, more or less regular.
    And I wouldn’t know how to achieve that. Not even where to start. So I fear we will be fighting IE 6, 7 and 8 for some time to come.

    1. / Reply

      Hi Ruana,

      Thanks for the comment(s). :)

      The problem with people who using older browsers is something Andu Clarke takes on in his Hardboiled Web Design book (http://hardboiledwebdesign.com/about/). Also check out this video where he talks about some of the stuff from the book: http://www.vimeo.com/17137962. He explains it much better than I could but the bottom line is the fact that websites don’t have to look exactly the same in all browsers.

    • Ruana,
    • December 11, 2010
    / Reply

    Sorry for the double posting but there’s one thing I’d like to add. I just viewed the demo page in IE 7. Of course, it does look bland and somewhat boring without the graphical simulations but it WORKS. It IS perfectly viewable and readable. There’s only one real reason why developers can’t use CSS3 is if the page doesn’t degrade nicely. This one does.
    If it’s not a client web site I can’t see any reason why someone shouldn’t use a layout like yours. I certainly will think about it when I’m working on my next private project.

    1. / Reply

      No worries, it’s flattering to see such a response to the article.

      The key to using CSS3 and HTML5 is finding the right project for it and, more importantly, using only as much of it as the project allows. You can’t really use the advanced CSS3 stuff if the target demographic is some corporation with most of the employees working in Windows XP with IE6 or 7. :(

      Again, thank you for the comments. :)

  22. / Reply

    http://www.eve-ro.com

    Best viewed in Safari or Chrome latest versions.

    EVE-RO Corporation website is an EVE Online related fan-site, an experiment of mine, build using HTML5 & CSS3 only. The main focus of the website is the new web technologies and the cool stuff you can do using plain HTML5 and CSS3. No JavaScript is required (or needed) for the animations/effects. As a matter of fact there is no JavaScript on the website except Google Analytics tracking code.

    • Tran Thi Huong,
    • December 24, 2010
    / Reply

    Nice!

  23. / Reply

    wow!! I think is time to start code in html5

  24. / Reply

    easy steps to build html5 website Here

  25. / Reply

    Good post, have recently changed my blog and needed to use css so this has helped

  26. / Reply

    it is really super

    • murali,
    • April 22, 2011
    / Reply

    It is really super#####

  27. / Reply

    Cool, still learning but think im grasping this.

    • Daryl Tupan,
    • July 14, 2011
    / Reply

    Hey Mark, i’m absolutely a noob, i’ve used your project and added images but my images doesn’t appear. do you know why?

    • Chinnu,
    • July 17, 2011
    / Reply

    Can I use this template for my website with appropriate credits to you??????

    1. / Reply

      Hi there!

      Sure, you can use the template. Just show us some love with a credit link. ;)

      Looking forward to seeing how it looks on your site.

        • Chinnu,
        • July 18, 2011
        / Reply

        Thank u very much Mark!

        I don’t know much about web designing. My site may not look great. But will share a link once i am done with it.

        Thanks again.

  28. / Reply

    HTML5 is going to be incredible, I believe Apple is going to use HTML5 for their products instead of flash

  29. / Reply

    web design & development technologies always seems to be in evolutionary period, I remember since I have started doing some html the first few issues were between IE & Netscape.

    few conflicts which I remember were , , margins

    • Ouk Daroath,
    • August 14, 2011
    / Reply

    Hi,

    It’s really nice practice for me with HTML5 and CSS3! Howerver, I try to lower down the drop-down menu to 40px it looked nice with Safari, Chrome and Firefox. It’s a bit higher with IE9. For Opera it’s also nice but the width of the drop down menu is double.

    Anyone could help to fix this?
    Thanks

    • Crazy Guy,
    • September 29, 2011
    / Reply

    Thanks dude… It really looks cool & informative…

  30. / Reply

    Hey man, appreciated what you have down here – it helped me.

    • bobby,
    • November 6, 2011
    / Reply

    This really helped me alot thanks for the information you have given us here. I appreciate it alot.

    • MAX,
    • November 12, 2011
    / Reply

    This is good news, image slowed my blog down and I have to use as less images as possible. With HTML5, my website performance may improve a lot.

  31. / Reply

    very good, thanks. bai viet hay

  32. / Reply

    This site helps me a lot. Thx for this type of simple description……..:-)

  33. / Reply

    Some fantastic easy to follow information here. I bookmarked this site and will be coming back regularly. Thanks for putting up this information.

  34. / Reply

    Hi Marko,
    Really like the delivery, design and simplicity of what you have done. I am going to book mark and harrass you for the next installment.

    Great stuff, which I will of course use for my future projects :-)

    Regards John

  35. / Reply

    Dropping of the quotation marks is not standard, it is still a personal choice. It’s very liberating though.

  36. / Reply

    That is the most useful article I have read, Marko. It is clear, informative and helpful. I am redesigning my main site and will plagiarise your work mercilessly (having no design skills). The look is exactly what I hope to achieve.

    Also, I shall be sending my students to this web page as an example of how write HTML5 and how to document code.

    Many thanks,

    Andy :-) (Yes, I know smilies are old hat, but so am I and it says what I feel.)

  37. / Reply

    Hi,
    this article is very useful and i would just like to ask u can I use this templetes for designing my website for my company or it is copy right protected? plzz do reply

  38. / Reply

    Hey that was really needful. Thanks for sharing. I’ll surely be looking for more.

    • Matt,
    • April 23, 2012
    / Reply

    This combination is going to transform the industry. Time to get reading and up to speed if you want to stay ahead

  39. / Reply

    HTML5 is going to be incredible, I believe Apple is going to use HTML5 for their products instead of flash

    • Jhon,
    • May 29, 2012
    / Reply

    Amazing post dude.

    • Kimberly,
    • June 1, 2012
    / Reply

    This may be a no-brainer, but I am just switching to CSS3. In the header of my pages, do I need to change anything? Like this { type=”text/css” } Or can I just start coding CSS3 as if it was a CSS file?

    Thanks in advance.

  40. / Reply

    Thanks . really great guide

  41. / Reply

    Nice work!

    Im planning on using it on my webiste (www.queropontos.com). Could I? I’ll left the Copyright at the footer section and change everything else, but based on your astonishing design!

    Cheers!

    1. / Reply

      Hi Daniel,

      Sure you can.

    • rupesh oyasis,
    • July 11, 2014
    / Reply

    Hi……..Marko,
    This post is very useful and very informative, Thank you…..

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.