SHARE

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…

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

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

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

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

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

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

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

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

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

10 COMMENTS

  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?

LEAVE A REPLY

Please enter your comment!
Please enter your name here