<< The CSS Learning Group public

Discussion Board

ask questions, discuss topics, solve problems

This is a public Discussion Area  publicRSS

Thread

    • What tools do you use?
      Thread posted Mar 18 by Mordy Golding
      812 Views, 16 Comments
      Title:
      What tools do you use?
      Content:

      Being that CSS itself is "just code", you don't need anything more than a simple text editor in order to use it. That being said, there are also several tools (i.e. Adobe Dreamweaver) that have features built in that make it easier to use CSS, sometimes visually.

      Personally, I am using Dreamweaver CS4 for my web development, and so for a majority of the CSS that I'll be doing, that's where I'll be.

      What tools will you be using on this journey?

      :) Mordy

    Comments

    • One more thing... how many are familiar with, or use InDesign? I ask because when it comes to CSS, I can draw several correlations between how a feature appears in InDesign and how it appears within CSS to hopefully make it more understandable. 

    • The Firebug extension for Firefox has completely changed the way I write CSS.

    • I have CS4 Design Premium so it would seem natural for me to also use Dreamweaver for the CSS training. I also use InDesign daily it would help me a lot if you were to use it to show correlations.

    • I'll probably be using Dreamweaver for coding (in code view!). Firebug and Web Developer Toolbar plugins for Firefox.

      I loooooove InDesign. I would say I'm very familiar with it (I've even used it to mock up websites!). And there are a lot of similarities in ID's style sheets and CSS... parent-child relationships for example. So yes, any print corrolations you can make in learning CSS would be great!

    • Awesome Mordy! I generally use Dreamweaver for editing CSS these days and when I got started with CSS I was a TopStyle guy back in the day. Its still very resourceful, but I have to admit that the FireFox plugins is a no brainer these days. :)

      TopStyle:
      http://www.newsgator.com/individuals/topstyle/default.aspx

      If you have Adobe CS4 Design Premium then you will be happy to know Fireworks CS4 now outputs CSS once you learn a few disciplines and we are not talking absolute positioning folks. This is code that you can take forward in Dreamweaver and in the past the only way you could export something from Fireworks as CSS was CSS Layers that were absolutely positioned!! Ugh...nasty stuff. Go read up on the new export enhancements here:

      Creating standards-compliant web designs with Fireworks CS4
      http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html

      Go to the Fireworks Developer Center and download the Starter templates and enhanced export script/HTML components.

      Prebuilt CSS templates in Fireworks CS4
      http://www.adobe.com/devnet/fireworks/articles/css_templates.html

      Good thing about Fireworks is the extensibility layer, we can modify and enhance the CSS export script anytime to support real world changes without waiting for another release of Fireworks to address the new tags/workflows. Ok thats geek talk, but I'm happy to be here and hope to learn a few things myself.

      I also use a Command by John Dunning that takes all the Layers or States in a Fw document and places them side by side in one image for use as CSS sprites. http://johndunning.com/fireworks/

      Here is where you can learn about CSS sprites or get started. there are a ton of resources. If you havent taken on this technique I'd highly encourage you to do so: http://spritegen.website-performance.org/

      Thanks for the group, I hope I can help and learn too with others! :)

    • Hi Alan! Great to see you here.

      Thanks for the great resources. I'm sure that as we learn more about CSS, these will be extremely helpful. Also nice to see Fireworks embracing CSS :)

    • For learning CSS, I agree with mcrumley, Firebug has become nearly indispensible in my understanding and practice of CSS. Pick a site, any site in Firefox, launch Firebug and engage. I'll post tips for beginners when using this amazing toolset, but would encourage the use of Google Chrome as well. Chrome will provide "View Source" in a new tab and link all stylesheets associated with a site.

      I also use Notepad ++ quite a bit on the PC, but am really fond of CSS Edit on the Mac for helping me see each CSS rule visually. And of course, Dreamweaver has been my constant companion since version 3.0. I admit I skipped CS3, but CS4 produces pure bliss.

    • I was a HomeSite /TopStyle user for a very long time but now that I've made the leap to Mac it's Dreamweaver or bust :).

    • Iuse Dreamweaver mainly, but when it comes to hand coding, I still use Topstyle, as I have been using it like, forever. I am more comfortable with it when I have to do things by hand.

    • For basic CSS, I usually start in a simple IDE like HTML-Kit. Once I have the basics down and need to move on to marrying the visuals with the text, I switch to Dreamweaver.

      I've found that the Web Developer plug-in for Firefox essential, especially when working with tailoring CMS content (Joomla!, Drupal, et al.)

    • I have CS3 Design Premium but am getting ready to upgrade to CS4. I have PC at work and a Mac at home.

      Count me in for the people who want you to relate it to In Design. That would help me a lot. I tend to design sites where I'm comfortable (ID, ILL) and then figure a way to transfer that over to Dreamweaver. I'm curious about what process other designers use to bring their ideas to the web/CSS.

    • For the actual design process, Photoshop & Illustrator. For CSS, since I'm still looking for what I'm most comfortable editing in, it's Dreamweaver or CSSEdit for now. Being purely CSS-based, I'm leaning towards the latter for now, as it's a nice lean app that lends itself well to the experimentation I like to do.

      I keep hearing about Firebug, so I'll look into it, but Firefox as a whole is not somewhere I... generally go. A little foreign to me.

    • I admit to being an Adobe junkie. I have CS4 Master set even though I only really use Photoshop and Dreamweaver. I do all of my CSS work in DW. I am forced to use FrontPage/Sharepoint Designer when working on Sharepoint sites, but that's it. I have wanted to look at Eric Meyers CSS tools offered by WebAssist, but really have not run into that I couln't figure out on my own or with help from some web resources such as Listmatic.

    • as I work as senior web user interface developer i used to do my Css code using visual studio 2008 -it's so fast & while developing SharePoint site I use SharePoint designer -- I work with top style when i start learning how to write css files :)

      I use "ie developer toolbar" to track any Ui issues i face specially on SharePoint sites - it's very helpful & it's like firebug on Firefox {firebug is more powerful but i like ie more ;) "

      i hope to learn more css techniques in advanced way to make my css file as simple,clean as i can

    • I guess I can stand in line in the Adobe junkie queue. Dreamweaver has been my favorite editor since version 4, and I'm still going strong. However when it comes to browser optimization I will resort to web developer tool bar for Firefox and developer tools for ie8 both are awesome to adjust browser specific settings.

      I've grown into a bad habbit of not caring to optimize to older browser unless a project specifically calls for it, however I always check my code for validation errors using the w3c validators (validator.w3.org) as well as use http://browsershots.org/ to make sure the site looks all right in the browsers I need. Especially the latter is good if you can't be bothered having multiple browsers installed.

    • I enjoy using Dreamweaver as my text editor along with Firebug to check my progress.