Step 1: Build the basic html shell of the web resource
- Introduction to CSS
- CSS Classes & IDs
- CSS Element Positioning
Score: 10
Evaluation:
I'm new to HTML and CSS. We've been working on HTML and CSS in class, but I wanted to round off what I have been learning by going through the HTML/CSS course on Codecademy. I had gone through most of the lessons before I made the learning contract. I decided to use Step 1 to finish the CSS lessons. My biggest goal this week was to learn how to position different parts of my webpage. Codecademy was very helpful in that regard.
My deliverable for this week was to create the "shell" for by web-based game that I will be building this semester. I also decided to round out my PLE as well using what I've learned about HTML and CSS. After I finished the lesson, I went to work on building my PLE.
It was exciting to make my first website. Codecademy gave me the basics. W3Schools helped me personalize things and give them flair. I'm using Google Drive to host my website. I have the Google Drive extension on my computer, which saves a folder to my Finder, syncs files so they can be accessed offline, and automatically update to the web server when I make changes to the files. The url isn't pretty, but it gets the job done. My most favorite part was learning how to download a unique font and have it display on my website for me and all my users (hopefully that is working!). I also learned that you can create different hover functions for things other than links. I made a hover function for my navigation buttons.
I created a basic HTML structure with sections for my website (header, left, right, and footer), using div id tags. I created a navigation bar in my left div, and gave style to its functions. I was pleased with how it turned out.
One thing that has been a frustration is that one of my pages (the first page in my PLE) displays the header differently than the others. I've combed through the page (https://googledrive.com/host/0Bwuo-xxRHyjmOXZSZHA4YmVRSE0/web_resource_mainpage.html) and the accompanying css file to see what would be causing the problem. The CSS works for all my other pages, and is no different for my first page. Other than that, I believe everything is working as planned.
Here's the basic structure for my PLE's main page, followed by the CSS scripting:
HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main_stylesheet.css"/>
<title>Instructional Tools designed by Curtis Henrie</title>
</head>
<body>
<div id="header">
<h1>Instructional Tools designed by Curtis Henrie</h1>
</div>
<div id="left">
<div id="navbar">
<ul>
<a href="index.html"><li class="current">Home</li></a>
<a href="punctuation_project.html"><li>Punctuation Project</li></a>
<a href="owl_project.html"><li>Owl Project</li></a>
<a href="esl_tutor_training_program.html"><li>ESL Tutor Training Program</li></a>
<a href="https://sites.google.com/site/curtisrhenrie/home"><li>Curtis R. Henrie Website</li></a>
</ul>
</div>
</div>
<div id="right">
</div>
<div id="footer">
</div>
</body>
</html>
CSS
@font-face {
font-family: Raleway;
src: url(https://googledrive.com/host/0Bwuo-xxRHyjmOXZSZHA4YmVRSE0/Raleway-Thin.otf);
}
body {
background-color: black;
}
#header {
position: relative;
}
#header h1 {
font-family: Raleway; Trebuchet MS, Arial, sans-serif;
color: #FFFFFF;
font-size: 3em;
font-weight: 100;
text-align: left;
padding-left: 3%;
padding-top: 1%;
padding-bottom: 2%;
}
#left {
float: left;
width: 25%;
margin-right: -1%;
}
#navbar {
margin-top: -16px;
}
#navbar li {
padding: 15px;
padding-left: 30px;
font-family: Raleway, Trebuchet MS; Arial, sans-serif;
font-weight: 100;
font-size: 1.3em;
color: #A0A0A0;
background-color: #282828;
list-style-type: none;
}
/*Special formatting for the navbar button that matches the current page*/
#navbar .current {
padding: 15px;
padding-left: 17px;
font-family: Raleway, Trebuchet MS, Arial, sans-serif;
font-weight: 100;
font-size: 1.3em;
background-color: #404040;
list-style-type: none;
color: #ffffff;
}
#navbar li:hover {
background-color: #606060;
color: #ffffff;
}
a:link {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
#right {
float: right;
width: 65%;
background-color: #404040;
padding: 3% 5% 3% 5%;
margin-left: -1%;
font-family: Raleway, Arial;
font-size: 1.2em;
color: #D0D0D0;
}
#right h2 {
font-family: Raleway, Arial;
color: #ffffff;
font-weight: bolder;
}
#right a {
color: #D0D0D0;
}
#right a:link {
text-decoration: none;
}
#right a:hover {
text-decoration: none;
color: #ffffff;
}
#right a:visited {
text-decoration: none;
}
#footer {
clear: both;
position: relative;
}
No comments:
Post a Comment