Learning Web Design: A Beginner's Guide To HTML Graphics and Beyond

How do you get included in the best web sites list?

The first step you need to take to get to the best web site list is to know what the best web sites look like. The second step you need to take is to understand your site completely. The third step you take is to be able to use your tools effectively. The fourth step you take is to build that site so it is as responsive as it can be. So how do you take these steps?

These are the steps to great web design.

• Study the top sites in your genre
• Plan your site
• Learn HTML5 CSS Javascript and either PHP PYTHON JAVA or NODE.JS
• Create and test your site

The Best Designs Ever

You want to study other websites. As you look at these sites note the placement of images, text, and buttons. Note the spacing between text blocks, images, and so on. If you are creating a multiplayer browser based game such as the one I hinted at in the hub profile of a games programmer, it is important to be able to navigate through chat rooms, game areas, and whatever other information you want to present to your players. To get an idea of how to do this, look at other browser based games. Facebook is full of them.

Look at websites on web design. The best designs is an excellent website to start with. Open it up in a new tab, I included a link to it. Take some time doing this. Don't just study five or ten. Look at five hundred or a thousand. Spend a month getting an idea of what good websites look like. Choose ten of the top sites you like and study them in detail. Do not look at the code, but concentrate on the layout. What is it about these sites that work? What do all of these sites have in common? Why is it that you like these sites.

Find out how others like them by checking out Alexa. Alexa is a website popularity ranking site. It is a very useful place in comparing websites. Others may claim they are the best, but Alexa knows. Compare all of the ten sites you chose with each other, and then with others in your genre, your topic of interest.

Website Planning

The next thing you need to do is to plan your website. Take the goal of your website and embed it in a design which is as good for you as the ten top designs you learned of in the research phase.

• Determine the goal of your website
• Embed that goal in the best design you come up with

Say your goal is a multi-player adventure game that runs of Facebook and Google+. Your goal is for players to spend hours chatting with their friends as they explore a modern world, interact with interesting non player characters, and go on thrilling adventures.

You plan out what the site will look like. You get a pencil and a sketch pad and draw out designs that satisfies your goals as well as look good. Draw many designs. Select the best ten out of thirty designs you make and compare them to the designs you saw when you were studying the others of your genre.

Web Programming Tools

The foundational tools of web programming are html5, css, and javascript. To create interactive websites you need to add a server-side programming tool such as java, python, php, or node.js . In order to understand why you need these tools you need to understand how the Internet works.

Your browser is a client and the webpage you want is served by a web server. A client makes a request of a web server for a specific web page. The web page is a text file written in html. A web server can only serve content that does not change, such as text, images, sounds, and movies. Your browser takes the text, images, sounds, and movies and either plays them back to you directly or enlists the aid of a helper application to do so.

A javascript interpreter is a helper application for your browser. It takes specially prepared scripts or programs written either in the html file you requested, or a separate file called a js file and runs it on behalf of your browser. Through html5 and javascript a website can save things to your computer, draw 3D images, and play movies. In the past you needed additional helper programs to do this and that is why html5 is so important. Html5 supported browsers can do all of this automatically.

Sometimes you need the website itself to store information. This would include a product catalog for a store or the current location and status of a game character for a game. For this you need a database on the server side of things. Java and PHP and Python are popular server side languages. Your hosting platform will determine which of these you can use. If you are hosting your own website, you can use any of them. If you are being hosted by Google App Engine, one of my two favorites, you can use java or python. If you are being hosted by Heroku, my other favorite, you can use java, python, node.js or even closure which is a lisp variant. Lisp is good for artificial intelligence programming.

Sample

<!-- This is a comment. It is for notes to remind you, the coder, of things that are important. The file is called sandbox.html -->

 

<!-- This is an opening tag. It tells your browser this is an html document. -->

<!DOCTYPE html>  

<head>

<title>A Sandbox HTML or web page to play in</title>

<style>

#greetingParagraph 

{

text-align:center;

}

 

</style>

</head> 

<body>

<Script>

//This is a javascript comment. Here it shows I am defining a function called greet

function greet()

{

// This sets up a container for your greetings

var Responses = new Array(); 

//first greeting

Responses[0] = "Hello World!"; 

// second greeting

Responses[1] = "It is very nice to meet you world!"; 

//third greeting

Responses[2] = "I am a brand new baby dynamic web page, watch me roar!"; 

 

//selects a number between 0 and 2, arrays start at 0 not 1

var choice = Math.round(Math.random()*2); 

 

//writes the greeting in the paragraph when you press the button

document.getElementById("greetingParagraph").innerHTML = "<button type = button onclick = greet()> Click here for greeting</button><br>" + Responses[choice];

                    }

</Script>

<p id = "greetingParagraph">

<button type = "button" onclick = "greet()"> Click here for greeting</button>

</p>  

</body>

</html> <!-- This is a closing tag, note the slash after the greater than sign -->

The above is a very simple page that has no design features, I just showed the code and how it fits together. Feel free to copy the text into an editor like notepad, save with an html extension, and open it with your favorite browser. Click the button a few times and you will see different messages.

The next step for you, after you have looked at close to a thousand websites, after you have planned what your website will do, after you have learned the tools you need to program both client and server side pages, is to create each of the ten best web designs you have selected. Then compare them with each other and those on the net. Tweak the site as much as you like and then publish it to the world. It doesn't stop there though. Have your friends critique your site, and after receiving many opinions, decide what changes to make.

When you have done that wait six months, go back to that site, and see if you are still proud of your work. If you are, search the internet for something better. Plan out an improvement to your site. Test your improvements with the opinions of others, and upgrade your site with new, more pertinent information about your subject.