Section 1.1
We are going to make a simple personal website. There are multiple options to allow a little creativity in this exercise. All blue text below is for copying and pasting exactly as it appears in the exact place instructed - one mark off and it won't work. Text in all caps can be edited. Make a folder on your desktop called "Project1". Open Sublime Text (free download here) and save this in that folder titled index.html
HTML Documents use "tags" to tell our browser how to format content. Tags open and close with <>.
Type
<h1> YOUR NAME </h1>
into your document and press "save". Replace "YOUR NAME" with your name :) Test how this looks by opening it in your browser!
To make a normal paragraph we use <p>. Under the previous line lets write a little about ourselves.
<p>HERE IS A BUNCH OF STUFF ABOUT ME</p>
We can write something like: "I am a UX Designer from Boston, Massachusetts. I love photography, painting and kittens." This is just an exercise so feel free to make up a persona. Save and see how this looks in your browser.
Section 1.2
Now lets add an email signup form! To get any info from your users, you will need to use the <input> tab. Add this to the bottom of your code.
<input type="email">
This wont do much good without a "submit" button so add this to the bottom of your code!
<input type="submit">
Check out how it looks! Anything wrong?
Section 1.3
Always assume users know very little. How will they know what to enter?
change the third line with <input type="email"> to the following
<input type="email" placeholder="Your email">
Now it is clear to users what you want from them. Great work!
Section 1.4 - CSS
What is wrong now? This site looks pretty ugly. Think of CSS as the clothes and makeup of the HTML "skeleton." CSS = Cascading Style Sheets. Lets make this pretty.
For SMALL projects like this, you can add style with the <style> tag, but once we get better we will create a separate document and link to it like mystyle.css - why? Imagine if suddenly we wanted to change all headings text color to bright purple and we have 50 pages, we would have to change hundreds of tags but if you link to another file, you just have to change it once. DONT WORRY ABOUT THAT FOR NOW!
at the beginning of our code lets add:
<body>
and at the very bottom.
</body>
Now we can style everything inside the body tags instead of each section individually. To make sure we are on the same page:
Now for the fun part. On the first line before EVERYTHING ELSE we have done, copy and paste this:
<!DOCTYPE html><head>
<title> MY PAGE TITLE </title>
<style>body {text-align: center;
background: black;
color: white;
font-family: helvetica;
}</style>
</head>
Line breaks make the code cleaner and more readable. We have added a page head, a page title and the style. In between the style tags go all of our style! We centered our text, changed our background, our text color and font.
Name your page where it says "MY PAGE TITLE." This title appears on the top of your tab.
Now check out your page!
Section 1.5 - Images and Form Styling
This is looking better, but still pretty boring right? Time to get visual.
Right under the opening <body> tag lets add the code for our image. Pick whichever one you like best!
Image 1:
<img src="http://i.imgur.com/K4ikVe2.png" width="30%" height="30%">
Image 2:
<img src="http://i.imgur.com/xvZ6rhl.png" width="30%" height="30%">
Image 3:
<img src="http://i.imgur.com/6KPsSss.png" width="30%" height="30%">
Image 4:
<img src="http://i.imgur.com/bkrZ1tv.png" width="30%" height="30%">
Image 5:
<img src="http://i.imgur.com/zdHYckU.png" width="30%" height="30%">
Save and check out how the page looks with your image. Try a few if you want to get creative!
Section 1.6 - Background
Now instead of this boring black background, lets add something interesting.
Find "background" in your document
we will replace that entire line with the following code
Image 1 of Brooklyn Bridge
background: url("http://i.imgur.com/iRJJG3s.jpg"); background-size: cover;
Image 2 of London
background: url("http://i.imgur.com/4Rvd4Ri.jpg"); background-size: cover;
Image 3 of Venice
background: url("http://i.imgur.com/lznwabc.jpg"); background-size: cover;
Image 4 of Space
background: url("http://i.imgur.com/7e2HEDm.jpg"); background-size: cover;
save and check it outtt <3
Section 1.7 - Form Details (can skip)
Right before the CLOSING </style> tag add these lines
p { font-size: 18px;}
input {border: 0;
padding: 10px;}
Padding is the amount of space between the edge of an element and what is inside it.
Section 1.8 - Accent Color
Now what is the website's "call to action"? You want to draw attention to it ! For this site it will be the "Submit" button. Let's see how it looks nice and red by adding this right before the CLOSING </style> tag
Right before the CLOSING </style> tag add these lines:
input[type="submit"] {background: red; color: white;}
See how it looks, nice and red. Want to pick a custom color for your site? Lets find a color code on this website: http://www.computerhope.com/htmcolor.htm
Find the color you like and the corresponding HEX code on the left with a # sign. Copy this color. Now paste it over "red" to get rid of red. Save and view! This is how mine turned out but with the options above you can show a little creativity <3
Section 1.9 - Cheat Sheet
Frustrated or have a code error? You can skip all the steps and get the full document by copying and pasting the text below. Then you can edit individual portions:
<!DOCTYPE html>
<head>
<title> MY PAGE TITLE </title>
<style>
body {text-align: center;
background: url("http://i.imgur.com/lznwabc.jpg"); background-size: cover;
color: white;
font-family: helvetica;
}
p { font-size: 18px;}
input {border: 0;
padding: 10px;}
input[type="submit"] {background: #A23BEC; color: white;}
</style>
</head>
<body>
<img src="http://i.imgur.com/K4ikVe2.png" width="30%" height="30%">
<h1> MY NAME </h1>
<p>My name is Christina and I love riding horses.</p>
<input type="email" placeholder="Your email">
<input type="submit">
</body>
Section 1.95
Love this and want to learn more? There is sooo much more you can do with coding. The possibilities are endless. Try to practice an hour every week. I recommend Code Academy or General Assembly's Dash to get started.
Section 1.96
Too easy for you and want a challenge? Download this template and start playing around with files / attributes and components.
Section 2 - Think like a Designer
Let's sketch on paper, the place where the best ideas start.
A cupcake business called and needs your help. They have amazing cupcakes, but have focused so much on their recipes, they never made a website. They want you to draw one out that will bring them a lot of new customers!
Information they want on their site:
- 3 flavors of the month
- Contact information (Address, phone number, email)
- Business name (make it up)
- 5 pictures (you can just draw a square with an "X" through it to represent pictures)
- Week's events (like cooking classes, tasting parties)
- Newsletter signup (they REALLY want ppl to sign up for their list, help them highlight it)
- Menu
- Hours
- Link to their facebook
There are thousands of ways to portray this same information, let's think it through and draw it out! You can look at other cupcake business websites for inspiration.
This process is called "wireframing" and is essentially making the blueprints of a website so everyone agrees on what you make before you spend 100 hours coding it and find out the client doesn't want it that way. A lot of psychology goes into this!