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
Related
I have been using the P tag for each html form filed element row but in twitter and facebook they use table for designing a form and linkedin uses ol tags for each html field rows. Ebay uses div tags.
Please suggest a best practices to develop an html form.
Whatever technique you use, make sure you are 100% compliant with a tool like this.
There is no best practice on this issue. Just use whatever feels more convenient for your current page layout.
A good table-less result is a little hard to obtain (you need to know very well how positioning works, and there are several issues concerning different browsers implementations), but the code results more comprehensible and more maintainable. Moreover DOM manipulation is faster (there are tons of things to say about it... :) ).
Table layout is easier to obtain and it's a more "natural" way to imagine columns, rows and stuff inside them.
By the way, concerning a simple structure like a form, it really doesn't matter what kind of technique you use!
There is a huge debate / gap in opinion on this subject, whether to use tables or not? And to be frank the arguments on both sides here are compelling however the decision firmly rests with the designer / developer.
If you use Tables then you know that as far as positioning is concerned you can control your for elements easily and indeed apply CSS to the tables if you want them to look awesome.
If you use CSS the feeling is your more likely to have better validated code and be 'Future Proof' and again styling can be picked up from centralised styles such as fonts etc for your P tags.
Personally I make the decision based on a few elements...
Does CSS offer me the control I want for my form in this sites context?
Can I ensure that my CSS (if used) is cross browser compatible?
3 Do I care? Tables have been around for years so why not use them!?
Do I have a specific brief asking for table-less design?
See this article it may help Iron Spider - Tables vs CSS
Sorry not to be more specific and good luck!
Is knowledge of HTML beyond the basics a prerequisite for learning CSS?
I am making a learning plan so this will help me evaluate the time required better.
Is knowledge of HTML beyond the basics a prerequisite for learning CSS?
Absolutely. You won't be able to use CSS in a practical way if you don't know your way around the HTML elements to apply them to.
I'd say learn them both parallelly. Understand the basic HTML syntax and structure first; then start with CSS.
Whats the use of CSS if you don't know HTML?
So better get a good understanding of HTML first and then study CSS.
You can learn CSS from scratch, only basic HTML is needed to allow you to start! Good luck, w3schools.com is an excellent reference site and learning tool for HTML/CSS.
Good question. I'd say technically speaking you don't really need to know HTML if you're absolutely only going to work in CSS (styling somebody else's HTML), but you do need to know about the DOM structure and box model. As pertains to CSS, the DOM and HTML are so closely related as to be virtually indistinguishable. If you know enough about the DOM structure to be able to code CSS, you pretty much automatically know HTML with it.
This almost like asking if you can be an interior decorator without knowing what a house is or the different kinds of rooms.
The whole point of CSS is to make HTML look (and sometimes act) better.
It would be silly to use CSS to create indented lists, and only then discover the <ul> tag.
Or worse, I've seen people spend weeks trying to use CSS to put data in a grid, when one simple <table> tag did the trick. ;-)
Its better if you will go with HTML first, anyways it won't take much time, atleast you should have a basic idea about HTML, then you can easily move in CSS. Anyways CSS is nothing but the style sheet.
I know that is a very embracing question, but I have just started with Ruby on Rails, and still have a long way with CSS and HTML.
There are lots of books about CSS and HTML patterns, but I would like to know what is really applied to actual webpages.
For example, what's the best way of doing a simple webpage with a lateral menu, a logo on the top, and some text below?
Ok, it seems stupid, but there's lot of ways of doing that, or not ?
So, how can I learn this patterns and what are the real patterns ?
Would appreciate suggestions of books, articles, etc.
you can find some good css templates here:
http://www.csszengarden.com/
Actually in html and css there are not patterns in the oo sense.
I find this tutorial very useful:
Design and Code your first website
The nettuts website has a lot af very good free tutorials.
A very good book to begin is:
Head First HTML with CSS and XHTML
It varies from developer to developer. So I'll just tell you what I'm doing!
I'm actually following a very common pattern - separate ANY layout from the contents!
Into the HTML goes...
Text
<div/> containers with IDs to be layouted
And in the CSS goes...
Layout for the ID'd and class'ed <div/> layout containers
Colors, Background images
Fonts
It allows to rapidly change the whole page design without even touching the HTML! And it decreases both your server's traffic and the load time on the client pages, because the CSS file can be cached, since it does not change as much as the HTML does!
The CSS Zengarden nate posted is a very nice example of this pattern. The same unmodified HTML with dozens of CSS files with totally different looks!
This pattern also allows the same unmodified HTML to be displayed with automatically selected CSS files on huge displays, on small netbooks and on mobile devices. Can't be any better if you ask me!
You might want to check out some CSS libraries.
I don't personally like using them because I have ways that I like to do things and sometimes they aren't flexible enough for what I want to do. But since you're just starting out they might help you get something that looks good up really fast without having to worry about float drop bugs or margin collapsing or any other CSS quirks that are easy to hit but hard to recognize if you haven't seen them before.
An example would be the Yahoo User Interface (YUI) Grids CSS that will help you set up many different kinds of grid layouts. To find more, I would search for "css framework" or "css library".
Another YUI resource I think would be really useful for you would be their design pattern library, which documents different ways to display common interface items and gives you resources to go implement them. This can help make your interface look familiar to users and can keep you from feeling like you have to redesign a drop-down box or something.
The rule of thumb should be to do all design in CSS and HTML is just HTML without calls to design. That way, like referenced above, you can change design rapidly.
A good reference for how this works is the Zengarden CSS site at: http://www.csszengarden.com/
This is a site I used often as I learned the ins and outs of CSS design.
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.
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.