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.

Google Meet

Google meet-real time help (Not an assignment)

Classes will be streamed using the Meet link in Google Classroom. In addition, a video of the class will be posted on this page for notes, explanations, demonstrations etc. Class Meet: go to Google Classroom.

May 17

Make a responsive layout using CSS

  • Objective: Build a responsive website using HTML and CSS
  • Create a folder title mysiteNEW with an assets sub directory.
    • Save all site files there.
    • Copy the contents of "bootstrap-5.0.0-dist" folder in the student_files folder to your new "mysiteNEW" folder
    • Also copy the "bootstrap-5.0.0-examples" folder to your room305 directory. DO NOT copy this folder into your "mysiteNEW" folder.
      • The following examples will be used in your site.
        • Navbars: this will be used for your navigation
        • Features: use parts of this page to organize your other pages. For example, you could copy the entire <div class="container px-4 py-5" id="custom-cards"> to include that section in one of your pages.
        • Cover: good, simple starter page for your index page or a subpage.
        • Headers: You will use one of these headers on each of your pages.
        • Blog: use for one of your content pages.
        • Album: use for your pictures page.
        • Carousel: must be on at least the index page.
        • Product: Can be used for one of your subpages.
        • starter-template: Can be used for one of your subpages.
  • Each page must have the same header, navigaiton and footer.
  • Your layout will be similar to images below.
    Index PageSub Page
  • If your site is about you, then include the following pages.
    1. Home
    2. Links/Resources
    3. Pics/Gallery: use the Album page from the bootstrap
    4. A page containing two embedded videos
    • Pick 8 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 (without personal contact info).
      10. A page about your favorite class.
      11. A page about something local such as Winnemucca, Lowry, Nevada, etc.
  • If you can't think of a site to make, create a website for a food truck or restaurant.
    • Home
    • Menu-Food items
    • Feedback/Comments
    • About/History
    • Pics/Gallery
    • Staff
    • Contact
    • Other pages for a total of 12
  • You will receive a weekly grade for your progress on your site.
    • Evidence of progress will be notes you make in your code.
    • You will also be saving screenshots of both pages of your site. One needs to be full screen and the other mobile.
    • Make a new page to hold the pics so they can be uploaded to your site.
    • The files will be saved as the date and the page. For example, "12-11-21 index full.jpg" and "12-11-21 index mobile.jpg" and "12-11-21 sub full.jpg" and "12-11-21 sub mobile.jpg".
  • Wrapper (container), Header, Menu, left and right content areas (main and sidebar), footer.
  • Divide the footer into three columns using divs.
  • Add divs to the sidebar.
  • The nav bar in the menu should be responsive and have at least one dropdown. Just use <a href ="#">Link</a> for the links for now. These will be changed later to the actual pages as you create them.
  • Make an external stylesheet.
    • This will be from bootstrap.
    • Organize your styles by order of appearance in the page.
    • And use comments.
  • Modify heading styles as well as styles for text in the body to make them your own.
  • Responsive for desktop, tablet and mobile.
  • Use place holder images and text https://loremipsum.io/ and https://loremflickr.com/.
  • Upload using Filezilla to the Go Daddy server. I will supply the FTP info.
  • Examples
    • http://www.os-templates.com/premium-website-templates/transform
    • https://templated.co/solarize
    • https://w3layouts.com/preview/?l=/radiant-energy-industrial-category-bootstrap-responsive-web-template/
    • https://templated.co/p/9265150585917340
    • https://www.w3schools.com/css/css_templates.asp
  • use the @font-face rule or https://developers.google.com/fonts/docs/getting_started
  • Incorporate http://fontawesome.io/
  • Create a favicon.
  • Create a custom logo for your business/you.
  • Carousel: use the carousel from bootstrap
    • OWL Carousel
    • BootStrap
    • W3 Schools
    • GitHub
    • jcarousel
    • Must have a caption on the pictures and must be linked.
  • Social Media icons
  • Social Media feed(s)
  • FACEBOOK (View PDF Directions)
    • Once installed change the account from lowryhighschool and change some of the settings such as width, header, data, etc.
    • Step 1: Include the JavaScript SDK on your page once, ideally right after the opening body tag.
      <div id="fb-root"></div>
      <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
    • Step 2: Place this code wherever you want the plugin to appear on your page.
      <div class="fb-page" data-href="https://www.facebook.com/lowryhighschool/" data-tabs="timeline" data-width="300px" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
      <blockquote cite="https://www.facebook.com/lowryhighschool/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/lowryhighschool/">Albert M Lowry High School</a></blockquote></div>
    • The code above inserts a the stream below.
  • FACEBOOK IFRAME METHOD
    • <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fnba&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

  • TWITTER
    • <div class="editor-pics twitter">
      <a class="twitter-timeline" href="https://twitter.com/LowryHigh" data-widget-id="543900127291658240" width="300" height="400" data-link-color="#0066ff"
      data-border-color="#0066ff" data-chrome="noheader light">Tweets by @LowryHigh</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
      <div class="clearfix"></div>
      </div>
    • Twitter 1
    • Twitter 2
    • Twitter 3

  • <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>My Great Business Inc.</title>
    <!-- for-meta-tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="One brief sentence about your website/business." />
    <meta name="keywords" content="YOU NEED TO ADD YOUR OWN KEY WORDS" />
    </head>

