Try Tuts+ Premium, Get Cash Back!
The Beginner’s Guide to Web Design: New Premium Series
plusbasix

The Beginner’s Guide to Web Design: New Premium Series

on Jun 16th 2010 with 46 comments
Tutorial Details
  • Difficulty: Beginner
  • Completion Time: 2 Hours
Download Source Files

Throughout this three-part series, you will learn how to create a website using the latest in web design techniques (HTML5 & CSS3). This series is aimed at those with minimal knowledge of web design. Become a Premium member.

CSS Explanation.
Image sample from tutorials.
Text Shadow.
Image sample from tutorials.

Join Net Premium

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+, Vectortuts+!, and Cgtuts+. For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member.

Dan Harper is danharper on Themeforest
 
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.

Dan is passionate about an open, semantic web and loves playing around with the latest bleeding-edge technologies in our industry. He works mostly in PHP, but wishes he only had the time/job to pick up Rails fully. He’s studying Web Technologies at the University of Portsmouth and is currently Lead Developer at Radweb.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.fatlizardmedia.com Juan C. Rois

    This seems to be a great tutorial, I’d wish I had something like this when I started, and It’s cool that It covers HTML5 and CSS3.
    I guess, in a way it is like I’m just starting, since most of what I know is XHTML 1.0 and CSS2.1.

    Thanks

  • http://taylorhutchison.com Taylor Hutchison

    Quality tutorial, good job. My only thought is that why would a beginner tutorial be for premium members only? It seems to me that premium members have advanced beyond the needs of this tutorial.

    • http://brettic.us Bretticus

      Not a premium subscriber myself but if the typical free tuts were a bit over my head, I might pay to see this one. Too bad they don’t sell these one at a time (but then again, dishonest ppl would probably just copy the videos.)

    • http://www.jeffrey-way.com Jeffrey Way

      Not necessarily. I’ve found that the most eager subscribers are the ones who are just getting started, and are eating up everything they can find.

      I like to post a good mix of beginner and advanced level tuts and videos on the Premium site.

      • Brendon

        Well said! I really enjoy the mix of content on the various Envato sites and from what I see in the Premium section, $9/month is nothing when you realize the quality of content available across the entire Premium Network. Also, any new site concepts on the burner? An InDesign tut site would be a valuable resource.

        Kudos Envato Team!

      • http://taylorhutchison.com Taylor Hutchison

        Interesting. I would have thought beginners would be reluctant to pay considering the wealth of content available on the web. I decided to pay for a membership based on the quality of the content here at Envato, and I would think it would take a beginner some experience to understand the difference between simple how-to and code snippet sites and the professionalism of this site.

        If I had known that many beginners were among the premium subscribers then I would not have posted my criticism.

      • http://sffarlenn.net/blog/ Laneth Sffarlenn

        @Taylor – I joined the Tuts+ program because I was a beginner and, between NetTuts+ & PSDTuts+, I learned a great deal in the first three months I was subscribed.

        A lot of beginners might be loath to spend their money on a subscription, but with the quality involved and the attractiveness of the Premium content, I found I just had to be a part of it. Also, I like supporting an Aussie company.

      • http://www.jacobbednarz.com Jacob Bednarz

        Just because information is free on the internet never means it is best practice or correct procedures. The envato marketplaces is one of the very few places that seems to have best practices and procedures well covered. :)

    • http://jamie@swimandsing.com Jamie

      Interesting Taylor,

      I think that anyone can learn from a “beginning” level tutorial. It is valuable to the real pro who is interested in polishing their skills and keeping up to date. If you think you are already a pro at HTML5 and CSS3, that marks your fatal downfall.

      The beginner IS the one who should pay for the premium membership, they have the most at stake.

      If you know it all by now, why would you even read this tut?

      I may have advanced beyond the needs of this tutorial in my core focus, say PHP / JavaScript, but I don’t know everything about everything.

      Open your mind and learn from your peers, or you are destined to fail.

      Bet you learned something.

      • http://wyome.com John Cox

        I read it, and enjoyed it. I thought it was clear and concise.

        I compare the beginner tutorials to basketball. You always have to make time to work on the fundamentals, as those are the building blocks. In this one, the markup was purely HTML5 with no assumptions made for earlier versions of the spec. I thought that was a good choice by Dan, and though basic, made me think a bit, because I am still in the translation mode of thinking in 4 but writing in 5 which slows me down a bit from time to time.

      • http://taylorhutchison.com Taylor Hutchison

        whatever you say master yoda.

  • http://twitter.com/Sp0nky Sp0nky

    lol i just update my account when i see this tutorial :P
    Thx :)

  • http://sebkom.tumblr.com/ sebkom

    Considering doing what Sp0nky did, for the same exact reason. :D

  • http://wpcanyon.com Boba

    I am regretting for getting the premium membership (bought it yesterday). I am now 2 days behind shedule with my client’s projects because i spend all of my “webdev” time watching the premium screencasts. :)

  • http://twitter.com/xrommelx xRommelx

    some times is really nice come back to basics

  • http://twitter.com/xrommelx xRommelx

    i’d download, and ooks really useful for newbies

  • micko

    Title is misleading, it should be “The Beginner’s Guide to Web Developing”. Word “Design” really got my hopes high but then I read further and it was like punch to my face. Seriously, html5/css3 stuff again, this is really starting to get ridiculous.

  • http://www.hlpipefittings.com pipe fittings

    I have found so many ways through which we can get the good results.Anyways keep it up and keep continue with your valuable thoughts.

  • wtsampler

    This is no big deal, but I downloaded the tut and in Part I, the title of the tutorial.html page is “

  • wtsampler

    Ooops!

    As I started to say…

    This is no big deal, but I downloaded the tut and in Part I, the title of the tutorial.html page is “Generating PDF files with PHP”. Should it be something else????

  • http://sffarlenn.net/blog/ Laneth Sffarlenn

    Been waiting for this one since you announced it on Twitter a little while ago – thanks again Jeffrey, for bringing us excellent quality tuts that are so desperately wanted / needed by so many!

  • http://mariuscroy.com Croy

    Hope this series go video, would like some in depth Jeffrey video series! ;)

  • http://www.johnwooten.info drumkeyjw

    Looks interesting…I look forward to going through this! Thanks!

  • http://www.wpexplorer.com AJ

    I was reading the comments and the first one by Juan got me wondering…

    what is better or which would you recommend as the better option? HTML 5 or XHTML?

    • http://taylorhutchison.com Taylor Hutchison

      It really depends on what you are doing. If all you wish to display on a page is static text, images, etc. then you don’t really have a use for HTML5. If you want to have audio/video, dynamic vector graphics, or work for modern mobile browsers (like the iphone), etc. then HTML5 is definitely the way to go. I’m not aware of anything that XHTML can do that HTML5 can’t so might as well learn it!

  • nightrider

    Thx!
    For this tutoriales :)
    I´m new to this and this I have search after I have try this now and I have little problem.
    I have nice layout that I have work to photoshop and slice out all img
    how shuld I wright to css and html so I can get all my img toghether ?

    here you can se some off the code

    this are to my first img but I cant get my other img to the side

  • http://philwebservices.wordpress.com/ Philwebservices

    It has a good Quality. Thanks for the post!

  • http://www.realtytop.net Dejan

    Nice article …

  • Kim

    After looking this makes me wonder… there is one tutorial here that goes for tables when doing multi-column site and this one goes for the floate. http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/ is the one going for the table use via css. Has there been an idea for HTML5 which one would be the correct one? I know that tables has been big no no.

  • http://www.kadamclark.com Adam Clark

    I’m a +member with little knowledge of coding. I became a member because of articles like these. I am very fluent with .ai and .psd but not Dreamweaver. Please keep these coming! Also, can we get a tut about adding a image/photo slider to your a site with different versions of sliders and buttons for code rookies like myself? Thank You

  • http://smilehomeinsurance.com Home Insurance

    This is a wonderful opinion. The things mentioned are unanimous and needs to be appreciated by everyone.

    Home Insurance
    ************
    gregg

  • http://www.mediamighty.se nightrider

    I´m +member and I´m learning me now to wright css for my first time and I have se lot off your
    tutorials about this :).
    And I like all this and I hope some one can help me out here or if you can do new tutoriales about how to build upp all the images with div I have search and cant finde enny thing about what I search for.
    My problem are I cant get my images with side by side exempel
    my top images—
    left img img2 img3 this images are side by side etc
    I learn how to do this but I cant finde ennything about this I think this shuld be better and yous tables this shuld be very nice if some one can point me or other so whe can do this.
    THX
    For all your help and work with all this tutoriales

  • Sérgio Lourenço

    Hello, being a premium member myself over 24 hours now, i’m just loving it. The premium contents R worth the 9$. This premium web design guide is a must have for all of you who are starting. The contents are amazing. And not just these premium tut, over at psdtuts and vecttus there’s stuff that are well over 9$.

    As one member here said.

    Kudos to the Tuts Team

  • http://philwebservices.wordpress.com/ Philwebservices

    Nice opinion! You should be vowed and pleased! Thanks for your helpful tutorials!

  • http://www.zeenath.com Zeenath Textiles Kottakkal

    Your blog great visually. Have a good and very useful tutorial in your blog. Thank you for making it.

  • Travis

    Im a premium member and I cant get access to this tutorial I dont know who to contact to get help. I cant find it in search either in the premium area

  • josh

    I’ve become a premium member for this tutorial, but cannot figure out how to view it properly. I’ve downloaded the folder from the premium section but when I click open it and click on the part 1 tutorial the pictures aren’t visible. I’d appreciate some help.
    Cheers,
    Josh

  • http://www.nb-nc.com Surface grinding machine

    It wasn’t all my fault. I had to keep getting up to look at this map, sowe’d know where to get off.

  • http://www.filmociraptor.com Will

    I just signed up so I could read this tutorial but for some reason all the Premium page will let me do is download the sources files. Any one have a suggestion?

  • http://www.nbtkjs.com Aluminum Casting

    Thanks for posting this. Very nice recap of some of the key points in my talk. I hope you and your readers find it useful! Thanks again!http://www.noerka.com/docen

  • sérgio Lourenço

    Excellent tutorial. When will the next 2 parts we posted?

  • Pete

    Hi Dan,

    Thanks for the tutorial. Thought I would let you know that in part one, the main content part. You say to put the code under the but I think you actually mean under the (going from your screenshot). I wasn’t sure how to contact you, so I put this here. Looks like you’ve got some spam comments above also.

    Pete.

  • robbo

    Err, ask a stupid question but where are the other 2 parts?

  • http://www.fibermint.com Fiber Optic Splice Closure

    This is no big deal, but I downloaded the tut and in Part I, the title of the tutorial.html page is

  • http://www.nathanhuesmann.com Nathan

    This tut was incredibly helpful. I am definitely a noob in the coding department, so this was great for me. It started with the most basic HTML code and ended with me using CSS to style the entire page to my liking, from simple headers to creative nav, even to making and styling tables for data. To wrap it up, this tutorial is perfect for the novice coder, and it very well exemplifies the unique properties and uses of HTML and CSS, as well as how they interact with eachother. Thanks for making this awesome tut!

  • Joshua

    This was an amazing tut. The directions were clear with multiple examples provided. I went through the entire tut and learned html and css while laying out a basic website. It’s definitely worth the $5.

    I’m actually working on my own website and have a quick question. What tut would you recommend after this one? I’d like to move from the very basic site into a slightly more complex one with a graphic header and nav bars. Obviously there are a lot of great tuts on the site, just looking for a reco.

    Thanks.