by
Deepak Pradeep , Programmer , Cognizant Technology Solutions
Hi Meerashah,
Since you're already well versed in making websites using tables, you should feel at home using the Foundation Zurb framework for Responsive Web Design.
It's based on the grid layout and all the elements of a website are placed within nestable rows and columns!
Hope this helps. Check it out at http://foundation.zurb.com
I think you should explore the div architecture, understanding how to use block & inline with div & other taleleless elements, Another important thing to consider the browser inconsistency that occur when you use tableless design using div with various float, margin & padding.
Don't jump directly into the frameworks & grid take it slowly when you have confidence building website with tableless design you can your hands on css grid & framework, there is ton of grid & framework available choose according to your need.
Learn from basic, I would suggest you to start from the basics : http://www.w3schools.com/css/ there is no shortcut to anything,specially learning...learn / experiment/ mock projects, redesign your old designs...
best of luck!
You should refer to css3.com. This will answer all your questions and you can do a lot more things in shorter time for which you used to use Javascript or JQuery.
Meerashah,
For fundamental you can go to learn http://www.w3schools.com/ website step by step. Further you can go with framework's like what deepak said. Foundation zurb is really an wonderful framework also you can check twitter's bootstrap framework http://twitter.github.io/bootstrap/.
Hi - do it one by one...
1. understand the concept of tableless, why do we use them, when we have been designing with tables so easily.
2. now comes- DIV, plays major role in making a website tableless.
3. understand the concept of browser compatibility.
4. understand website load time management.
5. start with a small home page in DIV, simply means divisions we have been doing with tables now with DIV tag.
6. start applying cascading style sheets.
7. check your code in w3c validator, find errors, read the meanings and rectify on your own.
8. best sites are w3schools.com, tizag.com, htmldog for beginners...
any other query, keep posting....
I hope it helps...
For learning, you may read articles on smashingmagazine.com, css-tricks.com or webdesign.tutsplus.com. Please also refer to "This is responsive" Responsive Web Design (RWD) gate:
http://bradfrost.github.io/this-is-responsive/index.html
You will benefit of using CSS frameworks. There are currently tons of frameworks that have RWD capabilities. Let me name a few:
- Deepak already mentioned Foundation (http://foundation.zurb.com)
- Gumby (http://gumbyframework.com)
- Groundwork (http://groundwork.sidereel.com)
- And the famous Twitter Bootstrap has RWD capabilities sufficient for most situations (http://twitter.github.io/bootstrap/scaffolding.html#responsive)
