Web Design 1 Assignments (subject to change)

• Web Design 1 Assignments
• Student Sites
• Google Classroom
• Workplace Readiness Prep
• Syllabus

All assignments and your personal web page must be saved to your network folder in order to be graded. This is the folder for this class, not the one provided by the school district. Your site must be saved in the folder named mysite. You must show assignments to me in class for grading. Video: Working from home using Google Drive

Nov 27

Create a links page

• Objective: Create pages using html and CSS.
• Open your template.html file.
• Save the file in your site folder as links.html. To do this open your home page (template.html) in Visual Studio Code and then go to file and Save as. Make sure it saves to your site folder.
• You should have at least 10 links to other sites you like to visit.  These can be to sites you like or are related to the content of your site.
• Each must have a description as the example below does.
• The code for an external (not your page) link to Google is:
  • <p>Use <a href="http://www.google.com">Google</a> to search the Internet</p>
• On the links page insert at least 10 links to other sites you like to visit.  MAKE SURE THEY ARE APPROPRIATE.
• Insert 5 links in the left column and 5 links in the right column.
• You do not need pictures on the page.
• All of your pages need to be linked to the new page. Open each page and make sure there is a Links hyperlink to links.html on each page.  
• Show me it for a grade.

Nov 27

DUE: Media Query for new page

Make your new page responsive

• Objective: Create pages using html and CSS.
• You are editing your template page.
• You will modify the CSS and HTML to make it match the images below.
• Requirements:
  • Change the media query to make the page responsive at 350px.
    • Change the title.
  • Modify the links in the nav so they go to the home page and all of your other existing pages.
  • Images need to be responsive; either create a class or use percentages for sizing.
  • Your page needs to make sense....remove the Latin and other placeholder text.
    • Add your own content.
  • Move your contact email to the footer.
  • Make the page your own.
    • You need both graphics and information.
  • The color scheme of your page needs to be complimentary. Think sports teams.
    • http://paletton.com/
  • Create a new style for the paragraphs (as we did for p1, pbox1 and pbox2) and apply it to at least one paragraph without a class assigned to it.
    • This means you can create a p class or create a class which is applied to certain <p> tags.
    • Apply at least three properties to the class selector. E.g., font-family.

Nov 16

Recreate index page

• OBJECTIVE: Use div tags and CSS to control the layout of your page
• Type the code in the image below. Type this into your template page.
• As you complete each class refresh the preview of the page to make sure there are no errors.
• This part of the style includes the media query so narrow the web browser to see the effect of the media query.
• When you are done, show me for a grade.
• Your preview needs to look exactly like the images below.
• Make sure your code is on the same lines or as close as you can make it.
• Dont forget the footer selector. This was left out of the previous assignment but is NOT part of the media query.
  

Mobile Preview

Desktop Preview

Nov 13

Quiz: Create another page, this should be your 8th page

• Objective: Create pages using html and CSS.
• Video for links and styles
• Create a page of content.
• The page must be something about the US/Veterans.
• It must be styled in a way that represents the US/Veterans.
• The simplest way to do this is to open your template page in Visual Studio Code and Select File and Save As. Then save it with the file name usa.html.
• Content means actual information. You can use information from the interweb but DO NOT copy and paste. You must cite your source(s). You can do this by putting in URL (site address) where you got the information.
• Put the source of the information on the page it is used. For example if you took something from this page, you would put it Source: http://respinola.com/webdesign1/webdesignassn.htm
• Create links in each page so you can navigate to any of your pages.  When linking your pages you do not need to put in the http://.  You only need the name of your page with the file extension .html since it is part of your site.
• Your links on ALL PAGES should look similar to this: Home | Page 1 | Page 2 | Page 3 | Page 4 | Page 5 | Page 6 | Halloween | USA
  • Your links need to function to your existing pages.
