Try Tuts+ Premium, Get Cash Back!
Web Development from Scratch: Layout Fragments

Web Development from Scratch: Layout Fragments

on Jun 2nd 2011 with 15 comments
Tutorial Details
  • Difficulty: Beginner
  • Format: Video
This entry is part 13 of 15 in the Web Development from Scratch Session
« PreviousNext »

In this episode, I’m going to teach you how to take a layout fragment on the web, and recreate it with HTML and CSS.

Choose 720p for the clearest picture.
Subscribe to our YouTube and Blip.tv channels to watch more screencasts.

Choose 720p for the clearest picture.
Subscribe to our YouTube and Blip.tv channels to watch more screencasts.

 
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. Also, I'm finishing up my latest book on Laravel Testing! 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
  • Gelar

    Thanks a lot Jeffrey for all the tuts.! can’t wait for the next session

  • Pablito

    This is very helpful. Thank You!

  • Andreas Madsen

    I have 6 years of web development behind me but I still enjoy to see this basic screencasts because you explain everything so clean.

    However I wich to point out that :after is not a pseudo-class but a pseudo-element. The css syntax for this pseudo have also changed a little in the last year. Pseudo-element have two colon signs at the beginning and a pseudo-class has only one.

    pseudo-classes are used to select elements and pseudo-element used to create fake elements (or pseudo element). A pseudo element is just like (or almost) a HTML element it just don’t show up in you HTML structure (tree).

    I am sure that you know this Jerffty, but it have confused me a little in the last month.

  • S

    Hey, what’s that addon/plugin that shows size of selected area on the page? Is it from browser or from OS?
    Cheers, great tut.

  • http://www.jeffadams.co.uk Jeff Adams

    Really enjoying this series Jeffrey, not so much that it’s teaching me anything but sometimes it’s great to be able to point other people to ideas/concepts etc.

    One thing that I’ve done is forwarded these onto my friends who aren’t really designers or developers but they want to understand what goes into making a website – so great series for that.

  • Marcin

    I’ve been doing webdesign for a couple of years now and I most of the time I’m not learning anything new. But there are some little nuances that you often mention that are worth watching. Looking forward to see more and please every so often add some secret techniques that are not supposed to be part of this series or they are too advanced, but it makes you wanna watch the video! Thanks :)

  • http://proistorikos.gr proistorikos

    great work jeff ! u’re helping me become a better web designer :)

  • Jatin

    When is the next episode coming up? It’s been a month. I am excited for it,

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

      It hasn’t been a month. :) I just posted that a few days ago.

  • Kars

    I already know most of this stuff, but I still watched all the vids just to learn a few things. Like using snippets or selecting direct children only in css. I’ll try Snippely for Linux in a bit. I also can still learn a few things from you concerning semantics. There are still some html5 elements that I still don’t know how to use properly. Thanks for explaining header and footer tags in a simple way! I think I’ll tell of these tuts whenever someone wants to learn the basics of webdesign and is looking for learning resources.

  • Kevin

    Hi Jeffrey. I ran onto this website by accident. It is impossible to stop listening to Jeffrey once he starts teaching. I really cannot escape joining just becuase of Jeffrey. I love Video tutorials. When they are well delivered.

  • Chris M.

    I have been doing web design for a few years and I am pretty comfortable in HTML, CSS, and WordPress. That said, I absolutely loved this entire series! Not only was it nice to just have a good basic review (and I loved the videos about software suggestions and online resources), it is also a great resource to point others to (which I plan on doing).

    So thank you Jeffrey, and please do keep them coming! I personally would like to see some advanced theme development tutorials for WordPress, say, from Photoshop mockup, to coding with HTML5 semantics and CSS layout, to actually implementing everything in your own custom WordPress theme. That would be awesome!!! (I have already watched Chris Coyier’s awesome course on Lynda.com, but I am looking for some more resources and other angles of approach and explanation)…

  • http://p5marketing.com Robert Donnell

    Excellent series… you are a very good teacher. I shared this with my son and watched the series myself. Filled in some blank for me!

    Keep up the good work!

    Thanks!

  • vav

    Wow your typing speed and use of shortcuts is amazing. Great intonation too!

  • Eugene

    Best tutorial ever!

    It’s 3:24am and I feel I have no time to sleep, I can’t wait to dig them all but my eye-lids are just giving up :/

    Many thanks.