what is the right way to start html/css?

Question

silly question...right? I know but here is the deal.

I want to create my own project/website from scratch, but I am having some difficulty or issues in every line, and I don't even know if I am doing the proper way. For example, I can float the menus to the right but I am not sure if I should do it from the div class or the li class. Both seem to work. So similar situations...

For the moment, I want to create a portfolio site where it will showcase all my projects and design works. Most of them will be just images and I would like to have a little description for it too. So i will have a menu something like this: +Home +About +Visit My Blog (it will link to my blog site) +Designs +Photography

So you get the point. I have created the root folder and inside that root folder, I have an "index.html" and css folder with "style.css" So here are what I have so far.

<!DOCTYPE html>
<html>
<head>
<title>Tenzin's Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<head>
 <body class="body">
<div class="dashboard">
    <ul class="nav">
        <li>Home</li>
        <li>About</li>
        <li>Recent Projects</li>
        <li>Blog</li>
    </ul>
</div>
</body>
</html>

CSS

.body{
background-color:lightblue;
max-width:1650px;}

.header {
width:100%;
height:80px;
background-color:rgba(80, 150, 225, .5);}

.nav {
float:right;}

li {
display:inline-block;
list-style-type: none;
margin: 25px;}

I have been trying to make that header full width but I can't even though I put 100% width. So, I have a lot of questions but to make it short, I haven't found a way to learn how to start something from the scratch. Teamtreehouse is great but they don't teach you how to do it from the ground. What do you recommend? Should I download the twitter bootstrap and use the prewritten codes as a basis and learn from there? or Should I start doing it with dreamweaver(ihave a subscription with creative cloud)? or Should I just keep moving on with teamtreehouse's video lessons without actually building something on my own, which to me, is super boring and feel unproductive. I know they have the projects but all of them are "smells like bakin" and the first lesson they did was not even thorough. I meant they skip a lot of stuff there. or somethin else.... ????

And how do i style the whole html margin and border for my code above? I have gone through the videos but without doing it myself, it's really no use other than understanding the concept.

All answers will be appreciated greatly.

Answer 1 · 2013-06-25T00:46:01Z

June 25, 2013 12:46am

I find that the best way to get rid of weird styling issues is to use a css reset. Just pick one, any will do

This causes all the built in margins, paddings and typography to disappear. If you don't want to be drastic you can just reset the body styles that mess up your header.

body {padding: 0; margin: 0;}

