ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

The Complete Beginner's Guide to Web Design

Updated on October 10, 2013

Introduction: What is Web Design?

Web design and development are important skills to learn in the modern age of technology. Websites have been around for a long time, but web technologies are advancing now faster than ever. Someone had to build all those webpages; they did not just appear one day! Have you ever wondered how webpages are built? Have you been dying to learn web development but do not know where to start? Or maybe you are a bored IT guy and have a couple free minutes (as if any IT guy ever actually has free time!). Regardless of your situation, this is the guide for you!

Why Learn Web Design?

So, why learn web design? There are many reasons someone may want to learn web design. You may have always been interested in the IT field and have a couple spare hours every week, and you just cannot stand doing nothing. Or perhaps you just want to learn a programming language. Maybe you want to make some extra money on the side. Perhaps you want to make a living, but do not want to leave you home. Or, possibly the best reason, and the one that I had for learning web design: it sounds like fun!

If you want to learn a programming language, web design is a great place to start. Why? Web technologies consist of the easiest languages to learn, and are a great basis for learning other languages. The syntax is easy to understand and the basic constructs are relatively universal.

If you are looking to make money, web design has many advantages over alternative income sources. Because it is so easy to learn, you can get into the industry quickly and start making money. After a month (maybe less) you can start making some money. You do not have to be a seasoned expert to make money. Of course, the more knowledge you have, and the more experience you have, the more money you will make. But, everyone has to start somewhere. If you are looking to make a living though, it will take a while to make enough, possibly a year or two.

If web design sounds fun, then jump right in and start learning. If it does not, let me assure you, it is. Do not hesitate. Just start learning; you will quickly be drawn in.

Web Design or Web Development?

Two phrases you should know are web design and web development. In essence, they are exactly what they sound like. There is an important distinction between the two, although, most people possess skills of both schools. Web design is focused on visuals. It deals with what the website looks like; what the end-user sees. It is also concerned with how to user interacts with the website. Its main goal is increasing usability and accessibility. Web development is focused on the code; the actually programming, and behind the scenes interactions and functions. Its main goal is decreasing the amount of code, while increasing functionality and performance. A developer wants clean, valid code that is understandable. Most web designers know at least some programming, while most web developers know the basics of how to design a website.

Frontend or Backend?

Two other terms to be aware of are backend and frontend development. These terms have multiple meanings. The most common understanding of these words (and the one with which you should be concerned) relates only to the code. Frontend code is written in programming languages processed in the browser. These are the languages that effect the users experience with the website; they control what the website looks like and what the website does. Backend code is written in programming languages processed by the server. These languages effect how the website does what it does. Frontend code handles the appearance of the website, while backend code handles the behind the scenes heavy lifting. These two terms are analogous to client-side, and server-side code.

Getting Started: What Do You Need?

There are four important things that you need to get started. If you do not have all of these, there is no point in starting at all. They are:

  1. Text Editor
  2. Virtual/Emulated Development Environment or Dedicated Web Server
  3. Web Browser
  4. Good Attitude with a Joyful Desire to Learn

1. Text Editor

You will need something in which to write your code. A standard word processor is not want you want. You will need a program that is designed specifically for programming. You can write all your code in notepad, but I would not recommend that, it takes much longer because the software does absolutely none of the work for you. My favorite text editor is Sublime Text 2. Other people use Notepad++, TextWrangler, Brackets, Dreamweaver, or Coda.

2. Dedicated Web Server

You will need a server that can process you server-side code. There are a couple options. One option is taking a spare computer that you are not using and turning it into a dedicated web server. I have tried this and do like this solution. You will need a computer and a server-oriented operating system. I like Ubuntu Server. There are many options, but sticking to Linux is a good idea for cost efficiency and reliability. You when you install Ubuntu Server, you can select for it to install the packages for a OpenSSH, LAMP, and Mail Server. This just installs additional software that you will need. Otherwise you will need to install the software yourself. What you absolutely need installed is Apache, PHP, and MySQL. But you should also have some sort of SSH server, file server, and possibly a mail server, and firewall. With this option, you have the option to dual-boot with Windows; however, you then cannot use Windows and the Web Server at the same time. How To Setup A Dedicated Web Server

Another option is to take the previous concept, but install it on a virtual machine. This allows you to use your main operating system and the mail server at the same time. I have done this with great success. It can get tricky at some times when you are setting it up, but once it is setup, you are good to go. How to Install Ubuntu Server

