You have reached a free tutorial that will guide you step by step on how to design a website. From the basics of coding to the complexities of design, by the end of this tutorial, you will know how to create a website that works and speaks for itself.
Before anything, you should know that web design is literally nothing more than blocks and measurements.
You will be creating flat, four-sided objects on a flat, four-sided screen. Of course you can make any other shape, like a triangle or circle, but 99.9% of the time you will be handling squares and rectangles only.
Think of web designing as "building blocks". With code, you will be able to create, space-out and even design each of your blocks (like in the example above).
Comparing code to real life, if you have two side-by-side pictures, each with a width of 5" (a total of 10" wide) and you separate these two photos by 3", then your total width would be 13 inches (5 + 5 + 3 = 13).
The same applies to code. If you have two blocks that are each 500px (pixels) wide and you separate these two blocks by 300px, your total width will be 1300px (500px + 500px + 300px = 1300px).
Make sense? If so, then you are well on your way to being a better web designer than many.
Among a plethora of keywords you will need to learn and remember, there are some "common sense" terms that anyone with a desire to web design should understand.
Pixels (px) : your screen, whether a laptop, desktop, cell phone, tablet or any other web-browsing device is defined in size (width x height) by pixels. Most laptop screens measure around 1280 pixels wide x 800 pixels tall whereas others may be browsing the internet through a screen as large as 1920px x 1200px and some may even be viewing the internet and your website through a large television screen. Cell phones are generally 320px wide x 500 or so px tall, but today, all screens vary dramatically in sizes. The measurements part of web design is that you will be sizing everything generally in pixels, although %, em or pt may be at times preferred.
Note: from this point, you should open a notepad (txt) document on your computer (windows key + r, notepad). Save the document to your desktop as whatever.htm so that you may view your coding progress through your web browser.
HTML (HyperText Markup Language) is the first computing language that you will be required to learn before designing anything. If your website were a building, then HTML would be the stones, the wood and the mortar.
Although there are many glorious things that you can do with HTML, such as changing the color of a font, creating tables or even making text scrollable:
all of those glorious options are a thing of the past - keep that in mind.
Being the stone, wood and mortar of your website, you need HTML to hold your project together. This means that you should not always try to design your website with HTML. Instead, simply use it to build your site, and use it for touch ups if needed.
To an English speaking individual, the words on this tutorial would seem pretty easy to understand, since they too are in English. Keeping this in mind, HTML (like all languages) was designed to be read and spoken in a certain way: the HTML way. Certain words were designed to do certain things. You cannot write jibberish and hope for the best, it just does not work this way - for any language!
1
There are elements (otherwise known as tags) which represent certain tasks. A few of these elements are <p>, <b>, <u>, <font>, <div>, <a>, <br>, <table>, <marquee>, among others.
These are examples of terms that cannot be changed. Just as an English word has an English meaning, these HTML terms have HTML meanings, which will be further explained later.
2
Every element (tag) is contained within "less than (<)" and "greater than (>)" brackets, as shown in the examples above.
3
Nearly every element (tag) has a closing tag, which is closed with a forward slash. For example:
<p>This is a paragraph tag.</p>
<b>This is how you make text bold.</b>
<u>This is how you underline text.</u>
One element which does not require a closing tag is <br>, which represents a line-break (similar to pressing enter on your keyboard).
4
Elements can have descriptive attributes. For example:
<font color='red'>This text is red.</font>
But remember: this would be styling with HTML
Also notice how the element is </closed> with the title element and not with the descriptive attribute. The same would be used for a tags, which represent links:
<a href='http://www.makingtoday.com/how-to-web-design'>title of link here</a>
<font color='red'>This text is red.</font>
1
<p>Paragraph Tags</p>
Paragraph Tags
2
<b>Bold Tags</b>
Bold Tags
3
<u>Underline Tags</u>
Underline Tags
4
<i>Italic Tags</i>
Italic Tags
5
<a href="http://www.site.com">A Tags</a>
6
<div id="whatever">Div Tags</div>
Div Tags (explained later)
7
<img src="/images/image.jpg">
Image Tags
!
HTML that you might use less often: <font>, <br>, <table>, <marquee>, <hr>
It is not necessary, but it is proper to open and close your entire website with <html> and </html>.
Within your opening and closing HTML elements, you must open and close your <head> element, which is used for storing important information about your website and you must also open and close your <body> element, which is used to contain your website content (text, images, anything that visitors will see).
Following is the standard layout for any website. Keep in mind how everything is set up.
p "tags" represent a new paragraph and they automatically assign themselves a new line when used. You will use p tags often when writing content for your visitors.
b tags are used to make words
u tags are used to
i tags are used to
The key and next step to web design is CSS (Cascading Style Sheet). HTML represents the foundation of your website and CSS represents the style of your foundation. CSS is what this tutorial is all about so pay attention!
CSS is divided into two properties: selectors and declarations.
Note: the terms "selector" and "declaration" are not commonly used in web design lingo, but the terms will be used during this tutorial for the sake of being proper. If you wish, you can name these terms whatever you would like to help in remembering what they are and how they work.
Recalling from the HTML tutorial above, you may remember the element titled DIV (<div>). This element is basically a container and will be used throughout your website. You could imagine that any DIV is naturally a four-sided box and with CSS, you can resize, shape and design each of your boxes to however you would like.
A div tag is divided into two groups: ID's (#) and classes (.). ID's are represented with a pound sign # and classes are represented with a period (.). These two groups are known as selectors but seem easier to remember simply as ID's or Classes. The choice is yours for how you would like to know your code.
If your website were a bookshelf, a div # (id) would be the books where a div . (class) would be the pages of each book. So to say, a div # is a container and a div . is a subcontainer.
Following is your HTML foundation, your CSS style and how they relate to each other. Take notice of the id's and classes being used in both HTML and CSS examples below. This is exactly how your coding will look before adding content within each HTML div and before adding styling specifics within each CSS div.
<div id='book'>
<div class='page1'></div>
<div class='page2'></div>
<div class='page3'></div>
</div>
#book{}
#book .page1{}
#book .page2{}
#book .page3{}
Since web design is not a book on a bookshelf, you could imagine that #book is instead a box, where each page is instead a smaller box within your large box.
You will also notice that your div id's and classes can be named whatever you would like.
<div id='large-box'>
<div class='small-box-1'></div>
<div class='smbox2'></div>
<div class='smallbox3'></div>
</div>
#large-box{}
#large-box .small-box-1{}
#large-box .smbox2{}
#large-box .smallbox3{}
It is important to remember how HTML and CSS relate to each other, shown in the examples above. If you can remember this layout, along with the idea that coding is no more than "blocks" and "measurements", then you will be well to do!
Earlier, it was mentioned that CSS is divided into two properties: selectors (div id's and classes) and declarations.
Within your HTML div's will be your content (paragraphs or more divs) and within your CSS divs (selectors) will be your styling specifics. These styling specifics are known as declarations.
Declarations are always inside of the curly brackets {} and are used to style your div id's (#) and classes (.). So where a selector is naturally a four-sided block, the declarations are used to design your block (shape, size, color, etc).
In other words, #box{design-rule: design specifics;}
Like a selector (# or .), the declaration ( #div{what goes here} ) has two fields: the property and the value (again, these terms may be named whatever you wish). A property is defined with a colon : and a value is defined with a semicolon ;.
Like HTML, CSS was written to work in a specific way. Each of your div's may be titled whatever you would like (#whatever) but your CSS declarations must work in a specific way. The only way to learn how to code is to memorize what each specific keyword actually does.
If you can remember that "yell" means to "shout" then it can be fairly easy to remember something like #whatever{font-weight: bold;}, which will make the font within <div id="whatever">Text goes here</div> look bold.
Following is a list of declarations most commonly used, among an ever-growing assortment of declarations. The mentioned "property:" of each declaration is set-in-stone, like a language. The mentioned "value;" of such declaration is variably changeable, among an assortment of options to choose from. So to say, what you see in green below is set-in-stone whereas what you read in white is changeable among a select number of variables.
#selector{
float: left;
position: relative;
width: 100%;
height: 200px;
color: #000000;
font: 300 12px 'arial';
text-decoration: underline;
text-align: center;
font-weight: bold;
line-height: 1.75;
margin: 20px auto 20px;
padding: 20px;
background: #000 url('http://www.makingtoday.com/how-to-web-design/image.jpg');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
border-top: 1px solid #0eabc3;
border-right: 2px dashed #eee;
border-bottom: 10px dotted #fff;
border-left: 5px double #ddd;
border: 1px solid #732b2d;
}
In CSS, you have two choices for colors: hexadecimal and RGB.
Hexadecimal is represented by the pound (#) symbol and is defined with 3 or 6 characters ranging from 0 - 9 and a - f.
In hexadecimal, white is defined as #ffffff or #fff whereas the color black is defined as #000000 or #000.
Where one shade of green is #33bb33, the shortened extension is #3b3 and where one shade of green is as random as #bcea7c, the better choice would be to write-out all six-digits.
With hexadecimal coloring, you cannot make only your font color: or your background: transparent.
RGB is represented with rgba and is defined with three sets of numbers between 0 and 255 with a fourth variable which defines transparency.
RGB is written out as {color: rgba(255,255,255,1.0);} where 255,255,255 is white and 0,0,0 is black.
The fourth transparent number is opaque at 1.0 and invisible at 0.0 whereas 0.5 would be 50% transparency.
Tip - if you have access to Photoshop, the "color picker" can show you the correct hexadecimal and RGB codes for the color you choose.
Margin: defines the spaces around your "box" whereas padding: defines the space within your "box", generally around text.
For example, (to be continued).