Convert a Warm, Cheerful Web Design to HTML and CSS: Chapter 5
videos

Convert a Warm, Cheerful Web Design to HTML and CSS: Chapter 5

on Dec 25th 2010 with 12 comments
This entry is part 4 of 8 in the Photoshop to HTML Session
« PreviousNext »

Continuing on with our Photoshop to HTML session, in this lesson – split into four videos – we’ll use CSS to style our webpage.

Chapter 5a: Build the Header Section

Press the HD button for a clearer picture.

Chapter 5b: Build the Banner Section

Press the HD button for a clearer picture.

Chapter 5c: Styling the Main Section

Press the HD button for a clearer picture.

Chapter 5d: Styling the Footer

Press the HD button for a clearer picture.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. I'm incredibly passionate about modern software development, and am the author of Laravel Testing Decoded! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://bitslice.net Carlos Cessa

    This is a great tutorial, is quite awesome that you take the time to do this, just one suggestion where you apply the box-shadow property to the images in the second part (the header) you should instead of using the blueish color that gives a weird halo to the images on top of the brown background, use an rgba black color i try using a 0.5 for the alpha, and it seems nice, just so you know
    And again great tutorials, keep up the good work!! =D

  • http://www.lucasdelrio.com.ar Lucas del Río

    Awesome!!! finally someone teach me easily how to use some CSS3 for a better effect :D
    Thanks a lot for this revision on CSS aspects, really great work here.

  • Justin

    Hi! Great tutorial!!! Thank you! This is helping so much!

    I have one question —> it might be stupid and I may have been staring at the screen too long.

    In, Chapter 5c: Styling the Main Section, I’m having difficulty understanding how you use the

    .tabs

    Is “.tabs” a class?
    I do not see it used in the HTML and I’m confused.

    When I put it in the CSS it works though… so I must not be seeing something?

    Thank you in advance!
    - Justin

  • Ash

    I may have missed it in video one, but how do you style the form input box in order to give it rounded corners. Could you please advise me or point me to the time section when it is discussed. Thanks for a great tutorial so far!

    Ash

  • RivianTraveler

    Hi, I just wanted to say Thank You for these tutorials. this is the best session I ve seen so far.
    You re just awesome, thanks again!

  • sohel

    wow its nice to learn…

  • http://www.webqnome.com Ziyaddin

    Wow! You are amazing! Thanks for those tutorials! ;)

  • Barb

    I can’t get the images in the banner section to align correctly… they align absolutely with the edge of the browser window, not with the containing div, not sure why… does anyone know?

    • http://www.facebook.com/profile.php?id=1195975103 Rodrigo Ignacio

      I am having the same problem!! Here are some shots, the css code seems to be exactly the same as in the tut but for some reason they do not align at the bottom like they do on the tut. why is this?

    • http://www.facebook.com/profile.php?id=1195975103 Rodrigo Ignacio

      I just found something that fixed it, but idk if it is the proper way to do it. Accorfing to the firefox tool, the problem was a the reset.css file under img. i hope that is :)

      • Barb

        Hi! I fixed it in the end as well, for me what worked was setting the position of the parent container to absolute or relative (so basically that needed to be specified otherwise the child element couldn’t use it as a reference). Maybe mine isn’t the perfect solution either, but at least it works! :)

  • Sanjay Maurya

    5a.zip is not available for download…, tried with file name sitename5a.zip too!!!