Hey all, in this PSD to responsive website tutorial, I’ll be walking through the header CSS changes.

You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…


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

========== CSS 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. Hi, for the image on the banner, wouldn't you want to keep it as max-width:100%; to not make the picture stretch and pixelated?

  2. Hey, thank for your tutorial its really useful to me, and i have to know which plugin are you using for selecting elements from browser when you select in css? im using atom editor

  3. Great series! Btw a small tip, instead of using text-indent: -10000px which can affect performance in old devices, you can use a new technique which is like this: text-indent: 100%; white-space: nowrap; overflow: hidden;

  4. I have read that hiding the logo text is not best practice. It is better to put the logo image in the html as otherwise it is spammy to use text-indent:10000px.

  5. Hey! First of all, thank you for the great work you are doing!

    I was following this tutorial and got the question, which properties are important when we are "hiding" the text? In "header h1" we have margin and text-indent and in "header nav h2" you added line-height set to 0, for what?


Please enter your comment!
Please enter your name here