How can I improve my HTML and CSS?

Question

I am frustrated by my lack of aesthetic judgment. As a developer, I have a hard time just to create a decent looking website.

The question is where can I learn all the necessary CSS skills or are there things like "Effective CSS design" that allows me to

1. Pick up CSS quickly
2. Use it to make beautiful looking website?

I will appreciate any CSS and HTML designers that allows me to quickly pull off beautiful mockup web pages.

Edit: Maybe I should be more explicit. I would be totally clueless if I were asked to come up with an original homepage for a FaceBook clone. It seems very difficult to even mockup such a screen in my head. A lack of imagination, indeed.

Answer 1

http://www.w3schools.com/

You'll find everything there, CSS/HTML etc.

Answer 2

Beautiful websites often exist beforehand in an image-editing application or on paper and the CSS+HTML part is the last step, transforming your design to a web-friendly version.

Answer 3

There are many good books on CSS. My main advice is to start with a somewhat coherent design first. I usually layout the homepage of a potential site completely in photoshop, then have the client approve that design, before I start any HTML or CSS at all.

Once you have a design template that everyone agrees looks nice, the CSS becomes a simple techincal matter to get it to look the same as your mockup.

Answer 4

Try this link Why developers suck at CSS design. That might give you a nice baseline for your projects.

If you combine a few of the suggestions in the link with a small css framework (I like boilerplate) you should be able to start each project with a fairly pleasing visual baseline. And you'll actually be surprised what a difference that makes to your work.

Answer 5

Two tips:

1. get a copy of "Headfirst HTML and CSS". This will be the easiest (and good) introduction to HTML and CSS. You will understand when to use what.

2. Look around the web (nytimes.com, CSS zen...) to get inspirations for great visuals.

Answer 6

Others have answered with some resources, but check out this site: http://www.csszengarden.com/

It shows many different layouts using only css. You can download the source and examine them. Also, check out the resources section for tutorials and how-tos.

Answer 7

There are some fantastic resources at Smashing Magazine Follow their guides on CSS best practice and use some of their 'best of' sections for inspiration. It's one of my first stops when starting a new web design project.

Answer 8

It sounds to me like technical HTML and CSS tips are not what you are looking for (yet). You might want to look for resources about basic graphics design principles, or about web design principles in particular. Once you have a grasp of the basics of graphics design, you can start sketching out designs for your projects. The initial designs can be as simple as a few sketches made on a notepad. Only then can you start designing the details of the page, and finally you need to have the necessary HTML and CSS skills to actually implement the design.

I'm roughly in the same spot: I know quite a lot about HTML and CSS, but I have a hard time coming up with an attractive design. Once I have that (usually with a lot of help from other people), I can build the website.

Answer 9

This won't help you come up with original designs, but might be helpful nonetheless.

The single most significant increase in my understanding of CSS layout came with using Firebug's "inspect" feature. Being able to see an element's computed style in the "style" tab and its padding/margin/offset in the "layout" tab were (and still are) a tremendous asset.

As far as learning to design as a developer, Robin Williams' Non-Designer's Design Book is a great starting point. I own a copy and definitely would recommend it to any developer who wants to understand design in less abstract terms.

Answer 10

Assuming you are a developer who wants to do decent enough design, here's something I did when I was in a similar position:

1. Learn XHTML and CSS well: there are a lot of good resources pointed out in other answers here. Basically, this just takes learning skills which being a developer, you shouldn't have much problem with.

2. Start by copying minimalist designs. There are lot of them around. One example: http://vandelaydesign.com/blog/design/minimalistic-web-design/ It should help you build confidence and some aesthetic sense.

3. Once you have built several, mix and match! Assuming, you are not doing serious design, you will be surprised how far this can take you.

Good luck!

Answer 11

I think you need to make a distinction between your intention and your implementation. The CSS stuff is just an implementation detail, nothing more than a tool of the trade. If you are already creating visually appealing web sites but they are not CSS based, then it's really worthwhile to learn CSS. On the other hand, if you are inexperienced in page layout and visual aesthetics, then you need to read and experiment a lot about page layout techniques such as font usage, white space, balance, etc.

The one site I keep going to for design inspiration, and just to read some great CSS hacks is http://www.csszengarden.com. But I've never had the courage to submit anything to that site. Enjoy and good luck :-)

Answer 12

Read A List Apart. I've gotten some of my best hints and tips from there.

Answer 13

A very subjective question. What is a beautiful web site? I studied art in college (fine art not design) and I hate my web design. Most people like what I do but it is a very tedious process for me.

I work with a hardcore programmer with a BS in Computer Science and he tends to make very logical organized web pages. Lots of colors (and of course the colors all mean something) and popup descriptions for everything. You need a key to understand his pages. Some people like his design work some people don't.

Learning to code HTML and CSS is doable. My best advice is to find something you like and examine it. From a code perspective as well as a design/aesthetic perspective.

Some people never get beyond the copycat stage but I think if you really want to be a good designer you will absorb the things you like and there is no better way to do that than designing/developing sites a lot. Practice, practice, practice or work, work, work!! You will get better the more you work and eventually your own style will emerge.

Answer 14

I would suggest living with your web browser open on:

http://delicious.com/

It's regularly updated with links to tutorials on CSS and design, which you could find yourself spending hours reading, and using.

I find myself looking at examples of different designs and then going away and trying to use them myself - be it grid systems, or just simple colour schemes. Delicious is really a treasure chest of inspiration and help.