How to Learn Web Design

Four Parts:Help FilesBeginningLearningApplying Your Knowledge

Web design is a very good skill to have, especially in today's Internet-centered world. If you're really good, you can make money from clients, start membership websites, and pursue other money-making projects. If you want to know how to learn web design, you're in the right place!

Help Files

HTML Cheat Sheet

CSS Cheat Sheet

Part 1
Beginning

  1. Image titled Learn About Web Design Step 1
    1
    Note what web designs differs from. Web design is not book design, it is not poster design, it is not illustration, and the highest achievements of those disciplines are not what web design aims for. Although websites can be delivery systems for games and videos, and although those delivery systems can be lovely to look at, such sites are exemplars of game design and video storytelling, not of web design.
  2. Image titled Learn About Web Design Step 2
    2
    Understand what web design involves. Web design is the creation of digital environments that:
    • facilitate and encourage human activity;
    • reflect or adapt to individual voices and content; and
    • change gracefully over time while always retaining their identity.
  3. Image titled Learn Web Design for Free Step 1
    3
    Determine what resource you want to use. The main resources are websites, videos, and books. Some popular websites are Codecademy and W3Schools. However, there are many more, so feel free to experiment!
    • Sign up for an account if you've chosen a website. You will be able to save your progress this way.
    • If you've chosen videos, bookmark all the videos you'll need.
    • Go to your local library or bookstore if you've chosen the book route. If you want something cheaper (or even free), download eBooks or PDF files.
    • If you're willing to pay, you might be able to get individualized lessons from a professional web designer.
  4. Image titled Learn Web Design for Free Step 2
    4
    Figure out how much time you'll need. You'll need to figure out how to fit this into your day if you're a busy person.
  5. Image titled Learn Web Design for Free Step 3
    5
    Download a web design program if you haven't already. While Notepad will work, it's a good idea to have a program like Adobe Dreamweaver, Microsoft Expression Web, or KompoZer. There are many, many others, so browse around and get what you like.

Part 2
Learning

  1. Image titled Learn Web Design for Free Step 4
    1
    Get started with HTML. HTML is an absolute requirement for any web designer. Master the concept of tags, classes, IDs, inputs, etc.
    • The newest version of HTML is HTML5. HTML5 incorporates some new technologies, so that is probably the best one to learn.
    • XHTML is also an option, but it's a little bit stricter in its rules.
  2. Image titled Learn Web Design for Free Step 5
    2
    Learn CSS. CSS stands for "Cascading Style Sheet". Without CSS, there wouldn't be the pretty designs you see on some websites. HTML is merely the skeleton, but CSS is what makes a website colorful and pretty.
    • CSS is a bit stricter in its rules. For instance, if you forgot to put a semicolon at the end of each line, you could be in for some headaches trying to figure out what went wrong.
  3. Image titled Learn Web Design for Free Step 6
    3
    Learn JavaScript and jQuery. This is optional for ones that plan to make simple website, but it's essential if you want interactive websites.
    • If you're going to use jQuery, you really only need a basic knowledge of JavaScript, because jQuery makes things pretty simple.
    • With jQuery, you can insert widgets like an accordion, a calendar, etc. There are different styles of it, too, so you can pick the style you want for your website.
  4. Image titled Learn Web Design for Free Step 7
    4
    Move on to the more advanced languages. There's PHP, MySQL, Perl, Ruby, and some others. Again, this is optional for simple website builders, but very useful for interactive and large websites.
    • Some of these languages, like PHP, require a test server, so make sure to have an account with a web hosting company or install server software on your computer.

Part 3
Applying Your Knowledge

  1. Image titled Learn Web Design for Free Step 8
    1
    Make project websites. Just experiment and make websites from scratch. This helps you put your knowledge to work, instead of letting it rust out in your brain.
  2. Image titled Learn Web Design for Free Step 9
    2
    Ask friends or family if they want a website. You could do it for free to get some experience!
  3. Image titled Learn Web Design for Free Step 10
    3
    Start your own website. It can be about whatever you want, but it gives you an opportunity to show your work to the general public.
  4. Image titled Learn Web Design for Free Step 11
    4
    Do freelance web design, if you want to. Charge reasonable rates and post a portfolio on your site. Your business may eventually grow into a full-fledged company.

Tips

  • PDF files are a bit more versatile than eBooks. PDFs are readable on any computer, while eBooks are usually aimed toward one type of device, like a Kindle, iPad, etc.
  • Take your time! If you try to swallow it all in six hours, you'll forget it very quickly.
  • Don't think you have to pay for a good HTML editor. There are free ones that are just as good as the ones that cost hundreds of dollars.
  • When you finish a project, harvest some of the code and turn it into a library. This will prevent you from always having to type the same thing on every project. If turns out to be large, you might even consider selling it!
  • If you have a friend or family member that knows web design, ask them to give you lessons. They should do it for free (hopefully).

Warnings

  • In scripting languages, there is something called the infinite loop. Infinite loops are dreaded among programmers, so be careful that this doesn't happen to you!
  • Don't burn yourself out! You'll just forget things when you're tired, and you won't learn anything.
  • When signing up for a website, do a bit of research first. Of course, if it's a well known website, you shouldn't have much to worry about, but lesser-known ones could very well be money-making scams.
  • Be careful when downloading programs! Anything could be a virus.

Things You'll Need

  • Computer
  • Web design program
  • Tutorial website, books, or videos

Article Info

Categories: Web Programming