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!



Random Posts




    You might also like these articles...



    Only comments in English will be approved!

    8 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 :)

    Leave a Reply