Web Design - Assignments


week 15: Dec 10 - Dec 14

 

week 14: Dec 3 - Dec 7

  • Complete: css_lesson_1: stylesheets & metatags
    - upload both new files to x10, add a link to the html page on your index and upload it

  • Biography Project (due Wed Dec 19)
    - use lesson 11 as a template to get started
  • Final Website Project (due Mon Jan 14)

 

 

week 13: Nov 26 - nov 30

  • Travel Project (due Wed Nov 28)
  • Complete: css_lesson_1: stylesheets & metatags (due Fri Nov 30)
  • Biography Project(due Wed Dec 19)
  • Final Website Project (due Mon Jan 14)
  • Travel Projects
    - Create a blog post that has a hyperlink to your travel page
    - also include a short reflection about your project:
    - For example: what problems did you encounter, what parts did you spend the most time on, what would you do differently next time, etc.
    - then visit the rest of the blogs and view the travel projects
    - leave a detailed comment about something that you like, and possibly a suggestion of something that could be done differently next time

week 12: Nov 19 - Nov 21

 

Week 11: Nov 13 - Nov 15

  • Travel Project (due Wed Nov 28)
  • Biography Project (due Wed Dec 19)
  • Final Website Project (due Fri Jan 11)

week 10: Nov 5 - nov 9

  • Complete: html_lesson_13: special characters, blockquote
  • Complete: html_lesson_14: image borders, Google fonts
    - html_13 & html_14 are due online by Friday Nov 9
    *** this is the end of the "must do" lessons ***

  • Begin: Travel Project

Helpful Color Sites:

  • colorpicker.com
  • color-hex (helps with complimentary colors in the palettes section)
  • coolors.co (color theme generator)

    *** these next 6 are optional but highly recommended - required for honors option ***

 

week 9: Oct 29 - Nov 3

week 8: Oct 22 - Oct 26

 

week 7: Oct 15 - Oct 19

 

week 6: Oct 9 - Oct 12

 

week 5: oct 1 - oct 5

 

week 4: sep 24 - sep 28

  • All Pixlr Lessons:
    - due on blogs by Wed/Thu this week

  • Complete: html_lesson_3 - images
    - (due by Wed/Thu this week)

  • Create: index.html
    -
    (due by Wed/Thu this week)
    -
    make a new file in notepad++, call it index.html, and save it in your desktop web design folder
    - add links to your three lessons
    - when ready I can show you how to upload your pages to your website

  • Complete: html_lesson_4 - using color codes
  • Complete: html_lesson_5 - working with fonts and text styles
  • Complete: html_lesson_6 - aligning images with text
  • Complete: html_lesson_7 - lists
  • Complete: html_lesson_8 - line breaks, inline frames

  • All caught up?
    - help others
    - make your index page more interesting to look at
    - play around with adding a test.html page if you like

 

 

week 3: Sep 17 - Sep 22

  • Complete: Pixlr Practice Assignments
    - Lesson 3 - magic wand, layers, color selection
    - Lesson 4 - clone stamp tool
    - Lesson 5 - combining photos
    - Lesson 6 - adding text

  • Logo Design: at least three logos for your practice website
    - for now make them each 800px wide by 150px high 
    - you will need these later for our html lessons
    - create a folder called images inside of your web folder on the desktop & put the logo images in there

  • Complete: html_lesson_3 - images

  • Create: index.html
    -
    make a new file in notepad++, call it index.html, and save it in your desktop web design folder
    - add links to your three lessons
    - when ready I can show you how to upload your pages to your website

  • If you are caught up
    - create a test.html page where you experiment with html code
    - be a consultant to classmates who might have questions that you can anwer

Vocab Week 3

  • ftp - file transfer protocol - the way that files can be transferred from a computer to the internet (often used in website development)

 

