Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Rolling Question Thread

S

smallcoffee

macrumors 68000
Original poster
Oct 15, 2014
1,667
2,208
North America
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;
}
 
smallcoffee said:
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;
}
Click to expand...

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.
 
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?
 
smallcoffee said:
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?
Click to expand...
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.
 
smallcoffee said:
...some best practices...
Click to expand...
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/
...good habits...
Click to expand...
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!
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back