Web Design and Development I Assignments (subject to change)

All assignments and your personal web page must be saved to your network folder in order to be graded. Assignments should be put it your personal folder. Your site should be put in the folder named mysite. Files you need for your assignments are in the folder named student_files.

\\hcsdfs2\LHS\room305\web1\LATNAMEFIRSTNAME\

May 17

Final

  • Convert your personal site into a responsive site similar to the Dharma site. Another option is to find a template to use.
  • Some are available at w3schools.
  • All pages must be changed.
  • Must include:
    • A slider/carousel.
    • A menu that has at least one drop down.
    • Responsiveness...including the menu. This means you need a media query in the stylesheet.
    • Favicon.
    • Graphics.
    • An embedded YouTube playlist.
    • An external stylesheet.
    • A footer which contains:
      1. An embedded map.
      2. Social Media Icons linked to actual accounts.
  • Your site must have the following pages:
    1. Home.
    2. Links.
    3. Pics.
    4. A page containing two embedded videos.
    5. A page containing a javascript of your choice.
  • Pick 7 of the following pages to create. This will give you a total of 12.
    1. An issue that is important to you.
    2. Your favorite hobby or sport.
    3. A place you have visited or want to visit.
    4. A prominent person in the world today or in history.
    5. Your favorite type of music or band.
    6. Your favorite movie, YouTuber, TV show, etc.
    7. A book you have read or want to read.
    8. Something that you own that is important to you or something you want to own.
    9. A resume page.
    10. A page about your favorite class.
    11. A page about something local such as Winnemucca, Lowry, Nevada, etc.
  • Must be uploaded to receive credit.

May 3

Dharma Yoga Responsive HTML and CSS Website Tutorial

OBJECTIVE: Use HTML5 and CSS3 to build a responsive website

  • Copy the site folder to your network folder. It is named Dharma Yoga Starter Files.
  • View the videos from your folder.
  • Save each index page with the video number at the end. E.g. index1.html
  • Also save the style sheet this way. The style sheet for video 2 would be saved as style2.css. This means you also need to update the link to the stylesheet in the index page.
  • The images are located in your img folder not on his website. E.g. https://www.w3newbie.com/wp-content/uploads/. Make sure you change your code accordingly.
  • At the end of video 2, your page should look like the image below and the slider should function.
    dharma 2
  • At the end of video 3, your page should look like the images below.
    Dharma 3-1
    Dharma 3-2

  • At the end of video 4, your page should look like the images below. This only shows the bottom of the page, which was the only part of the html changed.
    Dharma 4

  • At the end of video 5, your page should look like the images below.
    Dharma 5-1

    Dharma 5-2

    Dharma 5-3
  • At the end of video 6, your page should look like the images below.
    Dharma 6
  • At the end of video 7, your page should look like the images below.
    Dharma 7
    Dharma 7

Apr 25

Insert a script into your personal site

  • Go to http://javascriptkit.com/cutpastejava.shtml
  • Select a script that you want.
  • Create a new page which is styled the same as your other pages.
  • Insert the script.
  • Preview and upload.

Apr 24

Unit 5 Module 2 Lesson 6: Building a Custom Video Player

  • OBJECTIVE: explain what an API is, and how you can use it to control the content of web pages; use JavaScript to control the HTML5 video element.
  • Go to University of Washington Web Development
  • The directions say to make the buttons look how you want, but I want you to try to match them to the preview below.
    5-3-1

Apr 20

HTML Test

Apr 19

Insert a javascript game

  • Go to https://www.w3schools.com/graphics/game_intro.asp
  • Click the Try it Yourself link.
  • Make changes to the script and click Run.
  • Only change one thing at a time to make sure your code is not wrong.
  • Once you get the game the way you want it, insert it onto a new page in YOUR site and upload it.
  • Style the page the same as the others in your site.
  • Place the game inside the div which contains the content of your page.
  • To fix the positioning of the game:
    • The following fix is from https://stackoverflow.com/questions/41170866/problems-with-html-canvas
    • Replace: document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    • With: document.getElementById("name of the div").appendChild(this.canvas);
    • This mean you need to create a new div with an ID of your choice.

Apr 17

Quiz on Unit 5 Module 1 Lesson 1: Client-side vs. Server-side Scripting

Apr 10

Unit 5 Module 2 Lesson 2: Javascript Errors and Debugging

  • OBJECTIVE: Tell when Javascript has triggered an error in your web browser; gain practice understanding Javascript error messages and applying them toward correcting errors in Javascript code.
  • Nothing to submit, but make sure you can find the errors in the examples as you may see them at a later date.
  • Go to University of Washington Web Development
  • Download this file and save it over your mystyle.css.

Unit 5 Module 2 Lesson 3: Building a JavaScript Clock Part 1

  • OBJECTIVE: use a built-in JavaScript object to retrieve data; use the HTML Document Object Model (DOM) to get an HTML object from a web page; assemble multiple parts into a character string using Javascript; change the content of a web page using JavaScript.
  • Go to University of Washington Web Development
    Unit 5 Module 2 Lesson 3: Building a JavaScript Clock Part 1

Unit 5 Module 2 Lesson 4: Building a JavaScript Clock Part 2

  • OBJECTIVE: use if/then/else loops in Javascript; apply basic math and logic to creating a functional JavaScript program; used the setInterval() method to repeatedly execute a JavaScript function at regular intervals; applied CSS to stylize content that was created with JavaScript.
  • Go to University of Washington Web Development
    Unit 5 Module 2 Lesson 4: Building a JavaScript Clock Part 2

