ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Arts and Design»
  • Graphic Art & Design

How to Learn Web Design Fast

Updated on June 19, 2013
A Rough Draft of a Web Design
A Rough Draft of a Web Design | Source

By Christopher Peruzzi

So, you want to learn Web Design?

Well, it's not that hard. You should be aware that there are a few minor hurdles you'll need to get over before you begin. However, with a bit of time and some commitment, you should have no trouble learning the basics.

Is it difficult? For the most part, it is not. I found learning the very basics to be quite easy, and I guarantee you that anyone with an eighth grade education should have no trouble with the first part of web page development: Learning HTML.

There is one thing I should tell you right away. I'm not going to teach you how to design a web page, but I will give you a roadmap on the easiest way to get you on your way.

The Six Things You Should Know in Web Design

There is a very definite order and philosophy of what you need to know about Web Design. The first principle is that you need to separate structure and content from style. Once upon a time, you could do both at the same time, however, nowadays you need to think ahead, because the web design of today needs to make room for the web designs for tomorrow.

  1. Notepad
    It comes with almost every type of PC. All you really need is a text editor. However, if you're going to spend the money, you may wish to use a web design program like Dreamweaver or Frontpage. I recommend that you learn some of the technologies that make web pages as well. Because when things don't look like you want them to, you'll need to correct some…

  2. HTML
    This is where it all begins. HTML is short for Hypertext Markup Language. It is the first part of what I think is the basic trio of technical skills you need in design. HTML is used to organize the structure and content of your site. HTML will help you organize things like the title of your webpage, the metadata (what search engines sometimes use to describe your site), keywords, and the textual content of your site.

    Back in the nineties, a designer could get away with knowing nothing more than HTML and the fundamentals of a good graphics program to make his site look good. There were ways to organize both content and style within the same document. However, HTML was really never designed to do any of that. It was designed to work with only content and a few images. Designers, at the time, were able to push HTML's parameters to put some decent pages together with that constraint. However, that all went by the wayside when they started using…

  3. CSS
    CSS is the new dynamic partner to HTML. CSS stands for Cascading Style Sheet. All it is, is a set of rules that govern the look and feel of your site. This will say whether your page will have a background image or if the banner of your web page will have a large font or not. It will also allow the hyperlinks (links) to your website to interact with some user actions. For example, should a user mouse over a link to another site, the link will change color so long as the mouse is over it. It will also allow cosmetic changes to the website to happen dynamically through it with only a few minor changes to the stylesheet.

    CSS is not very difficult to learn and if you manage to use it properly, it can save you tons of time in maintenance and with any type of future redesigns you may have. Why? Because the design of your site is laid out on one page of rules. All you need to do to change the look and feel of your site is to change the stylesheet.

    If all you want to do is create a static web page that does nothing more than display your information to the world, these two elements are all you need. However, most businesses and most clients want a little more. They want your site to have some…

  4. JavaScript or JQuery
    When you combine HTML, CSS, and JavaScript (or JQuery – the simpler cousin to JavaScript), your sites gain a new dimension of interactivity. Pages will no longer be pages. They will be mini applications or have that critical bit of animation that most people like on their sites. If you have a search box on your site, you're probably using JavaScript to produce it. If you have a dropdown menu that works with a mouseover, you might be using it for that, too.

    I can not stress how important this is to anyone who is contemplating a career in web design. It's good to have an eye for a good layout, but you also need to know what your site is capable of becoming.

  5. A Good Graphics Program
    No, I'm not telling you to go out and buy PhotoShop… but you need to have something. If you are using photographs, there are a few freeware or shareware products out there that can do the job almost as well as what Adobe can give you. But the fact remains that you need something that may have to adjust the size, quality, and colors for your site pictures. When I got started I was using nothing more than a program called PaintShop Pro. The only reason I preferred it over most things was that it could make .gif images from Excel charts. It could also plot points on an image (for those of you who want to learn how to image map).

  6. A few rules for layout and usability.
    There are a few golden rules for creating a well designed web page just as there are a few golden rules for print layout. I need to stress that print layout is not the same as web layout. There are some differences that work better on the printed page than on the smaller screen. However, a common denominator is what we call "the golden rule" of print and page layout.

    It is the rule of thirds.

    The rule of thirds is a 2/3 to 1/3 page distribution or image distribution that follows nature and the natural path that the eye uses. It is used in photography, web design, and content distribution.

    Another thing you may need to learn is an appreciation for color theory and how some color triads work while others do not.

    These are things that will come to you but only after some trial and error.

