Category Archive: Tutorials

30 Tools that no Designer can live Without

Designers are extremely busy people. Fact. Not only do they have to make time to find inspiration for their next project, manage feedback, attend meetings, and communicate with their clients, they also have to find the time to actually sit down and do the work.

Let’s not forget the time and effort they have to put into mocking up an idea, creating a visual for sharing or keeping abreast of modern design trends. The role of a designer is so much more than just ‘colouring in’.

To ease the workload of time-poor designers, we’ve compiled a comprehensive list of the best software, apps, tools, skills, websites and resources that no designer can live without. Each of these tools has been carefully selected for its ability to help you streamline your work, find inspiration easily, show off your amazing design skills, and make collaboration easier.

We’ve broken the guide down into the 10 key areas so you can instantly find what you’re looking for — you are busy people after all. Check it out and feel free to let us know if we’ve missed any off the list.

hardware

Hardware

If you’re serious about design, there are some essential pieces of kit you will need. We have listed the top 3 pieces of hardware for designers below. (more…)

HTML Tutorial part 4

HTML Comments

HTML comments can be used to organize your code or to remind you what a certain portion of code does.

All HTML comments begin with <!– and end with –>. Here’s an example comment:

<!--My Comment Goes Here-->

Coding Practice

It’s always positive coding practice to make sure your code does not overlap. For example:

Incorrect: <b><i>Text</b></i>
Correct: <b><i>Text</i></b>

You should always close HTML tags in the order in which they were opened.

HTML_guide

Also, make sure you use quotation marks where necessary. When defining attributes, you must always use quotation marks. Example:

Incorrect: <body bgcolor=#0000ff>
Correct: <body bgcolor="#0000ff">

We are finally ready to publish our documents to the web!

The first step to publishing to the web is to ensure your documents are in “.htm” or “.html” format. This can be done simply by renaming the file extension.

You will now need to order a domain name such as yourname.com. You can get a domain name at Namecheap.com or Godaddy.com.

Next, you will need to order web hosting so your website can be displayed properly.

Once everything is properly prepared, you will need an FTP program to upload your files to the internet. FTP stands for “file transfer protocol.”

Simply use the FTP program to upload all the files to your web host. If you need help with FTP, just contact your web host’s support. Uploading varies from web host to web host so it’s best to contact your web host’s support department for assistance.

Once you have everything uploaded, type in the URL of your website into your address bar and browse your site.

Congratulations! You’ve just setup your first website!

HTML Tutorial part 3

HTML Tables

Tables are an essential part of HTML. Tables can be used to organize data or to create layouts in HTML.

Tables are very helpful to organize data. Here’s an example of an HTML table:

Row 1
Row 2

The code for the above table is:

<table border="1" width="100%">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
</table>

This may be a bit confusing so let’s slow down. The basic tag to create a table is the <table> tag. We also used certain attributes such as setting the “width” to 100%. The border=”1″ attribute displays a border around our table. If you want to change the size of the border, just change the number in the border attribute.

There are two types of tags used inside the <table> tag: the <tr> tag and the <td> tag.

The <tr> creates a table row. The <td> tag creates a table column.

HTML

You cannot create a table column without first creating a table row. Table rows always come before table columns. Likewise, you cannot create <tr> tags without first creating the <table> tag. So let’s go over this order again:

1. <table>
2. <tr>
3. <td>

<tr> and <td> tags must always be inside a table. With that said, let’s examine the <tr> and <td> tags from our example:

<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>

Notice how we created two rows. Every row must have at least one column; thus, we had to use at least one <td> tag for each row.

Now what if you want to create more columns? Simple, just create more <td> tags. Here’s an example:

<table border="1" width="100%">
<tr><td>Column 1</td><td>Column 2</td></tr>
<tr><td>Column 1</td><td>Column 2</td></tr>
</table>

Once again, we still only have two rows. However, this time, we also have two columns.

The above code will produce:

Column 1 Column 2
Column 1 Column 2

Whenever you create a new column, every row in the table must have the same number of columns. For example, row #1 cannot have two rows while row #2 has three.

HTML Forms

HTML forms allow user interaction and input. Forms can be used for contacting the website owner, adding a guestbook entry, and more. Forms require a web script written in languages such as Perl, PHP or ASP in order to be processed. If you have no intention to learn these languages in the future, you can skip this section if you wish. This was written for your future reference.

Forms can contain input fields such as text boxes, password fields, and more.