Unit 5 Module 2: Lesson 5: Using Javascript to Hide and Show Content

Apr 2

CSS Test

Unit 5 Module 2 Lesson 1: Using JavaScript to Show an Alert

  • OBJECTIVE: how a client-side script fits within the context of an HTML page; some basic Javascript syntax.
  • Go to University of Washington Web Development
  • You need to actually read the lesson to know what you are doing.
    Unit 5 Module 2 Lesson 1: Using JavaScript to Show an Alert
    Unit 5 Module 2 Lesson 1: Using JavaScript to Show an Alert

Apr 1

Unit 5 Module 1 Lesson 1: Client-side vs. Server-side Scripting

  • OBJECTIVE: name and describe some of the advanced technologies that are used to deliver web content; explain the difference between client-side and server-side scripting; define progressive enhancement; identify what technologies are being used to implement particular websites or web features.
  • Go to University of Washington Web Development
  • Take handwritten notes on the assigned reading, Building the Web: Beyond HTML.
  • Notes will be used for a Quiz.
  • Submit them to me.

Mar 25

Review and retake HTML Test 2

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

Unit 4 Module 4 Lesson 1: Selection Tools

  • Go to University of Washington Web Development
  • OBJECTIVE: Utilize the basic marquee and other selection tools to cut out objects or isolate them from their backgrounds
  • SAVE THE PSD VERSIONS OF THESE TO PROVE YOU MADE THEM
  • Remove the background and original image.
  • You should have 7 pictures cutout in one Photoshop file.
  • Save the image with a filename of your choice.

Unit 4 Module 4 Lesson 2: Layer Effects and Blending Overview

  • OBJECTIVE: Apply layer effects such as drop shadow, glow, and bevel and emboss; adjust the opacity of a layer or object; adjust blending properties to create more advanced blending effects.
  • SAVE THE PSD VERSIONS OF THESE TO PROVE YOU MADE THEM
  • Open the file from the first lesson and save the image with a NEW filename of your choice.
  • Match the image from the lesson.
  • Use the completed image as your banner rather than creating a new one as it says to do in part 2 of lesson 2.
  • To get the image to center on the page, add the following style to your style sheet.
    • .cntr{
      text-align: center;
      }
  • Insert the img src tag inside a paragraph tag that has the cntr class applied to it.
  • For example, <p class="cntr"><img src="/imagename.jpg" alt="something about the pic"></p>

Unit 4 Module 4 Lesson 3: Background Images

  • OBJECTIVE: utilize the CSS background-image property to apply a background image to an element on the page; utilize the CSS position, repeat, size and attachment properties of the background image to control how the image is displayed; design or locate background images, both tiled and large size, for use as web backgrounds.
  • This covers Parts 1 and 2 of the lesson. SAVE THE PSD VERSIONS OF THESE TO PROVE YOU MADE THEM
    • Only create ONE background image. It can be either tiled or large.
    • Use Photoshop to create the image do not search for one.
    • Set the image as the background to all of the portfolio pages and show me. The image below shows a gradient as the background.
      Unit 4 Module 4 Lesson 3: Background Images

Mar 22

Resume Quiz in Google Classroom

Mar 21

HTML Test 2

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

Mar 15

Photoshop yourself

  • OBJECTIVE: Use different methods to make selections in PhotoShop
  • Find a well known historical image or one of a famous landmark and PhotoShop yourself into it. I have your school pictures if you need one. Or we can take a picture in class.
  • You will be evaluated on the complexity of the image and the quality of your editing.
  • Try to choose large images and zoom in when you are cutting.
  • The picture can be put on your site if you choose.

Mar 7

Remake one of the following images using Photoshop

  • OBJECTIVE: In PhotoShop utilize various tools to recreate a given image.
  • Save the images in your mysite images folder.
  • Match the dimensions of the image.
  • Your cut must be precise. Use multiple tools and make sure you zoom in.
  • Forrest Gump
    • The background is a California Wildfire.
    • Adjust Levels and Hue/Saturation on Forrest.
      Forrest Gump
  • Star Wars
    • Find the C3PO and R2D2 at Lucasfilms
      Star Wars

  • Jaws
    Sloth
    The Production Credits: Co-starring LORRAINE GARY • MURRAY HAMILTON • A ZANUCK/BROWN PRODUCTION
    Screenplay by PETER BENCHLEY and CARL GOTTLIEB • Based on the novel by PETER BENCHLEY • Music by JOHN WILLIAMS
    Directed by STEVEN SPIELBERG • Produced by RICHARD D. ZANUCK and DAVID BROWN • A UNIVERSAL PICTURE
    TECHNICOLOR® PANAVISION®
  • Home Alone
    • Replace Kevin's face with your own. And change the faces of the guys in the window.
    • Try to match skin tones
      Home Alone

Mar 5

Evaluate Web 2 Web Sites

  • Complete the rubric for two of the Web Design 2 web sites

Mar 1

Make at least three icons and a favicon for your website

  • They can be used to link to another page or and email address or whatever you would like.
  • Quality counts.
  • Save the PSD file to prove you made the images.
  • Export them in PNG format to use for your site.
  • Insert the favicon on all of your pages.

