HTML5 & CSS3 Tutorial: Basic Web Layout With divs, id selectors, unordered lists, and floats

Courtesy Note: If you found this tutorial useful, please take a few moments to comment below!

The following notable HTML5/CSS3 topics will be covered in this tutorial:

1. New HTML5 Tags (header, nav, footer)
2. ‘id’ selectors
3. Unordered lists (‘ul’ HTML tag)
4. ‘float’ and ‘clear’ CSS3 properties


For those of you who don’t know, I’ve been working on a huge website project for the past few weeks and in doing so, I’ve familiarized myself and learned a whole lot about HTML5 and CSS3, and through my struggles of coding certain features, I had the inspiration of posting basic coding tutorials of how to perform certain tasks and do certain designs in HTML and CSS. The first tutorial I will be providing on this blog is making a basic web layout. This will also be posted in the “Code” section.

This will be a very basic tutorial of how to make a basic layout for a webpage using divs, unordered lists, and floats. I will be providing a screenshot of what the web layout will look like, as well as the code in html and css that designs that layout. Comments will be provided in each code snippet for html and css.

Objectives:

After studying the code and comments, you should be a little basic familiarity with how id selectors work and that they specify which styles the html code will be using from the css code, a little familiarity of why we had to use the float properties, what an unordered list looks like (in the code and visually), how the “clear” property works for floats, and how to make a really basic web layout.

Questions? Please leave a comment!

Desired Web Layout (with colors):

layout

HTML Code:

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="layout.css" />
    </head>
    <body>
        <div id="wrapper">
            <header> 
                Header
                <br />
                Header
                <br />
                Header
                <br />
                Header
                <br />
            </header>
            <nav>
                Navigation links go here.

                <ul>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Link #4</a>
                    </li>
                    <li>
                        <a href="#">Link #5</a>
                    </li>
                    <li>
                        <a href="#">Link #6</a>
                    </li>
                    <li>
                        <a href="#">Link #7</a>
                    </li>
                    <li>
                        <a href="#">Link #8</a>
                    </li>
                </ul>
            </nav>
            <div id="content">
                <p>Content goes here.</p>
            </div>
            <footer> 
                Footer
                <br />
                Footer
                <br />
                Footer
                <br />
                Footer
                <br />
            </footer>
        </div> <!-- Wrapper -->
    </body>
</html>

CSS Code:

Note: id selectors are always required to have the hashtag (#) before the name of the element in the css code.

 

body {
  background-color: yellow;
}

#wrapper {
  width: 80%;
  border-style: solid;
  border-color: black;
  border-width: medium;
  background-color: purple;
  margin-left: auto;
  margin-right: auto;
}

header {
  width: 100%;
  background-color: red;
}

nav {
  width: 30%;
  background-color: white;
  float: left;
  height: 400px;
}

#content {
  width: 70%;
  background-color: blue;
  float: right;
  height: 400px;
}

footer {
  clear: both;
  width: 100%;
  background-color: gray;
}

P.S:

You’re probably a motivated web developer who wants to freelance, blog, and/or be the best developer you can be. I feel many developers suffer from lack of clarity on their career/life, and poor time management and productivity practices. Without clarity and without the commitment to maximize your time, you don’t give yourself the ability to even work on your website projects and hone your coding skills with maximum efficiency.

To be the best coder, blogger, or freelancer you can be, it helps to master the non-technical aspects of entrepreneurship and personal growth. To begin building a solid foundation, I highly recommend that you consider getting my mentor’s free entrepreneurship book and training right now, where he shares his top 30+ tips that he followed in order to become a multi-million dollar entrepreneur in his 20s. I’ve read it, and as a blogger and web developer, it’s made a huge difference in my career outlook and my productivity! In addition, you may also find his productivity and time management master class useful to sign up for!

Remember that the book is free, so be sure to get it here now because I’m not sure if he’s planning to remove the book off the website! Obviously you have the choice, but I truly believe that you will learn some valuable lessons from it, like I have as a fellow blogger and developer. Please let me know if you have any questions, and I’d love to hear what you learn from the book!

teb-fb

 