April 30

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.

SUBMITTING YOUR WORK

  • To submit your work, you will need upload the Dharma folder to your personal website.
  • This will be done with Filezilla.
  • The Dharma folder must be uploaded as a subdirectory (folder) of your site. The first image shows the Dharma folder inside the your room305 folder.
  • The second image in Filezilla shows the local folder (the one on your computer) and the remote folder (the web server). This is where you would upload your Dharma folder.
    FileZilla upload 1
    FileZilla upload 2
  • For example, a link to Caden's Shrek page is http://www.respinola.com/monteroc/shrek.html.
  • Your Dharma content should be in a subdirectory of your site, such as Dharma Yoga Starter Files.
  • If I uploaded Dharma as a subdirectory my link would be something like http://respinola.com/webdesign1/Dharma%20Yoga%20Starter%20Files/index2.html
  • This is simply copied from the address bar.
  • Each time you finish a video, send me an email (respinola@hcsdnv.com). Use the subject "Yourname Dharma Video #_"
    • In the email send me a link to your work.

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

May

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.
    Dharma 3-1
    Dharma 3-2

May

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>

    Dharma 4

May

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.
    Dharma 5-1

    Dharma 5-2

    Dharma 5-3

May

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

May

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

Apr 14

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.
    • The easiest way to do this is to copy the files from your mysite folder and paste them into the Lingulo folder since it has many other files that are linked to the index page.
  • 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.
  • 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.
  • 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.
  • Show me.

Apr 13

Tests

Mar 17

Tutorial: How to build a HTML5 website from scratch

Mar 17

Upload your site

  • Objective: Utilize an FTP application (Filezilla) to connect to and upload files to a webserver
  • Upload your site using Filezilla. We did this in October and you can go there to review the process. When you are ready, I will give you your new password to access the webserver on GoDaddy.

Mar 16

Copy your pages from code.org to brackets

  • Video of these directions
  • First we are going to clean out your previous website.
  • Go to the room305 network directory and delete all of your files. You should only have a mysite folder and an assets folder within the mysite folder.
  • Open each of your pages in code.org.
  • Copy the code and paste it into a new page in Brackets.
  • Save the file using the same name you used in code.org. Otherwise your links will not work.
  • These need to be saved in you mysite folder in your directory in room305.
  • Make sure you save your stylesheet.
  • Download all of your images to your assets folder.
  • Change the code for your images to include the assets folder.
    • If you 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. When you are ready, I will give you your new password to access the webserver on GoDaddy.

Mar 15

DUE all of code.org

Feb 22

Lesson 14: Websites for a Purpose Due February 22

Lesson 15: Team Problem Solving NOT ASSIGNED

Lesson 16: Sources and Research DUE February 26

Lesson 17: CSS Classes DUE March 1

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

Lesson 18: Planning a Multi-page Website DUE March 4

  • 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.
  • Project Guide - Website for a Purpose in Google Classroom

Lesson 19: Linking Pages DUE March 8

  • Step 3: The link to the index must match the one on other pages.
  • Step 7: Name the new page hairtips.html follow the comments in the code.
  • Step 8: Complete all.

Lesson 20: Project - Website for a Purpose DUE March 9

  • You must have at least five pages.
  • Each page must be full of content. This must include text as well as images and video.
  • 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
    • Example

Lesson 21: Peer Review and Final Touches NOT ASSIGNED

 

Post-Project Test DUE March 10

Jan 13-14

Tests

Jan 4