• Any information you get from the internet must be free to use. DO NOT USE COPYRIGHTED information or images.
• The color scheme must be USA related. This means this page needs diffferent styles. To accomplish this change the embedded styles on the page.
• The page must contain more than one section (area of content) and at least two pictures. Make sure you add the alt text and title to your image.
  • Search Google for one, school appropriate picture, (no violence, drugs/alcohol, gang-related, nudity, or inappropriate clothing, etc.) and they cannot be copyrighted.
  • They must be related to the content of the new page.
  • On the right, click Tools.
    • Click Usage Rights and select Labeled for reuse.
    • Click Size and select Large
  • Preview the image by clicking on it.
  • Right click on the image and select Save Image As.
  • Save the image to your assets folder.
  • Give it a simple name with NO CAPS or s p a c e s.
• The page needs to be appealing to the eye. Please use white space, font size and line height.
• The content must fill the page.
• Use an email link in the footer. There is one on the template that you can copy and paste.
• Show me for a grade.

Nov 9

Recreate index page

• OBJECTIVE: Use div tags and CSS to control the layout of your page
• This is pasted after the code from above but before the </style>

/* Gives appearance that the two columns are same height */

.row{
background-color: #8e8e8e;
line-height: 1.5em;
}
/* Create two equal columns that float next to each other */
.column {
float: left;
padding: 10px;
width: 50%;
background-color: #8e8e8e;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

• This is pasted after the code from above but before the </style>

.p1{
color: #9fde4a;
font-family: fantasy;
text-decoration: line-through;
}

.pbox1{
color:#000000;
background-color: #ffffff;
text-align:center;
font-size: 1.5em;
line-height: 1.5em;
font-variant: small-caps;
font-weight: bold;
border: 1px solid #000000;
width: 90%;
margin-right: auto;
margin-left: auto;
padding: 1em;
}

.pbox2{
text-shadow:2px 2px #000066;
color:#6f6f6f;
-webkit-text-stroke: 1px #000000;
background-color: url(assets/yankee_stadium.jpg); /*make SURE you fix this to display the image*/
background-size: cover;
text-align:center;
font-size: 1.5em;
font-variant: small-caps;
font-weight: bold;
line-height: 1.5em;
border: 3px solid #000000;
width: 90%;
margin-right: auto;
margin-left: auto;
padding: .5em;
}

Nov 8

Recreate index page

• OBJECTIVE: Use div tags and CSS to control the layout of your page
• Input the style in the head section. Put this after the line
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--add style after html is done-->
  <style>
  * {
  box-sizing: border-box;
  }
  body {
  margin: 0;
  font-size: 20px;
  color: #b7b7b7;
  background-color: rgb(88, 88, 88);
  font-family: Verdana, Arial, sans-serif;
  }
  a:link {
  color: #000000;
  }
  a:visited {
  color: #000000;
  }
  a:hover {
  color: #0000ff;
  }
  a:active {
  color: #0000ff;
  }
  </style>
• This is pasted after the code from above but before the </style>
  /* Style the wrapper */
  .wrapper {
  max-width: 1000px;
  width: auto;
  background-color: #cccccc;
  padding: 1em;
  margin-left: auto;
  margin-right: auto;
  }
  
  /* Style the header */
  .header {
  background-color: #8e8e8e;
  color: #000000;
  padding: 20px;
  text-align: center;
  }
  
  /* Style the top navigation bar */
  .topnav {
  overflow: hidden;
  background-color: #333333;
  }
• This is pasted after the code from above but before the </style>
  
  /* Style the topnav links */
  .topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  }
  
  /* Change color on hover */
  .topnav a:hover {
  background-color: #ccc;
  color: black;
  }

Nov 7

Recreate index page

• OBJECTIVE: Use div tags and CSS to control the layout of your page
• Add div tag with the class called row directly below the end of the topnav div and before the end of wrapper div.
• Within the row div add div tags with the class called column.
• <div class="row">

  <div class="column">

  </div>

  <div class="column">

  </div>

  </div><!--end of row div-->

USE THIS CODE TO REPLACE THE FIRST COLUMN div

<div class="column">
<h2>Left Side</h2>
<p class="pbox1">Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
<p>This is a normal <a href="http://google.com">hyperlink</a>.</p>
<img src="assets/1.jpg" height="auto" width="85%" alt="Picture description" title="Picture description">
</div>

 

