How to Layout a Website

The vast majority of questions I receive boil down to How to Layout a Website!

While I’m not going to say it is easy to make a website. It takes time! However, I think anyone can learn to layout a website if they grasp some core concepts.

In my next series of videos I’m going to focus on everything you need to know to layout a website using just a text editor.

Code is Here:






43 responses to “How to Layout a Website”

  1. Dapper Owl812 Avatar

    You explain things so WELL. Thank you!
    I have a little confusion, #pageWrapper wraps the entire page. So why when you styled the border in css it ONLY went around the header and not entire page?? Im not understanding that part.

  2. Lordicus Avatar

    Well, it was 2011 year and reasons to use HTML 4 are explicit. So could you film another one video using HTML 5 (because of I didn't use HTML 4 syntax, this document defenition overwhelmed me). Also I would appreciate explanation of clearfix, grid and flex.

  3. Brian Smith Avatar

    hey, is using relative and absolute positioning frowned upon?

  4. mcgamer121 Avatar

    If you can't afford Illustrator, then your obviously doing something wrong with your programming.

  5. siddhant pandey Avatar

    can u make a video how to add a layout for a specific page in wordpress instead of homepage ? is it possible?

  6. OniiChan kazuto Avatar

    Can you make a Whole video of "ALL" HTML Tags and how to use it??

    Sorry for asking like this but…

    Your Tutorial Is Very Easy To Understand and It's not Boring.

  7. abdou sam Avatar

    this is in no way, a Responsive design. or am i just a beginner, which i do.

  8. ahmed madou Avatar

    please do more video like these ty 😀

  9. John Efraim Vegim Avatar

    This series is very helpful thanks!

  10. Gello Avatar

    hello just a question. setting a width for the wrapper div doesn't it make the page not responsive?

  11. ALBIN PAUL Saju Avatar

    Derek can you pls do a polymer tutorial ?

  12. GodricThe Avatar

    I've failed at font… ffs
    So, i c/p some font where i can see a clear difference, just for the test run.
    If i don't have
    body{ font-family:xxx, sans-serif;}
    new font doesn't apply, ofc if i delete it and go strait to
    #pageWrapper and just start typing {font: 80px 'xxx';}
    i dont have a different font at all.

  13. Obsolete Acc Avatar

    Do you need hashes and periods now? Was it removed in HTML5?

  14. PopsiclesInMyCellar Avatar

    Wooooah your voice is so much deeper in your newer videos 😀

  15. zactheruler Avatar

    Not sure if you ever did(can't find a video) but it'd be very appreciated if you can do/link a tutorial on how to write the javascript associated with your drop down menu bars.

  16. Firebrand Onfire Avatar

    Internet Exploer has its roots in a bad OS – Its hereditary

  17. Di Lung Move it Ya Fool! Avatar

    What would you say is the best screen resolution for a website?

  18. sarius civinskas Avatar

    helo can you drop it a css code that you use in this video?

  19. Tommy Chappell Avatar

    I remember there was three main section I think it was news event section, then what's on then something else. I know news was the first one, I can't remember the last 2.

  20. Nomaan Kham Avatar

    hye +Derek Banas love your work
    and can plz shere the video link where you made that table link

  21. Hiit10fitness Avatar

    This is so good! This is really helping me where I'm having issues making stuff be where I need it on the page. Do you have a tutorial on how you set up the site in illustrator before hand?

  22. Lateef Ogunbadejo-Asisi Avatar

    where is the css file for the menu? the link on the screen didn't appear for me to a video to where i can find it. please help!

  23. Philip Janssen Avatar

    Great Work and so easy to follow. You explain things in plain English no heavy jargon.
    Have you done a video on creating a members website with login/register?
    Keep the videos coming.

  24. anupama dasari Avatar

    is there 3 different files in this vedio .html,.js.css but it is not working .could u explain me in detail .

  25. Saharla Jama Avatar

    I'm using SubLime text and I'm on a MacBook and yeah.

  26. Saharla Jama Avatar

    Nothing will work. Every time I try to preview it, it just shows the code I typed in and nothing else. Could you please help me!

  27. Alex Filinsky Avatar

    thank you so much for this vid, it helps me allot! 😀 Any way there'll be a video (if there's any of yours) how to make a fully website? it'll help so much, thanks again

  28. Warr Tucker Avatar

    hey derek, are you putting the css code in with the html code on the same page. Can you do that. Nice

  29. Warr Tucker Avatar

    Derek, great vid, but it went a little blurry, so I could not see what you were doing, but i find that you are so right, its just box on the site and learning how to control them take time.

  30. Magnus Hofbauer Avatar

    Where is the tutorial on how to make a menu?

  31. Alejandro Villena Avatar

    I have to repeat myself. You're my hero.

  32. Paul MvN Avatar

    wouldn't it be cell phone friendlier to only use percentages to size and locate objects instead of units of length?

  33. Studio2 Hansel and Gretel Avatar

    I kind of lost you near the end when you copied and pasted in a menu. I'll watch it and other videos and maybe I'll figure it out.

  34. SEAN TWAMLEY Avatar

    Hello Derek i am typing this code as i watch the video but i dont have any code for the     <link rel="StyleSheet" href="./includes/menu.css" />
        <script type="text/javascript" src="./includes/menu.js"></script>
    as these are external style sheets could you please help me out with the code for these thanks.

  35. Jacques Laroche Avatar

    DEREK! This is great! Thank you so much.

  36. Vishwanath chiniwar Avatar

    +Derek Banas   Is it possible to do the same with Photoshop/Dreamweaver?

  37. Alan Avatar

    I just finished your HTML 5 tutorial video and I am wondering if these videos for designing/layout a website from 2011 are still good to watch with HTML 5 in mind. Thanks

  38. RepeaterCreeper Avatar

    Got any tutorials on CSS Positioning? I am having a REAL hard time learning it. If you have any good resources where I could possibly learn from please do let me know.

Leave a Reply

Your email address will not be published. Required fields are marked *