ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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.

Comments

    0 of 8192 characters used
    Post Comment

    • cperuzzi profile imageAUTHOR

      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 imageAUTHOR

      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.

      -Zera

    • Vinaya Ghimire profile image

      Vinaya Ghimire 

      6 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 imageAUTHOR

      Christopher Peruzzi 

      6 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 

      6 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 imageAUTHOR

      Christopher Peruzzi 

      6 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 

      6 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!

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)