Rolling Question Thread

Discussion in 'Web Design and Development' started by smallcoffee, Jul 3, 2016.

  1. smallcoffee macrumors 6502a

    Joined:
    Oct 15, 2014
    Location:
    North America
    #1
    Hi,

    I'm learning web development for fun and wanted to make a thread and ask some questions as I go along. I've already completed a lot of code academy's html and css training and I'm not new to programming in general.

    So to start with, I was wondering if anybody could explain or walk me through the general process of laying out a website structure, some best practices, and good habits to get into. Here is what I've started with:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="description" content="description">
    <meta name="author" content="author name">
    <meta name="description" content="this is the description">
    <link rel="stylesheet" href="/style.css">
    <title>website title</title>​
    </head>
    <body>
    <div class="navigation">
    <ul>
    <li><a href="google.com">Home</a></li>
    <li><a href="google.com">About</a></li>
    <li><a href="google.com">Content</a></li>​
    </ul>
    </div>​
    </body>​
    </html>

    So I'm fine with what is in the head tags, but for something like a navigation bar how do I approach naming convention/class/id and <div> ? Should I do what I did here, and just create a navigation class and put it in divs in the body?

    My CSS currently looks like the following. Should I just put .navigation after each of these? Also, in my ul {} I had to set the width to 98.5%. I noticed that when it's set to 100%, the nav bar fills on the way to the right, but on the left there's about 10px of white space. I changed the width to even the white space on the nav bar to look more symmetrical, but I was wondering if anybody knew why that was?

    ul {
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    overflow: hidden;;
    background-color: #333;
    position: fixed;
    top: 10px;
    width: 98.5%;
    }
    li {
    float:left;
    }

    li a{
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

    li a:hover {
    background-color: #4682B4;
    }
     
  2. olup macrumors 6502

    Joined:
    Oct 11, 2011
    #2
    One of the best practices is to use semantic markup where possible. The navigation div you have should in reality a nav tag.

    Here's an example general website structure with HTML5 elements:
    HTML:
    <header>
    <h1>logo</h1>
    <nav>
    <ul>
    <li>
    <a href="#">home</a>
    </li>
    ....
    </ul>
    </nav>
    </header>
    <main>
    <!-- may appear only once on a page and contains the content -->
    </main>
    <footer>
    this is the footer
    </footer>
    Regarding your CSS, instead of writing:
    Code:
    /*
    not good
    
    what happens when you have multiple uls?
    */
    ul {
    width: 98.5%;
    }
    
    /*
    this is better, but could be improved
    *
    .navigation ul {
    width: 98.5%;
    }
    
    /*
    this is even better because there will most likely only be one element with that class name
    */
    .navigation-list {
    width: 98.5%;
    }
    It never hurts to put class names on all your html elements, particularly when the project grows in size. That way you don't run into CSS that gets overwritten further down the line.

    You always have some margin and padding on elements because the browser renders these elements that way.

    There are reset stylesheets that get rid of all the margins and paddings on the elements and then there are normalize stylesheets that even out the different renderings of the html elements varying on the browser.

    Both of these are inserted into the css before you start writing your own.
     
  3. smallcoffee thread starter macrumors 6502a

    Joined:
    Oct 15, 2014
    Location:
    North America
    #3
    Ok that makes sense. I actually ended up taking the navigation links and putting them in <nav> tags and then just replacing .navigation ul{} with nav ul{} . Is that the appropriate way to do that?
     
  4. olup macrumors 6502

    Joined:
    Oct 11, 2011
    #4
    Yeah that's fine, if you only have one navigation you can do nav ul {}, but if you have multiple navigations then you should put a class name on the nav tag as well. Browsers read CSS from right to left, so the ul would be read first.
     
  5. 960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #5
    use version control, just learn it now, it will save you days of headaches in the future.
    I currently use git: https://git-scm.com/
    Use something like JFiddle for code assistance, it helps us get a better idea of what you are looking at faster and easier. For example, instead of your code you could have created a JFiddle like this:

    https://jsfiddle.net/zq7dzrvf/

    Last HUGE time saver, if you are just starting out and haven't built your own CSS framework, it doesn't hurt to start with something like Bootstrap: http://getbootstrap.com/
    See how they do things and incorporate that into your code style. It saves a ton of time and can quickly you show you how the 'professionals' handle different scenarios.

    Good luck!
     
  6. smallcoffee thread starter macrumors 6502a

    Joined:
    Oct 15, 2014
    Location:
    North America
    #6
    Thanks for your suggestions. I'll try out JFiddle and I'm familiar with Git. I'm also familiar with Bootstrap and some of the other frameworks out there, but I think (since I'm not in a rush) I'll be better off starting out doing everything by hand so I can understand it, and then I'll be able to effectively incorporate web frameworks for speed.
     

Share This Page