The basic code to setup a form is:

<form action="/path/to/script" method="post">
Form Data Goes Here
</form>

Make sure you define the path to your script that will handle the form in your form’s “action” attribute.

In order for our form to have anything to process, we must create fields for the user to provide input. Secondly, we must also create a “submit” button that sends our form’s data to the web script. (more…)

HTML Tutorial part 2

Images in HTML

Using HTML, we can display images in our web pages. However, before we can display images, we must first upload it to our web server or have the image uploaded somewhere on the web. You cannot display an image from your local computer until you upload it to the internet.

The syntax for an HTML image is:

<image src="path/to/your/image">

The “src” attribute for the image tag defines the location of our image. Once again, make sure the image is uploaded to the web. As a rule of thumb, if the path to an image begins with “http://” then it is uploaded to the web.

We can also resize our image and enlarge or shrink it by using the “width” and “height” attributes. Here’s an example:

<image src="path/to/your/image" width="10" height="100">

The “width” and “height” properties can also be expressed as a percentage:

<image src="path/to/your/image" width="50%" height="50%">

Hyperlinks in HTML

Hyperlinks (or “links” for short) gives the user something to click that will automatically browse them to a different web page. It allows us to tie documents together and create navigation to help the user browse around our website. Links can point to both internal pages on your website or to an external page on another website.

The syntax for a link is:

<a href="/path/to/a/web/page">Link Text</a>

The “a” stands for “anchor.” The “href” attribute defines which web page or URL the user will be directed to. The “Link Text” in the above example enclosed in the <a> tags is the text for the link that your users will actually see. They will not see a URL, but when they click on the link text, they will be pointed to the URL stated in the “href” attribute.

If you want to make your link open in a new window, simply add the “target” attribute as shown below:

<a href="/path/to/a/web/page" target="newWindow">Link Text</a>

Center Tag

At times, we may want to “center” text or elements in our documents. We can do this using the <center> tag:

<center>This text is centered.</center>

This will output:

This text is centered.

It’s important to note the <center> tag can be used to center anything including images

Body Tag

In our First HTML Page Chapter, we discussed the body tag very briefly. However, what we did not tell you was that the body tag actually contains special attributes you can define to make your document more appealing.

Among these attributes include the “background” and “bgcolor” attributes. These attributes are used for your page background. The “background” attribute is to define your background image. If you do not wish to use an image but a solid color instead, you can use the “bgcolor” attribute to define the color or hex code of your background.

Here’s the “bgcolor” property in action:

<body bgcolor="#0000ff">

The “#0000ff” hex code is for the color blue. Thus, the above code will create a solid blue background for our web page.

Body tag attributes can also be used to define text and link colors. For example, the “link” tag is used to set the colors of your links. By default, browsers usually set the link color to blue. The “vlink” attribute defines the color of a link the user has already visited. The “text” property sets the text color of the text in the document.

Here’s an example of all the above attributes in action:

<body link="#0000ff" vlink="#ff0000" text="#00ff00">

This code will set all default link colors to blue, the visited links to red, and the text of the page to green.

HTML Lists

In HTML, there are two types of lists: ordered and unordered.

An ordered list numbers each list item numerically. The code for an ordered list is as follows:

<ol>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ol>

The above code will produce:

  1. 1. Red
  2. 2. Blue
  3. 3. Green

The <ol> tag creates an “ordered list.” The <li> tag is used to create a list item.

To create an unordered list, we can use the following code:

<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>

The above code will produce a bulleted list.

The code for an un-ordered list is nearly the same as the order list’s syntax. However, you may notice we used the <ul> tag instead of the <ol> tag.

HTML Tutorial

Introduction to HTML

HTML is an abbreviation for hypertext markup language, the fundamental language of the web. HTML is the predominant markup languages for web pages and allows webmasters to describe the layout and structure of a document using tools such as paragraphs, lists, and links.

The coding structure of HTML comes in the form of “tags,” which are enclosed in angle brackets.

HTML can also be used in conjunction with other scripting languages such as Javascript or PHP which can affect the presentation to the user and the behavior of a web browser.

URLs and filenames containing HTML usually have the file extension of .htm or .html.

HTML was first conceptualized in 1989 by Tim Berners-Lee and Robert Cailliau. Both hypoethesized and created proposals for an Internet-based hypertext system which would be similar to HTML. In 1990, the two would create the WorldWideWeb (W3) project.

