Web Design 1 Assignments (subject to change)

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

Feb 2

Recreate your personal site

  • Edit the final version of the Lingulo index page so it contains the content from your index page. You must use the carousel on the index page.
    • I have given you a completed version of the code.
  • Modify the CSS so that it has a different look and feel from the Lingulo site.
    • Include at least two style selectors (classes or IDs) that you have created on your own.
  • Keep the footer for all pages but change the content.
    • Change the social media Twitter, Instagram and Facebook.
    • Link them to actual accounts. They do not have to be yours.
      • You can use the following if needed
        • https://twitter.com/lowryhigh
        • https://www.facebook.com/thelowryhigh/
        • https://www.instagram.com/lowryhigh/
  • Also apply the Lingulo layout to all of your other pages, you can control the layout of your page. You do not have to use all of the columns on each page.
  • Link all of your pages in the nav/menu of the Lingulo site.
  • Remove any content from the Lingulo page you do not want.
  • Add your own pictures to the carousel.
    • This works best if you edit your images and make them all the same size so they display well.
  • Upload your entire site directory using Filezilla.
  • Make sure your pages are responsive. You will have to add some code to the CSS to control your images. This will also have to be done in the media query to make your images responsive.
  • Show me.

Jan 31

Finish Lingulo

Jan 30

Quarter 3 Pretest

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

Jan 9

Tutorial: How to build a HTML5 website from scratch

  • Objective: Build a responsive website
  • Use Google Doc assigned in Google Classroom for the directions and save when instructed.
  • Each day put a comment in the doc so you know where you left off.
  • It states explicitly when you need to stop for a grade.
  • The original is here http://www.lingulo.com/tutorials/css/how-to-build-a-html5-website-from-scratch. If you use any code from here, remember that it may be incorrect since changes have been made since it was orginally published.

Jan 5

Virtual: 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.
  • When you are done, export the jpg version and email it to me.

Dec 3

Remake one of the following images using Photoshop and/or Photopea

  • OBJECTIVE: In PhotoShop or Photopea utilize various tools to recreate a given image.
  • The explanation of the assignment can be viewed in here.
  • Starter image files to download are available here as well as in the student_files https://drive.google.com/drive/folders/14FBPZgZN4ju7c1C4dl-dtq2gRUkSGQ2c?usp=sharing
  • Save the images in your codesite assets folder.
  • Match the dimensions of the image.
  • Your cuts must be precise. Use multiple tools and make sure you zoom in.
  • When you are done, export the jpg version and email it to me.
  • Forrest Gump
    • The background is a California Wildfire.
    • Adjust Levels and Hue/Saturation on Forrest.
    • Apply drop shadow.
      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

 

Dec 13

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.
  • We will brainstorm for ideas of how to align our images without a table.
  • Hints
    • Remove all references to the table from the code. (tr, td, etc.)
    • Remove properties from the img src tag except for alt and title.
    • Create a class or selector for the images.
      • Forexample, you could call it .pic
    • Add appropriate properties to the new class.
      • object-fit: cover;
      • height: ;
      • width: ;
      • padding: ;
      • add any other properties you want
    • The images must still display three across on a desktop monitor.
    • Images must be full width on a phone. Therefore, you must have the class in your media query.

Dec 7-12

Create a pictures page with nine images in a table

  • Objective: Create pages using html and CSS.
  • Video Demo
  • 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 Creative Commons Licenses.
    • 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.
  • Create the new page and save it as pics.html in your mysite folder.
  • Do this by resaving your links 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
  • Show me when you are done for a grade.

Dec 5-6

Reformat all other pages to be like your index page or your links page

  • 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 codesite 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 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.
  • 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 open source or 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 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. Try to find images larger than 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.
  • One image needs to float left and the other needs to float right. Do this by creating a class for each.
  • 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.

Dec 1

  • Complete the Web Site Rubric for your site

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 Visual Studio Code 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.
  • We will remove one of the column divs and rename the other one as column100. <div class="column100">
  • DO NOT delete the row div.
  • And yes we could do this by simply removing both column divs.
  • This means we need to create a new style named column100. Meaning add .column100 to your styles.
    • Possible properties:
      float:
      padding:
      width:
      background-color:
      display:
      color:
      text-align:
  • 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.
  • Upload the page and preview it for a grade.

Nov 30

  • DUE: New index page

Nov 18

DUE: Media Query for new page

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.
  • Requirements:
    • Change the media query to make the page responsive at 400px.
      • Change the title.
    • Modify the links in the nav so they go to the home page and all of your other 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.
    • 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 17

