Hi, I have managed to work out how to use HTML and CSS thanks to the Sitepoint book and made a website - http://www.ubereadoolische.com/.
However, how would I go about learning how to create something slightly more modern looking - like http://csszengarden.com/?cssfile=/208/208.css&page=0 for example?
I am a rather confused beginner as to how I go about extending my CSS knowledge.
Thanks
James
Hi James,
There are lots of ways to answer this, but my favored approach is to find sites you really like and study them closely. You can look in detail at the CSS they have used, the methods of placing images, the techniques of placing elements on the page etc. Most of what I have gleaned has come from doing this. I have a whole folder of sites bookmarked that I return to regularly for inspiration and instruction.
But there are also lots of good books that give formal guidance on issues like this too—which include issues of typography and so on. There are some SitePoint books that might provide a nice start, such as The Principles of Beautiful Web Design and [URL=“http://www.sitepoint.com/books/sexy1/”]Sexy Web Design.
Thanks - I’ve always found books a very good way for me to learn and as I am very much a beginner I think this would be the case.
Downloading the CSS code from a website would mean nothing to me, or very little anyway, as I am still very unsure as to what relates to what.
Are you aware of anywhere that has a preview of the books before I purchased one?
jamesthemonkeh, if you haven’t already, I suggest you use a browser development tool to examine websites you like and see how they work.
I use the Opera web browser and it has a terrific developer tool built-in called [URL=“http://www.opera.com/dragonfly/”]Dragonfly. Opera is a great web browser to begin with, but Dragonfly has been an invaluable learning tool for me.
With Dragonfly, you can inspect every element of a web page and see what CSS applies to it, what background images it uses, and much more. Click on something in a webpage and it will take you to the HTML and CSS behind it. You can also make real-time changes and see those changes applied to the webpage. If you want to see what the page would look like with a box moved, you can move it. Want to see what something would look like with borders, you can add it on-the-fly. Change colors with a pop-up color picker.
In addition to inspecting HTML and CSS, Dragonfly has a great Javascript debugger. I found Dragonfly to be much better than the Firebug add-on for Firefox. But I haven’t used Firebug in a while. Firebug is another developer tool you can look at. It has its fans as well. Internet Explorer has a developer tool, too, but I have never used it.
You can look at HTML and CSS all day long and if the site is complicated, it can be difficult to understand what does what, what overrides something else. Something like Dragonfly will help you understand how a site works.
I second ralph’s recommendations highly, they are both excellent books for taking your CSS to the next level.
Also, I really like Chrome’s Inspector, it’s a life saver.
I think the easiest way is to just play around with them.
The most important properties which you should really master are:
background, font, width, height, float, clear, position, border, padding, margin, color
Those elements will likely be used many many times throughout your site. Others will be used, but not nearly as frequently.
Also, CSS can be a bit finicky and has a lot of “special case” which can throw you at first. That’s why it’s important to just study other people’s CSS as well as play with your own. For example, one that still occassionally throws me for a loop is Collapsing Margins: http://reference.sitepoint.com/css/collapsingmargins
Some things play better with others, so it’s eventually just becomes a matter of figuring out what you want to do, then figuring out the best way to accomplish that (which comes from experience).
Indeed. As others have said above, there are simple tools that allow you to look under the hood while looking at the site, and you can look at each HTML element and see what CSS rules apply to it, which is fabulous. As said above, there is Dragonfly for Opera, inbuilt dev tools for Chrome and Safari (just right-click on any element and choose Inspect Element, and a box will open at the bottom of the screen showing you the HTML and CSS involved. For Firefox, there is an addon called Firebug, which is still my favorite tool. (Firefox 10 has introduced native dev tools, but they will take a long while to catch up with Firebug, I expect).
To be honest, I just went to forums and just read threads. Pages upon pages of threads. I got to see the issue code and the direct fix. It was really helpful. I highly recommend it if you have time.
The good thing also is that most of the time, the OP of the thread gives you code to replicate the issue yourself.
Thanks for all the advice. I have bought the book on beautiful web design and will be using the inspect element on google much more!
The plan is to learn enough to be doing this full time in 3 years professionally…not sure if I am dreaming but that is the plan.
To be honest, I think you could be up and running in a much shorter time than that. The basics of HTML and CSS are not hard at all, and they give you the tools to produce a nice, usable site in a short time. You will continue to learn new techniques as you go. I see a lot of stunning websites, and you often find that the designer has only been in the business 3 or 4 years!
I bet within a year of good work you could know as much as anyone else in these forums. Once you realize what most issues are caused by, or a logical fix (or illogical) then it’s really not hard to guess possible fixes.
This is just talking from personal experience :).
I personally like the firebug tool to help debug. I find it better than Chrome but that may just be me.
Even if you don’t turn out to be as good as you think, you always have these forums to help :).
That’s a pretty awesome site I’ve never seen before. -bookmarks-
Thanks.
When it comes to anything computer science related, experimentation is hands down the best way to learn (that “science” word isn’t in there just for fun and giggles =p).
Probably not realistically because with work and so many other commitments I cannot really work out how I will find more than an hour or two each week. Annoying that it was only going back to work after a period of unemployment which has given me the kick up the ass to do this!
I have bought the book though I am not sure it is what I am looking for as I was hoping for a book which would teach me more CSS examples, but it does look a good read, and will be good company for my train journeys.
Yes, Beautiful web design is only a design book, not a coding one.
There’s a few good options but I’ve always thought Dan Cederholm’s Bulletproof web design is great. It was the first book to get me interested in coding to standards and dealing with the fluidity of the web.
It’s written by the author of http://pea.rs/
Also you should note that any book written by Paul O’B is sure to be a goldmine.
The Ultimate HTML and CSS references are amazing. It’s not so good for learning per say because all the data is just there, but if you need to cement it in, or you don’t know some exotic features, you should get it :). Also it’s created by Sitepoint so you’d be helping out this website.