Web Design 2 Assignments

WEB DESIGN 2 ASSIGNMENTS (subject to change)

\\hcsdfs2\LHS\room305\web2\LATNAMEFIRSTNAME\

Nov 14

Fix Code

Objective: Troubleshoot and fix a page
Copy and paste the code into Brackets.
The picture areas needs to be centered on the page.

<!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

Objective: Build a responsive website using HTML and CSS Grids
Complete in Google Classroom

Oct 18

Job opportunities:

This company https://ocgcreative.com/ designed Chihuahuas site https://chihuahuasgrill.com/. Look at the different types of employees they have https://ocgcreative.com/reno-internet-marketing-team-2/.

Oct 12

Make a responsive layout using CSS

Objective: Build a responsive website using HTML and CSS Grids
DUE: Layout for both pages
- Please include background colors for each area.

Oct 9

CSS Test 1

Objective: Build a responsive website using HTML and CSS Grids
Complete in Google Classroom

Oct 8

Make a responsive layout using CSS

Objective: Build a responsive website using HTML and CSS Grids
Create mysite folder with an assets sub directory.
- Save all site files there.
Your layout will be similar to images below.
You will receive a weekly grade for your progress on your site.
- Evidence of progress will be notes you make in your code.
Wrapper (container), Header, Menu, left and right content areas (main and sidebar), footer.
Divide the footer into three columns using a grid or divs.
Add divs to the sidebar.
Build only the index page and one sub page.

This means a page with actual content.

The nav bar in the menu should be responsive and have at least one dropdown. Just use <a href ="#">Link</a> for the links for now.
Appropriate CSS for all classes.
Make an external stylesheet.
- Organize your styles by order of appearance in the page.
- And use comments.
Create several heading styles as well as styles for text in the body.
Responsive for desktop, tablet and mobile.
- https://responsivedesign.is/strategy/page-layout/defining-breakpoints/
Use place holder images and text https://loremipsum.io/ and https://loremflickr.com/.
Upload using Filezilla to the Go Daddy server. I will supply the FTP info.
Examples

http://www.os-templates.com/premium-website-templates/transform
https://templated.co/solarize
https://w3layouts.com/preview/?l=/radiant-energy-industrial-category-bootstrap-responsive-web-template/
https://templated.co/p/9265150585917340
https://www.w3schools.com/css/css_templates.asp

use the @font-face rule or https://developers.google.com/fonts/docs/getting_started
Incorporate http://fontawesome.io/
Create a favicon.
Create a custom logo for your business.
Carousel
- BootStrap
- W3 Schools
- GitHub
- jcarousel
- Must have a caption on the pictures and must be linked.
Social Media icons
Social Media feed
FACEBOOK
- Step 2: Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.
- <div id="fb-root"></div>
  <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
- Step 3: Place this code wherever you want the plugin to appear on your page.
- <div class="fb-page" data-href="https://www.facebook.com/nba" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/nba" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/nba">NBA</a></blockquote></div>
- IFRAME METHOD
- <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fnba&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
TWITTER
- <div class="editor-pics twitter">
  <a class="twitter-timeline" href="https://twitter.com/LowryHigh" data-widget-id="543900127291658240" width="300" height="400" data-link-color="#0066ff"
  data-border-color="#0066ff" data-chrome="noheader light">Tweets by @LowryHigh</a>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  <div class="clearfix"></div>
  </div>
- Twitter 1
- Twitter 2
- Twitter 3
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Great Business Inc.</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="One brief sentence about your website/business." />
<meta name="keywords" content="YOU NEED TO ADD YOUR OWN KEY WORDS" />
</head>

Sep 27

Tutorial: How to build a HTML5 website from scratch

Objective: Build a responsive website
http://www.lingulo.com/tutorials/css/how-to-build-a-html5-website-from-scratch
Use the shared google doc for the directions and save when instructed.

Sep 26

Complete the tutorials at

Objective: Build a website using grids
https://www.youtube.com/playlist?list=PL4cUxeGkcC9itC4TxYMzFCfveyutyPOCY
Save each tutorial as a new file, e.g. index1.html, index2.html, etc.

Grid Guide

https://css-tricks.com/snippets/css/complete-guide-grid/

Sep 21

Fix the following

The right div needs to be the same height as the two left divs combined.

<!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>

</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

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

Complete in Google Classroom.

Sep 7

HTML Quiz 1

Complete in Google Classroom.

Aug 27

Syllabus

Parents must send email to respinola@hcsdnv.com for verification of syllabus

codeacademy.com

register and complete the lessons on Learning HTML
https://www.codecademy.com/catalog/subject/web-development
You will complete lessons 1-9
1. Learn HTML: Get started as a web developer by learning the basics of HTML, the essential language of the web.
2. Styling a Website: Learn and practice the fundamentals of CSS to add beautiful styling to your webpages.
3. Getting Started with JavaScript: Learn the fundamentals of JavaScript: syntax, variables, conditionals, and functions.
4. Building Interactive JavaScript Websites: Learn the Document Object Model, the interface between JavaScript and HTML elements, and combine HTML, CSS, and JavaScript into exciting interactive sites!
5. Getting More Advanced with Design: Learn CSS techniques for more interesting sites: display & positioning, colors, typography, responsive design, and flexbox.
6. JavaScript: Arrays, Loops, and Objects: Discover more JavaScript techniques and features including arrays, looping, and objects.
7. Building Website Templates: Apply your JavaScript skills to Handlebars.js, a powerful tool for creating reusable webpage templates populated with data from JavaScript files.
8. Introduction to jQuery: Learn the basics of jQuery, a JavaScript library that allows you to add dynamic behavior to static web pages.
9. Intermediate JavaScript: Learn more techniques to extend your JavaScript knowledge including reusable classes, splitting code into modules, and making HTTP requests.