The Complete Beginner's Guide to 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.

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…

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?

HTML

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

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

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.

CSS

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

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

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

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.

CSS

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

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.

Javascript

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.

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!

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.

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.