Also, parent element is the element that holds the child element, like this; -parent- -child /child- -/parent-(damnit! My html example doesn't show up!)

This is the DOM-model of HTML. Basically it's a tree structure. It isn't hard to learn and will help you immensely in visualizing what you are doing.

Answer 2 · 2013-06-24T23:39:33Z

June 24, 2013 11:39pm

Tenzin Phuljung, you're doing great so far! The great part about html/css is that there are multiple ways to do program the same elements.

I believe your problem with the header not being 100% width is that you have mixed up your classes. In the css you have a .header{} but in your actual html document you have no items with class="header".

I see the div in your html has the class="dashboard" and the ul has class="nav". Did you mean to change one of these to class="header"?

Hope this helps!

P.S. a great way to help find out programming for your website is to look at other websites on the web! On any website if you right click in a page and select "view page source" you can see the html of almost any website!

Answer 3 · 2013-06-24T23:43:24Z

June 24, 2013 11:43pm

Also working on first website so I can only offer inexperienced advice. It might be that you won't be able to get the header at 100% because you're not doing a CSS reset. The browser inherently has its own margins, paddings, ect. I can get get a full width header using the normalize.css from the smells like bakin' code. If I take out the normalize link, I get whitespace around my header.

Answer 4 · 2013-06-24T23:47:11Z

June 24, 2013 11:47pm

So first you don't need:

type="text/css"

In:

<link rel="stylesheet" type="text/css" href="css/style.css" />

And yes you would float each: li tag, not just the entire div.

Second, if you want to make the header span the entire width you have to put a width on the parent element, (you don't need to put a class on body, you can just select the body by taking out the . before body in your css).

As for remembering things just search the forum and find a method that fits you, (I've done quite a bit just using treehouse). So basically just find a way to remember things, maybe you want to try to convince a friend to start Treehouse with you, because 100 people can watch one video and remember different things, more or les things, or interpret it different ways. But I've been doing good just on Treehouse, (and no I don't have a portfolio and don't ask me why).

Answer 5 · 2013-06-24T23:48:26Z

June 24, 2013 11:48pm

@Ram Ada not really. I am aware of that error because I was changing the labels but I forgot to change it on the css part.

My problem is the width of the div or the header section.

This is what I mean.

My body background color is lightblue

My header class ( included in the css) is 100% width with background color but it doesn't go all the way. I mean I can see like 10px of my body background on each side of the div. About this much [ ] lol....

Answer 6 · 2013-06-25T00:15:29Z

June 25, 2013 12:15am

Like Ram Ada , I don't see the header class in your HTML. ???

There are a few reasons a div can't expand to 100%:

Restricted by a parent element/container
Inherited styling
Default styling
Browser weirdness

These are listed in order of how common they are... or at least how commonly they plague me. ;)

Try using a tool like Chrome's Developer Tools. This will show you the first three items on my list above. You can dynamically add/edit/delete styles until it's working the way you want. You can also see what styles are inherited and cancelling out others.

To isolate the 4th issue (which is rare), view your site on a few different browsers. Google Chome and Mozilla Firefox tend to render the best code.

Answer 7 · 2013-06-25T00:27:11Z

June 25, 2013 12:27am

Thanks for all the answers.

Chase James What do you mean by parent element. I am trying to have a look like this one here. http://twitter.github.io/bootstrap/examples/starter-template.html#

Answer 8 · 2013-06-25T01:37:16Z

June 25, 2013 1:37am

Damn it...I am always not clear. I know what a parent element is but I didn't know what he was telling me to do exactly lol..

Anyways, I guess I will just figure out by testing out different stuffs and copying some codes from other simple websites.

Thanks Christo Georgiev for your tip.

Answer 9 · 2013-06-25T01:42:38Z

June 25, 2013 1:42am

Hi Tenzin, Excellent job on your HTML & CSS! I went over your HTML and CSS, and did a little editing, and left you a few comments in your HTML. However, you did leave out the class header in your HTML, which I went ahead, and wrapped the class header around your class dashboard, and class nav so that way you get the blue header to appear at the top of your web page. Tenzin's Portfolio

Answer 10 · 2013-06-25T01:59:16Z

June 25, 2013 1:59am

Mike Morales Hey mike, thanks for the input but I don't see anything in that link.

Welcome to the Treehouse Community

Looking to learn something new?

Tenzin Phuljung

Tenzin Phuljung

what is the right way to start html/css?

10 Answers

Christo Georgiev

Christo Georgiev

Ram Ada

Ram Ada

Chase Lee

Chase Lee

Chase Lee

Chase Lee

Rick Rakin

Rick Rakin

Chase Lee

Chase Lee

Chase Lee

Chase Lee

Tenzin Phuljung

Tenzin Phuljung

Sharon Walls

Sharon Walls

Tenzin Phuljung

Tenzin Phuljung

Chase Lee

Chase Lee

Tenzin Phuljung

Tenzin Phuljung

Sharon Walls

Sharon Walls

Christo Georgiev

Christo Georgiev

Tenzin Phuljung

Tenzin Phuljung

Tenzin Phuljung

Tenzin Phuljung

Mike Morales

Mike Morales

Tenzin Phuljung

Tenzin Phuljung

Mike Morales

Mike Morales

Tenzin Phuljung

Tenzin Phuljung

Mike Morales

Mike Morales