Web design as a hobby

Hey there,

When I got into web design I used Jeffrey Way's tutorial off net tuts, he basically took you through coding a design and how each little bit worked. I found that greatly helpful.

In terms of editors, if you're on a PC, I would go for Notepad++, on a Mac (or hackintosh), Coda is really nice-looking, as well as being good for working ftp. You do have to pay for that though.
 
Ok, I've been working my way through the HTML Dog tutorials and I've come across my first problem.

It might just be that I haven't learn about something yet, but if it's an easy fix just let me know.

Basically, I can't work out why I have an extra red box/border below my h1 tag. For some reason, the white space between my h1 and h2 tags is using the h1 css style. Any ideas?

Problem.png



HTML Snippet:

<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="web.css" />

</head>

<body>
<h1>My first web page<h1>

<h2>What this is</h2>
<p>A <em>simple</em> page put together using <strong>HTML</strong></p>

<h2>Why this is</h2>
<ul>
<li>To learn HTML</li>
<li>To learn HTML</li>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<li>To learn HTML</li>
</ul>
Click to expand...

CSS Snippet:

body {
font-family: arial, helvetica, sans-serif;
font-size: 80%;
color: black;
background-color: #ffc;
margin: 1em;
padding: 0;
}

h1 {
color: #ffc;
background-color: #900;
font-size: 2em;
margin: 0;
margin-bottom: 0.5em;
padding: 0.25em;
font-style: italic;
text-align: center;
letter-spacing: 0.5em;
border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;
}

h2 {
color: white;
background-color: #090;
font-size: 150%;
margin: 0;
padding: 0.1em;
padding-left: 1em;
}
Click to expand...
 
<h1>My first web page<h1>

should be <h1>My first web page</h1>

You are effectively creating two h1 tags
 
Staffy said:
<h1>My first web page<h1>

should be <h1>My first web page</h1>

You are effectively creating two h1 tags
Click to expand...

Riddell said:
Ok, I've been working my way through the HTML Dog tutorials and I've come across my first problem.

It might just be that I haven't learn about something yet, but if it's an easy fix just let me know.

Basically, I can't work out why I have an extra red box/border below my h1 tag. For some reason, the white space between my h1 and h2 tags is using the h1 css style. Any ideas?
Click to expand...
Give the W3C HTML Validator a whirl. It'll help you find problems with your code.

http://validator.w3.org/#validate_by_input
 
No need to feel stupid very easy mistake to make & I would imagine that most people have done a similar thing.

Use the validator and a good editor, choose a syntax scheme to suit yourself and then you will see less and less of them. I still make little mistakes and i've been doing this stuff since 1999!
 
Riddell said:
@MarcLister Thanks for the validator link; I'm sure it will come in handy. :)
Click to expand...
No probs. There's also a CSS validator but I find that the HTML validator helps me get correct XHTML whereas the CSS I think is always more 'creative' and follows less structured rules than HTML.

I really do need to put some web pages together in HTML5 and see how it compares to XHTML in terms of coding changes etc.

I was going to mention about forgetting W3Schools but I couldn't find the OcUK thread that talked about it. I had the website someone posted earlier but I wanted to show you the thread on OcUK as well to show you that fellow OcUKers believed in the anti-W3Schools site as well. :)
 
Staffy said:
No need to feel stupid very easy mistake to make & I would imagine that most people have done a similar thing.
Click to expand...
I think that unless you've made that kind of mistake, you're lying. It's a beginner mistake and one that most coders, whether amateur, expert or somewhere in between have made at some point. I know I have, especially with some of the bigger pages with over 100 lines of code. It's just something to learn from and understand. :)
 
yep, no matter the experience level, you can guarantee that 90% of code issues is because something like a / has been missed :p
 
I am also embarking on learning more about web design.

I get asked by family/friends so many times if I can make a website because so and so wants one for their new painting and decorating company, or mobile hairdressing business etc. and I always turn them down because I've never ACTUALLY made a website for a client before, only myself.

I got asked the other day by my cleaner at work whos husband has a horse drawn carriage and they rent it out for weddings, and I just said "Yes, I'll do it" without even thinking about it. It seems a waste to let all this potential 2nd income go to waste.
However, I am not going to build websites from the ground up. I'm going to use wordpress, and create custom themes catered to my client etc. Honestly, it seems a complete waste to build from scratch when you have stuff like wordpress which provide fantastic foundations.
 
Last edited:
I was always under the impression that Wordpress was really aimed at people wanting to make blog sites as apposed to actual dynamic web pages.
 
One thing that was unclear in your post is weather you want to get into web development OR web design. It sounds like you want to learn how to build websites not so much learn about interface and web design.

If it is web development (building) your interested in it seems there is sound advice given here. Just make sure you learn the right way (abiding to W3C standards) at the start, rather than learning it the wrong way first and having to re-learn the code later.
 
You must log in or register to reply here.
Back
Top Bottom