Code.org

  • 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

  • Lesson 1: Exploring Web Pages DUE January 7
  • Lesson 2: Intro to HTML DUE January 7
    • When you are done, send me an email with the lesson number as the subject saying you are done.
  • Lesson 3: Headings DUE January 7
    • 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 January 14
    • 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 January 14
  • Lesson 6: Styling Text with CSS DUE January 21
    • 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 January 26
    • 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 4-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 January 28
  • Lesson 9: Using Images DUE January 28
    • For step 8 of Lesson 9 add a picture of something you're interested in.
    • For step 9 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.
    • 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 February 8
  • Lesson 11: Styling Elements with CSS DUE February 12
    • 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: Complete all activities
    • Step 9: Add at least two other rules to the css with appropriate properties for both. Use hexadecimal color codes for these.
    • Step 10: Complete all activities except Challenge: Animal Webpage and Challenge: Dessert Webpage.
      • Either of the last two 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 February 15
    • 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 February 17
    • 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 5:
      • 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.
    • Use the share button and copy your URL in to the email.
      Share URL
    • Not Assigned:
      • Personal Web Page - Peer Review
      • Personal Web Page - Rubric
      • Computer Science Practices - Reflection

Dec 11

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

DUE Unit F

In class and Virtual: Remake one of the following images using Photoshop and Photopea

  • OBJECTIVE: In PhotoShop and Photopea utilize various tools to recreate a given image.
  • The explanation of the assignment can be viewed in your Google Classroom.
  • Starter image files to download https://drive.google.com/drive/folders/14FBPZgZN4ju7c1C4dl-dtq2gRUkSGQ2c?usp=sharing
  • 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.
  • 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.
      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

Nov 9

HTML5 CSS3 Book: Unit F

  • OBJECTIVE: Insert and modify different image types
  • Download Student Files-zip
  • Unit: Lakeland
    • Save work into the Unit F Folder
    • Code for Figure on page 135. Make sure you paste to the correct lines in the html.
    • <figure>
      <img src="images/sun.jpg" width="369" height="268" alt="a bedroom with large windows and a desk, dresser, and queen bed" title="" />
      </figure>
    • <figure>
      <img src="images/reed.jpg" width="370" height="277" alt="a bedroom with a tall window, a dresser with mirror, and a queen bed" title="" />
      </figure>
    • <figure>
      <img src="images/tree.jpg" width="370" height="277" alt="a low-ceilinged bedroom with a woodgrain wall and a queen bed" title="" />
      </figure>
    • <figure>
      <img src="images/garden.jpg" width="370" height="277" alt="a bedroom with ornate wood moldings and a magnifying lens perched above a fireplace" title="" />
      </figure>
  • Independent Challenge 2: Soccer Site
  • Digital Assignment
    • Take: HTML5 and CSS3 Complete HTML5 and CSS3 Complete Unit F: Inserting and Working with Images on Quizlet
      • See directions below (Sep 10).
      • AFTER completing the work in Quizlet, submit the form in Google Classroom
  • Real Life Independent Challenge
    • Follow steps/requirements on page 155.
    • Create an additional page about Veteran's Day or Thanksgiving. This should be a total of five pages.
      • Include information about the holiday.
      • Format the page according to the holiday selected. It will not look like your other pages.
      • To change the formatting for this page so it does not match your other pages do not link the page to your stylesheet.
      • Embed the styles for the new page in the <head> tag of the page using a <style> </style> tag.
      • One way to do this is to copy all of the styles from your stylesheet and paste them between <style> </style>.
      • Then modify your existing styles for the new page.
    • Add at least two images and information to each page.
      • Make sure you save the images in your assets folder.
    • Create a favicon for your website
    • Add overlay captions to the images on your new page rather than the figcaption option the books says to use.
    • Another option is at: https://www.w3schools.com/howto/howto_css_image_text_blocks.asp.
    • Upload your entire site and show me the preview.

Oct 26

DUE: HTML5 CSS3 Book: Unit D

