HW-1: Personal website (HTML and CSS) For this assignment, you will make use of
ID: 3910851 • Letter: H
Question
HW-1: Personal website (HTML and CSS)
For this assignment, you will make use of HTML and CSS skills. You have to build a simple personal website.
Requirements:
It should have:
A navbar with 3 nav items which links to following pages
A homepage, which has an introduction of yourself, your Skills, interests etc.
A subpage which has the course-work/projects/ and a button to download resume.
A subpage which will have your contact information. Eg: Links to your GitHub or Linkedin accounts.
Deliverables:
You have to turn in the assignment on canvas.
A URL to your website
Publish your website under your personal ENGR web space (or ONID, if you're not an Engineering student. You can also use a host of your choice like Heroku etc.) under a URL like this:
http://web.engr.oregonstate.edu/~YOUR_ONID_ID/cs290/. (Links to an external site.)Links to an external site.
For help publishing to your web space, see one of these pages (We will cover this in class):
ENGR: http://it.engineering.oregonstate.edu/where-do-i-put-my-personal-webpages (Links to an external site.)Links to an external site.
(Links to an external site.)Links to an external site. (Links to an external site.)Links to an external site.ONID: http://oregonstate.edu/helpdocs/accounts/onid-osu-network-id/using-your-onid/publishing-your-website (Links to an external site.)Links to an external site.
Here are a few helpful hints on getting your pages published:
The main way to publish content on either the ENGR web space or the ONID web space is to put files in the public_html/ directory that lives in your home directory on the ENGR/ONID servers. Once you have files you want to published put in site public_html/, the web URLs of those files match the directory structure underneath public_html/. For example, say the contents of your public_html/ directory on the ENGR servers look like this:
public_html/
index.html
blog.html
Then the two files inside public_html/ will be available under the following two URLs (if you publish on your ONID web space, then the URLs will begin with people.oregonstate.edu instead of web.engr.oregonstate.edu):
http://web.engr.oregonstate.edu/~YOUR_ONID_ID/index.html
http://web.engr.oregonstate.edu/~YOUR_ONID_ID/blog.html
If, instead, your files live in a subdirectory within public_html/ directory on the ENGR servers look like this:
public_html/
cs290/
index.html
blog.html
then those files will be available under the following two URLs:
http://web.engr.oregonstate.edu/~YOUR_ONID_ID/cs290/index.html
http://web.engr.oregonstate.edu/~YOUR_ONID_ID/cs290/blog.html
To be viewable on the web, the files inside your public_html/ directory need to have the correct permissions. Specifically, all files need to have read permission granted for the world, and all subdirectories within public_html/ need to have read and execute permission granted for the world. You can read more about Unix permissions here:
https://www-s.acm.illinois.edu/webmonkeys/html_workshop/unix.html
You should never use a URL that begins with file:///.... Such a URL describes the location of a file on a specific computer.
A Zip file of your code.
Grading:
Nav-bar - 20 points
Homepage:
A paragraph of intro - 10 points
A list of skills and interests - 10 points
Subpage 1:
List of projects and coursework - 10 points
Button to download resume - 10 points
Subpage 2:
Email address - 10 points
Links to Linkedin/Github : 10 points
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.header_text {
float: left;
color: #4CAF50;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 17px;
}
.btn:hover {
background-color: RoyalBlue;
}
</style>
</head>
<body>
<div class="topnav">
<h2 class="header_text">PHILIP GILBERT</h2>
</div>
<div class="topnav">
<a id="link_home" class="active" href="#">Home</a>
<a id="link_work" href="#">Work</a>
<a id="link_contact" href="#">Contact</a>
</div>
<div id="div_home">
</br></br>
<h4>THIS IS ME</h4>
<h2 class="header_text">PHILIP GILBERT</h2>
</br></br></br></br></br></br>
<h4>Introduction</h4>
<p>Here, I focus on a range of items and features that we use in life without giving them a second thought. such as Coca Cola. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<h4>Skills</h4>
<p>
<ul>
<li>Data Analysis</li>
<li>Copywriting</li>
<li>Foreign Languages</li>
<li>Accounting</li>
<li>Computer Languages</li>
<li>Mathematics</li>
<li>Graphic Design</li>
<li>Planning / Event Planning</li>
<li>SEO / SEM Marketing</li>
<li>Bookkeeping</li>
</ul>
</p>
<h4>Interests</h4>
<p>
<ul>
<li>Music</li>
<li>Playing</li>
<li>Reading</li>
<li>Animal Care</li>
</ul>
</p>
</div>
<div id="div_work">
</br></br>
<h4>Projects</h4>
<p>
<ul>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
<li>Project 4</li>
</ul>
</p>
</br></br>
<button class="btn"><i class="fa fa-download"></i> Download</button>
</div>
<div id="div_contact">
</br></br>
<h4>Email Address : </h4>
<p>YOUR_EMAIL_ADDRESS</p>
<h4>Github Link : </h4>
<p><a href="https://github.com/" target="_blank">https://github.com/</p>
</div>
</body>
<script name="javascript">
function navClick(nav_name) {
if(nav_name == 'home') {
document.getElementById('div_home').style.display = 'block';
document.getElementById('div_work').style.display = 'none';
document.getElementById('div_contact').style.display = 'none';
document.getElementById('link_home').className = 'active';
document.getElementById('link_work').className = '';
document.getElementById('link_contact').className = '';
} else if(nav_name == 'work') {
document.getElementById('div_home').style.display = 'none';
document.getElementById('div_work').style.display = 'block';
document.getElementById('div_contact').style.display = 'none';
document.getElementById('link_home').className = '';
document.getElementById('link_work').className = 'active';
document.getElementById('link_contact').className = '';
} else if(nav_name == 'contact') {
document.getElementById('div_home').style.display = 'none';
document.getElementById('div_work').style.display = 'none';
document.getElementById('div_contact').style.display = 'block';
document.getElementById('link_home').className = '';
document.getElementById('link_work').className = '';
document.getElementById('link_contact').className = 'active';
}
}
</script>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.