Best way to learn/master CSS - GoFuckYourself.com

Fletch XXX · 11-08-2011, 07:20 AM

Ive done plenty of tutorials over years and used CSS in many pages, but still feel I need to increase my knowledge and am wondering about taking a class or something or should I just stick with self teaching method?

In an effort to keep up with the times I am in the process of increasing my expertise and CSS happens to be on the platter at this time.

Ive looked at a few books and as mentioned even online classes,... anyone with any advice?

w3schools seems to be best online resource, but im not against the idea of class room and being taught stuff too.

Sid70 · 11-08-2011, 07:27 AM

Get a front page designed, cut images and then try assembling it with divs

Mutt · 11-08-2011, 07:33 AM

Quote:

Originally Posted by Sid70

Get a front page designed, cut images and then try assembling it with divs

if that's the kind of design you've got, basically a huge image you cut into pieces, may as well still use tables - makes no difference at all.

Fletch XXX · 11-08-2011, 07:34 AM

Quote:

Originally Posted by Sid70

Get a front page designed, cut images and then try assembling it with divs

this is what is frustrating.

I can sit for hours trying to hack away on something, and it begins to frustrate me as I wish I was just taught how to do something by someone who can teach and who knows the topic.

online tutorials are okay but always feel I could learn more. I looked up classes there arent really "css" classes it seems... or at least I cant find them LOL

candyflip · 11-08-2011, 07:35 AM

Click through here and look at the source code for the different layouts.

http://www.csszengarden.com/

This one has some good info for getting started, but you're past that I'm sure:

http://www.cssbasics.com/

Catalyst · 11-08-2011, 07:38 AM

this is a good site

http://thinkvitamin.com/

mikeworks · 11-08-2011, 07:48 AM

The best and most comprehensive book I bought a few months ago was 'CSS The Missing Manual' 2nd edition. Now I don't struggle anymore with css.

candyflip · 11-08-2011, 07:49 AM

Quote:

Originally Posted by mikeworks

The best and most comprehensive book I bought a few months ago was 'CSS The Missing Manual' 2nd edition. Now I don't struggle anymore with css.

My girl has this book on her desk right now.

Fletch XXX · 11-08-2011, 07:50 AM

Quote:

Originally Posted by mikeworks

The best and most comprehensive book I bought a few months ago was 'CSS The Missing Manual' 2nd edition. Now I don't struggle anymore with css.

thats one of the books ive thought of ordering recently.

so many CSS books are out of date now it seems, or dont have good reviews.

blazin · 11-08-2011, 08:10 AM

http://teamtreehouse.com/

Fletch XXX · 11-08-2011, 08:12 AM

so im gathering most agree self teaching is the way to go? heheh

Thanks for links, am looking at them all right now... keep the advice coming please

fris · 11-08-2011, 08:14 AM

Quote:

Originally Posted by Fletch XXX

Ive done plenty of tutorials over years and used CSS in many pages, but still feel I need to increase my knowledge and am wondering about taking a class or something or should I just stick with self teaching method?

In an effort to keep up with the times I am in the process of increasing my expertise and CSS happens to be on the platter at this time.

Ive looked at a few books and as mentioned even online classes,... anyone with any advice?

w3schools seems to be best online resource, but im not against the idea of class room and being taught stuff too.

best way really is to read all the tutorials people put out.

better than books really.

if you leave your email i can send you a few good places.

cherrylula · 11-08-2011, 08:15 AM

I can't stop looking at his hair!

http://teamtreehouse.com/topics/introduction/design

cool link

Fletch XXX · 11-08-2011, 08:16 AM

Quote:

Originally Posted by fris

best way really is to read all the tutorials people put out.

better than books really.

if you leave your email i can send you a few good places.

i hear ya, i like books though because I end up reading them more than just when sitting at desk. But i agree online tutorials have taught me many different thing, always looking to improve though. I wanna take it to next level and am willing to go sit in class room if I must.

fletchxxx @ gmail

Serge Litehead · 11-08-2011, 08:19 AM

handy feature "inspect element" through context menu in Chrome or with FireBug plugin/extension

once you get grip on positioning and floats and how thing stack up depending on various position & display settings, it becomes easy.

my personal fav is absolute positioned item in a relative positioned item

in css you can refer to classes and ids very flexibly, you can refer to particular tag in particular class/id for instance.

never use same id more than once on a single page.

Serge Litehead · 11-08-2011, 08:53 AM

Quote:

Originally Posted by Mutt

if that's the kind of design you've got, basically a huge image you cut into pieces, may as well still use tables - makes no difference at all.

for a quick job like some gallery - it is a 'decent' solution as it can be done quickly without needing to know much about html standards.

slicing sites with tables that go in templates of some CMS - worse possible practice, breaking table rows and table cells throughout various templates, or when generating rows, with tables you have to add logic to account row generation and then cell generation. real intend of a table is to present data where one row equals one dataset (recordset) like in database tables or spreadsheets.

Zoxxa · 11-08-2011, 09:06 AM

If you are anything like myself, you are probably extremely visible.