HTML5 CSS3 Book: Unit E

  • OBJECTIVE: Students will have mastered the material in Unit E when they can: Understand links; Create relative links; Create absolute links; Style links with CSS pseudo-classes; Open links in new windows or tabs; Links to anchors; Create a link to a document; Increase navigational accessibility
  • Download Student Files-zip
  • Unit: Lakeland
    • Save work into the Unit E Folder
    • Code for Figure E-3 on page 105
      <div>
      <p id="mainnav">
      <a href="index.html">Home</a> |
      <a href="aboutus.html">About Us</a> |
      <a href="rooms.html">Rooms</a> |
      <a href="reserve.html">Reservations</a> |
      Local Weather |
      Directions
      </p>
      </div>
    • Code for Figure E-7 on page 109
      #mainnav a:link {
      color: black;
      }
      #mainnav a:visited {
      color: #422100;
      }
      #mainnav a:hover {
      color: white;
      }
      #mainnav a:active {
      color: #422100;
      }
    • Code for Figure E-123 on page 113
      <div>
      <p id="pagenav">
      <a href="#sun">Sun Room</a> |
      <a href="#reed">Reed Room</a> |
      <a href="#tree">Treehouse</a> |
      <a href="#garden">Garden Room</a>
      </p>
      </div>
    • Code for Figure E-13 on page 113
      a:link {
      color: #422100;
      }
      a:visited {
      color: #422100;
      }
      a:hover {
      color: black;
      }
      a:active {
      color: #422100;
      }
      #pagenav a:link {
      color: white;
      }
      #pagenav a:visited {
      color: #D7C39C;
      }
      #pagenav a:hover {
      color: #C6A971;
      }
      #pagenav a:active {
      color: white;
      }
    • Code for Step 4 page 116 Figure E-16
      <!--[if lt IE 9]>
      <script src="scripts/semantic.js"></script>
      <![endif]-->
  • Independent Challenge 2: Soccer Site
  • Digital Assignment
    • Take: HTML5 and CSS3 Complete Unit E: Getting Started with HTML Review on Quizlet
      • See directions below (Sep 10).
      • AFTER completing the work in Quizlet, submit the form in Google Classroom
  • Real Life Independent Challenge
    • Create three additional pages. Make sure you have links to all of the pages on each page.
    • The pages must be content (information), not pictures.
    • Ignore the first sentence on part e of the directions.
    • You DO NOT have to put in the To Top link or named anchors.
    • You can use the stylesheet you created earlier, but it must be MODIFIED. This means change more than just the colors.
    • There must be a hover effect on the link
    • Upload and show me the preview.

Oct 14-16

  • Objective: Utilize an FTP application (Filezilla) to connect to and upload files to a webserver
  • 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 complete the information and click Quickconnect.
  • In the left window browse to your mysite folder.
  • Upload your files by selecting the files in your mysite folder. Right click and select Upload or drag and drop them to the webserver in the right window.
  • The URL to your site is respinola.com/lastnamefirstinitial/ or go to http://www.respinola.com/students/
    Filezilla

Oct 7

HTML5 CSS3 Book: Unit D

  • Objective: Students will have mastered the material in Unit D when they can: Assess Web fonts, Declare a font family, Declare font sizes, Implement bold and italics, Change font colors, Change background colors, Use special characters, Provide alternative style sheets.
  • Download Student Files-zip
  • Unit: Lakeland
    • Save work into the Unit Folder
  • Independent Challenge 2: Soccer Site
  • Digital Assignment
    • Take: HTML5 and CSS3 Complete Unit D: Getting Started with HTML Review on Quizlet
      • See directions below (Sep 10).
      • AFTER completing the work in Quizlet, submit the form in Google Classroom
  • Real Life Independent Challenge
    • Create a new folder in your mysite folder named fonts.
    • You will add to/modify your stylesheet from the Unit C.
    • Make sure you complete steps B-G on page 99.
    • You MUST use the @font-face mentioned in STEP B.
      • Create a subdirectory named fonts in your mysite folder.
      • You can use the code below but you have to change the fonts to those that you download to your fonts folder.
        • @font-face {
          font-family: 'SansitaSwashed-Regular';
          src: url(fonts/SansitaSwashed-Regular.ttf);
          }
        • body{/*this would apply the font to all text in the page*/
          font-family: "SansitaSwashed-Regular", "Arial", "serif";
          }
        • To apply it to only one section, add the font-family property to one of your style selectors in your CSS such as h1, h2, p, etc.
      • You can download fonts to your fonts folder from https://fonts.google.com/ these will be zip files. You will need to extract them into your fonts folder.
      • Please ask if you need help.
    • For STEP C use a font stack for H1 and H2 tags and also P tags. Examples (DO NOT USE THESE):
      • h1, h2 {
        font-family: georgia, "times new roman", serif;
        }
      • p {
        font-family: "Segoe UI", Verdana, sans-serif;
        }
    • For STEP D use at three different colors in the page. You can do this directly in Brackets. These can be either font colors or background colors. Use RGB or hexadecimal format. Example:
      • p {
        color: #00ff00;
        background: rgb(218,165,32);
        }
    • Use TWO EXTERNAL style sheets.
      • The second style sheet is for a printable version of the page as you did for the Lakeland site.
    • Upload using Filezilla and show me the preview.

Sep 30

Tests

Sep 15

