PSD To WordPress Tutorial #5 – Styling The Header

Wordpress Tutorials

PSD To WordPress Tutorial #5 – Styling The Header


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

SUBSCRIBE TO CHANNEL –

========== 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 –

19 Comments

19 Replies to “PSD To WordPress Tutorial #5 – Styling The Header”

  3. 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;
    }

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

  10. 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?

  11. I really like the karate sound at the end of your intros, really clever! Nice job on the tuts as well. Thank you!

  12. 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 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?

  13. 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

  14. I want to know how you make the page refresh automatically when you save, Is this a feature in brackets?

  16. 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?

Comments are closed.