Ok, I just started learning CSS & web design about 3 weeks ago and would like a little feedback on a site I have been practicing on. I started completely from scratch and coded everything in Notepad ++. I learned almost everything from this site and watching youtube videos. I know I still have a long way to go, but what do I need to work on? What do I need to study more? How can I make these better?
there's a few odd things (e.g., your images should not have closing tags), but for the most part it's nice and clean.
I'd also recommend using simply <!DOCTYPE html> instead of the long, hard-to-type html4 transitional doctype you have now, but ultimately, that doesn't make a big difference. Eventually, you should try to move away from iframes and use SSIs or a server-side language (like PHP) to construct your pages.
design, layout, and typography are the next things you might focus on. Your page designs are somewhat basic and limited. (But they're not "bad" -- I've seen Bad.) Find sites you like and try to recreate their style. Sketch your ideas out on paper and try to figure out how to build them using CSS (lorem ipsum content can help with this process).
Like @traq said certain tags don't have a closing tag. You can normally tell the difference by if a tags wraps something. For example:
<a href="#">Link Test</a>
The anchor tag opens, wraps some text that you want to turn into a link, then closes.
<img src="" />
The image tag is self supporting so it closes itself with all the information inside itself. You close tags like this with a "/>" at the end (although depending on what version of HTML you are using, this is not always required :)).
I would start using HTML5 tags too - you are in a good position to learn fast :D
Understanding elements is also useful. For example there are 2 main types. Block and Inline. The rules are Block elements can wrap around block and inline elements. Inline elements can't wrap around block elements.
So for example:
<div> //Block Element <p>This paragraph tag is a block element, but <a href="">This link is not!</a></p> </div>
Block elements can be spotted quiet easily as most will force a new line after them, basically if you create a page of block elements one after another by default they will be underneath one another and not along side - no matter if you set their width to 1px.
The key to this knowledge is that all block elements can be styled as such - so for example most of the time wrapping a list in a div for styling purposes is pointless and clutters up the page with more divs than required.
Summing up elements: Block elements can wrap around any element, but in-line elements can only wrap around in-line elements or text.
Thank you very much for the feedback. There was some good and useful information. I have only been at this for about 3-4 weeks and have never had any classes, so this is the kind of feedback that I need. Thanks again.
regarding self-closing tags: yes, it's valid, but only if you do everything that way, and choose a doctype that allows it (the HTML4 doctypes prohibit it; XHTML doctypes require it; HTML5 doctype doesn't care.). Regardless, choose one style or the other:
<img src="..."> or <img src="..." />
and stick with it. Keep in mind that this choice must apply to all other tags that are "self-closing" (e.g., <link>, <br />, <hr />, <input />, <meta />, etc.) - don't "mix-n-match" styles.
I would recommend _not_ learning to use self-closing tag syntax, for three reasons: 1. XHTML is no longer under development 2. XHTML is almost always served and rendered by browsers as "broken html" 3. your existing pages don't use XHTML syntax, and trying to do so may cause unneeded confusion.
Way to go!!! I started from scratch as well back in November, with the goal of using no javascript...only CSS. I have a long way to go, but feel free to view the source code on my pages for any ideas that may be useful for you to implement on your site. Also let me know if you have any feedback on my site as well:) There's always room for improvement! Best of luck! integritycontractingofva.com
I started completely from scratch and coded everything in Notepad ++.
I learned almost everything from this site and watching youtube videos.
I know I still have a long way to go, but what do I need to work on?
What do I need to study more?
How can I make these better?
Thanks for the feedback:
http://ledfordschampions.com/
I'd also recommend using simply
<!DOCTYPE html>instead of the long, hard-to-type html4 transitional doctype you have now, but ultimately, that doesn't make a big difference. Eventually, you should try to move away from iframes and use SSIs or a server-side language (like PHP) to construct your pages.design, layout, and typography are the next things you might focus on. Your page designs are somewhat basic and limited. (But they're not "bad" -- I've seen Bad.) Find sites you like and try to recreate their style. Sketch your ideas out on paper and try to figure out how to build them using CSS (lorem ipsum content can help with this process).
The anchor tag opens, wraps some text that you want to turn into a link, then closes.
The image tag is self supporting so it closes itself with all the information inside itself. You close tags like this with a "/>" at the end (although depending on what version of HTML you are using, this is not always required :)).
I would start using HTML5 tags too - you are in a good position to learn fast :D
Understanding elements is also useful. For example there are 2 main types. Block and Inline. The rules are Block elements can wrap around block and inline elements. Inline elements can't wrap around block elements.
So for example:
Block elements can be spotted quiet easily as most will force a new line after them, basically if you create a page of block elements one after another by default they will be underneath one another and not along side - no matter if you set their width to 1px.
The key to this knowledge is that all block elements can be styled as such - so for example most of the time wrapping a list in a div for styling purposes is pointless and clutters up the page with more divs than required.
Summing up elements: Block elements can wrap around any element, but in-line elements can only wrap around in-line elements or text.
Here is a reference for which is which:
http://www.w3.org/TR/html401/struct/global.html#h-7.5.3
and stick with it. Keep in mind that this choice must apply to all other tags that are "self-closing" (e.g., <link>, <br />, <hr />, <input />, <meta />, etc.) - don't "mix-n-match" styles.
I would recommend _not_ learning to use self-closing tag syntax, for three reasons:
1. XHTML is no longer under development
2. XHTML is almost always served and rendered by browsers as "broken html"
3. your existing pages don't use XHTML syntax, and trying to do so may cause unneeded confusion.
Any additional feedback or suggestions as to how I could make it any better or what I need to work on for the next site?
Thanks,
Jason