Is there any fast guide for web application programmer regarding CSS. From my experiece, if one coder with no graphic design background but good in css can use div and span to create a nice looking page. any such 'quick guide' available for coder?
http://www.csstutorial.net/
http://htmlhelp.com/reference/css/quick-tutorial.html
There are plenty of quick guides on the staples of CSS, but they're more of an implementation perspective rather than a guide to aesthetic qualities (which I think is what you're asking).
To me most, one of the most authoritative sources for this subject is A List Apart. I suggest you start there.
I think what you want to read is "The Principles of Beautiful Web Design". It's a pretty light read, and give you insight in some designer concepts to get you along the way pretty fast.
If you want to learn css to put a nice page together I'd use a framework like 960gs. This won't help you in the context of working in a non-frameworked environment. But if you want to knock up a nice looking page from scratch without doing anything exotic with the layout and get it to work with a load of browsers 960 is the way to go.
Still go through some basics in css though.
Related
What is the point of these CSS Frameworks? I don't understand them. When I look at them, all I see is boring layouts that seem overbearingly-difficult to adapt to your own unique designs.
Is this the case, or am I just missing something here? I'm referring to (frameworks in general) things like Blueprint, Less, Skeleton, 960 Grid system, Base, Gridless, etc etc etc.
I know this is a really simple thing but I just don't get it. I have searched but have not found anything that helps me to understand what the big deal is. When I look at their code, all I see is mess. Weird class and id names all over the place.
(This isn't a rant or complaint by the way, I just really don't get it.)
CSS frameworks are pre-prepared software frameworks that are meant to
allow for easier, more standards-compliant web design using the
Cascading Style Sheets language. Most of these frameworks contain at
least a grid. More functional frameworks also come with more features
and additional JavaScript based functions, but mostly design
orientated and unobtrusive. This differentiates these from functional
and full JavaScript frameworks. -Wikipedia
Advantages
They can help you learn CSS. You might just literally not know how to pull off a solid multi-column layout. A framework may be a
good place to get your feet wet understanding how CSS works.
They provide code that you just don't need to write from scratch every time, like resets. I've long been a proponent that the star
selector (*) margin/padding reset is a fine reset. I use it all the
time. But... if you are starting a major new project that is going
to be loads of pages, live for years and years, and will grow over
time, you should invest right away in a more robust reset. All
these frameworks start with brilliant resets that cover all the
bases and will have you covered for years to come.
They relieve cross-browser concerns. You can't undervalue this. We've all felt the burn of finding out our sites are borked
in some browser or another at a hugely inopportune time. Frameworks
are built to bring their magic to all browsers.
It helps you build good habits. Like including a print stylesheet in your projects. I always intend to build one, and I
often do, but the chances are a lot higher that I do it if I have
one there from the get-go.
They encourage grid based design. Which is a good thing. Grids don't mean boring! They just help you achieve better
readability, scanability, balance visual weight, flexibity,
expandability, and just overall page page cohesiveness.
They come with documentation. If you need help getting started, framework generally come with some support files. This can be
particularly nice if you are designing a site you will be handing
off to a client. You can just let them know what framework you used
and refer them to that documentation for support requests.
They lay groundwork. If you are using something like YUI, your life will be a lot easier if you use All-YUI-Stuff-All-The-Time.
It's built to work together and built for expandability.
CSS-Tricks
Also see: Comparison of CSS frameworks
I need to make an web interface for employees of a company to use. I don't have a person designated to doing design or markup, and they don't really need to be anything spectacular. Nonetheless, I would rather not focus too much time on markup and styles.
I'm wondering if there are any tools or techniques which can make this easier. It could be a WYSIWYG, or some kind of intermediary markup, but the end result should be clean simple HTML/CSS. I'm open to anything right now. Thanks.
Write it by hand - it's the only way to get clean, simple, valid and semantic HTML and CSS.
If you're willing to forgo the semantics, you may want to look into a CSS framework, to take care of some of the layout busywork. I am not a fan of them, but I've heard others find them quite useful. Blueprint and 960.gs are the two I hear about most frequently.
There is a bunch of sites, offering you clean html templates for free, like:
http://www.free-css.com/
http://www.freecsstemplates.org/
http://www.opendesigns.org/
You can edit those templates, and make everything you want.
Check out zen coding
TinyMCE gives you very clean HTML output, even when you paste word to it
http://tinymce.moxiecode.com/tryit/full.php
Its easy to implement, but if you want some kind of CMS try Wordpress it is very good for simple sites
http://wordpress.org/
I have to agree with #Karpie, but if you want to make your life with CSS easier you can try some CSS framework, there are many of them out there. I recommend you 960.gs or something like that for layout. Check it out.
I am a web Developer. Even I do web design but I use the TABLE method for HTML, I want to learn Tableless coding (Div based).
Can anybody suggest me Few Best sites for learn Div Based Coding.
A List Apart archives
W3 Schools
These would be my two recommendations to start. A List Apart does a good job explaining more about why it's important to markup this way.
I tried to come up with a big list of things you should know, but I couldn't; it's not that much you need to know at all...
First learn how to use CSS
It's useful to know how to use the CSS float-property
And of course you may want to look at an example layout
Without knowing good X/HTML we can't use css properly optimize way.....
How to give some example and argument in favor of this... to web-design student Who are trying to learn css more but doesn't know how to use all HTML tag wise-full to work with CSS better.
Sounds like you're trying to win an argument with someone. If your position is that said student should learn html in order to use css effectively, I agree with you. But the real answer to your question is "DUH!" (American idiom meaning "there should be no argument").
For the sake of said student, I'll use a construction analogy. HTML is the foundation, walls and roof of any website, regardless of rendering engine (ASP.NET, PHP, Ruby, Python, etc.). CSS is the paint on the walls (among other useful things). If you build a building with crappy foundation, walls, and roof, you have a crappy building no matter how cool the paint looks. Websites are the same way and said student should learn how to build the entire website and take pride in his/her work instead of trying to take shortcuts.
I feel better now.
I am not sure if i understand correctly but one classic resource to look at is CSSzengarden (http://www.csszengarden.com/) i am not sure if it is updated anymore but it is an example of one page styled with just css to make it look completely different in many ways.
It is what inspired me to become competent at CSS styling.
I have general question how to start developing my skills in web designing.
What is best place to start and what technique to use.
I have some knowledge of html and css, so far I have been building sites with already done all html and css. I would just use it and maybe do a smaller changes.
I want to be able to make html and css out of image that artistic guy produces.
http://w3schools.com/ has some great tutorials and you can play around with stuff right their on their pages.
A lot of the really "artsy" sites are produced in another program first, usually Adobe Photoshop or Adobe Illustrator, and then 'sliced' into HTML div's. NetTuts has a handful of tutorial on how these that show the complete start-to-finish. Here's a few I found real quick:
Design and Code a Slick Website from Scratch – Part I
How to Design and Code a Flexible Website
New Plus Tutorial: Convert a Beautiful PSD to HTML and CSS
Coding a Beautiful Website From Scratch: Plus Tutorial
(the last 2 I think you have to be a paying member for)
Here's a great web resource to check out for HTML/CSS: http://htmldog.com/
Also, do a Google search for "psd slicing." This is the process of taking an image of a website layout (a.k.a. mockup) and turning into valid HTML/CSS. You'll find a lot of screen casts and tutorials that will walk you through the entire process.
Start by getting a book and look at some tutorials. Google will help you there. Once you've got a decent idea of what's going on, look at a site, and try to duplicate what it looks like. If you're curious as to how something works or can't figure it out, look at the source (preferably with firebug) :D
Good luck
As others have said, getting a good book on HTML/CSS will certainly help.
Also read up on Web Standards - I think its really important to start learning these principles from the beginning as it will help you write valid HTML/CSS... and avoid writing invalid code.
I highly suggest the book "CSS Mastery". It's got a green cover with a pink binding...I think they've recently released a new version actually. Amazing book for beginning and advanced. I consider it my CSS bible.
I highly recommend w3schools.com and the Head First HTML with CSS & XHTML. I like most of the book in the head first series, in fact. They take a fun very visual approach to learning & I am a visual learner. Lots of things to practice & hints to help remember things.
If you don't feel totally confident then definitely pick up Head First HTML. Aside from that there are a few websites I would recommend:
A List Apart,
Stop Design
and as others mentioned the W3 website.
Working with a designer often means that they will produce mockups using Photoshop and you will in tern work off those. As that is the case having a working knowledge of Photoshop will be very useful for you. You don't have to be a wizard but some basic knowledge will enable you to do things like create image sprites from the mockup and get information relating to the width, height, color, etc of the different components in the design. As far as getting up to speed quickly there are many books on the subject, the Photoshop One on One books are a pretty good series and there are video tutorials available at Lynda.com.
I started on just looking at youtube. A really simple book for learning to code css and html is get coding. It's for kids, but it's a great start. I started there about a year ago, and now I've developed multiple websites for a couple of businesses. And I'm only twelve!