So far we built the core of our website. Now we need a home page and a contact page. Here we explain some basic concepts but after that you have the freedom to experiment.
Let’s start from the home page.
Goal
The home page is made by:
So let’s open a new file and set the basic structure. To make the nav menu we can just copy what we have done in the first part. Then, take an image that you like. It should be big enough and with good resolution.
Just after the nav tag, include your image and give it a class name. Now you need to set the width of just this image as full-width, which is 100%.
.home-imag {
width: 100%
}
In this way your image will follow the size of the browser window. It is possible that when the window is very small or very big, you can see a white space at the bottom of the image. You can change it setting the height: 100%. But now you need to be sure that you image isn’t stretched.
.home-imag {
height: 100%
}
After the image, write another header tag within h1 and h2, add a class name to your header so you can style it and not be confused with the other one. (I will use header-home as the class name) In the CSS we are goint to write this:
.header-home {
position: relative;
top: -300px;
}
Here we are changing the position of this element by bringing it outside of the normal flow. Its position is now relative to its parent element (in our case the div#wrap-centered). Now you can move your element where you prefer in the page using the properties top, right, bottom and left.
So, what is positioning? When a box is taken out of the normal flow, all the content that is still within normal flow will ignore it completely and not make space for it. Elements can be positioned using the top, bottom, left, and right properties. These properties will not work, however, unless the position property is set first. They also work differently depending on the positioning method.
There are four different positioning methods.
Knowing all that, create your own home page!
If you want to learn more about positioning, check this demo out
Time to create the contact page!
Goal
Create a page with:
The contact page will have the same structure as the page you created before. So just copy the file and rename it to contact.html or something like that.
Then you remove everything inside the #wrap-centered div container because that’s where you want to display the contact page now.
Next let’s add a paragraph to tell the user who you are. You can do that using the <p> </p> tag.
Inside that tag you can write some text that will be displayed to the user.
For example: <p>Hi I am Mr. Smith. Feel free to contact me.</p>
You also can add a linebreak after the first sentence with a <br> tag and maybe you want to highlight your name by making it italic: <i>Mr. Smith</i>.
If you want to add more styling to the paragraph you should do that in the CSS file. Just add a class to the paragraph <p class="contact-intro"> and over in the CSS file add some styling to the text:
.contact-intro {
font-size: 20px;
font-family: Arial;
margin: 10px;
}
That’s it for the short introduction. Now let’s get to the links where visitors of your site can actually contact you.
Just create a list for the different contact options using the <ul> </ul> tag (ul for unordered list) and also add a class to the list so you can style it later on: <ul class="contact-links">.
For now we want to add links to Mail, Twitter, Facebook and Github. So you have to create four list items with <li> </li> tags.
Inside each item you add a link tag so the user of your site can click on something. You can do that using an <a href="#"> </a> tag. You can ignore the href attribute for now. We will cover that later to make the links actually work.
In general you can use everything as a link. A button element, an image or just plain text. But let’s create a stylish icon using CSS here.
For doing so add the first letter of the name of each link in the link tag and add some classes to the links so you can style them. Add one class contact-link to each link to apply styles to all links and add a unique class for each link (mail, twitter, facebook, github). The whole list should look like the following:
<ul class="contact-links">
<li><a href="#" class="contact-link mail">m</a></li>
<li><a href="#" class="contact-link twitter">t</a></li>
<li><a href="#" class="contact-link facebook">f</a></li>
<li><a href="#" class="contact-link github">g</a></li>
</ul>
If you like you can replace each # above with the URL to your respective social network account.
And now you can style the links using CSS.
You can change the font, create a box for each link in a different colour and position the letter pixel perfect for each link individually.
Here is some simple styling. Have a look at it and adjust it to your needs:
.contact-links {
padding: 0;
list-style-type: none;
}
.contact-link {
display: block;
float: left;
margin: 10px;
text-decoration: none;
color: white;
font-family: Arial;
font-weight: 900;
font-size: 35px;
}
.mail {
background: #dd1812;
width: 39px;
height: 45px;
padding: 1px 0 0 9px;
}
.twitter {
background: #00acee;
width: 30px;
height: 42px;
padding: 4px 0 0 18px;
}
.facebook {
background: #3B5998;
width: 30px;
height: 42px;
padding: 4px 0 0 18px;
}
.github {
background: #171515;
width: 35px;
height: 46px;
padding: 0 0 0 13px;
}
That’s it for this section. Feel free to extend and customize the contact page in every way you can imagine.
Good! Our portfolio is almost ready. Now we need just one more thing: to link all your pages together. To do that there is a special tag: a tag (anchor) that defines a hyperlink. The most important attribute of the < a > element is the href attribute, which indicates the link’s destination. So the HTML syntrax for a link look like this:
<a href="yourUrl">Link text</a>
There are different types of links. You can create an external link, a link that go to another web site. This link is absolute and basically need all the line that usually you see or type in the Url bar of your browser. If we want to link our web site to the OTS site, it look like this:
<a href="http://opentechschool.org">OpenTechSchool</a>
Also very important is the Internal link or rather a link that point on your own web site, point just to another page of the same website. And that one is also the one we need right now, so let’s proceed with our portfolio. In our nav menu, we need to add an <a> tag to our li elements:
<li><a href="home.html" >Home |</a></li>
Be careful to type the url right. If the page to which you are going to link is not in the same root, in the same folder of your file, you need to specify in which one it can be found. For example, if I have the contact page in a contact folder I write:
<li><a href="contact/contact.html">Contact</a></li>
Check in the browser and... Done! Now you can do the same for the rest of your nav menu and for your social buttons links.
By default the <a> tag is styled like this:
You can change the style and the colour by selecting the <a> tag.
There is still at least one important link to explain. The mailto link. Write href="mailto:myemail@google.com" tell to the browser to open the default email program on the user machine with the email destination field already fill in. Nice, isn’t it? So go ahead and write the mailto link with your personal email instead of # in your contact list and try it out.
To get the nice effect of changing the color of a link when the mouse moves over it, you need to use the :hover selector. Because we don’t need to set the class manually, but rather the browser does it automatically, it’s called pseudo class.
a:hover {
color: red;
}
Great! We are done but if you still have a time keep going to play with your portfolio, make it nicer, change colors, fonts, add images or whatever you like most and be ready for present it at the end of the workshop. We want to see your amazing personal website!
Don’t hesitated to ask to our coaches if you have any question.