Website Header

HTML & CSS
1

Hello, so I developing a new website for my company with new branding and I worked out the
top header and I wanted to know if my coding is in the right order (If I am coding correctly)

LINK : Codepen

Here is what I am ultimately shooting for:

1024Ă—1008 309 KB

2

Your HTML is fine. Not perfect, but fine (I think going from “fine” to “perfect” in my book is more preference as to how you want to tackle it), but your CSS could use some touching up. Nothing major. But so far you are doing good with this. Nothing overly wrong with that approach.

1 Like
3

Ok thats good to hear atleast I am making some progress in development coming as a Graphic Designer. Just curious in what ways I can improve in my HTML? is it my structure?

4

Basically the structure (I’ll ignore CSS class names). Again, nothing major. I would have done it slightly different. Nothing major or anything you should worry about. Perhaps I can write it off as a developers “style” :slight_smile: .

1 Like
5

As you mentioned, coming from a graphic designer background what you did is really good. To improve from here you need to practice things on recommended ways of constructing HTML.

One of my former colleague told me once - “scan you markup and remove the un-necessary nodes which you think are not required”.

For example, in your code, you took three different nodes for including header tag which can be reduced to 1 (at max 2). Think twice before creating a node. That will surely work for you in long run :smile:

<header>
        <div id="header_wrap">
            <div id="main_header">

            </div>
        </div>
</header>
1 Like
6

I add this

<!--[if IE]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

as older browsers can’t always understand html5 and allow CSS styles to apply. Hopefully others will confirm this is a sensible addition.

Are you planning on adding meta tags for description and keywords etc?

You will probably want to add viewports and mobile specific css etc if you want to get it past the mobile test. Your rankings will be affected if you don’t.

I like to use http://nibbler.silktide.com/ for benchmarking, which might be useful once you are up and running.

hth

7

It depends on the situation and what tags you use. You can get away with not adding this depending on the website. It’s certainly not bad to add if it fixes things, but again, case by case basis.

Unless the OP is having trouble with older IE (9 down) then I would hold off on adding it.

Then if he IS having trouble with older IE, actually confirm it is due to the problems that HTML5shiv is supposed to fix.

It’s not something you 100% always throw in. My opinion :slight_smile: .

8

alright ha

9

Yes I am

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.