It wasn’t until late 1991 that the first functional description of HTML was made publicly available. The document was known as HTML Tags. It contained 22 elements which would later serve as the basis for the HTML we know today. Thirteen of the original tags described in HTML Tags would be carried on to HTML 4.

HTML+ was formed in 1993, which standardized existent features such as tables.

By 1996, HTML was maintained and standardized by the World Wide Web Consortium (W3C). The W3C provides the coding standards we use in HTML today.

Your First HTML Page

It’s time to create our first web page in HTML!

First, we need to create the file. Usually you can just create a text document to start writing HTML. For example, we can just write HTML in Notepad. Once you’re done editing the HTML, you can rename the Notepad text file from a “.txt” file extension to “.htm” or “.html” so your computer or web server recognize it as an HTML document.

Here’s the basic code to create an HTML web document:

<html>
<head>
<title>Your Title Here</title>
</head>
<body>
Content Goes Here
</body>
</html>

This might be a little bit overwhelming at first so let’s break down the above code.

Every HTML tag needs to be opened and closed. For example, if we want to set our page title, we use <title>. Once we set our title, we close off the title tag with </title>.

Anything between opened and closed tags in HTML are the tag’s “content.” The “title” tag defines the title we see in the title bar of our browser. In the example above, the title we would see in our web browser’s title bar would be “Your Title Here” without the quotation marks.

Not all HTML tags need to be open and closed. However, we will cover these later.

We use the <html> tag to denote that we are beginning to use HTML in our document.

The <head> tag defines the “header” of the document. This usually includes any scripts or document definitions that are not actually part of the content of the document such as title tags.

The <body> tag is used to denote that we are finally beginning to structure the content of our web page.

Finally, we end by using the </html> tag to tell the browser we are finished laying out the HTML of our document.

Paragraphs and Line Breaks

Text formatting is an important part of building your web page. It’s necessary to create a presentable web page to your visitors through text formatting.

If you were to simply start writing content inside the <body> and </body> tags, it would not appear properly. If you were to type multiple paragraphs into the “body” tags and use the “enter” or the “return” key to create lines to separate the paragraphs, these line breaks would not appear in your web page.

To remedy this, we can use the “paragraph” tags. The paragraph tags are used as follows:

<p>Paragraph text goes here.</p>

The “paragraph” tags will create the spacing necessary for paragraphs.

Sometimes, the paragraph tags may provide too much spacing — more than we need. If you simply want to create a new line, we can use the “line break” tag:

First line of text.<br>
Second line of text.

It’s important to note that the <br> tag does not have a “closing” tag. The <br> tag is one of the tags in HTML that does not need an open or close tag and just stands by itself.

Text Formatting

Now that we’ve discovered how to create new lines, we want to know how to format our text.

The basic formatting tags are <b> for bold, <i> for italics, and <u> for underlines.

The following code will show you how to use these basic formatting tags:

<b>Bold text</b><br>
<i>Italics text</i><br>
<u>Underlined text</u>

The above code will produce:

Bold text
Italics text
Underlined text

Make sure you open and close each tag!

The <font> Tag

If we want to be able to format our text further, we can use the <font> tag.

The font tag doesn’t simply just open and close. It also contains “attributes,” which allow us to define the size, color, and typeface of the font for the text enclosed inside the font tags.

<font face="Verdana" size="2" color="#0000ff">My text goes here.</font>

The above code will produce:

My text goes here.

Notice that each attribute begins with a name (face, size, and color in this case) followed by an “equals” sign and quotation marks. What’s contained inside the quotation marks is the “value” assigned to the attribute. Never forget to use quotation marks for HTML attributes. You will often find code not using quotation marks, but this is improper coding practice and can result in your document not displaying properly.

The “face” attribute for the <font> tag is the typeface.

The “size” attribute is the font size.

The “color” attribute is the font color. Notice we used a value, “#0000ff.” This is known as a hexadecimal code (or “hex code” for short). Hex codes are used to map out colors by using a code. It’s always a six digit number preceded by a pound (#) sign. #0000ff is the hex code for “blue.” If this is too complicated for you, most browsers will recognize the “blue” color even if you do not use the hex code. For example:

<font face="Verdana" size="2" color="blue">My text goes here.</font>

This code will produce exactly the same result as the previous code.

With “primary” colors such as red and blue, you can get away without using a hex code; however, it’s always best to use hex codes so your web pages display properly across multiple browsers.