Another option is to install a local server environment. This is basically the previous concept, with the server integrated with your operating system. If you are using Mac, you will want a MAMP (Macintosh, Apache, MySql, and PHP) server. MAMP Homepage If you are using a Windows PC, you will want a WAMP server WAMP Homepage. If you are using a Linux machine, you will want a LAMP server. LAMP Install. Lastly, you can use a XAMPP server on any machine XAMPP.

The last option I will discuss is probably the best. That is to purchase a domain name and web host and host a development environment remotely. This option is the best because it takes no configuration, no maintenance, and the server is always running, no matter what. The downside is that it is not free, like the other options. This is the same as hosting a normal website, the difference is the website’s function.

3. Web Browser

You will also need at least one web browser in which to test and develop you websites. Sure you can use Internet Explorer (please don’t). I would recommend installing multiple browsers (Opera, Chrome, Firefox, and Safari for starters) to see how you site looks in different browsers, because it will look different and different browsers support different features of each programming language. Speaking of programming languages…

Learning: What Language Should you learn?

There are many different programming languages out there for web development. Which one should you learn? The short answer is: you should not learn one, but many. If you want to know where to start, learn HTML, PHP, CSS, and Javascript, in that order. That is my recommendation. After that, you can learn whatever else sounds interesting.

What Languages Are There?


HyperText Markup Language (HTML) is the main markup language for creating web pages. It is the foundation of web development. All other web technologies are based on, or rooted in HTML. You should learn HTML first, otherwise the others will be very difficult to learn. HTML by far is the easiest language to learn. HTML is processed in the browser – it is a client-side language.


PHP is a server-side scripting language. That is to say a web server with a PHP processor module processes it. PHP can be embedded with the HMTL source code, or can be a separate file.


MySQL is not actually a language, but more of a construct used within PHP. It is an open-source relational database system. Essentially, it is a system to hold and access information in a database. Databases are holders for tables that are holders for rows and columns of information. MySQL is the most popular database system, although there are other ones often used.


Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics of a document written in a markup language, namely HTML. HTML says what exists on the page. CSS says what it looks like. It controls things like size, color, shape, and location of HTML elements. CSS is processed in the browser.


Javascript (JS) is an interpreted programming language. It creates movement and change in the page. It is very powerful and allows for many very interesting features. It is processed in the browser.


Flash, more appropriately referred to as ActionScript, is an object-oriented language. It is processed in the browser. It is used to create animations, as well as load SWF files. It is a dialect of ECMAScript.


ASP.NET is a server-side web application framework. I will further explain frameworks later. Microsoft developed it. It is used to make dynamic web pages, called Web Forms. It is the successor to ASP and is built as a part of the .NET Framework. It is most well known for its separation of concerns. It takes different functions of codes and puts them in there own ‘modules’.

Ruby, Python, and Perl

Ruby, Python, and Perl are general-purpose languages. They are not designed specific for the web. The do all have web frameworks to use however. Perl inspired ruby’s syntax. They are dynamic and object-oriented. There is no real way to say which one is the best. They all have advantages and disadvantages. When just starting out, I would not worry about learning any of them; at least, not yet.

What is a Framework?

Frameworks are basically a way to make coding easier. They take difficult tasks and make them syntactically easier to code. They allow for speed, simplicity, consistency, and more. The idea of a framework is not to add functionality to a language, but to make already available functions easier to use, and more uniform.


There have been frameworks made for CSS. Basically, frameworks that make you website look uniform, and cool, and different. The most common CSS frameworks are Twitter Bootstrap and Foundation by Zurb. These are both very good. They are easy to learn and very useful. I recommend learning both, and seeing which one you like better. They also integrate well into many different Javascript frameworks.


PHP frameworks are generally MVC (model-view-controller) frameworks, allowing for separation of concerns. Some common ones are CakePHP, CodeIgniter, Symfony, Yii, and Zend; however, there are many more. These all have advantages and disadvantages. I have yet to find one I am really psyched about, but a lot of people use CodeIgniter and Symfony. You will find people to argue for just about any framework though.


There are many Javascript MVC frameworks. Their function is just like that of any other framework. Some popular ones are AngularJS, Backbone.js, Cappuccino, Ember.js, Enyo, JavaScriptMVC, and Knockout. Again, though, these are just some popular ones. There are many more. I personally like AngularJS, but they all have advantages and disadvantages.

What is a Library?

Libraries are similar to frameworks. They make coding easier. The difference is that libraries do add functionality. The most popular libraries are Javascript libraries, such as: JQuery, midori, Yui, and Socket.IO. If you wanted to learn one, go with JQuery.

