A beginners guide to web design

learnweb_pre

This is a beginning point for all those print designers trying to jump aboard to the web, people starting out in the design field, and anyone else who wants to know. Below we have collected some important places to go to get your start as a web designer.

I decided I don’t want to bombard you with a huge amount of different websites that you would only get a little amount of information from each one, or websites that repeat each other. This is a simple, straight forward list of articles to help you start creating websites.

Finishing the Design

Before I start coding, I prefer to mock up the website in some program. I usually design my websites in Photoshop, but you can also use Illustrator or any other program you prefer. Here are some techniques to polish off your design, and keep you looking professional.

Elements of Great Web Design: The Polish

learnweb_pre

The Basics

Now that you have your mock up website, we have to figure out how to turn it into a working website. Here is the absolute beginning, an introduction to HTML.

HTML Tutorial

learnweb_pre

Once you get a handle on how HTML works, you can start in with an introduction to CSS.


CSS Tutorial

learnweb_pre

From PSD to HTML

Now that you have a general idea of how HTML and CSS work, you can check out this video tutorial of the process of going from your mock-up to the final CSS/HTML website.


Coverting a Design From PSD to HTML (Video)

learnweb_pre

…and here is a regular tutorial that goes from a mock-up to the CSS/HTML website


Build a Sleek Portfolio Site from Scratch

learnweb_pre

CSS Reset

CSS Reset sheets are a great way to get rid of the default settings on each web browser. Not everyone uses it, but if you do decide to use one or want to know a little more about them, here is some information about it. You can also use Eric Meyer’s Style Sheet as a starting point for your own.


Resetting Your Styles with CSS Reset

learnweb_pre


Eric Meyer: Resetting Again


learnweb_pre

Cheat Sheets

There is a lot of information, when it comes to all the coding and different elements you need to use, so if you get lost, or forget some code, this post lists a number of cheat sheets.


Top CSS Cheatsheets


learnweb_pre

Validators

So you finally finished your first CSS/HTML website, now you need to make sure your CSS and HTML are valid.


CSS Validator


learnweb_pre


HTML Validator


learnweb_pre

These websites are great places to start, to teach you to create your own websites. Feel free to leave links below to websites that have helped you with web design!




You might also like these articles...



Only comments in English will be approved!

13 Comments

  1. 22/12/2009

    Great collection of guides. I like how, like you said, didn’t throw together this massive list where you leave the reader with no real direction on where to go.

    Thanks!

  2. 24/12/2009

    definately one of my main new years resolutions is to pick up more web design skills!

  3. 04/01/2010

    Dude, this is a much helpful site to the people who desire to learn Web Design. it guides the beginners in all aspects. Must say buddy its a wonderful post.

  4. 06/01/2010

    As a webdesigner myself , I’m extremely glad to see that someone brought up this topic.

    Quite a few people just don’t grasp the concept of what all is involved in our field, and I think also we’re all too often not appreciated enough
    or taken for granted. Never the less I’m immensely glad to see that you feel the same way I do , thanks so much for your blog!

  5. 08/01/2010

    Well wishing. I’m a keen designer myself.

  6. 17/01/2010

    Nice post mate

  7. 12/05/2010

    Wow, Tyler! Great collections! I am new at web designing and this is extremely helpful! Thanks a lot! Why not publish the guide as an e-book? ;-)

  8. 13/05/2010

    I don’t know about an e-book, I think articles are my limit on a subject at least for now :)

  9. I’m confused about this whole thing at moment. Need to read up on it big time!

  10. 13/08/2010

    Take classes. Yes you can acquire some guides to enable you, but self-teaching vs being taught is extremely different. A lot can go wong when consumers self-teach (especially computer languages) and all individuals folks who went wrong could be those who read the same guides as the pros. Take classes so you may be a pro the to start with time around.

  11. 25/11/2010

    Really, Great post, thanks for share
    Here are few mockup design tips http://www.templatespoint.com/blog/2010/10/mockup-design-tips/

  12. 28/10/2011

    Wonderful work! This is the kind of info that should be shared across the web. Shame on the seek engines for now not positioning this put up higher! Come on over and consult with my site . Thank you =)

  13. 16/12/2011

    We wish to thank you once again for the stunning ideas you gave Janet when preparing her own post-graduate research in addition to, most importantly, with regard to providing every one of the ideas in a blog post. If we had known of your web site a year ago, we would have been saved the unnecessary measures we were choosing. Thanks to you.