Unit Project 3: JavaScript Technical Report

Additions to the HTML & CSS Resource Website

July 28, 2015
Group 4
Heather Horsley, Hailey Hodel Richins, Rachael Sweeten, Chant Wilson

Unit Project 3: JAVASCRIPT

1. Check if the content is well developed and the required knowledge components in the
flowchart are implemented.
a. According to our flowchart (below), users of our website will be able to effectively
manipulate a website using HTML5, debug HTML5, effectively write and apply CSS
to a website and be able to debug CSS.
b. Users will be able to get sample code from our site under the code snippets area which
they can use to manipulate a site using either HTML5 or CSS (goals 1.1 & 3.1).
c. Users will be able to look up and become familiar with HTML5 and CSS terminology
(goals 1.2 & 3.2) using the vocabulary pages of our site.
d. Users will be able to debug both HTML5 and CSS using the tips and tools that are
referenced on the outside websites that users are automatically directed to under the
debugging tab (Goals 2.1 & 4.1).

2. Develop
applying
techniques
a.

1
2
3

webpages by
the following
Toggle,
slideshow, video
control, text

rollover, and new window

- We used the toggle effect to give some quick definitions of HTML and CSS on our
homepage.
- The slideshow effect was used to showoff some of the fun buttons that we made in
Adobe Illustrator.
- The video controls were used to add controls to the tutorial videos on HTML and
CSS.

- The new window is used to open a new window when users select one of the other
online resources from the drop down menu in the external resources page.
b. Including the use of function, array, loop,
1 -The function command was used in our slideshow to tell the program to swap images.
It was also used in our video pages to allow playback, restart, and skipping through the
videos embedded there.
- The array and loop commands were used in the slideshow to allow a myriad of
images to display.
c. Including the use of event handler,
1 - The event handler was used in the dropdown, which allows you to go to other
websites in our external resources page.
d. Including the use of jQuery
- JQuery files were taken from the internet resource: http://jquery.com/download/ .
The work of industry consortiums and professionals makes using this feature very
simple for beginners. This JQuery addition helps the html handle events and
animation across multiple browsers.
Unit Project 2: CSS
In the sites CSS Portion, we added internal and external CSS to create a uniform look and feel to each page,
as well as adding style to certain elements on our pages. This makes the site both more aesthetically pleasing
and more user friendly. Below are a few examples of how CSS was used in our site.
1. Internal CSS style for localized needs
a. We used internal style in a few places to create a specific look or feel we wanted. For
example, on the video page, we use the following code to make the video the size we wanted:
<object style="width:90%">. We also used internal CSS to make the columns in our CSS
Snippets page the size we wanted:
<th style=width:25%> CSS Property </th>
<th style=width:50%> What it Does</th>
<th style=width:25%> Example</th>
2. External CSS style for global needs
a. We employed an external style sheet to create the basic look of our website. It allows us to
have a uniform header and navigation as well as a uniform footer for each page. Our external
CSS style sheet controls many of the other elements within the pages as well in order to have
continuity throughout the site even if that element shows up on more than one page.
3. Defining id, class
a. We used id to help add style to elements that only occurred once per page such as our
navigation bar: #navbar. Having an id set for this allowed each page to have the same
consistent look for the navigation bar at the top of the page. We used class to add style to
elements that could potentially occur more than once such as content or a column header:
.colHeader.
4. Defining header, nav, main, aside, footer
a. We used CSS to define the html categories of header, nav, main and footer. This again allowed
for a consistent look across our pages. Each of these categories had the same style applied on

each page.
5. Using float and inline commands
a. We used the float and inline commands primarily for our navigation menu to make the menu
options appear horizontally on the pages:
i. #navBar li{
float: left;
height: 39px;
6. Formatting: padding, margin, height, width, background, box shadow, corner radius, etc.
a. The formatting options allowed us to create boxes and further format the look of elements on
our pages. One example is the tabs on the home page:
i. .colHeader{
width:90%;
background-color: white;
height:30px;
margin: 0 auto;
text-align: center;
padding-top:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
box-shadow: 0px 5px 5px 1px #333;
}
7. Defining column, column header,
a. We used columns in several places but the most prominent (other than our tables) is on the
home page. We used the columns to separate elements on the page. There are also column
headers for each column which are defined in our external CSS style sheet.
8. Applying hover effect for navigation buttons

a. We used CSS to apply a hover effect to our navigation buttons allowing users to easily
see which menu item they are selecting.
i. #navBar li a:hover{
background-color: #66ccff;
text-decoration:underline;
}
9. Defining a-link, v-link
a. There are several a-links and/or v-links in our site. CSS allowed each of them to have
the same formatting. Below is an example from our navbar.
i. #navBar li a:link, a:visited{
font-size:90%;
font-family: Helvetica, Arial, sans-serif;
display:block;
color:#ffffff;
padding:2px;
text-decoration:none;
}

Unit Project 1: HTML5

The original website framework was created in html5. To create the structure we used html5 tags
such as header, nav, main, aside, and footer.Html5 is also used to format main pages and create
uniformity. Hyperlinks were used to link to pages within our website as well as to outside websites.
Custom images were created in Adobe Illustrator and used as buttons to link pages. Audio is included
on the homepage in order to make the user feel comfortable with coding, since some users feel very
anxious. A table was used to organize html5 vocabulary in a more aesthetic and pleasing way. It was
also used to line up the buttons in even rows.A form is included for site users to contact
administrators with problems or concerns.
Overall, JavaScript, CSS and HTML successfully combined to create the features and design
components for the completed website.