I would recommend getting a monthly subscription to Lynda.com with their video tutorials.
I personally loved their tutorials and learned a shit load from them. Two years ago I knew how to use photoshop and Dreamweaver with minimal CSS skills. To date, Ino longer use a visual editor, only TextMate, and have self taught myself html, improved photoshop skills, illustrator, advanced css, jquery, ajax, advanced php, wordpress & drupal developing, incorporating xml / json, basic python and ruby on rails, and tons of smaller cool things such as php frameworks. I went from being able to create static galleries to fully interactive web applications. The more you learn, the more fresh your ideas become. Exposing my brian to logical thinking with programming has actually improved my designing greatly in a strange way.

Learn to control the DOM and your life will change.

Here are the CSS tutorials from Lynda: http://www.lynda.com/search?q=css&x=0&y=0
Also check out nettuts, they have some great premium tutorials.

Video tutorials changed my life. Literally.

Zoxxa · 11-08-2011, 09:10 AM

Also, DO NOT get caught up in only watching videos. Actually DO them. You need to physically type these teachings over and over for them to sink in. After awhile it becomes so easy. Not to be insulting at all, but people talking about using tables instead of CSS is mind boggling now after mastering CSS. I could throw together a much better CSS gallery layout in about 3-5 minutes than any table could ever produce.

CSS is so incredibly easy. You could get quite good at it within days if you put in the hours.

Fletch XXX · 11-08-2011, 09:18 AM

zoxxa thanks for that post, pretty much where i am.

Encouraging.

roly · 11-08-2011, 01:06 PM

Quote:

Originally Posted by Sid70

Get a front page designed, cut images and then try assembling it with divs

is that the way web design should be done, design the whole page as one piece and then cut it up and then reassemble it with css?

nation-x · 11-08-2011, 01:18 PM

http://w3schools.com/css/default.asp

fris · 11-09-2011, 06:08 AM

Quote:

Originally Posted by Fletch XXX

Ive done plenty of tutorials over years and used CSS in many pages, but still feel I need to increase my knowledge and am wondering about taking a class or something or should I just stick with self teaching method?

In an effort to keep up with the times I am in the process of increasing my expertise and CSS happens to be on the platter at this time.

Ive looked at a few books and as mentioned even online classes,... anyone with any advice?

w3schools seems to be best online resource, but im not against the idea of class room and being taught stuff too.

here is a free course that was just released by envato

http://learncss.tutsplus.com/

raymor · 11-09-2011, 07:58 AM

First understand the theory, called the "box model" before getting too much into howtos for specific tasks and especially tricks or workarounds for specific problems. W3c probably has a good explanation of the box model so you'll understand WHY things behave as they do. Understanding tje big picture of how the whole thing is put together and should really help.

After that, one tip is to temporarily put borders on your major boxes so you can visually see the boxes as you work on a design.

Lastly, 90% of CSS problems are too much CSS, some rule that should be taken away rather than something that should be added. A browser's job is to make semantic html (meaningful tags) look reasonably good even in the absence of any CSS. Start by giving the browser a chance to do it's job, then add CSS only as necessary to adjust what the browser does naturally.

11-08-2011, 07:20 AM	#1
Fletch XXX GFY HALL OF FAME DAMMIT!!! Join Date: Jan 2002 Location: that 504 Posts: 60,840	Best way to learn/master CSS Ive done plenty of tutorials over years and used CSS in many pages, but still feel I need to increase my knowledge and am wondering about taking a class or something or should I just stick with self teaching method? In an effort to keep up with the times I am in the process of increasing my expertise and CSS happens to be on the platter at this time. Ive looked at a few books and as mentioned even online classes,... anyone with any advice? w3schools seems to be best online resource, but im not against the idea of class room and being taught stuff too. __________________ Want an Android App for your tube, membership, or free site? Need banners or promo material? Hit us up (ICQ Fletch: 148841377) or email me fletchxxx at gmail.com - recent work - About me

11-08-2011, 07:27 AM	#2
Sid70 Downshifter Industry Role: Join Date: Dec 2002 Location: Road trip Posts: 16,413	Get a front page designed, cut images and then try assembling it with divs __________________ Русня, идите нахуй!

11-08-2011, 07:35 AM	#5
candyflip Carpe Visio Industry Role: Join Date: Jul 2002 Location: New York Posts: 43,061	Click through here and look at the source code for the different layouts. http://www.csszengarden.com/ This one has some good info for getting started, but you're past that I'm sure: http://www.cssbasics.com/ __________________ Spend you some brain. Email Me Last edited by candyflip; 11-08-2011 at 07:36 AM..

11-08-2011, 08:10 AM	#10
blazin Confirmed User Join Date: Aug 2002 Posts: 2,781	http://teamtreehouse.com/ __________________ I don't endorse a god damn thing......

11-08-2011, 08:12 AM	#11
Fletch XXX GFY HALL OF FAME DAMMIT!!! Join Date: Jan 2002 Location: that 504 Posts: 60,840	so im gathering most agree self teaching is the way to go? heheh Thanks for links, am looking at them all right now... keep the advice coming please __________________ Want an Android App for your tube, membership, or free site? Need banners or promo material? Hit us up (ICQ Fletch: 148841377) or email me fletchxxx at gmail.com - recent work - About me

