Hey ninjas, in this PSD to HTML tutorial, we’ll focus on the banner CSS and styling the button and text within it.

CSS gradients generator –

Any questions, ask away 🙂


========== 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. i've watched so many of your series now. They're so helpful and clear. I seem to run into an issue understanding inline elements vs block level elements and while I get them at the fundamental level. It's not obvious when i need to use that trick you show to clear floats, display: block, and content "". Are there any tricks you could recommend for us noobs when troubleshooting these types of issues? Yesterday, for example, I was trying to add a background color to a p tag and it wouldn't change.

    I've also been looking for coding games that help one master CSS. Do you have any site you could recommend?

  2. hey bro its me again ive been following your work, i was wondering why the lead-banner did not automatically set its margin to auto cause of the wrapper div child and u need to set its to 100% to take effect??

  3. So, watching the video, at 4:10 or so, you go up into the CSS Reset code, and set the font-family. This wouldn't seem to be prudent. Wouldn't it be better to add the font-family property into the general body below the reset code? I know you can do it the way you mention, but just wanted to check. Of course, I'm writing this mid-way through the video, so perhaps you correct yourself later on.


Please enter your comment!
Please enter your name here