Try Tuts+ Premium, Get Cash Back!
Building a Website in Progressive Steps: Page Elements
basixvideos

Building a Website in Progressive Steps: Page Elements

on Dec 5th 2011 with 15 comments
Tutorial Details
  • Topic: Web page elements
  • Difficulty: Basix
  • Screencast duration: 32 mins
Download Source Files
This entry is part 4 of 6 in the series Building a Website in Progressive Steps

Building a Website in Progressive Steps

In this part of our Building a Website in Progressive Steps series we’re going to cover a wide array of elements on a web page, how they are placed, then we’ll discuss the importance of each. So let’s dig into the tutorial and start talking web page elements!

Step 4: Web Page Elements

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Series Navigation<< Building a Website in Progressive Steps: The Home PageBuilding a Website in Progressive Steps: Blog Page >>

Justin Hubbard is elion on Codecanyon
 
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.

Since 2007 Justin Hubbard has been helping businesses by creating timeless, memorable logos as part of a branding package and modern, user-friendly websites. "Creating websites, designing logos and building mobile applications, that's what I do and I love it! It's gives me great pleasure to be able to help businesses grow through their web presence; and when it's successful, that's the best feeling anyone could ask for."  

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

    thank you very mutch
    very usefull serie

    • http://www.justinhubbard.me Justin Hubbard
      Author

      I’m glad you’ve enjoyed it so far :)

  • Dan Israel

    The link to download the video isn’t working…

    • http://www.snaptin.com Ian Yates

      Sorry Dan, I missed this comment – download link fixed :)

  • Chris

    @10:20 why not just use a text box? You don’t need to use soft line breaks.

    If you still wanted the text to wrap around the image, just create a shape that goes around it, and then type in the shape. The soft line breaks are too hard to manage if you need to change things around.

    • http://www.justinhubbard.me Justin Hubbard
      Author

      You will notice in different videos I may show different methods for doing the same things so that you can decide what works best for you :)

      I actually planned to use a text box in one of the next videos.

  • Pingback: Building a Website in Progressive Steps: Page Elements | Shadowtek | Hosting and Design Solutions

  • http://titan-creative.net S3bY

    Nice tutorial, Justin!

  • Shawn

    Thank you for another quality video tutorial, Justin!

  • Alexandra

    I really like the fact that you explain why you chose to do the layout that way and I find it really useful.

    Most of the time, I’m doing similar layouts, but don’t know why, except that I’ve seen that kind of template before. It’s nice to know the logic behind it and the user behavior tips.Thanks!

    Will you be doing a HTML5/CSS3 integration too?

    • http://www.justinhubbard.me Justin Hubbard
      Author

      I was waiting for someone to ask that. There’s a good chance I’ll do some tuts on the coding, we’ll have to see how it goes.

  • http://elyezer.com Elyézer Mendes Rezende

    Nice tutorial!

    I can’t access the download URL, could you verify it?

    Thank you

    • http://www.snaptin.com Ian Yates

      Sorry – check again, it’s fixed now :)

  • http://www.justinhubbard.me Justin Hubbard
    Author

    There seems to be a lot of great comments but the rating it down because we only have 2 votes. Maybe we can get this rating up guys so others are more likely to enjoy this tutorial :)

  • Sizar

    Not all designers know why specific layouts work better than the others. Thanks for highlighting on the psychological fact behind it. Great tutorial series!

  • http://www.windkr89.nl Erik

    Cool series, thanks. Voted for it, it’s very useful information for every one who builds websites. Maybe not everything is relevant for everybody but it is very good to hear and see the insights of others. Thank you!