week 2: Sep 10 - Sep 14

  • View: Image Types
  • View: Images, Pixel, and RGB

  • Complete: html lesson 2 - headings, hyperlinks
    - due in google folder by Fri Sep 14

  • Complete: Pixlr Practice Assignments
    - Lesson 1 - filters
    - Lesson 2 - crop, resizing
    - Lesson 3 - magic wand, layers, color selection
    - Lesson 4 - clone stamp tool
    - Lesson 5 - combining photos
    - Lesson 6 - adding text

  • Logo Design: at least three logos for your practice website
    - for now make them each 800px wide by 150px high 
    - you will need these later for our html lessons
    - create a folder called images inside of your web folder on the desktop & put the logo images in there
  • Set up: X10 account
    - use a personal email rather than your SHS one

Vocab Week 2

  • gif - Graphics Interchange Format - an image file with limited color (256) - best for images such as clipart - can be used for animations
  • jpeg or jpg: Joint Photographic Experts Group - an image file with high quality color and resolution - often used for photographs
  • png - Portable Network Graphic - intended as a replacement for the GIF file type - does not support animations
  • pixel: PIX (picture) Element - the smallest unit on a display screen or in a digital image
  • rgb (red, green, and blue): refers to a system for representing the colors to be used on a computer display. Red, green, and blue can be combined in various proportions to obtain any color in the visible spectrum.
  • compress: to decrease the number of bits used to represent a piece of information
    • lossless compression - data (number of bits) is compressed in a way that the preserves all data and allows full recovery - gif, wav and png files use this method
    • lossy compression - some data (bits) gets thrown away meaning you cannot recreate the original file later - this is used in jpg and mp3 files

 

Week 1: Sep 5 - Sep 7

  • Homework: 3 Things - Mon Sep 10/Tue Sep 11
    - 2 items of personal interest
    - 1 item of technology (not phones, or laptops)
  • View: Computer Science is Changing Everything
  • Discuss: Class Protocols & monthly work rubric
  • Create: Google Folder for this class - share with me: mkelly@sandwich.k12.ma.us
    - also be sure I have editing permission
  • Create: Blog for this class - Blogger is easy to use but you can use another site if you prefer
    - send link to me: mkelly@sandwich.k12.ma.us (be sure this is the actual blog link and not your dashboard....)
  • Discussion: Domain Names, Web Sites, local vs live
  • Complete: html_lesson_1 (we will do this together in class)
  • Complete: html_lesson_2
  • Set up: X10 account

    Vocab Week 1
    • body section- the text of the actual page itself
    • domain name system (DNS): maps internet domain names to the internet protocol network addresses they represent and allows websites to use names, rather than difficult-to-remember IP addresses
    • file extension - a group of letters occurring after a period in a file name, indicating the format of the file, this lets the computer know which programs to use to open it
    • head section - the brain of the page - information in here is used to help create the page (titles, keywords, etc)
    • HTML- Hypertext Markup Language
    • Internet Protocol (IP) - the way devices communicate with each other
    • Internet Protocol (IP) addresses: a unique string of numbers separated by periods that identifies each computer/device using the Internet Protocol to communicate over a network.
      - IPV4 is a 32-bit address and allows for up to 4.3 billion addresses (packets of 4)
      - newer IPV6 is 128-bit address and allows for up to 3.4×1038 =  (340 undecillion addresses) (packets of 16)
    • paragraph tag - indicates the text is a new paragraph (will usually add a line of space) <p></p>
    • tags - (or elements) are specific pieces of code that mean something to the browser - these are always surrounded by a pair of brackets <> - this is an example of a head tag: <head> - a backslash / is added to indicate the end of a tag: </html>
    • title tag - included within the HEAD section - it is where the browser will find the text title to diplay for the page
      <title></title>
    • top level domain (TLD) - the last segment of the domain name - the letters immediately following the final dot in an Internet address (.org, .com. net., .au, etc)
    • url (uniform resource locator) - an easy-to-remember address for calling a web page (like www.google.com)