Advertisement
HTML & CSS

Coding a Complex Design into CSS and HTML: New Premium Tutorial

by

Today, we’re going to be taking the PSD website design, from Mahmoud’s Psdtuts+ Tutorial ,and coding it into valid, semantic HTML and CSS. Along the way, we'll go over some essential CSS techniques, such as image replacement, sliding doors, and CSS sprites. This is a monster of a tutorial, as the design is a bit complex. Nevertheless, a relative beginner should be able to follow along, so put on a pot of coffee and let's get started!

Help give back to Nettuts+ by becoming a Premium Member!

Final Product


Become a Premium Member

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you'll learn from some of the best minds in the business. Join today!

  • Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
Related Posts
  • Design & Illustration
    Announcement
    New Design Courses Available on Tuts+ PremiumNewdesigncourses 400x277
    Tuts+ Premium courses teach you a single skill from top to bottom, inside out. Currently, more than 15,000 members are sharpening their skills in web design, web development, photography, Photoshop, vector design, video effects and much more. Our dedicated team adds new content weekly, so there’s always something fresh to sink your teeth into. Today, we’re highlighting a few of the latest and greatest course additions to Tuts+ Premium.Read More…
  • Design & Illustration
    News
    New Design Courses Available on Tuts+ PremiumNewdesigncourses
    Tuts+ Premium courses teach you a single skill from top to bottom, inside out.Currently, more than 15,000 members are sharpening their skills in web design, web development, Photoshop, vector design, video effects and much more. Our dedicated team adds new content weekly, so there’s always something fresh to sink your teeth into. Today, we’re highlighting a few of the latest and greatest course additions to Tuts+ Premium.Read More…
  • Code
    News
    Write for Wptuts+Writeforus 400
    Our focus here on Wptuts+ is on tutorials for WordPress developers (makes sense, right?). We cover anything related to WordPress, in particular theme and plugin development. Our tutorials are aimed at anyone from beginner to intermediate, intermediate to advanced, and so on. Ultimately, our goal is to make sure that the reader leaves with more knowledge than when they arrived. What We’re Looking For At the moment we’re wanting to publish more content on areas such as responsive theme development, app themes, unit testing with WordPress, preprocessors (Sass / LESS, in particular), parallax implementation, and a variety of plugin examples. Basic tutorials are welcome, but we’re really after thorough coverage of these areas. Think Tom McFarlin-style (check out Tom’s series’ on Wptuts+ to get what I mean there). At the moment we only accept content in English. We’ll proofread, edit, and provide feedback on your content, but we won’t re-write it for you, so it’s important your English is fluent. Having said that, if you have a question about how to phrase something in English, go ahead and write it as best you can and one of the editors will be happy to provide feedback prior to publishing the article. Don’t let intimidation of the English language prevent you from contributing an article! I’m going to go ahead and assume you know a little about WordPress for this, so you’ll be comfortable drafting your posts in WordPress ;) Let’s Talk Money We don’t expect you to write for us for free! You’ll start out on $150 USD per tutorial, and we bump that up once you’ve written a handful of posts for us. High profile authors can negotiate a higher rate with us, but you’ve really got to know your stuff. I’m talking serious WordPress chops! Some of our regular authors invoice us for $750+ USD per month. That’s not bad for dropping some knowledge and getting some recognition, too! For the right authors, we can guarantee you publishing spots to help you pump out quality WordPress tutorials. Also, who doesn’t love a marketplace badge? You get a special badge for contributing a tutorial to a Tuts+ site ;) Where To Next? Whether you’ve written for Wptuts+ before, or you’re fresh to this tutorial writing business, please hit me up! (Even if you’ve applied before and it hasn’t worked out!) Shoot an email to wp@tutsplus.com with the following info: Name Marketplace username Brief paragraph filling me in on your background and why you want to write for us One link to a tutorial you’ve written, helped with, or is the kind of content you want to create Two ideas for tutorials you’d like to write for us A link to your portfolio and / or GitHub profile Show your passion! Best of luck! I look forward to hearing from you and hopefully working together. If WordPress isn’t your strong suit, don’t forget there are other Tuts+ sites you may consider getting in touch with too: Nettuts+ Webdesigntuts+ Mobiletuts+ Gamedevtuts+ Psdtuts+ Vectortuts+ Audiotuts+ Aetuts+ Cgtut+ Phototuts+ Mactuts+ Crafttuts+ Read More…
  • 3D & Motion Graphics
    Project Files
    Download the "Helvetimation" Animated Font - Tuts+ PremiumAetuts retina helvetimations
    I created this project because I know that people want animated fontfaces. There's a lot of new animated font's coming all the time but they are, in my opinion a little too much. I wanted to create an animated typeface that everyone can use - So I chose Helvetica Neue TT... A free downloadable font.Read More…
  • Code
    Corona SDK
    Create a Physics-Based Puzzle Game - Tuts+ PremiumJiiks5wsw7yw2qtzrz2mkdumdveyn5yjttu4lzlnrd4
    In this tutorial series, I'll be showing you how to create a physics-based puzzle game in Corona SDK. You'll learn about physics manipulation and touch controls. The objective of the game is to get the ball into the container by tapping the correct boxes. Read on!Read More…
  • Code
    Corona SDK
    Create a Sound Based Memory Game - Tuts+ PremiumPreview@2x
    This is the second installment in our Corona SDK Sound Memory tutorial. In today’s tutorial, we’ll add to our interface and the game interaction. Read on!Read More…