WEB DESIGN 2 ASSIGNMENTS (subject to change)

 

Oct 18

Job opportunities:

Oct 12

Make a responsive layout using CSS

Oct 9

CSS Test 1

Oct 8

Make a responsive layout using CSS

Sep 27

Tutorial: How to build a HTML5 website from scratch

Sep 26

Complete the tutorials at

Grid Guide

Sep 21

Fix the following

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test page</title>
<style type="text/css">
<!--
html, body{height: 100%}
body{
font-size: 14px;
color: #E9F319;
background-image: url(images/backround2.jpg);
margin-top: 0;
margin-bottom: 0;
margin-bottom: 0;
height: 100%;
background-attachment: fixed;
}
.wrapper{
max-width: 1100px;
background-color: rgba(204, 0, 0, .6);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
display: block;
overflow: hidden;
clear:both;
line-height: 1.5em;
padding: 2em;
width:auto;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 0px;
min-height: 100%;
}
.header{
max-width: 1100;
background-color: rgb(0, 0, 0);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
display: block;
overflow: hidden;
clear:both;
line-height: 1.5em;
padding: 2em;
width:auto;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 0px;
}

.content{
display: table;
width: 100%;

}
.left-top{
max-width: 550px;
background-color: rgb(0, 111, 26);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
display: table-cell;
overflow: hidden;

line-height: 1.5em;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 0px;
height: 50%;
width: 50%;
}
.left-bottom{
max-width: 550px;
background-color: rgb(235, 255, 0);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
display: table-cell;
overflow: hidden;
line-height: 1.5em;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 0px;
float: left;
width: 50%;
height: 50%;
}
.right{
max-width: 550px;
display: table-column-group;
background-color: rgb(24, 0, 157);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
display: table-cell;
overflow: hidden;
line-height: 1.5em;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 0px;
width: 50%;
}

a:link {
color: #b0de16;
}
a:visited {
color: #b0de16;
}
a:hover {
color: #039f33;
}
a:active {
color: #039f33;
}
.button{
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 25px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.footer{
max-width: 1100;
background-color: rgb(0, 0, 0);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
display: block;
overflow: hidden;
clear:both;
line-height: 1.5em;
width:auto;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 0px;
height: 50px;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<div class="header"><p><a href="index.html">Home</a> | <a href="links.html">Favorites</a></p>
<h1 align="center"><u><i>Gaming!</i></u></h1>
<hr width="50%" align="center" size="25px" color="#000000">
<p>Welcome to my site about my interests.</p></div>


<div class="content">
<div class="left-top">
<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Video-Game-Controller-Icon-IDV-green.svg/2000px-Video-Game-Controller-Icon-IDV-green.svg.png">
<img src="assets/controller.png" width="50%" height="auto" style= "padding-bottom: 10%" alt="controller" title="controller"></a>
</div>
<div class="right">
<button id="open" onclick="myfunction()">open</button>
<p id="demo"></p>
<p style="border: 3px dotted; margin-left: auto; margin-right: auto; text-align: center; width: 80%; background-color: rgba(185, 31, 18, 0.54); border-color: rgb(186, 255, 0); outline-style: solid; outline-color: rgba(255, 0, 0, 0.9); box-shadow: 10px 10px;">This page is under construction, expect everything to change, even the concept.</p></div>
</div>
<div class="left-bottom">
<a href="https:/google.com"><img src="assets/ps2.png" width="50%" height="auto" alt="console" title="console">
</a>
<p>52852525252</p>
<p>52852525252</p>

<p>52852525252</p>

<p>52852525252</p>

<p>52852525252</p>

<p>52852525252</p>

<p>52852525252</p>

<p>52852525252</p>



</div>
<div class= "footer"><p>You can email me at <a href="mailto:kienholzmitchell@hcsdnv.com">kienholzmitchell@hcsdnv.com</a>,but please don't.</p>





</div>
<script>
function myfunction() {
document.getElementById("demo").innerHTML = "Now what do I do?!?";
document.getElementById("open").innerHTML = "close";
document.getElementById("open").setAttribute("onclick", "test()");}
function test() {
document.getElementById("demo").innerHTML = "";
document.getElementById("open").innerHTML = "open";
document.getElementById("open").setAttribute("onclick", "myfunction()");}
</script>
</div>
</body>
</html>

Sep 18

Fix this code

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>The name of your Page</title>

<style type="text/css">
<!--
body{
font-size: 20px;
color: #00FFFF;
background-color: magenta;
}
.wrapper{
max-width: 1100px;
width:auto;
display: block;
overflow: hidden;
clear:both;

background-color: rgba(204, 0, 0, .6);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
line-height: 1.5em;
padding: 2em;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
.header{
max-width: 1100px;
width:auto;
display: block;
overflow: hidden;
clear:both;

background-color: rgb(0, 0, 0);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
line-height: 1.5em;
padding: 2em;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
.left{
max-width: 1100px;
width:auto;
display: block;
overflow: hidden;
clear:both;
background-color: rgb(255, 0, 0);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
line-height: 1.5em;
padding: 2em;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
.right{
max-width: 1100px;
width:auto;
display: block;
overflow: hidden;
clear:both;

background-color: rgb(0, 255, 0);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
line-height: 1.5em;
padding: 2em;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #000000;
}
a:active {
color: #FFFFFF;
}
-->
</style>

</head>

<body>
<div class="wrapper">
<div class="header">HEADER</div>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
<p><a href="index.html">Home</a> | <a href="links.html">Favorites</a></p>

<h1 align="center"><u><i>This is the page title</i></u></h1>
<hr width="50%" align="center" size="25px" color="#000000">

<p>Welcome to my site about my interests.</p>

<p>This is a different <font face="Helvetica" color="#B0F1FF" size="+4">font</font>This is normal.</p>

<a href="http://www.espn.com"><img src="assets/2.jpg" width="400px" height="auto" alt="Gary Sanchez" title="Gary Sanchez"></a>

<p style="color:rgba(44, 40, 57, .5); text-align:center; font-size: 3em; font-variant: small-caps; font-weight: bold; border: 1px solid black; width: 50%; margin-right: auto; margin-left: auto;">Hello. How are you?</p>

<p>Email me at <a href="mailto:email@gmail.com">email@gmail.com</a></p>
</div>
</body>
</html>

Sep 17

HTML Quiz 2

Sep 7

HTML Quiz 1

Aug 27

Syllabus

codeacademy.com