11-08-2011, 07:38 AM	#6
Catalyst Confirmed User Industry Role: Join Date: Jun 2003 Location: Vegas Posts: 3,243	this is a good site http://thinkvitamin.com/

11-08-2011, 07:48 AM	#7
mikeworks Confirmed User Join Date: Apr 2010 Posts: 272	The best and most comprehensive book I bought a few months ago was 'CSS The Missing Manual' 2nd edition. Now I don't struggle anymore with css.

11-08-2011, 08:15 AM	#13
cherrylula lol Industry Role: Join Date: Jan 2002 Posts: 15,969	I can't stop looking at his hair! http://teamtreehouse.com/topics/introduction/design cool link

11-08-2011, 08:19 AM	#15
Serge Litehead Confirmed User Industry Role: Join Date: Dec 2002 Location: Behind the scenes Posts: 5,190	handy feature "inspect element" through context menu in Chrome or with FireBug plugin/extension once you get grip on positioning and floats and how thing stack up depending on various position & display settings, it becomes easy. my personal fav is absolute positioned item in a relative positioned item in css you can refer to classes and ids very flexibly, you can refer to particular tag in particular class/id for instance. never use same id more than once on a single page. __________________ SilverCrocodile.com Adult web design since '05 Last edited by Serge Litehead; 11-08-2011 at 08:27 AM..

11-08-2011, 09:06 AM	#17
Zoxxa Confirmed User Industry Role: Join Date: Feb 2011 Location: Ontario, Canada Posts: 1,026	If you are anything like myself, you are probably extremely visible. I would recommend getting a monthly subscription to Lynda.com with their video tutorials. I personally loved their tutorials and learned a shit load from them. Two years ago I knew how to use photoshop and Dreamweaver with minimal CSS skills. To date, Ino longer use a visual editor, only TextMate, and have self taught myself html, improved photoshop skills, illustrator, advanced css, jquery, ajax, advanced php, wordpress & drupal developing, incorporating xml / json, basic python and ruby on rails, and tons of smaller cool things such as php frameworks. I went from being able to create static galleries to fully interactive web applications. The more you learn, the more fresh your ideas become. Exposing my brian to logical thinking with programming has actually improved my designing greatly in a strange way. Learn to control the DOM and your life will change. Here are the CSS tutorials from Lynda: http://www.lynda.com/search?q=css&x=0&y=0 Also check out nettuts, they have some great premium tutorials. Video tutorials changed my life. Literally. __________________ [email protected] ICQ: 269486444 ZoxEmbedTube - Build unlimited "fake" tubes with this easy 100% unencoded CMS!

11-08-2011, 09:10 AM	#18
Zoxxa Confirmed User Industry Role: Join Date: Feb 2011 Location: Ontario, Canada Posts: 1,026	Also, DO NOT get caught up in only watching videos. Actually DO them. You need to physically type these teachings over and over for them to sink in. After awhile it becomes so easy. Not to be insulting at all, but people talking about using tables instead of CSS is mind boggling now after mastering CSS. I could throw together a much better CSS gallery layout in about 3-5 minutes than any table could ever produce. CSS is so incredibly easy. You could get quite good at it within days if you put in the hours. __________________ [email protected] ICQ: 269486444 ZoxEmbedTube - Build unlimited "fake" tubes with this easy 100% unencoded CMS!

11-08-2011, 09:18 AM	#19
Fletch XXX GFY HALL OF FAME DAMMIT!!! Join Date: Jan 2002 Location: that 504 Posts: 60,840	zoxxa thanks for that post, pretty much where i am. Encouraging. __________________ Want an Android App for your tube, membership, or free site? Need banners or promo material? Hit us up (ICQ Fletch: 148841377) or email me fletchxxx at gmail.com - recent work - About me

11-08-2011, 01:18 PM	#21
nation-x Confirmed User Industry Role: Join Date: Mar 2004 Location: Rock Hill, SC Posts: 5,370	http://w3schools.com/css/default.asp

11-09-2011, 07:58 AM	#23
raymor Confirmed User Join Date: Oct 2002 Posts: 3,745	First understand the theory, called the "box model" before getting too much into howtos for specific tasks and especially tricks or workarounds for specific problems. W3c probably has a good explanation of the box model so you'll understand WHY things behave as they do. Understanding tje big picture of how the whole thing is put together and should really help. After that, one tip is to temporarily put borders on your major boxes so you can visually see the boxes as you work on a design. Lastly, 90% of CSS problems are too much CSS, some rule that should be taken away rather than something that should be added. A browser's job is to make semantic html (meaningful tags) look reasonably good even in the absence of any CSS. Start by giving the browser a chance to do it's job, then add CSS only as necessary to adjust what the browser does naturally. __________________ For historical display only. This information is not current: support@bettercgi.com ICQ 7208627 Strongbox - The next generation in site security Throttlebox - The next generation in bandwidth control Clonebox - Backup and disaster recovery on steroids