Feb 28

TAKE CSS Test 2

Feb 25

Unit 4 Module 3 Lesson 1: Basic Shapes and Colors

Unit 4 Module 3 Lesson 2: Working With Layers

  • OBJECTIVE: In PhotoShop utilize layers to adjust the stacking order of objects.

Unit 4 Module 3 Lesson 3: Optimizing GIF Images

  • OBJECTIVE: In PhotoShop optimize and export png and gif images; use layer visibility to streamline graphic projects.
  • You will insert the saved buttons on the home page.
  • Use PNG format rather than GIF.
    Unit 4 Module 3 Lesson 3: Optimizing GIF Images

    Unit 4 Module 3 Lesson 3: Optimizing GIF Images

Unit 4 Module 3 Lesson 4: Creating a Favicon

  • OBJECTIVE: Utilize PhotoShop to create a favicon image
  • Your favicon should display in Chrome when previewed.

Feb 19

REVIEW AND RETAKE CSS Test 1

Feb 15

CSS Test 1

Use the code below to replace the code of your stylesheet.

UNIT 4 Module 2 Lesson 1: Understanding Web Graphics

  • Go to University of Washington Web Development
  • OBJECTIVE: Size images for web pages; Differentiate between different image file formats; Locate images on the Web and determine whether it's okay to use them.
  • Complete activities 1-3 and show me your graphics page when you are done.

UNIT 4 Module 2 Lesson 2: Acquiring Images for Web Graphics

  • OBJECTIVE: Find and download images on the Web from sites that have no restrictions that would prevent you from downloading and using their images on your own web site.
  • Skip activity 1 but complete activity 2. Find and save your images from the three sites listed. Do not use Shutterstock and iStockPhoto.

UNIT 4 Module 2 Lesson 3: Cropping and Resizing

  • OBJECTIVE: Appropriately size images for web pages; understand how file size and bandwidth limitations influence the use of web graphics.
  • Skip to "The Real Thing: Cropping, Resizing, and Saving"
  • As a class we will cover cropping, resizing and exporting in PhotoShop.

UNIT 4 Module 2 Lesson 4: Adding Images to Your Web Page

  • OBJECTIVE: Use thumbnail images to link to a larger image. use the ALT attribute when adding images to a page.
  • Much of the code can be copied and pasted from the assignment.
  • You need to add styles for p.caption img.left since these are used in the copied code.
  • and click the link at the bottom of the page for the example page. Your page should look the same. Look at the code for the page and the stylesheet for the styles (caption). When it does, show it to me.
    Lesson 4: Adding Images to Your Web Page

Feb 11

UNIT 3 Module 7 Lesson 1: Reflections

UNIT 4 Module 1 Lesson 1: Introduction to Web Graphics

  • OBJECTIVE: Identify what constitutes purposeful use of web graphics; identify guidelines for effective use of graphics on web pages; utilize graphics for web design in a manner that minimizes accessibility and usability impacts
  • Do not copy the text from the image. You need to evaluate a site of your choice.
    UNIT 4 Module 1 Lesson 1: Introduction to Web Graphic

UNIT 4 Module 1 Lesson 2: Copyright Law and Graphics on the Web

  • OBJECTIVE: Determine if an image or graphic is protected by copyright law; determine whether or not copyright law would allow an image to be used on a web page under different circumstances
  • Please go to and read through all of the links on the page.
  • Responses to number 3 under activities will be submitted via email.
    • Write at least one paragraph for each scenario and email it to me at This email address is being protected from spambots. You need JavaScript enabled to view it. use the subject "your name Lesson 2".

Feb 6

