Mr. Espinola: Web Design 1 Assignments

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

May 16

Copy the folder Responsive Web Design Student Data Files from your student_files folder to your network folder

Responsive Web Design Chapter 5

Practice: Follow the directions
Analyze Correct Improve
Lab 2: Wildlife Rescue Organization
Your Turn: Personal Portfolio Website

May 14

Copy the folder Responsive Web Design Student Data Files from your student_files folder to your network folder

Responsive Web Design Chapter 4

Practice: Follow the directions
Analyze Correct Improve
Lab 2: Wildlife Rescue Organization
Your Turn: Personal Portfolio Website

May 10

Copy the folder Responsive Web Design Student Data Files from your student_files folder to your network folder

Responsive Web Design Chapter 3

Practice: Follow the directions
Analyze Correct Improve
Lab 2: Wildlife Rescue Organization
Your Turn: Personal Portfolio Website

May 5

Copy the folder Responsive Web Design Student Data Files from your student_files folder to your network folder

Responsive Web Design Chapter 2

Practice: Follow the directions. This is saved in the Chapter folder in the Responsive Web Design Student Data Files folder that you copied to your folder.
Analyze Correct Improve: Saved in the Analyze folder
Lab 2: Wildlife Rescue Organization: Saved in the lab2 folder.
Your Turn: Personal Portfolio Website: Saved in the folder you create.

May 4

Copy the folder Responsive Web Design Student Data Files from your student_files folder to your network folder

Online Course: https://k12.cengage.com/portal/Launch/Index?enrollmentID=10509406&enrollmentType=course

Maybe: https://login.cengagebrain.com/course/MTPN-GKBZ-9HMV

Book: https://nglsync.cengage.com/portal/Launch/Course/NGLSYNC1111994

Responsive Web Design Chapter 1

Practice: Follow the directions and you are making the index page.
Analyze Correct Improve
Lab 2: Wildlife Rescue Organization
Your Turn: Personal Portfolio Website

Apr 8

Remake your site

Convert the Dharma site you created into your own personal website. This should be done in the Dharma folder.

Your starting point is the take your content and replace the content of the Dharma homepage. This needs to include all content, including images.

Change the color scheme in the css to your liking.

Dharma only has one page so you will have to create other pages based on the Dharma layout. This means you will create a new page for each of your existing pages. Such as your links page, your pictures page, your USA page, etc.

Must include:
- Links to your pages in the menu and dropdown menu.
- Your own favicon. (See Below.)
- Your own graphics.
- Change the social media icon links to different accounts.
- Change the location of the embedded map.
Must be uploaded to receive credit.
Video Example

Create a favicon for your website

Quality counts.
Save the PSD file in your img or assets folder to prove you made the image.
https://www.templatemonster.com/help/how-to-create-ico-favicon-with-photoshop.html
Insert the favicon on all of your pages. The code goes in your head tag.
- <link rel="icon" href="img/favicon.ico" type="image/x-icon" />

Mar 20

Dharma Yoga Responsive HTML and CSS Website Tutorial

OBJECTIVE: Use HTML5 and CSS3 to build a responsive website
The starter files are in your student_files folder in the room305 directory for the Dharma Yoga website.
- Copy and paste this folder into your room305 directory.
The videos are embedded here and can also be viewed at https://youtube.com/playlist?list=PLuontq-Qa9ruMkPWR474g5CxP4jT2FD23
Videos are also in a folder named Dharma Videos in the student_files directory.

SUBMITTING YOUR WORK

To submit your work, send me an email stating wich video you are done with.

Dharma Yoga Responsive HTML and CSS Website Tutorial

OBJECTIVE: Use HTML5 and CSS3 to build a responsive website
Save each index page with the video number at the end. E.g. index1.html, index2.html
When You are working on video 1 your index page is saved as index1.html.
When you go to video 2 click on File and Save As index2.html.
This means that by the time you are done you will have 7 different index pages and 7 different style sheets.
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. For example,
- CHANGE <link type="text/css" rel="stylesheet" href="styles/style1.css" media="screen">
- TO <link type="text/css" rel="stylesheet" href="styles/style2.css" media="screen">
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 or the pictures will not display.

Dharma Video 1

Dharma Video 2

At the end of video 2, your page should look like the image below and the slider should function.
Make sure your preview it and test it.
Follow the directions above to upload.

Mar

Dharma Yoga Responsive HTML and CSS Website Tutorial

OBJECTIVE: Use HTML5 and CSS3 to build a responsive website

Dharma Video 3

At the end of video 3, your page should look like the images below.

Mar

Dharma Yoga Responsive HTML and CSS Website Tutorial

OBJECTIVE: Use HTML5 and CSS3 to build a responsive website

Dharma Video 4

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.
Use the following for the social links.
<ul class="social"> <li><a href="https://www.facebook.com/w3newbie" target="_blank" title="Like Business on Facebook"><i class="fa fa-facebook"></i></a></li> <li><a href="https://twitter.com/DrewOnCue" target="_blank" title="Follow Drew on Twitter"><i class="fa fa-twitter"></i></a></li> <li><a href="https://youtube.com/user/DrewOnCue" target="_blank" title="Subscribe to Drew on YouTube"><i class="fa fa-youtube"></i></a></li> </ul>

Mar

Dharma Yoga Responsive HTML and CSS Website Tutorial

OBJECTIVE: Use HTML5 and CSS3 to build a responsive website

Dharma Video 5

At the end of video 5, your page should look like the images below.

Mar

Dharma Yoga Responsive HTML and CSS Website Tutorial

OBJECTIVE: Use HTML5 and CSS3 to build a responsive website

Dharma Video 6

At the end of video 6, your page should look like the images below.

Mar

Dharma Yoga Responsive HTML and CSS Website Tutorial

OBJECTIVE: Use HTML5 and CSS3 to build a responsive website

Dharma Video 7

At the end of video 7, your page should look like the images below.

Mar 8

Recreate your personal site

All other pages should be done
There should be a total of 10 pages.

Feb 14

Recreate your personal site

Home pages should be done

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.
Immediately above <nav> add this line of code: <p> </p>
- This will help create space for your links.
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.
Star Wars

Find the C3PO and R2D2 at Lucasfilms

Jaws

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

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.
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.
- Video to create classes for pictures
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.
  - 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 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.

Mobile Preview

Desktop Preview

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

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

Insert the fllowing code within the wrapper div without assistance.

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>

<head>

<title>CSS Website Layout</title>

</head>

<body>

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

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

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

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.

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

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.

Sep 26-Oct 14

Lesson 14: Websites for a Purpose Due DUE September 27

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

Lesson 15: Team Problem Solving NOT ASSIGNED

Lesson 16: Sources and Research DUE September 30

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

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.

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

Create an account: https://studio.code.org/teacher_dashboard/sections/1694897/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.
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
- 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 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.
  - use rgb color codes

Lesson 8: Intellectual Property DUE September 12

Licensing Your Work - Activity Guide Google Classroom

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
- Define Your Web Page - Activity Guide Google Classroom

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

Syllabus: parents must reply to the email to respinola@hcsdnv.com for verification of syllabus.

Assignment:

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

Join Google Classroom

Join code.org

You must sign in with your Google Classroom account.
Go to www.code.org and click the 'sign in' button.
Choose 'Continue with Google'.
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.