Thursday, November 24, 2011

CSS Tips For Beginner Web Designers

First and foremost, Happy Thanksgiving! I've decided to write up a short blog of web design tips and tricks.

Recently I was asked to do some work on the website for my undergraduate research project. I have very limited experience designing things from scratch with HTML/CSS, so I decided to turn the website itself in to a learning experience. I decided I wanted to build the website from the ground up, using no templates and no fancy graphical editors like Dreamweaver. I wanted to understand exactly what made my website look the way it looked.

I also decided that I did not want to use any images. CSS3 provides some really cool attributes that let you do some neat stuff that normally would require an image.

I've done some very basic web development and ASP stuff in the past, but I've never really bothered using much CSS and considering how widely it is used today, I thought it might be important to learn.

So here are my tips.
  • Use http://w3schools.com/ as a resource. I have always avoided using this site when looking up things because (ironically) I did not like the site layout and the ads were a bit much for my likings. On closer inspection, I found that this website really had a lot to offer me. I highly recommend the CSS section.
  • Use jsFiddle as a crutch while learning HTML and CSS. jsFiddle is a very simple, yet incredible editor for making quick prototypes of websites. You get 3 editor panels, one for HTML, CSS, and Javascript. The fourth panel shows you a preview of what your website actually looks like. I can not emphasize enough how great this tool is and how much it has helped me understand how CSS and HTML work together in just a few days of "fiddling".
  • Use Google to search for websites to draw from for inspiration. I do not have an eye for visual design, so this was a 'must' for me. I wanted my website to look modern, not like a geocities website from the 90's. I searched for Web 2.0 example sites and templates and found some design guidelines. I didn't follow the design guidelines exactly, since I needed to maintain a certain degree of professionalism for a school website, but it did give me some ideas to help me along in my design process.
  • Search for CSS generators. Some of the newer CSS3 features may be harder to figure out how to use, and there are tons of generators out there that will help you get the look that you want. Also, most of these generators will generate browser-specific code to help maximize compatibility.
Not much of a guide, but these are things that have really helped me out in the past few days. The purpose of this blog was mostly just to plug jsFiddle. Seriously, it's awesome.

1 comment:

  1. This blog awesome and i learn a lot about programming from here.The best thing about this blog is that you doing from beginning to experts level.

    Love from World Records List

    ReplyDelete