WEB DESIGN 2 ASSIGNMENTS (subject to change)

Apr 22

Joomla!

April 19

DUE: WordPress Site

Download your WordPress Site

Mar 22

Resume Quiz in Google Classroom

Mar 4

WordPress

How to Create a Website: An easy, step-by-step guide from a web developer

WordPress tutorials

WordPress Tutorials

Mar 1

DUE: your site

Feb 15

The following are due

Feb 6

Restructure site

Feb 4

Nav/Menu

Feb 1

Nav/Menu

Jan 25

DUE: Favicon and Social media Icons

Jan 13

Owl Carousel

Jan 10

Fix Code

go to https://alligator.io/css/cropping-images-object-fit/

Jan 8

Fix Code

Nov 14

Fix Code

<!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>
<title>Chicago</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

* {
box-sizing: border-box;
}

body {
margin: 0;
font-size: 20px;
color: #000;
background-color: #203663;
font-family: Verdana, Arial, sans-serif;
}


a:link {
color: #06132B;
}
a:visited {
color: #06132B;
}
a:hover {
color: #FFFFFF;
}
a:active {
color: #06132B;
}

.wrapper {
max-width: 1000px;
width: auto;
background-color: #203663;
padding: 1em;
margin-left: auto;
margin-right: auto;
}

.header {
background-color: #546DA0;
color: #2C3539;
padding: 20px;
text-align: center;
}

.topnav {
overflow: hidden;
background-color: #6a6a6a;
}

.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.topnav a: hover {
background-color: #000;
color: white;
}

.row {
background-color: #375081;
line-height: 1.5em;
}

.column {
float: left;
padding: 10px;
text-align: center;
width: 100%;
background-color: #375081;
}
.footer{
max-width: 1100px;
background-color: #546DA0;
margin-right: auto;
margin-left: auto;
border: 4px solid #000;
display:block;
overflow: hidden;
clear:both;
line-height: 1em;
padding: 2em;
text-align: center;
width: auto;
}

.iv{
width: 30%;
height: auto;
margin: 10px;
}
@media (max-width: 600px) {

.column {
width: 100%;
}
img{
width: 100%;
height: auto;
float: none;
clear: both;
}
.iv {
width: 90%;
height: auto;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 10px;

}
}

</style>
</head>
<body>
<div class= "wrapper">
<div class= "header">
<h1>Chicago</h1>
<p>The Windy City</p>
</div>
<div class="topnav">
<a href ="index.html">Home</a>
<a href="links.html">Favorites</a>
<a href="pics.html">Pictures</a>
<a href="cubs.html">Sports</a>
<a href="vote.html">Elections</a>
</div>

<div class="row">
<div style="margin-right: auto; margin-left: auto; display: table; width: 100%;">

<a href="images/aquarium1.jpg">
<img class="iv" src="images/aquarium1.jpg" alt="This is the description of the picture." title="Shedd Aquarium">
</a>

<a href="images/riverwalk.jpg">
<img class="iv" src="images/riverwalk.jpg" alt="This is the description of the picture." title="The Chicago Riverwalk">
</a>

<a href="images/navypier.jpg">
<img class="iv" src="images/navypier.jpg" alt="This is the description of the picture." title="Navy Pier">
</a>

<a href="images/fieldmuseum.jpg">
<img class="iv" src="images/fieldmuseum.jpg" alt="This is the description of the picture." title="Field Museum">
</a>

<a href="images/planet.jpg">
<img class="iv" src="images/planet.jpg" alt="This is the description of the picture." title="Alder Planetarium">
</a>

<a href="images/art2.jpg">
<img class="iv" src="images/art2.jpg" alt="This is the description of the picture." title="The Art Institute of Chicago">
</a>

<a href="images/tilt.jpg">
<img class="iv" src="images/tilt.jpg" alt="This is the description of the picture." title="Chicago Tilt">
</a>

<a href="images/lpzoo.jpg">
<img class="iv" src="images/lpzoo.jpg" alt="This is the description of the picture." title="Licoln Park Zoo">
</a>

<a href="images/chinatown.jpg">
<img class="iv" src="images/chinatown.jpg" alt="This is the description of the picture." title="Chinatown">
</a>
</div>
</div>
<div class="footer"><p><p class="p1"><a href="mailto:beltranviviana@hcsdnv.com">beltranviviana@hcsdnv.com</a></p></div>
</div>
</body>
</html>

Nov 7

CSS Test 2

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