What Else Do I Need To Know?

A couple other things to be aware about are CMS, Ecommerce, and Photoshop. CMS stands for Content Management System. It is basically what it sounds like. It is great for simple blogs and websites. The idea is that you give the system content, and it constructs a website around the content. You have an interface you can interact with to create the website just as you like. You can install plugins for added functionality. You can also use templates. Some popular content management systems are Wordpress, Joomla!, and Drupal.

The other thing to be aware about is Ecommerce. Ecommerce, in terms of web development, is a type of website used for selling things, often through PayPal. Ecommerce is very popular, and can be a difficult type of website to build. However, it is very helpful to know how to do.

Everyone knows what Photoshop is (you know… that thing for photos that everyone is intimidated by). Photoshop can be very helpful to learn, especially for web designers. It is often used to create mockups (a picture of what the website could look like) and wireframes (a picture of the structure of the page, and position of items on the page). Also it is helpful for making backgrounds, textures, icons, and logos, as well as editing any pictures that you want to use in a website.

CMS, Ecommerce, and Photoshop are things well worth your time, at least to learn the basics.

Building Your First Website

So now you have learned all you need to learn. Lets build a website! Building your first website can be intimidating, no matter who it is for. If you want my recommendation, build you first website for yourself. Any respectable web designer has a website anyway, why not build your own. You could build yourself a portfolio website. Of course you do not yet have a portfolio, so an about me page and a contact page will suffice. Now that you have a website built, lets get it online!

Moving From Development to Production

Once you have a website built, you need to get it online. So… how do you do that? The first thing you need is a domain name. This is the name of the website. It must be unique. Make sure it is cool also. It is generally a good idea to have to name be direct and explain what the website is about, also it should be relatively short. These are not hard set rules, there are exceptions, but it is good to consider these when picking a name.

Next you need someone to host your website. After you have rights to a domain name, you need somewhere to put all your files. They need to be on a server that is always running and maintained. It must be reliable. And you want cool features too, right? This is why you pay someone to host your site. Many website hosting companies also sell domain names. To popular sites are GoDaddy and HostGator.

Then you upload you files to the server. When you log into your account with your hosting site, you will have access to a file management system. You may also use third-party ftp software like filezilla to do this. Once you are in the file management system, simply upload all the files onto the server, and it will do the rest.

Making Money

So how do you make money with web design anyway? There are many different ways you can go about making money. I will discuss a few of the most popular ways to do this.

First, you could be a freelance web designer. This is a broad term meaning you design websites and you work for yourself doing contract work. There are many websites that connect web designers to potential clients. Some are Elance, Freelanced, and ODesk. Most people do not want someone with no experience building them a website. So to get started, why not help other people fix issues with their website. Many people will post things that they do not like about their website or things that just are not working out for them. These people are more likely to hire you. You will not make as much, but at least you can start building a reputation. After that, you can try to build some websites from scratch for people. Now would be a good time to start building a portfolio, and putting your work on your personal website.

Another option is to build a website template. Basically, design and develop a basic, generic template and sell it online. You can sell it on a website like templatemonster, or themeforest. You can even sell your templates on your own personal website, or ebay.

You can make some money by being a guest writer on someone’s blog. Or make a blog yourself. Just write to the world about your vast knowledge of web design. Give people tips, or ideas. Write tutorials. This can be a great way to bring in extra cash.

You can work on selling web hosting yourself, for a third party company. I do not know many people who have had success with this, but it is worth a shot. Sell web hosting through your own website and advertise everywhere!

You also could do freelance work, not as a developer or designer, but both. So you just learned how to use Photoshop. What do you do? Turn peoples Photoshop mockups into fully functional websites. You can use the same services listed above to do this.

Another god way to make money is make making CMS themes. Most of the money right now is in WordPress, but that may change. Learn how to develop you own themes, templates, and plugins for your desired CMS and sell them online. Or you could take peoples CMS website, and turn it into a standard HTML website.

The last way to make money is to sell code snippets online. Have a unique idea for a function, but have no website on which to place it? Sell it to other people. The nice thing about this is, like templates, you can sell it to multiple people.


    0 of 8192 characters used
    Post Comment

    • Patkay profile image

      Patrick Kamau 

      5 years ago from Nairobi, Kenya

      Thanks for sharing this rich and useful information about web design. There is a lot to learn from this tutorial. Keep up the good work and thanks for sharing.


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, 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:

    Show Details
    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 or domains, for performance and efficiency reasons. (Privacy Policy)
    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)
    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.
    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)