USE THIS CODE TO REPLACE THE SECOND COLUMN div

<div class="column">
<h2>Right Side</h2>
<p class="pbox2">Important News!!!!!</p>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
<p>This is an email link. Contact me at <a href="mailto:email@gmail.com">email@gmail.com</a>.</p>
<img src="assets/2.jpg" height="auto" width="85%" alt="Picture description" title="Picture description">
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

• Insert the following code within the wrapper div without assistance.
  

Nov 6

Recreate index page

• OBJECTIVE: Use div tags and CSS to control the layout of your page
• Some code will be copied and pasted, some you will type.
• Type it EXACTLY as it appears including white space.
• We will do this together and section by section so we can see the effects of each class and style on the appearance of the page.

Create a new file in Visual Studio Code

COPY AND PASTE THE CODE BELOW

<!DOCTYPE html>

<html lang="en">

<head>

<title>CSS Website Layout</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<!--add style after html is done-->

</head>

<body>

SAVE THE file to the codesite folder as template.html.

Type the code below on the line below the <body> tag. It's OK if your line numbers are off.

Nov 1

Quiz: Create another page, this should be your 7th page

• Objective: Create pages using html and CSS.
• Video for links and styles
• Create a page of content.
• The page must be about halloween and be styled like halloween (halloween colors).
• The simplest way to do this is to open your home page and Select File and Save As. Then save it with the file name halloween.html.
• Content means actual information. You can use information from the interweb but DO NOT copy and paste. You must cite your source(s). You can do this by putting in URL (site address) where you got the information.
• Put the source of the information on the page it is used. For example if you took something from this page, you would put it Source: http://respinola.com/webdesign1/webdesignassn.htm
• Create links in each page so you can navigate to any of your pages.  When linking your pages you do not need to put in the http://.  You only need the name of you page with the file extension .html since it is part of your site.
• Your links on ALL PAGES should look similar to this: Home | Page 1 | Page 2 | Page 3 | Page 4 | Page 5 | Page 6
• Any information you get from the internet must be free to use. DO NOT USE COPYRIGHTED information or images.
• The color scheme must be Halloween related. This means this page needs diffferent styles. To accomplish this we will create a new style sheet.
  • Copy and paste your existing stylesheet.
  • Rename the new sheet as style2.css.
  • Change the link to the stylesheet in the html to style2.css.
• The page must contain more than one section (area of content) and at least two pictures. Make sure you add the alt text and title to your image.
  • Search Google for two, school appropriate pictures, (no violence, drugs/alcohol, gang-related, nudity, or inappropriate clothing, etc.) and they cannot be copyrighted.
  • They must be related to the content of the new page.
  • On the right, click Tools.
    • Click Usage Rights and select Labeled for reuse.
    • Click Size and select Large
  • Preview the image by clicking on it.
  • Right click on the image and select Save Image As.
  • Save the image to your assets folder.
  • Give it a simple name with NO CAPS or s p a c e s.
• The page needs to be appealing to the eye. Please use white space, font size and line height.
• The content must fill the page.
• Show me for a grade.

Oct 31

Quiz: Create another page, this should be your 7th page

Oct 26

Copy your pages from code.org to Visual Studio Code

• Video of these directions
• Go to the room305 network directory and create a new folder named codesite. This will hold all of the files from your code.org site.
• Inside this new folder create an assets folder to hold your images.
• Open each of your pages in code.org.
• Copy the code and paste it into a new page in Visual Studio Code.
• Save the file using the same name you used in code.org and save it to your new codesite folder. If you do not use the same filenames, your links will not work.
• Make sure you save your stylesheet(s).
• Download all of your images to your assets folder.
• Change the code for your images to include the assets folder.
  • If your code is <img src="jeans1.jpg" alt="The best jeans on the market"> it would become <img src="assets/jeans1.jpg" alt="The best jeans on the market">
• Preview all of your pages and make sure they are working.
• Make sure all of them have a <title>This is the page Title</title> within the <head></head> tag.
• Make any other adjustments you would like.

