Welcome to Web Design & Interactive Websites 35S!
Assignments & Activities
Assignments will be added to the table below as they are introduced in class. Any useful links, handouts, or additional information will be provided in the form of a hyperlink :)
Assignment Name |
Description |
Due Date |
In 2013 the world's first true website, created by Tim Berners-Lee of CERN in 1992 and published in 1993, was restored to the web for your viewing pleasure :) For More Information:
|
N/A |
|
This assignment gives you an opportunity to familiarize yourself with Weebly.com, which you will be using to create your very first drag-and-drop website. It also provides you with a public platform to display your learning when it comes to the origins of the internet and websites!
|
Weebly Web Quest Tuesday, February 16th |
|
Internet Health & Safety: Mini-Research Assignment Potential Topics: Physical Health concerns Internet Addictions Electromagnetic Fields eWaste Privacy Protection Hacking Viruses Piracy |
Choose one of the topics discussed in class, then create a mini research report on this topic. The project must meet the following criteria:
Click to download the m1notes_lesson2-3 Click to download the assesssources_activity Use Citation Machine to create your APA Reference Page |
Thursday, February 18th |
Before we get into coding our own websites from the ground up, it is important to have an understanding of what makes a good website in terms of design, content, and navigation. Prior to this assignment, you will learn about all of these things, and have an opportunity to take a look at some example websites to build on your knowledge. During this phase, you will create a "designwebsite_planning" Word document and place it in your "designwebsite_weebly" folder. You will also need to download the "webcritique_planning" document. After you plan, you will apply your knowledge by designing a website of your choosing using Weebly. Click to download the m2notes_lesson1-6 Click to access the Design Animated Presentation |
Wednesday, March 2nd |
|
At this point, this is more of a learning experience than an assignment. An assignment WILL come, BUT I wanted to give you guys a breakdown of what we've been studying in class: HTML TABLES LESSON RESOURCES Click here to access a List of Table Tags from W3C Click to access CodeAcademy "HTML Basics III" Tutorial *Note: Only do lessons 1-10 (stop at "Div and Span") LINKING WITHIN MULTI-PAGE WEBSITES *See "Topics Covered Each Class" list for more information! Click here for a list of Topics Covered Each Class! |
Review: Part 1 Monday, March 7th Assignment: AutoBio Site Friday: April 8th |
|
CSS CSS: Review #1: See Shared Drive CSS: Review #2 See Shared Drive |
Now that you understand how to create the structure of a website using HTML, and you've learned the basic premise behind CSS by using inline CSS within your elements, we will dive right into Internal and External CSS (the fun stuff). Below are the items you will need for some of the daily lessons: Note on each of the topics covered in class are available in the Shared Drive! Lesson: CSS RULE THEORIES
Lesson: SELECTOR TYPES
Lesson: FORMATTING OBJECTS, PART II
|
Review #1: Fri. April 15th Review #2: Wed. April 20th |
Assignment |
Description |
Due Date |
Check Magazine Tutorial (available in print version only) |
Learn how to build a professional-looking website based off of a comp, or "rough draft," created by Check Magazine (a fictional company). |
Friday, May 6th, 2016 |
Though WE will not be making our coursework (other than what we create using Weebly) available for all the world to see, you may very well decide to do this once you have finished the course! Because of this, it is important for you to understand how this process unfolds. |
Monday, May 8th, 2016 |
|
CSS: Nav Bars *Navigate to the Shared > Interactive Websites folder, then open the Word document inside for further instructions |
Learn to style visually-appealing, user-interactive vertical and horizontal navigation bars using a combination of element, class, and pseudoselectors! |
Wednesday, May 11th, 2016 |
CSS: Images & Banners *Navigate to the Shared > Interactive Websites folder, then open the Word document inside for further instructions |
Learn to use a variety of image editors to resize, crop, sharpen, brighten, recolour (and much more) the images you use within your websites. Then apply these skills, along with a few others, to produce eye-catching and informative website banners! |
Images - Monday, May 16th, 2016 Banners - Wednesday, May 18th, 2016 |
In Dreamweaver, use a premade html layout of your choice to create a 4-page (minimum) website for a cafe, bakery or restaurant of your choice. Be creative and have fun! |
Monday, May 30th, 2016 |
|
Introduction to JavaScript *Everything you will need for this is locate inside the Shared > Interactive Websites folder inside a folder called: Java_information-site |
JavaScript works hand-in-hand with HTML to help bring your websites to life, and make them more interactive. During the next week you will learn the basics of the language, how to integrate it into HTML documents, and ultimately, how to code your own simple adventure game! |
Friday, June 17th, 2016 |
Online Course Resources
Below you will find hyperlinks to frequently used (in class) websites, as well as websites you can use to build upon and extend the learning we do in class.
Copyright-Free
Creative Commons (copyright-free images, audio & video) Morgue File (use the free search option) Pexels (high-quality stock images) Albumarium (high-quality stock images) Free Pik (vector images, photographs, PSD files, and more) Open ClipArt Gallery (free clipart graphics) Clkr Clipart Gallery (free clipart by the people for the people) Classroom Clipart (free clipart for school use) The Noun Project (icons for just about anything) Giphy (shareable memes and GIFs) Online Image Editors Picmonkey (photo editing site) PixlrExpress (photo editing site) BeFunky (photo editing site) |
Coding Websites
Code Academy (offers step-by-step coding tuts for beginners) HTML For Kids: File Management (how to organize your files) HTML For Kids: Getting Started Guide (basic HTML tags) W3Schools: HTML Tutorials (everything HTML5) W3Schools: HTML Reference List (list of all HTML5 tags) HTML Resources Complete List of CSS Style Properties List of Web-Safe Fonts W3C Color Names W3C Color Picker Color Hex Top Colors Free, Copyright-Free Audio
Sound Bible (sound effects) YouTube Audio Library (independent music and sound effects) Bensound (independent music) Free Music Archive (independent music) |
Advanced HEX Color Picker
|
Simple HEX Color Picker
|
Search Creative Commons |