Heading Tags

In HTML, there are six “heading” tags used to split documents and articles into sections.

The six heading tags in order of largest to smallest are h1, h2, h3, h4, h5, and h6.

The code for these heading tags are:

<h1>Text [h1]</h1><br>
<h2>Text [h2]</h2><br>
<h3>Text [h3]</h3><br>
<h4>Text [h4]</h4><br>
<h5>Text [h5]</h5><br>
<h6>Text [h6]</h6>

The result would be:

Text [h1]

 

Text [h2]

 

Text [h3]

 

Text [h4]

 

Text [h5]

 

Text [h6]

Experiment these tags to create headlines for your content.

CSS Tutorial part 3

CSS Links

CSS can be used to add fancy effects to your links, change hover colors and styles, and more.

Since the HTML element for links uses the <a> tag, we can likewise use “a” as the selector in our CSS code:

a {
color:#0000ff;
}

However, we know links can have multiple states. For example, when you highlight your mouse over the link, it can look different. If you’ve visited a link, it can also look different. How can we address these differences?

CSS has built-in “pseudo-classes” which allow us to handle the various states of a link. A pseudo-class looks like this:

a:visited {
color:#0000ff;
}

There are four link states: link, active, visited, and hover. The “link” state is reserved for links the user has not visited. The “active” state is what happens when a link is clicked on. The “visited” state is when a user has already viewed the page the link leads to before. The “hover” state is what happens when you put your mouse over the link but do not click it. We can apply all the states using pseudo-classes like below:

a:link {
color:#0000ff;
}
a:active {
color:#ff0000;
}
a:visited {
color:#000000;
}
a:hover {
color:#0000ff;
text-decoration:underline;
}

By default, links are underlined. If you wish to remove the underline from a link, use this code:

text-decoration: none;

Remember usability though! Users are accustomed to recognizing that links should be underlined.

CSS Borders

Borders can be used for decoration or to separate sections of your page.

Border Size

To set the size of our border, we use the border-width property:

p {
border-width:2px;
}

Don’t try this code just yet! In order to set a border, you must set both the size and the style of the border. We’ll get to that soon enough!

Border Colors

Border colors can be any hexadecimal value or color:

p {
border-color:red;
}

Border Style

There are several different border styles. Let’s first go over how to set our border style:

p {
border-style:dotted;
}

Now we are ready to start playing with the borders. Here is an example of all the different border styles you can use:

Solid

Dotted

Dashed

Double

Groove

Ridge

Inset

Outset

We can also compact our code on to one line only:

p {
border:2px dotted blue;
}

Play around with the borders and see what you like!

CSS Widths and Heights

Widths and heights in CSS are useful to setup the dimensions of our HTML elements.

There are two types of widths and heights: absolute and relative. Absolute dimensions will stay the same regardless of the browser or screen size of the user’s computer. Relative sizes will change depending on the browser and screen size.

Absolute sizes are usually expressed in pixels:

div {
width:100px;
height:200px;
}

Relative dimensions are expressed in percentage terms:

div {
width:100%;
height:50%;
}

Be sure to test out your web page on various screen and browser sizes to make sure everything looks right!

CSS Margins and Padding

“Margins” are how much an element is spaced away from its neighboring elements. “Padding” is how much distance elements or text inside the element with padding are spaced inside the element.

Think of “margins” as on the spacing on the outside; whereas, “padding” is the spacing on the inside.

Padding

Here’s what padding looks like:

Notice how my text has been pushed inside more. This box has a 10 pixel padding.

Now if we used less padding, the text would be pushed “in” less:

Notice how my text has been pushed inside less. This box has a 2 pixel padding.

Let’s take a look at the code to use for padding:

p {
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

We can pad each side of the element by a different number of pixels.

The above code can be compressed to one line:

p {
padding: 10px 20px 30px 40px;
}

In the above code, each side is padded in this order: top, right, bottom, left (clockwise). Each side is separated by spaces.

If we want all sides to use equal padding:

p {
padding: 10px;
}

Margins

The code for margins is very similar to the code for padding:

p {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}

Again, we can compact this code as follows:

p {
margin: 10px 20px 30px 40px;
}

As with the padding order, each margin is spaced in this order: top, right, bottom, left (clockwise). Each side is separated by spaces.

Just as with the padding, if we want to space all sides equally, we can do it as follows:

p {
margin: 10px;
}

The above code will space the margins on every side by 10 pixels.