Welcome to your HTML500 Intro to HTML/CSS Assignment.
In this project, you'll be setting up a simple webpage that will be displaying a company, your own or a silly fictional one (the choice is yours, and the options are endless!).
Go ahead and launch the Brackets code editor. It's time to get our hands dirty with some code!
Oh by the way, if you haven't checked it out already, you can view the completed version to see what we will be building. (You can maybe even cheat a little!)
Let's begin with creating some content. It's always easier to build and design around the content.
option2_company/index.html within Brackets. It's best if you open the entire option2_company folder. This will let you switch between the different files easier. We'll be starting out with the 'index.html' file.
Now let's add some markup to our text content. The steps below will guide you through adding HTML tags, which are statements wrapped around < and > signs.
doctype, html, head and body:
<!doctype html>
<html>
<head>
</head>
<body>
Terrapin Wellness
The spa that your turtle deserves
...
(Your text content goes in body.
This section is indented twice.)
</body>
</html>
Wrap the existing content with the body and indent it (highlight + hit the tab key) to keep your nested layout easily comprehensible to the human eye.
head section, let's add the title of the page to the title tag. This can be whatever you want, but should be directly related to the content of the page. For example, “Terrapin Wellness”. You will notice it show up as the title on your browser window or tab.
<!doctype html>
<html>
<head>
<title>Terrapin Wellness<title>
</head>
...
We are ready to add the markup to our text content now. Initially, we will only make use of a few HTML tags: h1 for the main title, h2 through h4 for sub section titles, p for paragraphs, and then ul and ol for lists.
Note that each of these tags have an opening tag (such as <h1>), and a closing tag (such as </h1>) wrapping the text they are supposed to apply styling to.
h1 tag. Similarly, the person's title will be h2.
...
<body>
<h1>Terrapin Wellness</h1>
<h2>The spa that your turtle deserves</h2>
Our cleansing, nourishing and relaxing facilities.
will provide the ideal vacation for your precious turtles.
Treat them to what they would ask for,
...
h3, and the paragraphs will be p tags. These are not exact requirements, but what's important is to pick which element will take which tags, and stay consistent with it.
...
<p>
Our cleansing, nourishing and relaxing facilities will provide the ideal vacation for your precious turtles.
Treat them to what they would ask for, if they could.
Starting at $49/day
</p>
<h3>Services</h3>
...
ul tag. For ordered lists with numbers, ol. Inside the list, each list item is wrapped in li tags.
...
<h3>Services</h3>
<ul>
<li>Pro-biotic anti-bacterial cleaning</li>
<li>Organic multigrain feeding</li>
<li>Algae smoothies</li>
<li>Oxygen bar</li>
</ul>
...
Feel free to choose which parts of the content you'd like to display in list form and edit to your taste.
When you load the index.html file in your browser, (you should be able to double-click it to have it open in a browser), you will see the content looking more or less neatly organized.
Notice however, that the introductory paragraph, and the contact info at the bottom, are shown on single lines, instead of being separated into multiple lines as it is in your raw index.html file.
This is because since whitespace in HTML is ignored, new lines must be explicitly coded. So let's fix the address layout. A new line tag is a single, self-closing br.
...
<p>
Our cleansing, nourishing and relaxing facilities<br />
will provide the ideal vacation for your precious turtles.<br />
Treat them to what they would ask for,<br />
if they could.<br />
<br />
Starting at $49/day
</p>
...
Terrapin Wellness Inc.<br />
44-5058 Fake Avenue<br />
Vancouver, BC, V6R 3P4<br />
<br />
Tel: 778-000-0010<br />
Fax: 778-000-0011
...
By this point, you should be able to load your index.html in the browser again, and see what kind of default styling these HTML tags added to your content. The titles look like titles, and lists act like lists.
Although browsers provide this default functionality, we are free to change the styling of these elements as we like, which will be discussed in the next section.
Congrats, you're all done adding basic markup to your content. You may notice that this page is rather... bland. CSS is the language used for styling HTML, so we will be writing some CSS. The first step is to add the link tag within the head tag of the 'index.html' file. It should look like:
<link rel="stylesheet" href="company.css">This will link the CSS to the page, where we can make things look prettier.
CSS statements are made of two parts: the element selector that the styling should apply to, and then the style attributes inside the curly braces.
html, body {
margin: 0;
}
body {
background-color: #222;
color: #fff;
font-family: "Helvetica", "Arial", sans-serif;
}
Now let's center the content so it doesn't reach to the far left and right sides of your browser window.
To do this, we will need to wrap all your content in a new element to group them together. Let's use the div tag. Div stands for division. It is an HTML element that has no default styling, so we will need to use our own CSS for it. Let's also add an ID to it, so we can reference it from our CSS.
...
<body>
<div id="wrapper">
<h1>Terrapin Wellness</h1>
<h2>The spa that your turtle deserves</h2>
...
</div>
</body>
</html>
Note that all the content has been indented one more time, since there is another wrapping element (the div) now.
If you view your page now, it will not look any different, because no CSS has been added to our new div. So let's add the CSS below to the end of the company.css file. (Ignore the "...")
...
#wrapper {
width: 800px;
margin: 0 auto;
min-height: 100%;
box-shadow: 0 0 50px #000;
}
Now you should be able to see the changes reflected in your browser. Notice the blank space on the sides.
Here are some more stylings done below. They will demonstrate some more features such as font sizes, margin etc.
...
h1 {
margin: 0;
}
h2 {
margin: 0 0 70px 0;
}
h3 {
color: #C5E74B;
font-size: 20px;
}
Now that we have the basics down, it's time to make our company look professional with some more advanced styling.
We can make our page look professional (or extra silly in this case) by choosing the right fonts. Google Web Fonts is an excellent resource for finding and using free fonts on your website. Open Sans and Josefin Sans seem like decent enough fonts for a handsome company.
You can add Google Web fonts to your page by adding these two lines to your <head> section:
...
<head>
<title>Terrapin Wellness</title>
<link href='//fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="company.css">
</head>
Now we can aff the following CSS, and apply the new font to all the titles elements:
h1, h2, h3 {
font-family: "Courgette";
}
Another easy way to make things look professional is separating each section of our content clearly. To do this, we will need to wrap each section in its own HTML tag.
Here, we have a few options. It's always best to use the HTML tags that match the type of content they wrap. The section tag, header tag and footer tags should be good fits, since they represent exactly what the content is! Refer to the screenshot below to see what we mean by "wrapping" the content in these tags.
To keep things nice and readable, make sure the now-wrapped content to be indented.
Pay close attention to how we split up the sections. The introduction got the header tag, the middle content got the section tag, and the contact info at the bottom got the footer tag.
Now we will add (a lot of) CSS to make all of this look pretty.
header {
height: 300px;
color: #fff;
text-align: right;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 40px;
padding-right: 40px;
}
section {
background: #1E4E03;
color: #fff;
padding: 20px 50px;
overflow: auto;
}
footer {
color: #A3B65E;
background-color: #133002;
padding: 50px;
text-align: center;
}
Feel free to mess around with the CSS statements we added. It should mostly be self-explanatory, and trial-and-error is often a legitimate way to learn. You can adjust the colors, backgrounds, paddings, and text placements by modifying the statements provided above.
Time to add some pictures to our content.
The first image we will add is going to be a background image on the header. This will be easy since the HTML tag is already added. All we need to add is some CSS:
header {
background-color: #000;
background-image: url(images/turtle_bath.jpg);
background-position: top left;
background-repeat: no-repeat;
background-size: 500px;
}
As you see above, you can either add it as a new CSS statement (therefore having two separate header {...} statements), or you can add the background properties into the existing header {...} section.
Add the following img tag right after the opening section tag.
<img class="brush" src="images/turtle_brush2.jpg" />
Then, add the following CSS to give it some styling, and to make it align itself to the right side, therefore leaving the text on the right side. This is a result of the CSS property float: right;
img.brush {
float: right;
margin-left: 50px;
height: 200px;
box-shadow: 0 0 25px #000;
}
Most companies can benefit from a call to action, whether it's to sign up, or to contact. We will add a button to the header that sends an email to the company.
Add the following a tag at the end of your header, which stands for anchor, to link to your email address:
<a class="action" href="mailto:[email protected]">Send your turtle in now!</a>
And once we add the following CSS, it should look like the screenshot below.
a.action {
border: 1px solid #fff;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
color: #fff;
background-color: rgba(255, 255, 255, 0.4);
text-decoration: none;
}
Some companys make use of icons to highlight their main services or specialties. We will make it look like the screenshot below.
First, we need to add the HTML markup for our newly added content. We will add a new section tag and fill in the icon details. Refer to the screenshot below, and type the content in.
Note that inside the section, we have a div with class="icon", and inside that, an img and a p.
And as usual, add the css:
#icons {
background: #587E44;
color: #DFFFBB;
}
#icons .icon {
float: left;
text-align: center;
width: 230px;
}
#icons .icon img {
width: 100px;
}
You may replace the image files with your own if you'd like to use your own icons.
You're done with the walk-through part of this project, but it doesn't have to end here... Please, don't let it end here!
We encourage you to add more features and further customize your landing page with the help of the mentors. Perhaps run your design change ideas by them first to see if it feasable. Any possible design idea is programmable, however the mentors should be able to help you guage how difficult and involved your idea(s) truly are.
Alternatively, you could work on the other landing page option, or even a fresh landing page idea of your own!
PS: This instruction guide was also made with HTML and CSS! (and a little bit of JavaScript for the interactivity, which we haven't covered in this guide.)
Go ahead and (right click and) view the page source to check out how it was done!
Remember that you can use our HTML500 website publisher to publish and share your landing page with your friends and family.
Thank you for attending and seeing this project through. We hope you enjoyed building your first landing page and learning HTML & CSS in the process.