23 thoughts on “HTML5 & CSS3 Tutorial: Basic Web Layout With divs, id selectors, unordered lists, and floats

  1. A. Dev. January 15, 2014 / 5:02 pm

    This isn’t using HTML semantic elements such as header and footer. Furthermore, you should avoid using ID selectors in CSS and stick with classes and base elements. :)

    • guht January 16, 2014 / 7:09 pm

      If you are going to critique someones work and try to be some kind of expert you should at least do the OP and community the service of explaining why your comment is relevant and provide a small example. Otherwise you sound like just another troll.

    • airjourdan21 January 20, 2014 / 6:45 am

      Thanks for the feedback. As I was writing these tutorials I was learning and progressing as a Web Developer, and now I think there’ s a lot of things I can do in order to make the current tutorials I have better, which is what I plan to do soon. I realize there are and elements, which is what I can use in the tutorial. However, I would like to know why we should avoid ID selectors? I strayed away from them for a while in favor of classes but I’m not entirely sure why it should be avoided.

  2. sklep-z-plytkami.org.pl January 18, 2014 / 12:44 am

    Very shortly this web site will be famous amid all blog viewers, due to it’s good posts

    • airjourdan21 January 20, 2014 / 6:55 am

      Is there anything in particular that you’re looking for? A specific HTML tutorial? Anything else? I’d love to post about it if I’m confident enough with my knowledge on the topic!

  3. palimadra May 30, 2014 / 4:35 pm

    Hello,

    THank you for the tutorial.

    A question for you. If the height of the content id and the nav id is not provided the layout goes haywire. I believe there are a couple of ways to fix this. Which one would you recommend?

    Thanks in advance.

    • airjourdan21 May 30, 2014 / 5:53 pm

      Is there anyway you could perhaps show me (maybe via screenshot) what your layout looks like after you remove the height properties in the CSS file? You could email me at air.jourdan21@gmail.com if you can’t post a screenshot here. It would be really helpful if I could see exactly what your problem is. The only problem I’m having is that the area under the “content” is now purple, I’m not sure if that’s what’s happening to you.

      By the way, thank you so much for pointing out this problem, I will be able to fix the layout code after we figure out your problem.

  4. sdad June 6, 2014 / 8:05 am

    Hi life sucks

  5. hoi June 6, 2014 / 8:06 am

    Notepad ++ sucks like hell

      • Edwin July 21, 2015 / 6:35 am

        hello and thank you for this information! May I ask what makes sublime better than notepad? I have not used before and hesitate to try it because I don’t like straying away from my comfort zone lol. can I code the same way on it? and if so, what makes it better?

        • jourdan August 13, 2015 / 1:31 pm

          Hey Edwin! I have used Notepad before Sublime, and after moving to Sublime, I could never go back. The interface itself is much more beautiful and pleasurable to work with than Notepad, please send me an e-mail at jpbullalayao@gmail.com and I can send you a screenshot of what Sublime looks like when coding with something like Ruby or PHP or HTML!

  6. home goods san ramon June 30, 2014 / 11:04 pm

    Hi, I do think tɦis is a great site. I stumbledupon it 😉 I’m going
    to revisit oncе again since Ӏ booк-marked it.
    Money and freedom is the best way to change, may you bе rich and continue to help other
    people.

  7. Corinne July 4, 2014 / 9:49 pm

    It’s hard to find your website in google. I found it on 18 spot, you should build quality backlinks , it will help you to increase traffic.
    I know how to help you, just search in google – k2 seo tips and
    tricks

    • asas December 11, 2014 / 11:27 am

      aaaaaa

      • asas December 11, 2014 / 11:27 am

        as

  8. www.cxjj.gov.cn July 21, 2014 / 7:30 pm

    Hi to entire how is the entire thing, I think each one is getting more from this web site, and your views are good surrounded advocate of fashionable users.

  9. keytas.ru September 2, 2014 / 4:45 pm

    Amazing YouTube video clips posted by this network page I am going apt subscribe for aboard a regular basis updates, since I don’t appetite apt fail apt take this array.

  10. Mike September 8, 2014 / 6:29 am

    I read a lot of interesting content here.
    Probably you spend a lot of time writing, i know how to save you a
    lot of time, there is an online tool that creates high quality, google friendly posts in minutes, just search in google – k2seotips unlimited content

  11. Kristopher September 16, 2014 / 2:26 pm

    At this moment I am going to do my breakfast, afterward
    having my breakfast coming yet again to read additional news.

  12. Kelvin September 29, 2014 / 10:38 am

    Automated Monthly Shipments Never run out of your favorite products with our flexible auto-ship service.

    Advertising takes a certain amount of knowledge and
    definitely consistency. Diesel fuel has a high flash point
    making storage aboard a boat very safe.

Leave a Reply

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