For the first project you will learn how to create an online resume. You will start with a very plain template and slowly add more styling and functionality from there. For each small project you will start from zero to allow to constantly code and notice patterns and trends that will keep on reappearing as you code.
Click the link below to obtain the final product: Final Project 1 Subproject 1 Product
We will start from the basics, first in order to create an html document, you need the <html> tag, followed by the <head> and <body> tags. Your code should look like the following:
<html>
<head>
</head>
<body>
</body>
</html>Once you have that down, you will create a title for your browser, and a title for your page, your code and output should look like the following:
<html>
<head>
<title>Online Resume</title>
</head>
<body>
<h1>Your Name Here</h1>
</body>
</html>You can also include the <br> tags in order to skip lines, as well as the <hr> tag which allows for thematic breaks in the content of the site.
<html>
<head>
<title>Online Resume</title>
</head>
<body>
<h1>Your Name Here</h1>
<br>
<hr>
<br>
</body>
</html>You now can create a <div> element in order to differentiate your content code you will have from the image you will upload of youself. To accomplish this, your code will look like the following:
<html>
<head>
<title>Online Resume</title>
</head>
<body>
<h1>Your Name Here</h1>
<br>
<hr>
<br>
<div class="image">
<img src="profile.png" alt="Your Name">
</div>
</body>
</html>Once you have added an image in a <div> element, you can continue your code including <h2> tags for the headers of each section, and the <p> tags for the content for each of those sections. Your code should look like the following:
<html>
<head>
<title>Online Resume</title>
</head>
<body>
<h1>Your Name Here</h1>
<br>
<hr>
<br>
<div class="image">
<img src="profile.png" alt="Your Name">
</div>
<br>
<hr>
<br>
<h2>About Me</h2>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A tenetur inventore aspernatur quaerat minus magnam necessitatibus similique, error nobis doloribus porro cupiditate sit explicabo dolor quos id veritatis libero eveniet.</p>
<br>
<hr>
<br>
<h2>Projects</h2>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A tenetur inventore aspernatur quaerat minus magnam necessitatibus similique, error nobis doloribus porro cupiditate sit explicabo dolor quos id veritatis libero eveniet.</p>
<br>
<hr>
<br>
<h2>Contact</h2>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A tenetur inventore aspernatur quaerat minus magnam necessitatibus similique, <a href="mailto:youremail@gmail.com"></a> error nobis doloribus porro cupiditate sit explicabo dolor quos id veritatis libero eveniet.</p>
</body>
</html>In the contact section, you can also include an anchor tag, <a>, and include a link to your email, so that users can reach out to you directly from the site.
Now we will review the styling of this page. The styling should be located in the <head> part of the <html> document. The styling should look like the following:
<html>
<head>
<title>Online Resume</title>
<style>
body {
padding: 0;
margin: 0;
}
h1 {
text-align: center;
}
h2, hr, p {
width: 70%;
margin: auto;
max-width: 800px;
}
.image {
width: 70%;
margin: auto;
max-width: 800px;
}
.image img {
width: 100%;
}
</style>
</head>
<body>
...
</body>
</html>This is the basic styling for the page. If you would like to make the page repsonsive to different screen sizes, especially screens of small sizes, you can add media queries in the styling of the page, after you have styled the main components. The media queries for small screens for this project, should look like the following:
<html>
<head>
<title>Online Resume</title>
<style>
...
media (max-width: 900px;) {
.image {
width: 50%;
max-width: 800px;
}
}
media (max-width: 650px;) {
.image {
width: 30%;
max-width: 800px;
}
}
</style>
</head>
<body>
...
</body>
</html>If you are confused about why these things are done this way, take a look at the learning page to understand the formats used for programming the content and styling the document.