Final Words

Producing a website will not cost you a lot of money. There are plenty of web hosting providers that will give you some space and even register a domain name for you for very little money a month.

While notepad costs nothing, you will need to make a time investment learning HTML and CSS at minimum. That should get you off and running. JavaScript and JQuery can be learned at anytime and when you do learn them, your pages will become more complex and interesting.

Learning a good graphics package is something that goes with the territory. There are very few websites that look good without pictures. I'm sure they exist, but I have never seen one without an image. And remember, once you have an image, you'll need to know how and where to put it on your page… hence the golden rule.

This is to get you started and help you find the path toward amateur and professional web design. Once you get started you'll need to learn concepts like web page usability and search engine optimization techniques that will not only help you with your layout but also drive your audience to where they need to go. And all that is nothing, if your page can't be found by a search engine like Google or Yahoo.

Producing a website that looks good and presents what you want it to is its own reward. Making a quality website is only about how much time, discipline, and maintenance you want to put into it.


    0 of 8192 characters used
    Post Comment

    • cperuzzi profile image

      Christopher Peruzzi 5 years ago from Freehold, NJ

      The design part is a matter of usability. It's an art unto itself. The coding, specifically javascript and jquery, is a matter of not only knowing the libraries, but also knowing how to use them logically.

      CSS and HTML are for those of us who are right brained (Creative Artistic). JavaScript and Coding are for the left brained (Logical and Structured).

      I recommend this: Get your design out on paper for how you want it to look (It can be a sketch with a ruler and crayons). When you have an idea on how it should look, write in the CSS "boxes" and what you're going to name them.

      Once you have that, you can work on content.

      If you have an idea of what kind of interactivity you want, there are plenty of premade pieces of javascript and jquery out there that are easy to adjust. Eventually, you'll want to learn how to code, but this is a great way to get familiar with the syntax and logic.

    • WNJohns631 profile image

      WNJohns631 5 years ago

      I've been teaching myself web design and coding, it has been quite difficult! I can't wait until the day that I can finally take an idea from my head and put it to the internet exactly as I see it though. Maybe later tonight? Lol

    • cperuzzi profile image

      Christopher Peruzzi 5 years ago from Freehold, NJ

      One of the best "first books" I can recommend is that Head First HTML book linked on the Amazon Ljnks. It's a good foundation and makes it fun.

    • SotD and Zera profile image

      SotD and Zera 5 years ago

      Thanks for the easy steps! I tried to create a website a while back with nothing but html, and I was definitely in over my head. I'll remember this article next time.


    • Vinaya Ghimire profile image

      Vinaya Ghimire 5 years ago from Nepal

      I want to learn web design. Thanks for this informative and useful article.

      PS: Thanks for commenting on my hub about lavender.

    • cperuzzi profile image

      Christopher Peruzzi 5 years ago from Freehold, NJ

      Oh, you should not ignore IE - you just should not design for it. It still has a substantial share in the market.

      When you design for Chrome and Firefox, and see the output, you know that your page renders well. When it doesn't, you either have to figure out why or research it on the net (always better). There are more IE solutions documented than any other browser... So, it's easier to make the exception with IE.

    • Cat R profile image

      Cat R 5 years ago from North Carolina, U.S.

      Thanks for the tips.

      I completely stopped using IE. I use Google Chrome. Works faster and doesn't freeze up. And since my laptop is older, I can't update to the new version anyway.

    • cperuzzi profile image

      Christopher Peruzzi 5 years ago from Freehold, NJ

      HTML is always fun.

      Here's what I recommend when you start using CSS (a necessary evil). Design for Firefox and Chrome rather than IE. The former are W3C compliant... IE is always late to the party.

      CSS is necessary to avoid tabled design. Once you stop using them you'll notice that your pages will load faster. All the stuff in the tables (images especially) load first before anything even shows on the screen. CSS LETS THE BROWSER WORK MORE EFFICIENTLY.

      In the web world web surfers get impatient and slowness kills (especially off smart phones).

      Those two, HTML & CSS, are the dynamic duo of web design.

    • Cat R profile image

      Cat R 5 years ago from North Carolina, U.S.

      I love creating things with HTML and am actually taking a class on it right now. But while I can somehow work my way through it with using my book, my son and the internet, JavaScript and I have a hate/hate relationship and don't cooperate with eachother.

      Good info!