Recreate index page

  • OBJECTIVE: Use div tags and CSS to control the layout of your page
  • Type the code in the image below. 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.
    examplefirsthomepage/indexnewmediaqueryandfooterdiv.JPG

Mobile Preview

index for w3schools

Desktop Preview

index for w3schools

 

Nov 17

Recreate index page

  • OBJECTIVE: Use div tags and CSS to control the layout of your page
  • Line 74 before the </style> tag

/* 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;
}

  • LINE 95 before the </style> tag

.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 16

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 on line 9
    <!--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>
  • Line 34
    /* 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;
    }
  • Line 58: Change the hover colors

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

Complete code from yesterday

  • Objective: Create pages using html and CSS.

Nov 15

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.
  • Within the row div add div tags with the class called column.
  • The code below should go on line 24

<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>
<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 fllowing code within the wrapper div without assistance.
    footer div

Nov 15

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.

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 index.html.

Type the code below on the line below the <body> tag

index2newdivs

Nov 14 (REMOVE FOR 2022-2023 and go to ASSIGNMENTS ABOVE FOR UPDATED PAGE)

Media Query

  • OBJECTIVE: Use a Media Query to make your page responsive
  • Add a media query and styling so your page is responsive.
  • Add styles to the Media Query to adjust the appearance of:
    • Type the code in the image below right before the </style>.
    • Do not make any changes yet. Once it is input preview your page and resize your browser window to see if the query is working. You should see a color change for the backgrounds of your <div> tags. If not, you need to locate the error.
    • The following selectors need to be included in the media query.
      • body
      • wrapper
      • header
      • left
      • right
      • footer
      • img
      • any other classes you added
    • Once the query is working you need to add properties for this items that you want or need to change to be responsive. ONLY add properties of items that need to be responsive. For example, if you have a font-size of 12 in the "regular" style for your body then you do not need to add it the media query.
    • If, for example, you want your images to be a certain size in the media query then you would add width: 250px; height: auto; to the img selector in the media query. This is just an example. In the image below the img tag is set at width: 95%;.
    • Images should be at least 95% width and nothing should be able to float next to them (HINT: float: none; clear: both;)
    • Your left and right divs need to be set to width: 100%; and they need to stack on top of each other so should have the same properties as the image.
    • Media Query
    • For more ideas, Google: "responsive mobile media query"

Nov 10

Finish Index page by moving your content

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.
  • Change the properties to your liking.
  • Move your email contact to the footer.
  • Video

Nov 9

Create additional div tags

  • YOUR PAGES HAVE BEEN UPDATED ON MY DOMAIN. IN THE FUTURE YOU WILL HAVE TO SEND ME AN EMAIL TO UPLOAD FOR YOU AS WE ARE HAVING ISSUES WITH W3SCHOOLS AND FILEZILLA
  • OBJECTIVE: Use div tags and CSS to control the layout of your page
  • Video Explanation
  • Add div tags within the wrapper class to change the display the content of the page.
  • This will be done together (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.
    <div class="header">HEADER</div>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
  • You must modify the style properties of each class so the divs are different.
  • Copy the styles below to the style area in your stylesheet. Once you are done, you will change the properties to your liking as you did with the wrapper style.
  • Copy the content from your page to the header, left and right columns. You should have one and one paragraph with the inline style and one picture on each side.
  • Show me when you are done.
  • The code below should be typed below the .wrapper class in the stylesheet.

    assn_images/index header and column css style 3.JPGassn_images/index header and column css style 3.JPGassn_images/index header and column css style 3

Nov 3-8

Extensions to install for VSC if needed

  • HTML Hint
  • Auto close tag
  • HTML CSS support
  • Live Server
  • Javascript ES code snippets
  • CSS peek
  • Path Intelligence

Start your own site

Build your index page in Visual Studio Code

  • Open Video Studio Code and then click File and Open Folder.
  • Open your codesite folder.
  • Open your index page and add the code below.
  • For the image, find your own image and save it to your assets folder with an appropriate name.
  • You can ignore most of the code unless you have not completed the previous code.org assignments. Everyone needs to add the paragraphs on lines 46 and 48.
    Code for body

Insert images on your page

  • OBJECTIVE: Download, insert and link appropriate images
  • Download a new image (if you don't have one) 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.
    • <a href="assets/picture.jpg"><img src="assets/picture.jpg" alt="Code for body" /></a>
  • Add a second image next to the first one which is also linked to itself.
  • Show me when you are done
  • Video:

Add a wrapper div to your home page.

  • OBJECTIVE: Use div tags and CSS to control the layout of your page
  • Brief explanation of styles (CSS), selectors, classes and divs.
  • 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.
  • Show me when you have made the changes to personalize it.

Add the following to the wrapper class:

  • OBJECTIVE: Use div tags and CSS to control the layout of your page
  • Video Explanation
  • Wrapper css code
  • When you first input the style, nothing will change as we have not input the selector class wrapper in the html. Therefore, nothing is applied yet.
  • Fix the paragraph appearance. Add or change the inline styles so it displays correctly.
  • Adjust the properties to your liking.
  • Fix the overall appearance of your page.
  • Your page must display well on the screen.
  • Add the <div class="wrapper"> to each of your pages as well as the </div>
  • Show me when you are done.

(REMOVE ASSIGNMENTS ABOVE UNTIL NOVEMBER 14)

Oct 31

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 the US/Veterans as Veteran's Day is coming up.
  • It must be styled in a way that represents the US/Veterans.
  • The simplest way to do this is to open your home 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 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 | Halloween | USA
  • 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. Meaning add styles in your css for this page.
  • 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.
    • 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.
  • Upload and show me for a grade.

Oct 26 (REMOVE UNLESS THEY EXPAND LIMITS)

W3Schools

  • Register for a free account.
  • Go to Spaces
  • Create a free space. Make sure the name is school appropriate.
  • Upload your site there.
    • Delete the copy of the index page they created. Rename the one you uploaded to index.html it should be called index-copy.html.
    • You will need to create the assets folder and then open it and upload your images into it.
  • You are limited to 30 total files.
  • Send me your URL.
  • Video: How to register and upload
  • Video: Upload pages

Oct 25

First Quarter Final

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

Oct 19

Quiz: Create another page, this should be your 6th 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
  • 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. Meaning add styles in your css for this 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 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.
  • Upload and show me for a grade.

Oct 17

Copy your pages from code.org to Visual Studio Code

  • Video of these directions
  • First we are going to clean out your previous website.
  • 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.
  • The final step is upload your site using Filezilla. We did this in October and you can go there to review the process.

Upload your site using Filezilla

  • Objective: Utilize an FTP application to connect to and upload files to a web server
  • Video directions
  • The host is respinola.com
  • The username is yourlastnamefirstinitial@respinola.com. Mine would be espinolar@respinola.com.
  • Your password will be explained in class.
  • Open Filezilla and use a new site and connect to the web server.
  • Upload your files.
    Filezilla

 

Sep 26-Oct 14

Lesson 14: Websites for a Purpose Due DUE September 27

Lesson 15: Team Problem Solving NOT ASSIGNED

Lesson 16: Sources and Research DUE September 30

Lesson 17: CSS Classes DUE October 3

  • Step 2: Change the height of the images at the top.
  • Step 3: Add a class for choleric
    • Apply it much like sanguine is applied.
    • Have at least four properties for the class.
  • Step 4a: add at least three properties to the class you create.
  • Step 6b: extra credit. Make sure you email me if you complete it.
  • 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 5

  • This should be a continuation of your previous work. If needed, go back to previous lessons and copy and paste your code. Or you can start with new code.
  • Each page needs at least two images. Therefore, you should have at least 12 images uploaded as you are making a total of six pages.
  • Project Guide - Website for a Purpose in Google Classroom

Lesson 19: Linking Pages DUE October 10

  • 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 11

  • You must have at least six pages. You home page plus five others.
  • 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.
  • 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 12

Aug 29

Pretest

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

Aug 29-Sep 26

Code.org

  • https://studio.code.org/s/csd2-2022?section_id=4197397
  • 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.
    Example

 

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

  • 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
  • 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.
  • Lesson 3: Headings DUE August 25
    • When you are done, send me an email with the lesson number as the subject saying you are done.
  • Lesson 4: Mini-Project: HTML Web Page DUE August 29
    • 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 30
  • Lesson 6: Styling Text with CSS DUE September 6
    • 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 9
    • 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 3-5 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.
      • 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 12
  • Lesson 9: Using Images DUE September 16
    • For step 6 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 7 of add a picture of something you're interested in.
    • For Step 8 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 19
  • Lesson 11: Styling Elements with CSS DUE September 19
    • 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 23
    • 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 September 26
    • 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.
    • Not Assigned:
      • Personal Web Page - Peer Review
      • Personal Web Page - Rubric
      • Computer Science Practices - Reflection

Aug 22

Course requirements/expectations

Assignment:

  • Complete registration for websites below.
  • Student Syllabus Verification

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