HTML5 CSS3 Book: Unit C

  • Objective: Students will have mastered the material in Unit B when they can: Assess the history of HTML, Compare HTML and XHTML, Create an HTML document, Set up the document head and body, Add Web page text, Preview your Web page, Implement one-sided tags, Validate your HTML code
  • A PDF version of the book is in the student_files folder.
  • Unit: Lakeland
    • Save work into the Unit C Folder as instructed in the book.
  • Independent Challenge 2: Soccer Site
  • Digital Assignment
    • Take: HTML5 and CSS3 Complete Unit C: Getting Started with HTML Review on Quizlet
      • See directions below.
      • AFTER completing the work in Quizlet, submit the form in Google Classroom
  • Real Life Independent Challenge
    • This is your personal web site.
    • Create a folder in your network folder and name it mysite.
    • Create a personal site about you or a site for a fake or real business or organization, such as a store, restaurant, school, local business, government agency, charity, etc.
    • The site must be realistic and professional.
    • Create only the home page. It should look like the one for Lakeland or the Soccer site. But make it your own.
    • Other CSS selectors you can try: https://www.w3schools.com/css/css_selectors.asp
    • Follow the requirements on page 73.
    • Save the files for this folder.
    • Possible pages of content for the future. The only one required now is the index page.
    • Content means actual information. You can use information from the interweb but DO NOT copy and paste. You must cite your source(s).
    • Any information you get from the internet must be free to use. DO NOT USE COPYRIGHTED information or images.
    • The content must fill the page.
    • Upload and show me for a grade.
    • If you're not sure what to build, try one of the following.
      • 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.

Sep 10

HTML5 and CSS3 Book: Unit A

  • Objective: Students will have mastered the material in Unit A when they can: Assemble a project plan, Create a storyboard, Implement Web accessibility standards, Evaluate Web site usability, Manage Web browser compatibility issues, Practice good file management, Configure your FTP client Upload Web site files.
  • Copy UNIT A Data Files from the student_files folder to your room305 folder. Your work must be saved here so I have access to it.
  • You will also back these up to your your school Google Drive. This must be done to download them at home. Or you can use a flash drive to transport files back and forth.
  • Complete Unit A
    • A PDF version of the book is in the student_files folder.
    • You can read the the information from pages 1-11, but the activities begin on page 12.
      • Intro to basic HTML Basic Tags.
        • w3schools as a reference for tags
      • How to upload and use Filezilla.
        • For now we will skip using FTP as this will be covered later.
  • Digital Assignment
    • Take: HTML5 and CSS3 Complete Unit A: Preparing to Create a Website Review on Quizlet
    • See directions below
    • AFTER completing the work in Quizlet, submit the form in Google Classroom

HTML5 and CSS3 Book: Unit B

  • A PDF version of the book is in the student_files folder.
  • The work starts on page 30 but you are responsible for the information on the pages up to this point.
    • Together, we will go over the use of Brackets, how and where to save, code errors (they're in red), and how to preview your work in Chrome.
  • Digital Assignment
    • Take: HTML5 and CSS3 Complete Unit B: Getting Started with HTML Review on Quizlet
      • See directions below.

Quizlet Digital Assignment:

  • You must complete the Learn section before taking the test.
  • This means to receive a grade for the test you must show that you covered ALL of the items in the Learn area. All items must all be listed under Familiar or Known Well. Or, put another way, there must be 0 in Remaining.
  • Complete the form in Google Classroom when you are done with all of it so I can check your score.
  • DO NOT submit this until you have completed the Learn Section, meaning you have in 0 Remaining.

    quizlet

    Quizlet completed areas


  • quizlet grades



Sep 8

Course requirements/expectations

  • Syllabus: parents must reply to the email to respinola@hcsdnv.com for verification of syllabus.
  • Assignments will be listed by the first date class meets for that week. This will typically be the Mon./Wed. group. Due dates will be the same. This means that if a due date is listed as Oct 10, add a day if you are in the other (Tues./Thurs.) group.

Digital Assignment:

  • Complete registration for websites below.
  • Distance Learning Assessment
  • Student Syllabus Verification

Join Google Classroom

Join Quizlet

Join code.org

  1. This will be used later for Digital Learning.
  2. Create a Code.org account with your school email address. If you already have a Code.org account, skip this step.
  3. Visit this link to join your section: https://studio.code.org/join/LVXJRJ Use you real name for your display name.
  4. Signing in with Personal Login
    1. Go to www.code.org and click the 'sign in' button.
    2. Sign in using the email and password you created.

The following need to be done to work at home on Digital Learning Days

  • REQUIRED: To upload your site. This will be done later in the semester. You can contact me if you have forgotten your FTP info. You need to download and install Filezilla.