Oct 20

First Quarter Final

• Take the Post-test in Google Classroom.
• Must be done at school.
• Do not look up answers.

Oct 6-Oct 21

Lesson 14: Websites for a Purpose Due DUE October 6

• Lesson 14: Activity Guide - Websites for a Purpose in Google Classroom

Lesson 15: Team Problem Solving NOT ASSIGNED

Lesson 16: Sources and Research DUE October 9

• Links and Research - Activity Guide in Google Classroom
• Internet Scavenger Hunt - Activity Guide in Google Classroom

Lesson 17: CSS Classes DUE October 13

• Step 2: Change the height of the images at the top.
• Step 4a: add at least three properties to the class you create.
• Step 7: Do not do Activity C.
• When you are done, send me an email with the lesson number as the subject saying you are done.

Lesson 18: Planning a Multi-page Website DUE October 15

• You do not need to complete the lesson in code.org.
• Project Guide - Website for a Purpose in Google Classroom

Lesson 19: Linking Pages DUE October 20

• Step 2: The link to the index must match the one on other pages.
• Step 6: Name the new page hairtips.html follow the comments in the code.
• Step 7: Complete all.
• When you are done, send me an email with the lesson number as the subject saying you are done.

Lesson 20: Project - Website for a Purpose DUE October 23

• You must have at least six pages. You home page plus five others.
• You navigation (menu) must be on each page and you must be able to get to any page from each page.
• Each page must be full of content. This must include text as well as images.
• Use at least two images per page but you must have information as well.
  • Do not use copyrighted images. Find images that are free to use.
• You must have at least 10 different style selectors in your CSS. Each selector must have multiple properties. Meaning to more than just the minimum. The following are required.
  • body, img, p, h1, h2, a, a:hover, a:visited
  • You only have to create two of your own styles.
  • Example
• When you are done, send me an email with the lesson number as the subject saying you are done.

Lesson 21: Peer Review and Final Touches NOT ASSIGNED

Post-Project Test DUE October 24

Aug 29-Sep 26

Code.org

• https://studio.code.org/s/web-development-2023?section_id=4801042
• READ ALL OF THE DIRECTIONS
• YOU MUST JOIN THE CLASS IN CODE.ORG AND COMPLETE THE WORK THERE, NOT JUST THE ASSIGNMENTS IN GOOGLE CLASSROOM.
• Due dates may change.
• Some of the work is completed through code.org but the worksheets and guides mentioned in the lessons are completed and submitted through Google Classroom. This means, do not access the forms from code.org. Go to Google Classroom when a worksheet needs to be completed. BUT YOU MUST COMPLETE THE WORK in CODE.ORG FIRST.
• NOT all of the lessons have something to submit in Google Classroom.
• The image below shows where the worksheet is in lesson one.
  

Go to https://studio.code.org/home

• Create an account: https://studio.code.org/teacher_dashboard/sections/4801042/parent_letter

• Join the class
  • Create your own accounts and join your section at: 
    
  • email me when you have joined the class.

• Lesson 1: Exploring Web Pages DUE August 23
  • The Purpose of Websites - Activity Guide In Google Classroom

• Lesson 2: Intro to HTML DUE August 24
  • When you are done, send me an email with the lesson number as the subject saying you are done.
  • Skip Part D of Step 8

• Lesson 3: Headings and Lists DUE August 28
• When you are done, send me an email with the lesson number as the subject saying you are done.
• On Step 7, complete all activities. 
• On Step 9, complete A, B, and C. Complete one of D, E F.

• Lesson 4: Mini-Project: HTML Web Page DUE August 30
• When you are done, send me an email with the lesson number as the subject saying you are done.
• Your page must include different headings (h1, h2, and h3), multiple paragraphs and two different types of lists (ol and ul).
• Follow this example.

• Lesson 5: Digital Footprint DUE August 31
  • When Does Your Privacy Matter? - Activity Guide Google Classroom
  • Social Sleuth - Activity Guide Google Classroom
    • Only complete one of the users.

