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>
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;
}
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>
</head><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">
<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>
<body>
<div class="navigation">
</html><div class="navigation">
<ul>
</div>
</body><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><li><a href="google.com">About</a></li>
<li><a href="google.com">Content</a></li>
</div>
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;
}