Web Development from Scratch: Basic Layout

Web Development from Scratch: Basic Layout

on May 21st 2011 with 14 comments
Tutorial Details
  • Difficulty: Beginner
  • Format: Video
This entry is part 12 of 15 in the Web Development from Scratch Session
« PreviousNext »

In this lesson, I’ll introduce you to the new header and footer elements, as we build a basic, but common, web page layout.

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
  • Adrian

    Good tut, keep up the good work.

  • http://www.keepme.in samiuljahan

    nice tuts, keep it up :)

  • Eman

    Loved the explanation of the parent, sibling, child, and descendant.

    Thanks a bunch Jeffrey. Can’t wait for the rest. :)

  • Krazilec

    Hi. What editing program you used in this vid? It’s very handy and i want to try it.

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

      Espresso

  • Brad

    I had no idea you could use body > header. Very good to know. It seems there is always something more to know about CSS just when you think you know it all. Same with mysql

  • techeese

    I’ve been pondering over whether to use the header or div element as the head of my layout.
    i guess it can be used. thanks

  • irfan

    thanks jeff for so nice tutorials keep up the good work.

    can you tell us what else you will cover in this series

  • André

    Hello.

    Thank you so much for these tutorials. I just started to learn all this and bought a few books already, but this series and this page is very great addition. It really is the best source on the Internet I found so far ;-)

    Since I decided to buy the Adobe Master Collection as long as I am still a student, I wonder, if you will stick with the code editior such as Notepad++ or if you are going to teach a little bit of Dreamweaver or at least tell us, why the Pro’s should use Espresso or E-TextEditor. Don’t they use Dreamweaver or are you teaching us the coding first to get to know how HTML works? I can not figure out, why most tutorials are not made with Dreamweaver, which really confused my.

    I know, this is a little bit off topic, but it would be good to know.

    Anyway, I am afraid, that my new gained ability to create websites with a simple code editor on my netbook will distract me in school from listening to the teacher :D

    And again: this series is hilarious :)

    • Kyle Oliveiro

      I think the reason most web developers don’t use Dreamweaver as a text editor for HTML/CSS/PHP files is because it has many unnecessary features, making it a bulky application.

      Programs like Textmate, Espresso and Notepad++ (for Windows) are more lightweight when compared to Dreamweaver and have all the essential features that web developers need.

  • Becky

    I have been trying to use the header and footer elements on notepad++ but it doesn’t seem to accept them. I have asked the question online and downloading something recommended as it seems it is a HTML5 problem but to no avail. Can anyone offer some help?

  • Joanne

    Thanks very much for explaining the relationships between the elements. And also explaining how and why elements are spaced the way they are using tabs!

  • Lars Inge Holen

    Great Tutorial!!!

    Can you please do something like this with php ….

    Maybe you can do a forum from scracth, I’m more than willing to pay for a forum tutorial!!!
    Then you will cover a lot concerning php….

    Keep up the great work

  • Blair

    How do i change quality on ipad?