Friendbook Exercise Guide

Search…
In this project, we'll create our very first HTML page; a profile of ourselves. In the end, we'll work our way up to something that looks like this target.
Structure with HTML
Raw Content
We'll start by getting the raw content into the page, and ignore styling for now. Our first target is something that looks like this target.
1.
Create your own page called [first name]-[last-initial].html (for example, I called mine raghu-b.html).
2.
Type in your own content:
Your name
Where you're from
Some of your app ideas
Some of your prior experience (jobs, education), and your LinkedIn URL
A favorite nearby haunt (coffee shop or restaurant or pub)
Add Semantic Markup
Next, let's tag our content to let the browser know what each thing is. Useful HTML elements include:
Headings: <h1>, <h2>, ... , <h6>
Paragraph: <p>
Unordered list: <ul>
Ordered list: <ol>
List item: <li>
Link: <a href="http://www.addressofsomepage.com/whatever">
Add Images
Let's add some images to the page:
A profile photo (you can grab a fake one from UIFaces)
A cover photo (you can grab a stock one from Stock Up)
A few of your photos (you can grab fakes ones from Stock Up)
After you download your images, name them similarly to what you called your HTML file:
[first name]-[last-initial]-profile.jpg
[first name]-[last-initial]-cover.png
[first name]-[last-initial]-1.png
[first name]-[last-initial]-2.jpg
[first name]-[last-initial]-3.png
[first name]-[last-initial]-4.jpg
Then, add them into your document using the img tag:
1
  /* An image located in the same folder as this document */
2
  <img src="whatever.jpg">
3
​
4
  /* An image located somewhere on the Internet */
5
  <img src="http://somewhere.com/whatever.jpg">
Copied!
Tables
Let's put your experience data into a table. In HTML, the <table> element is used to represent two dimensional data. A simple table looks like this:
First
Last
John
Doe
Jane
Doe
which would produce this:
First
Last
John
Doe
Jane
Doe
The things to keep in mind about tables are:
Every piece of data must reside within a cell, a <td> element (or maybe a <th> element if it's a heading).
Every <td> or <th> element must reside within a row, a <tr> element.
Every <tr> must have the same number of cells, or things get out of whack.
Despite this last rule, you can, however, "merge" cells using the colspan attribute:
People
​
John
Doe
Jane
Doe
produces:
People
​
John
Doe
Jane
Doe
You can see that we've merged two cells in the first row together; the colspan="2" on the first cell ensures that we don't violate the "every <tr> must have the same number of cells" rule.
Your task: Try to create a "What I've Done" section similar to the one you see here.
Embedding Objects
Add a Google Map of your favorite nearby haunt
Add a Vine that you like (here are some examples to choose from)​
Add a YouTube video that you like (here are some examples to choose from)​
Styling with CSS
Now that we have our content showing up, and we've added some basic structure with HTML, it's time to customize the styling of the page.
The basic syntax of CSS looks like this:
1
<h1 class="greeting">Hi there</h1>
2
​
3
<style>
4
  .greeting {
5
    font-size: 24px;
6
    color: darkgrey;
7
  }
8
</style>
Copied!
The rest is just practice, and expanding our vocabulary of what CSS properties are available to us.
Below are some resources that might be helpful as we go along:
​Google Web Fonts​
Google Web Font showcases: Beautiful Web Type and Typographic Project​
Hero unit with cover image:
1
 .top-cover {
2
   background: url("cover.jpg") no-repeat center bottom;
3
   background-size: cover;
4
   height: 300px;
5
 }
Copied!
​Material-Design-style box shadow:
1
 .some-thing {
2
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
3
   transition: all 0.2s ease-in-out;
4
 }
5
​
6
 .some-thing:hover {
7
   box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
8
 }
Copied!
​HTML5 Element List​
An abbreviated list of other useful CSS properties and example values:
1
 /* Typography */
2
​
3
 color: orange;
4
 font-family: 'Playfair Display', serif;
5
 font-size: 18px;
6
 font-weight: bold;
7
 letter-spacing: 0.4em;
8
 line-height: 1.86;
9
 text-align: center;
10
 text-decoration: none;
11
 text-transform: uppercase;
12
​
13
 /* Box Model */
14
​
15
 border-color: rgb(240, 240, 240);
16
 border-style: solid;
17
 border-width: 5px;
18
 border: thick white solid;
19
 height: 200px;
20
 margin: auto;
21
 padding-bottom: 20px;
22
 padding-left: 20px;
23
 padding-right: 20px;
24
 padding: 20px;
25
 width: 100%;
26
​
27
 /* Table */
28
​
29
 border-spacing: 10px;
30
 vertical-align: top;
31
​
32
  /* Other */
33
​
34
 background-color: rgba(0, 0, 0, 0.5)
35
 box-shadow: 0 1px 3px rgba(0,0,0,0.12);
36
 list-style-type: square;
Copied!
Introduction to HTML
Design Readings and Resources
Last modified 3yr ago
Copy link
Contents