• Lesson 6: Styling Text with CSS DUE September  7
• When you are done, send me an email with the lesson number as the subject saying you are done.

• Lesson 7: Mini-Project: Your Personal Style DUE September 14
  • Your Personal Style - Activity Guide Google Classroom
    • For the drawing of your site, keep it simple. You can make a wireframe sketch using the Draw tool in Google Docs.
    • Examples
  • When you are coding the page in steps 2-4 of the lesson use the code you created from Lesson 4. Just copy and paste it from one lesson to the other. Include the following rules in the CSS. My example.
    • use rgb color codes
  • body: change the background color and the text color
  • h1, h2, h3: change the font family, font size and text color for all
  • p: change the font family and font size
  • ol: change the text color
  • ul: change the text color

• Lesson 8: Intellectual Property DUE September 19
• Licensing Your Work - Activity Guide Google Classroom

• Lesson 9: Using Images DUE September 22
  • For step 7 of this lesson, complete the a and b challenges. You can complete c or d for extra credit. Please tell me if you do so.
  • For step 8 of add a picture of something you're interested in.
  • For Step 9 only complete a and b.
  • When you are done, send me an email with the lesson number as the subject saying you are done.

• Lesson 10: Websites for Expression DUE September 25
  • Define Your Web Page - Activity Guide Google Classroom

• Lesson 11: Styling Elements with CSS DUE September 27
  • When you are done, send me an email with the lesson number (Code Lesson 11) as the subject saying you are done.
  • Step 4: use rgb codes for the colors.
  • Step 5: You must add text-align, color, and at least one other property to the body rule
  • Step 8: Add at least two other rules to the css with appropriate properties for both. Use hexadecimal color codes for these.
  • Step 9: Complete activities A, B, C, D,
    • Either of the last items can be done for extra credit but you must email me to tell me you did it.

• Lesson 12: Your Web Page - Prepare DUE September 29
• Personal Web Page - Prepare - Project GuideGoogle Classroom
• For the drawing of your site, you can use the one from Lesson 7. Make sure you update it to reflect changes.

• Lesson 13: Project - Personal Web Page DUE October 2
• Personal Web Page - Reflect - Project Guide Google Classroom
• When you are coding your page use the code you created from Lesson 7. Just copy and paste it from one lesson to the other. Example.
• Step 3: Upload at least three images for your page.
• Step 4:
  • Add font-family, font-size and line-height to your body rule.
  • Add an img rule with at least three properties. One of the properties must be a border.
• All previous requirements remain since this should be a continuation from previous lessons.
• Not Assigned:
  • Personal Web Page - Peer Review
  • Personal Web Page - Rubric
  • Computer Science Practices - Reflection
• Together, we will add the following code to your html and css.
  
  figure {
  float: right;
  width: 400px;
  height: auto;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  display: block;
  border: double red 5px;
  margin: 0.25em;
  }
  
  figcaption{
  font-family: Verdana,Script, sans-serif;
  font-weight: bold;
  background-color: rgb(175, 175, 175);
  margin-top: -5px;  
  }
  figure img {
  width: 100%;
  height: auto;
  }
  
  <figure>
  <img src="2022-10-10.png"
  width="136" height="200"
  alt="Eiffel tower">
  <figcaption>Scale model of the
  Eiffel tower in
  Parc Mini-France</figcaption>
  </figure>

Aug 22

Pretest

• Take the pretest in Google Classroom.
• Must be done at school.
• Do not look up answers.

Aug 21

Course requirements/expectations

• Syllabus: parents can sign ther verfication or email me at respinola@hcsdnv.com.

Assignment:

• Complete registration for websites below.
• Student Syllabus Verification
  • Complete in Google Classroom

Join Google Classroom Join code.org

1. You must sign in with your Google Classroom account.
2. Go to www.code.org and click the 'sign in' button.
3. Choose 'Continue with Google'.
4. Sign in via the Google sign-in dialog.
Join Quizlet
• This will be used later for Digital Learning.
• https://quizlet.com/join/qgFDQgwgN?i=1ucocb&x=1rqt
• Use your real name for your Quizlet account so you can receive credit.