Yo Ninjas, in this PSD to WordPress tutorial, I’ll walk you through styling up the header with CSS.


========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to – or

========== Social Links ==========

Twitter – @TheNetNinja –


  1. .wrapper is only slightly moving the elements to the middle for me. It's taking up the whole space. Anyway, my workaround was to use 20% instead of 10px in padding

  2. This may be a stupid question when I set the wrapper max-width to 1180px and center it with a margin:0 auto. My content won't center. Any idea why?

  3. this is my first time coding and im finding problems linking the style css file to index file. when i type font family it blue not purple which tells me its not linking right

  4. Hi and thanks for the wonderful knowledge that you are sharing… I'm a big fan of your tutorials. I am a beginner in web development and I am following your psd to wp tutorials. I just have one question…… Is there any specific reason that you use <ul> and spans instead of divs for the footer or is it just another way of doing the same thing ? Does it help in any way with the responsive website?

  5. This is an amazing tutorial. Thanks for all the trouble.

    Just a quick question, how can we potentially reach you if we have any bits of questions that you might be able to help us with?

  6. Some old techniques at play here. Should be using svg for your logo not CSS image replacement. For your padding just use border box.

  7. This is a nicer way to hide text you'd like to be visible only to screen readers.
    Reasons for it being a better solution are:
    – It won't interfere with translations to RTL(Right-to-left) languages
    – The page will never jump if your element receives focus

    .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;


Please enter your comment!
Please enter your name here