Best way to learn website design w/CSS

27 replies
  • WEB DESIGN
  • |
Hello warriors,

It's been a long time since coming here, but I know that I can get some good replies.

I have done website design in the past and still do some today, but I wanted to move over to xHTML/CSS and Designing sites in PhotoShop CS3.

Could you guys/gals give me some good resources that can teach me how to do this?

Appreciate all feedback. Thanks.

Patrick Whitson
#design #learn #w or css #website
  • Profile picture of the author Richard Whyte
    W3Schools are great as a resource to learn and use as a online command reference. I have that site open in my browser all the time when I am designing.

    A lot depends on your current skillset, but you can find many tutorials on Google. Just need to ask the right question.

    Still, start with w3schools.com and once most of that makes sense, you will be ready to expand outwards.

    Have a Great Day!
    {{ DiscussionBoard.errors[1194033].message }}
    • Profile picture of the author Johny2000
      Originally Posted by Richard Whyte View Post

      W3Schools are great as a resource to learn and use as a online command reference. I have that site open in my browser all the time when I am designing.

      A lot depends on your current skillset, but you can find many tutorials on Google. Just need to ask the right question.

      Still, start with w3schools.com and once most of that makes sense, you will be ready to expand outwards.

      Have a Great Day!

      Thanks for information. I like it
      {{ DiscussionBoard.errors[2656061].message }}
      • Profile picture of the author Big Squid
        Gotta agree with Shen on this one... Head First books are very easy to learn and each book has it's own active support forum. I think you can get one used online somewhere for less than $25.

        It's worth it.
        {{ DiscussionBoard.errors[2656229].message }}
        • Profile picture of the author SiteSmarty
          The easiest way to learn is by using the Thesis WordPress Theme.

          Here's why:

          In Thesis there is a folder named "custom". There are files inside that folder, two of which let you override the core functions and css of Thesis.

          If you're just starting you don't need to touch the custom_functions file. You can create a theme using just the custom_css.

          For example:

          This is a skin created for Thesis and it's designed just using css

          sitesmarty.net/thesis-theme-skin-blue-banner/ << (Copy and paste into our browser address bar)

          I've got an easy sales page skin (I'm using it on my signature link) you could use to get your feet wet. Just go between the skin and 3schools to learn the css part in a day or two. You need Thesis to use a skin.
          {{ DiscussionBoard.errors[2659818].message }}
    • Profile picture of the author TechGuy1
      Originally Posted by Richard Whyte View Post

      W3Schools are great as a resource to learn and use as a online command reference. I have that site open in my browser all the time when I am designing.

      A lot depends on your current skillset, but you can find many tutorials on Google. Just need to ask the right question.

      Still, start with w3schools.com and once most of that makes sense, you will be ready to expand outwards.

      Have a Great Day!

      I also learn lot of things from this site so go ahead..................
      {{ DiscussionBoard.errors[2792334].message }}
  • Profile picture of the author Mr.Tambourine
    Head over to Linda.com ... it has some professional tutorials on almost any topic you can think of ..... If you do not want to pay, you can surf around on you tube etc for tutorials ...

    Look at nettuts.com and tutvid.com for excellent tutorials .....
    {{ DiscussionBoard.errors[1194083].message }}
  • Profile picture of the author jgalty
    I would do all mentioned above and i would also download a template or two that css in it and see how it works. Play around with it and change things to get a feel for it.
    Signature
    {{ DiscussionBoard.errors[1194425].message }}
    • Profile picture of the author cma01
      The first time I delved into CSS was when I was working on a project and needed to create a list styled menu. I just Googled for tutorials and played around with it until I figured it out. It took me about 8 months until I was really comfortable designing sites completely with CSS.

      Deconstructing existing CSS layouts, as jgalty suggested, is a good way to learn. One of the best inspiration sites is csszengarden.com. And whenever I see a cool web site (well I do this for almost all web sites), I look at the source and see how they did it.

      Alistapart.com is another good site to follow and I have several books from Sitepoint.

      When you design with CSS, you have to look at a design differently than you would if it were designed with tables. If I knew of a book or course that taught the theory behind it . . . how to approach a site for CSS, I would direct you to it . . . but I don't. It's kind of like geometry was for me, you just have to keep practicing until you "get" it.

      An absolute must have tool is Firebug for Firefox. I could code a CSS layout without Dreamweaver, but I couldn't do without Firebug.

      I also use Aardvark occasionally, particularly if I've fixing a template that's not mine and I'm not familiar with the div structure. You can quickly identify div outlines with it.

      When I finish a design in Photoshop, I open Dreamweaver and create a blank html and CSS document and start coding. I go outside to inside and back to front. What is going to be on the body background . . . what divs do I need to work in all the design elements. What can I tie to headings, etc.
      Signature
      "Wise men talk because they have something to say; fools, because they have to say something."
      ~ Plato
      {{ DiscussionBoard.errors[1199049].message }}
      • Profile picture of the author SmartWeb
        Originally Posted by cma01 View Post

        An absolute must have tool is Firebug for Firefox. I could code a CSS layout without Dreamweaver, but I couldn't do without Firebug.
        Firbug is great tool for learning CSS. Firebug is a plugin for firefox. and these great tools are free. spend some time in learning firebug, and you can see how each line of css effects the webpage in real time.
        {{ DiscussionBoard.errors[2662492].message }}
  • Profile picture of the author joelmutia
    try also killersite.com. they have a great resource. some topics offers free video tutorial.
    with CSS you have the full control of the look of your website. how you display it. of course DIV tags play a great role also + ID and CLASS. I studied web design from scratch first from notepad hard tagging with tables tag and some deprecated tags now i let go he table tags and go for DIV tags.
    {{ DiscussionBoard.errors[1263898].message }}
  • Profile picture of the author Amelia O
    Lynda.com hands down..
    Signature
    Being Happy & Healthy Is The Key To Success..
    {{ DiscussionBoard.errors[1267265].message }}
  • Profile picture of the author faust1611
    with all the resources you have over the web. add experience, practice and heart your good!
    {{ DiscussionBoard.errors[1272511].message }}
  • Profile picture of the author sanjid112
    w3school and killersite would be good.
    also by download some templates with CSS and make a little experiment with those, it will be great tool to learn.

    well, you can go to bookstore or library to find books with that theme. that can be good resources too.

    the more important is practice and practice...
    {{ DiscussionBoard.errors[1272540].message }}
  • Profile picture of the author Dave Dougherty
    The only site you will ever need hands down net.tutsplus.com
    {{ DiscussionBoard.errors[1274764].message }}
  • Profile picture of the author cmaclean
    Check out W3Schools and Lynda.com.

    Once you get a decent grasp, you'll learn alot from:

    Net.tutsplus.com (as Doggz mentioned)
    CSS-tricks.com
    {{ DiscussionBoard.errors[1274991].message }}
  • Profile picture of the author jorgemarget
    I would do all mentioned above and i would also download a template or two that css in it and see how it works. Play around with it and change things to get a feel for it.
    {{ DiscussionBoard.errors[2574620].message }}
  • Profile picture of the author dominicmarsh
    Yes there are many tutorials online you can go through those and see how much you can grasp.
    {{ DiscussionBoard.errors[2576705].message }}
  • Profile picture of the author erinsmith
    W3Schools very useful for and some advantage for newer but many more site give deep tutorials so easy to understand and apply so easy for you
    {{ DiscussionBoard.errors[2576727].message }}
  • Profile picture of the author luxl85
    I suggest you download a CSS note and use DW to practice it.
    Signature

    My resource: Amazon sale

    {{ DiscussionBoard.errors[2610590].message }}
    • Profile picture of the author arvelclinton
      The best way to learn website design is to praticise a lot. Practise makes a man perfect.
      {{ DiscussionBoard.errors[2651628].message }}
  • Profile picture of the author dnawize
    Go to YouTube and search for "CSS Tutorials". There are planty all for free.
    {{ DiscussionBoard.errors[2654901].message }}
    • Profile picture of the author jacthomas
      To learn website designing, your grasping power should be very strong.If your grasping power is strong then you will easily learn web designing.
      {{ DiscussionBoard.errors[2655817].message }}
  • Profile picture of the author adrienngary
    I have no trouble with HTML,CSS,PHP,Javascript programming, although I don't know flash yet, I'm interested only in learning the aesthetic aspects of the design. There are plenty of websites out there that can assist you in learning the basics for websites especially HTML or CSS.
    {{ DiscussionBoard.errors[2684352].message }}
  • Profile picture of the author wevo
    Practical learning is best. Code sample sites.

    1. Grasp a general idea of HTML + CSS.
    2. Design your own simple layouts.
    3. Attempt to code your layouts.
    4. Found a road block? Google it.

    Seriously i code client websites with ease now from pretty much doing the above. You can read as much as you want but you need to put it into practice to learn.

    I was in your position a few months ago.
    Signature

    Web Design & Front-end Development Solutions.

    {{ DiscussionBoard.errors[2689823].message }}
    • Profile picture of the author jacthomas
      Learning to build your web sites using HTML will give you far better control over the process and ultimately your web sites. You will have a far deeper understanding of the web, and as a result you will create better web sites quicker - much quicker.
      {{ DiscussionBoard.errors[2786665].message }}

Trending Topics