UNIT 3 Module 6: Page Layout Techniques

  • Go to University of Washington Web Development
  • Lesson 1: Page Layout with CSS
  • OBJECTIVE: Demonstrate a basic understanding of CSS positioning principles.
  • In the lesson you are asked to read an article (go here if you can't open the link) and answer three questions. Copy the questions to an email, answer them and send to me. The subject of the email must be "Your Name Module 6 Lesson1". Send the email from your hcsd gmail account. The questions are below.
    1. What are the five possible values of the CSS position property?
    2. If you don't specify a position property for an element in your CSS, what is its default value?
    3. Where will this element be positioned on the screen?
      uw/unit3module6lesson1.jpg

  • Lesson 2: Stylizing a Navigation Menu with CSS
  • OBJECTIVE: Use a variety of CSS properties to make an unordered list look like a navigation menu.
  • Even though the divs are stacked they will be side-by-side when the browser window is expanded.
    uw/unit3module6lesson2.jpg

Feb 4

Even if you are not done with Module 4 skip to this.

Unit 3 Module 5: The Role of ID and Class in CSS

  • Go to University of Washington Web Development
  • Lesson 1: Understanding ID and Class in CSS
    • OBJECTIVE: Identify how ID attributes are used in CSS to enable styling of individual elements; identify how Class attributes are used in CSS to enable styling of groups of elements.
    • Below is part of the code. This is about all you have to do for this lesson; edit the html of the page and make sure all of the classes and ID's are applied.
      Lesson 1: Understanding ID and Class in CSS code

  • Lesson 2: Applying ID and Class in CSS
    • OBJECTIVE: Stylize a class of elements using CSS; stylize an individual HTML element using its ID.
    • Make sure you complete all of the steps in the Activities, including the bulleted list.
    • Your page should look like the image below. Notice the shadow on the divs and the larger font in the overview paragraph.
      Lesson 2: Applying ID and Class in CSS
  • Lesson 3: Pseudo-class Selectors in CSS
    • OBJECTIVE: Use the :hover, :focus, and :active CSS pseudo-classes to a web page to help the user track their current position on the page; use the :first-letter pseudo-class to distinctly stylize the first letter of a block of text.
    • The significant changes are the hover for the links and the first letter of the first paragraph in the main section. Make sure you read the directions and the explanations.
    • The font for the "T" is font-family: "Lucida Calligraphy","Monotype Corsiva",cursive;
      Lesson 3: Pseudo-class Selectors in CSS

Feb 1

UNIT 3 Module 4: The Box Model in CSS

UNIT 3 Module 4: The Box Model in CSS

You must make the recommended changes to the Accessibility page

UNIT 3 Module 4: The Box Model in CSS

Feb 7

Modify your personal site

  • OBJECTIVE: identify whether font families and define the typography of your site by setting the properties in CSS.
  • This lesson applies to your personal site.
  • Use all of the Common Typographic Properties mentioned in the portfolio lesson. You don't have to apply all eight to each selector or class, but all eight must be used in your stylesheet.
    1. font-family
    2. font-size
    3. font-style
    4. font-weight
    5. line-height
    6. text-align
    7. letter-spacing
    8. text-shadow
  • Add the following note to your stylesheet
    • /*Your name styles added for Lesson 3-3-2*/
    • Following this note you will include the styles created or modified for this lesson.
  • Add the font-family property to the body, the footer, and navigation (topnav).
    • All of these should have different fonts.
    • Please add the font-family and font-size properties. See the examples below, but use your own settings
      • font-family: "Gill Sans MT", "Verdana", sans-serif;
      • font-size: 1em;
    • Add other properties to all of these such as font-size or font-style.
  • Create or add to p, h1, h2, and h3
    • Add properties to all of these.
    • Use different fonts for the heading tags but not the p. It should be the same font as the body.
  • Use the following to change your topnav style. Copy this code and replace yours. Then change the properties to your liking.
    Note only a few properties are changed for the hover. You can, and should, experiment with your own.
    Your styles
    cannot match these.
    • /* Style the top navigation bar */
      .topnav {
      background-color: #a10000;
      overflow: hidden;
      }
    • /* Style the topnav links */
      .topnav a {
      color: #ffffff;
      display: block;
      float: left;
      font-family: Tahoma, Geneva, sans-serif;
      font-size: .9em;
      margin: 0px;
      padding-top: 10px;
      padding-right: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      text-align: center;
      text-decoration: none;
      }
    • /* Change color on hover */
      .topnav a:hover {
      background-color: #FFFFFF;
      color: #000000;
      }
  • Example

Feb 1

HTML Test 1

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

Inside the newportfolio folder

  • Edit the index so it is your information and add notes to each of the pages as well as the css.

Jan 28

UNIT 3 Module 3 Lessons 1-2: Typography in CSS

  • OBJECTIVE: Identify whether font families and define the typography of your site by setting the properties in CSS.
  • Go to University of Washington Web Development
  • In lesson 2
    • Use all of the Common Typographic Properties mentioned on the page (e.g. font-family, font-size, line-height, etc.). There are a total of eight.
    • Complete steps 8-13.
    • To the div style, add #main and nav so their styles match.
      UNIT 3 Module 3 Lessons 1-2: Typography in CSS

Jan 18

UNIT 3 MODULE 2 Lesson 1: Understanding Color in CSS

UNIT 3 MODULE 2 Lesson 2: Applying Color in CSS Overview

  • OBJECTIVE: you will be able to identify two methods for expressing color in CSS and implement a color scheme on a web site using CSS
  • This lesson applies to your personal site.
  • You must change the color scheme on all of your pages using the stylesheet.
  • To receive credit, you must include your colors in a comment as shown in the lesson.

Jan 9

Create a 7th page and update all pages

  • OBJECTIVE: Create CSS styles to modify appearance of web pages
  • Make sure the appearance/style of your pages is uniform in relation to fonts, color, backgrounds, etc.
  • Include links to each page on each page
  • The page will be about your favorite holiday.
  • Make sure you change the title of the page in the <head> and the <body>.
  • An email link to you in the footer.
  • At least two images.
  • One aligned left and the other aligned right.
    • Use CSS classes to accomplish this.
    • Link the images to their full-size versions.
  • Information.
    • The information must be in your words, not a copy and paste.
    • However, you can, and should, look up some information to include. Make sure you include a source for it.
  • In your stylesheet create two new classes these can be the styles for the pictures mentioned above. Apply these to at least one of your pages.
  • Clean up your CSS page.
    • To accomplish this go to http://www.styleneat.com/ or http://www.codebeautifier.com/
    • Paste your CSS into the field.
    • Select the field, "Sort Properties alphabetically".
    • Copy and paste the organized code back to your stylesheet.
  • For the pictures on your pics page use the property object-fit property from https://alligator.io/css/cropping-images-object-fit/.
  • This must be uploaded to the webserver. Show me a preview of it online when you are done.

Dec 20

Create an external stylesheet

  • Objective: Create an external stylesheet.
  • Rather than have embedded styles on each page you are going to create an external stylesheet. The benefit of this is that you only have to change the stylesheet to make style changes on all of your pages.
  • Open one of your pages. Copy the styles from the head section of the page.
  • IMPORTANT: If you have unique styles on other pages then you need to copy those styles to the new stylesheet as well.
  • Create a new CSS document in Brackets.
  • Paste the copied styles from the page into the new document.
  • Save the new document as style.css and save it in your assets folder.
  • Delete the styles from your existing pages.
  • In the head section of each page add a link to the new stylesheet. The code is below.
    • <link href="/assets/style.css" rel="stylesheet" type="text/css" media="all" />
  • Preview the pages. They should look the same as before. And all pages should look the same.
  • You may have to change some of your classes if the styles are not applying correctly.
  • You can still have classes that apply to the body tag which apply to all pages in the external stylesheet. This would allow you to have a different background for the USA page. For example:
    • Using this style in the stylesheet would apply these styles to all of the pages.
      • body{
        margin:0;
        padding:0;
        font-size:14px;
        color:#919191;
        background-color:#000000;
        }
    • Using the style below in a specific page would apply the background to only that page.
      • body{
        background-image:assets/picture.jpg;
        background-attachment:fixed;
        background-repeat:no-repeat;
        background-size:cover;
        }

Dec 12

UNIT 3 Module 1: Introduction to Cascading Style Sheets

  • OBJECTIVE: Stylize web pages using cascading style sheets
  • Go to University of Washington Web Development
  • FOR ALL OF THESE ASSIGNMENTS YOU MUST INSERT NOTES IN YOUR CODE THAT INCLUDE THE DATE AND YOUR NAME
  • For example:
    • in the CSS /*12-21-18 Salvador Contreras*/ or
    • in the HTML <!––12-21-18 Salvador Contreras-–> 
  • Unit 3 Module 1 Lesson 1
    • Add embedded styles to the index.html page
      Unit 3 Module 1 Lesson 1

  • Unit 3 Module 1 Lesson 2
    • Add style elements to index.html
    • You must add properties to change the appearance of h2, div and p. Match them to the mage below.
    • The following properties will be used: background-color, border, color, font-size, font-style, margin, padding. This does not mean they will all be used for each selector.

      Unit 3 Module 1 Lesson 2

  • Unit 3 Module 1 Lesson 3
    • Create an external stylesheet to all pages.
    • Copy content from the index to all other pages.
    • Match the styles to the image below.
    • To make the links white, you need to add a "a" selector to the CSS and change the color to white.
      Unit 3 Module 1 Lesson 3

Dec 11

Replace video

OBJECTIVE: Create CSS styles to modify appearance of web pages

  • Find a video and download it.
    • https://commons.wikimedia.org/wiki/Commons:Free_media_resources/Video
    • Less than two minutes.
    • School appropriate.
    • Open source.
    • Less than 6MB.
  • Download the video and use it to replace the Felix Hernandez video.
  • Use a different poster.
  • Upload and preview for a grade.

Dec 10

Insert a video into a new page IN YOUR SITE.

  • OBJECTIVE: Add video to a web page
  • CREATE A NEW PAGE.
  • The page should be saved as video.html.
  • Retitle the page.
  • The video is the Felix Hernandez video in the student_files folder.
  • Insert the new page into your navigation and make sure your navigation is on this page.
  • Use a poster as you did in the lesson. This can be an image of your choice.

Dec 7

Test

Dec 5-6

Unit 2 Module 6: HTML Video Lessons 1-2

  • OBJECTIVE: Create a page that incorporates video with closed captioning.
  • Go to University of Washington Web Development
  • Copy the videos folder from the student_files folder and paste it into your portfolio folder.
  • Modify the video.html page.
    UNIT 2 Module 6: HTML Video Lessons 1-2

Unit 2 Module 7 Lesson 1: Reflections

Dec 4-5

Unit 2 Module 5 Lesson 1: Creating a Data table

  • OBJECTIVE: Create a simple data table that includes <table> <caption>, <thead>, <tbody>, <tr>, <th> and <td> elements as well as scope attributes.
  • Go to University of Washington Web Development
  • Add a table to the accessibility.html page
    UNIT 2 MODULE 5 Lesson 1: Creating a Data table

Dec 3-4

Unit 2: Module 4: Lessons 1-3: Creating Links

  • OBJECTIVE: You will learn how to create links using both absolute and relative paths, and be able to differentiate between the two.
  • Go to University of Washington Web Development
  • Modify the index to create links.
    Unit 2: Module 4: Lessons 1-3: Creating Links

Nov 30

Unit 2: Module 3: Lesson 1-2: Lists

  • OBJECTIVE: you will be able to create a list using HTML
  • Go to University of Washington Web Development
  • Modify the content of each of the two div elements so the content is marked up as an unordered list. 
    Unit 2: Module 3: Lesson 1: Lists

    Unit 2: Module 3: Lesson 1-2: Lists

Nov 29

Unit 2 Module 2 Lesson 3: Common Tags

Nov 27

University of Washington Web Development

    • OBJECTIVE: Create a blank HTML page with all of the essential tags in place
    • Create a new folder in your network folder titled portfolio.
    • Create a subfolder inside the portfolio folder titled assets
    • Go to University of Washington Web Development
    • Email me the answers from Unit 2 > Module 2 Lesson 1: HTML Syntax
      • Send this from your hcsdnv gmail account.
      • Use "your name Lesson 1: HTML Syntax" as the subject.
    • Unit 2 > Module 2 Lesson 2: Essential Tags
      • Your page should look similar to the one below.
      • Show me all of the pages once you have created them.
        ../images/unit2module2lesson3

Nov 27

sampleCreate a new background

      • Objective: Use PhotoShop to create a basic background to be used on a web page
      • Create a new PhotoShop document with a Width of 1920 pixels and height of 1080 pixels.
      • Save the image in your assets folder of your website with a filename of your choosing.
      • Use the rectangle tool Rectangle tool and draw a rectangle to same size as the canvas (the white area).
      • Select the rectangle layer in the Layers Panel (on the right).
      • At the bottom of the Layers Panel, click the Layer Style icon (fx) and select Blending Options.
      • Select the Pattern Overlay option. Choose one of the available textures. The example to the right uses Gauze 64x64 and is set to a scale of 165%.
      • Select the Gradient Overlay option. On the right reduce the Opacity to a setting you like. The example is 87%. This must be done so the texture pattern displays.
      • You can also change the Gradient to one you like. The two colors in the example are #000d5e and #616161.
      • Click OK.
      • If you are done, use the Save for Web & Devices option and save the image as a JPG image into your assets folder. Try to make the file small so use JPEG Low or JPEG Medium option.
      • Set the image as the background of one of your pages. You will need to change the style code to the file name you saved the image as.
        • Change the style so the image stays in place when you scroll. Try background-attachment.
      • Upload and preview your page.
      • Show me when you are done.

Create another background

      • This background image will be smaller and blend into the page background color.
      • This file is will by 800px x 25px.
      • Save the PSD file in mysite folder.
      • Set the image (jpg) as the background to one of your pages.
      • Repeat the image across the X-axis of the page (CSS property of the body).
      • Change the background color of the page so it matches the bottom color of the image you created.
      • Upload and preview your pages.
      • Show me when you are done.

Create another background

      • Create a gradient background using CSS and apply it to one of your pages.
      • Try background-attachment.
      • Upload and preview your pages.
      • Show me when you are done.

Last one

      • Pick one method and apply it to all of your pages.
      • Upload and preview your pages.
      • Show me when you are done.

Nov 15

Add four classes to your stylesheet

      • Objective: Create classes to use in an embedded stylesheet.
      • Remember, where you define styles in the styles area, classes start with a period. When applied in the HTML, do not include the period.
      • Create a new page and save it as examplestyles.html. the easiest way to do this is to open your index page and choose File and Save as.
      • Use each of the classes in the new page.
      • You can use them in other pages but this is not required.
      • The classes will be named:
        • pagetitle
          • Minimum Requirement: change the font size, color, and family or face.
          • Apply this to a paragraph of text. For example:
            • <p class="pagetitle">Home Page</p>
        • text:hover
          • Minimum Requirement: change the font color and background color when the mouse hovers over it.
          • Apply this to one or two words using a span tag. For example, if you had the paragraph below, only the words my website would change when the mouse is placed over it.:
            • <p>Welcome to <span class="text">my website</span>.</p>
        • picright
          • Minimum Requirement: float the image right, set the height, add a border, add margin, set the height to 400 px; set the width to auto.
        • mylink
          • Minimum Requirement: change the font color and text decoration.
          • Apply this to an existing hyperlink on the page. For example:
            • Email me at <a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it." class="mylink">This email address is being protected from spambots. You need JavaScript enabled to view it.</a>.

Nov 9

Change images so they display using a class rather than a table and it works well for mobile.

      • Objective: Use CSS to display images on a page and make them responsive.
      • This will be done in groups.
      • All students in the group must complete the assignment correctly.
      • Hints
        • Remove all references to the table from the code.
        • Remove properties from the img src tag except for alt and title.
        • Create a class for the images.
        • Add appropriate properties to the new class.
      • Upload and preview for a grade.
      • Max
        Mitchell
        Sal
        Daniel A

        Krystal
        Viviana
        Carlos
        Andres

        Hannah
        Aldo
        Daniel M

        Aiden
        Matthew
        Kaitlyn
        Rylee

        Braden
        Levi
        Osmar

         

 

Nov 5

Create another page: Page 5

      • Objective: Create pages using html and CSS.
      • Create a page of content. Content means actual information. You can use information from the interweb but do not copy and paste. And you must cite your source(s).
      • Make the page about the voting/the election.
      • Include at least two images.
      • Embed a video.
      • The page needs to be appealing to the eye. Please use white space, font size and line height.
      • Make sure you have links to each page on each page.
      • Your links on ALL PAGES should look similar to this: Home | Links | Page 3 | Pictures | Voting or The Election
      • Upload and show me for a grade.

Oct 25

Create another page: Page 3

      • Objective: Create pages using html and CSS.
      • Create a page of content. Content means actual information.
      • The simplest way to do this is to open your links page and save it as the new file.
      • Save this in your mysite folder with a name that makes sense to you...not content.html.  Make sure to use lowercase and no spaces.
      • Create links in each page so you can navigate to any of your three 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.
      • This means that at the top of each page you will have the following links Home | Favorites | Pictures | The New Page (it better not be named this)
      • Any information you get from the internet must be free to use. DO NOT USE COPYRIGHTED information or images.
      • 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
      • The page must contain more than one section (area of content) and at least one picture. Make sure you add the alt text and title to your image.
      • Create a new style to apply to the section headings of your page.
      • The page needs to be appealing to the eye. Please use white space, font size and line height.
      • The content must fill the page.
      • Upload and show me for a grade.
      • You can start with any of the following pages except the first three OR you can build your own.
        • Home
        • Links
        • Pics
        • An issue that is important to you.
        • Your favorite hobby or sport.
        • A place you have visited or want to visit.
        • A prominent person in the world today or in history.
        • Your favorite type of music or band.
        • Your favorite movie or TV show.
        • A book you have read or want to read
        • Something that you own that is important to you or something you want to own.

Oct 22

Create a pictures page with nine images in a table

      • Objective: Create pages using html and CSS.
      • Search Google for nine, school appropriate pictures, (no violence, drugs/alcohol, gang-related, nudity, or inappropriate clothing, etc.) and they cannot be copyrighted.
      • On the right, click Tools.
        • Click Usage Rights and select Labeled for reuse.
        • Click Size and select Larger Than and select 800x600.
      • 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.
      • Create the new page and save it as pics.html in your mysite folder.
      • Do this by resaving your third page as pics.html. (File and Save As)
        • Remove the content from the page and replace it with the table (see below) containing the pictures.
      • Make sure you have links to each page on each page.
      • Your links on ALL PAGES should look similar to this: Home | Links | Pictures
      • Using the code below you will create a 3x3 table to contain the images. Each image will be a thumbnail on the page that is linked to the full-size image.
      • The following code needs to be typed into the body of the page.
      • Click image for full size.
        table code
      • Upload and preview it for your grade. Don't forget to also upload the pictures.

Oct 15

Create a links page

      • Objective: Create pages using html and CSS.
      • We will do this together.
      • Save the file in your mysite folder as links.html. To do this open your home page (index.html) in Brackets and then go to file and Save as. Make sure it saves to your mysite folder.
      • You should only have one column on the page to contain your content.
      • 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.
      • 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.
      • Upload the page and preview it for a grade.

Oct 12

Make your new page responsive

      • Objective: Create pages using html and CSS.
      • You will modify the CSS and HTML to make it match the images below.
      • Hints:
        • Add a media query which makes the page responsive at 500px.
        • Modify the links in the nav so they go to the home page and your favorites page.
          • The links are index.html, links.html, pics.html
        • 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.
        • 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.
        • Create a new style for the paragraphs (as we did for pbox1 and 2) 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.

Mobile Preview

index for w3schools

Desktop Preview

index for w3schools

Oct 11-12

      • Objective: Utilize an FTP application to connect to and upload files to a webserver
      • Send me an email to This email address is being protected from spambots. You need JavaScript enabled to view it. with the subject your name.
      • I will send you the login information to upload your site to my domain; respinola.com.
      • Open Filezilla and create a new site and connect to the webserver.
      • Upload your files.
        Filezilla

Oct 9

Recreate index page

      • OBJECTIVE: Use div tags and CSS to control the layout of your page
      • Correct your code for the pbox2 class
      • Add an image, a paragraph of text, and a link to each column. In the left column add a hyperlink to any location. In the right column add an email link to you.

Oct 5

Recreate index page

      • OBJECTIVE: Use div tags and CSS to control the layout of your page
        Paragraph Box 1
        Paragraph Box 2

Oct 2

Recreate index page

      • OBJECTIVE: Use div tags and CSS to control the layout of your page
      • Use different html and css
      • Some 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.
      • As we input the code, you will make changes to the style. For example, change it so the nav area has a white background with black text and reverse the colors on the hover.

Oct 2

Recreate index page

      • OBJECTIVE: Use div tags and CSS to control the layout of your page
      • Use different html and css
      • Some 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 apearance of 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>CSS Website Layout</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: #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 the wrapper */

Oct 1

Test your page by shrinking the browser window and making sure the page is responsive.

Add a class for the paragraphs

      • Change the inline p style to an embedded style with a class that changes with the media query.
      • This is the style that creates the border around one or two of your paragraphs. The "Hello. How are you?" from below.
        index
      • This means you must make a class for the paragraph.
      • For example, you could create a class called .paragraphbox. Or name it something that makes sense to you.
      • The same class will be added to the media query.

Add the paragraph classes to the media query

      • Alter the parameters so the style changes when the media query is applied.
      • The paragraph must display properly in a reduced size browser.

Sep 27

Media Query

      • OBJECTIVE: Use a Media Query to make your page responsive
      • Add a media query and styling so your page is responsive.
      • Google: "responsive mobile media query"
      • Add styles to the Media Query to adjust the appearance of:
        • body
        • wrapper
        • header
        • left
        • right
        • footer
        • the div you added
        • images
          Media Query

Sep 21

Create additional div tags

      • OBJECTIVE: Use div tags and CSS to control the layout of your page
      • Add div tags within the wrapper class to better display the content of the page.
      • This will be done as a class (header, left, right).
      • This means you will need to create a style name for each div tag.
      • The classes need to be added to your styles.
      • After inputting the html code for the divs, you should write the names of each div as text so you can tell them apart from each other. Also change the background color of each.
      • You must modify the style properties of each class so the divs are different.

Sep 20

Footer

      • OBJECTIVE: Use div tags and CSS to control the layout of your page
      • Add a footer div and appropriate styling
      • It is easiest to copy the styles for the .header and then paste it below the .right selector in the style area of the head section.

Sep 15

Add the following to the wrapper class:

      • OBJECTIVE: Use div tags and CSS to control the layout of your page
      • 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;

Fix the paragraph appearance. Add or change the inline styles so it displays correctly.

Adjust the properties to your liking. Show me when you are done.

Sep 14

Add a wrapper div to your home page.

      • OBJECTIVE: Use div tags and CSS to control the layout of your page
      • Place a <div> tag immediately after the <body> tag.
      • Place the end </div> immediately before the </body> tag.
      • Apply the wrapper class to the div tag.
      • Add the .wrapper style to the embedded styles in your head tag.
      • Add class="wrapper" to the div tag.

Sep 11

Copy and paste the code for the paragraph with the inline style.

      • OBJECTIVE: Use inline styles to alter the appearance of your content
      • Alter the style of the new paragraph.
      • Add a background color using rgba so the color is somewhat transparent.
      • Add at least two CSS styles (properties) of your own.
      • Look these up at https://www.w3schools.com/css/default.asp or google them.

Sep 6

Download a background image for the page

      • OBJECTIVE: Use CSS to add a background image
        • Add the background-image property to the body style in the head tag.
        • Add other properties such as (To find these, google: css background properties:
          bgpropertiesfromw3
      • Use some new tags such as <center>, <a href>, <font color=, <font size=>, <font face=> <b> BOLD, <u> UNDERLINE, <HR> HORIZONTAL RULE.  There are many more than this so look up some of these through:

Sep 5

Insert images on your page

      • OBJECTIVE: Download and insert appropriate images
      • Download a new image to your assets folder and replace the existing image. Change the link on the image so it is linked to itself.
        • When searching for the image make sure it is available for reuse and large by changing the search settings in Google.
      • Add a second image next to the first one which is also linked to itself.

Aug 29-Sep 5

Insert hyperlinks

      • OBJECTIVE: Insert internal and external hyperlinks
      • Include links to all of your pages on each page you create. For an internal link (to a page within your own site) you do not need to use http:// in the hyperlink reference. You do need to use this for links outside of your site. Links to your first two pages (home and links) would be:

        <p><a href="/index.html">Home</a> | <a href="/links.html">Favorites</a></p>

        The vertical line is located above the Enter key.
      • Type
        • <h1 align="center"><u><i>This is the page title</i></u></h1>
          <hr width="50%" align="center" size="25px" color="#000000">
      • On your home page, include a description of what your site is about. This must be in a <p> tag. Remember you can change the font color, face, and size if you want.

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

        <p>This is a different <font face="Bradley Hand ITC" color="#FF0BDB" size="+4">font</font> This is normal.</p>

      • You will need to find an appropriate and freely available image online. This will be saved to your assets folder.

      • To insert the image on your page, use the following code. We are setting the height to auto, but we could also add a style using the img tag and then add properties to style all of the images.
      • Type
        • <a href="http://www.espn.com"><img src="/assets/2.jpg" width="400px" height="auto" alt="Gary Sanchez" title="Gary Sanchez"></a>
      • The next paragraph uses inline styles rather than the embedded styles in the head tag. This means the style will only apply to the tags the are in.
      • Type
        • <p style="color:#fef65b; 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>
      • Please change the properties of the style to make it your own.
      • Include an email link to you as the webmaster at the bottom of the page. An email link is the same as other links (a href) but you need to add "mailto:"
      • Type
        • <p>Email me at <a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">This email address is being protected from spambots. You need JavaScript enabled to view it.</a></p>
      • Change the colors of the background, text, and links to something you want to use. Remember the color code link is on my links page at the top of this page

Aug 27-Sep 6

Notes on code for your home page

Start your own site

      • Always use lower case filenames without spaces or special characters. Underscore_ and dash- are OK.
      • Go to My Computer. Navigate to your network folder and create the folders below for your site.
      • \\hcsdfs2\LHS\room305\web1
      • Create a folder called mysite within the new folder create another new folder named images. Your folder will look like the one below.
        Folders

Build your index page in Brackets

Below is a preview of the page and the code.

Objective: Create pages using html and CSS.

      • This will be completed step-by-step.
      • Brackets can be found under Start, Programs and Accessories menu. 
      • Save the file in the folder with your name in your mysite folder as index.html.
      • The following code is the two first lines of each of your pages. Copy and paste this. It will replace <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">
      • Type <head>
      • Copy and paste this.
        • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      • Type
        • <title>The name of your Page</title>
      • Copy and paste the following code.

        <style type="text/css">
        <!--
        body{
        font-size: 14px;
        color: #FFFFFF;
        background-color: #000000;
        }
        a:link {
        color: #FFFFFF;
        }
        a:visited {
        color: #FFFFFF;
        }
        a:hover {
        color: #0000FF;
        }
        a:active {
        color: #FFFFFF;
        }
        -->
        </style>

      • Type
        • </head>
      • Type
        • <body>

Aug 27

Intro/Requirements

Syllabus:

      • Parents must send email to This email address is being protected from spambots. You need JavaScript enabled to view it. for verification of syllabus Take home and return it signed

Build your index page in Brackets

      • This must be saved in your network folder.
      • \\hcsdfs2\LHS\room305\web1\MurilloMedranoDaniel\mysite