Welcome to Web Design
Course 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 :)
Download & Hand-In Instructions:
To download a document from the class website, simply click on it (download, or, hyperlinks, will appear in blue). Always choose "Save File" and make sure that the box that preserves the document's current formatting is checked off. If the file automatically opens, close it. Now, navigate to your Downloads folder, CUT the document from this folder, and paste it into the appropriate folder within your Student Drive. Title each document you download/hand in as follows: “loginname_assignmenttitle” (ex. hambri_AnticipationGuide). Open the document from your folder, then use the document to complete your assignment. Once you're finished, hand it in by COPYing the document and pasting it (don't just drag and drop - it can cause major issues with your work) into Ms. Hammond's Hand In folder.
Download & Hand-In Instructions:
To download a document from the class website, simply click on it (download, or, hyperlinks, will appear in blue). Always choose "Save File" and make sure that the box that preserves the document's current formatting is checked off. If the file automatically opens, close it. Now, navigate to your Downloads folder, CUT the document from this folder, and paste it into the appropriate folder within your Student Drive. Title each document you download/hand in as follows: “loginname_assignmenttitle” (ex. hambri_AnticipationGuide). Open the document from your folder, then use the document to complete your assignment. Once you're finished, hand it in by COPYing the document and pasting it (don't just drag and drop - it can cause major issues with your work) into Ms. Hammond's Hand In folder.
ASSIGNMENT/ACTIVITY |
DESCRIPTION |
RESOURCES |
13) Cafe Website, Final Project Program: Dreamweaver Hand In: loginname_cafe Due Date: Friday, June 16th |
Ahhh here we are - so close to the end of the year. The time for ice-cream rendezvous, basking in the sun, and... final projects! You will use all the knowledge and skills you've acquired in HTML and CSS over the course of the semester to build a website for some sort of food-themed business. The choices are endless, and they are all left up to you, since you will build this website from the ground up, all by yourself :) |
12) CSS Basics: Part 3 Program: Dreamweaver Hand In: loginname_navbars folder, loginname_images folder, loginname_banners folder Due Date: Wednesday, May 31st |
In these final CSS lessons and activities, you will learn how to go beyond basic HTML and CSS formatting to produce and style custom navigation bars, edit and arrange images to suit your website's theme, and create custom banners to replaces basic text-based headers. |
Lesson 9: Nav Bars [also copy the "css_navbars" folder from the Shared drive] Lesson 10: Images [also copy the "css_images-banners" folder from the Shared drive] Lesson 11: Banners [use the materials within the "css_images-banners" folder you copied from Lesson 10] |
11) Check Magazine Tutorial Program: Dreamweaver Hand In: loginname_check folder Due Date: Friday, May 19th |
In this tutorial we will build a portion of a website for the fictional "Check Magzine." In doing so, we will take a closer look at some of the ways in which Site Editing software like Adobe Dreamweaver can make building a website easier for you, while still providing you with maximum customization. |
10) CSS Basics: Part 2 Program: Dreamweaver Hand In: loginname_review2 Due Date: Friday, May 12th |
Now that you're preeeeeetty much experts on the topic of CSS, and you have some experience with formatting objects and text, you will work towards creating well-organized and content-specific page layouts. To do this, you will learn all about positioning, rule theories, and basic selector types! |
Lesson 6: Positioning Lesson 7: Rule Theories Lesson 8: Basic Selector Types CSS Review #2 Navigate to the Shared > Hammond > Handout folder and copy and paste the "css_review2" folder into your CSS folder. |
9) CSS Basics: Part 1 Program: Dreamweaver Hand In: loginname_review1 Due Date: Wednesday, May 10th |
Woohoooo! Congratulations on your new knowledge of how to code a basic website from start to finish! Now you're ready for the big leagues - web coding software like Adobe Dreamweaver. Now that you know how coding works, Dreamweaver will make your life easier by organizing your code, giving you a preview of what you are working with, providing code snippits and hints, and highlighting your errors. In Part 1, you will learn about how to use internal CSS within Dreamweaver to better organize and apply a variety of old and new CSS styles to your site content. |
Lesson 1: Getting Started Lesson 2: What is CSS? Lesson 3: Comment, Div, Span Lesson 4: Formatting Text Lesson 5: Formatting Objects CSS Review #1 Navigate to the Shared > Hammond > Handout folder and copy and paste the "css_review1" folder into your CSS folder. |
8) HTML Final Assessment: The Autobiographical Website Program: Notepad Hand In: loginname_autobiosite folder (which includes all pages + "images" folder) Due Date: Friday, April 28th |
To get a final picture of how much you've learned about HTML over the past few weeks, you will create a website... from scratch! The site should contain at least 3 pages, and be entirely about yourself! Like always, don't spend too much time on developing your content - focus on the coding and design. |
7) HTML Basics: Part 3 Program: Notepad Hand In: loginname_review3 folder (which includes both questions and activity) Due Date: Thursday, April 13th |
This is the third, and final, installment of our 3-Part "HTML Basics" lesson series. In this section, you will learn all about how to add images to your webpages to make them more informative, interesting, and engaging, and you will learn how to create links to link individual pages together to form a website. |
6) HTML Basics: Part 2 Program: Notepad Hand In: loginname_review2 folder (which includes both questions and activity) Due Date: Friday, April 7th |
This is the second installment of our 3-Part "HTML Basics" lesson series. In this section, you will learn all about inline attributes, lists, tables, and inline CSS! |
Lesson 5: Attributes & Inline CSS Activity: Inline CSS Image Lesson 6: Lists & Tables Review 2 *Access "htmlbasics_activity2" from the Shared Drive |
5) HTML Basics: Part 1 Program: Notepad Hand In: loginname_review1 folder (which includes both questions and activity) Due Date: Friday, March 24th |
This series of lessons focuses on the BASICS behind the HTML coding language. HTML is the foundation of any, and every, website! Without it, a website could not exist. For the next part of this course, you will learn the basic tags that make up an html skeleton, as well as some simple tags that determine a website's formatting. Though there are many more complex programs available (like Dreamweaver, which we will look at later on in the course), we will be starting out with Notepad! Yes, you read that right. Plain old Notepad. This way, the bells and whistles of a specialized coding process won't get in the way of your learning :) |
Lesson 1: Getting Started Lesson 2: HTML Skeletons & Basic Tags Lesson 3: Structure & Comments Lesson 4: Formatting & Character Entities Review 1 *Access "htmlbasics_activity2" from the Shared Drive |
4) Design Website Program: Weebly Publish: Design Website Due Date: TBD |
This series of lessons focuses on the Design aspect of web design. We will seek to understand what makes a website engaging, visually-appealing, and functional before worrying about how to code in html. Though this part of the course may not seem as fundamental to web design as learning to code, it is, in fact, the most important tenet of web design - you can be a masterful coder, but no one will make use of your website if it has not been well laid out. |
3) Internet Ethics & Safety Program: Your Choice Hand In: loginname_safetytopic Due Date: Tues, Feb 21 |
In this lesson we will be discussing Internet Ethics and Safety precautions you should take to help protect yourself online. Topics we will cover include: netiquette, the digital footprint, website authenticity, plagiarism, health, and safety! Once we have finished exploring these topics, you will take your exploration one step further with a small research project in which you must choose a topic related to internet safety (you may choose one brought up in class or come up with your own). Here are the research assignment requirements: -Relevant title (topic name) -Min. ½ page of content (font size 12) -Explanation of what the topic is -3 interesting facts about the topic -Explanation of how topic negatively affects internet users -Real-life example or case study involving the topic -References page (APA, separate from other information) |
2) Weebly Meta-Website Program: Weebly Publish: Weebly Meta Website Due Date: Fri, Feb 10 |
This introductory section will focus on the history behind the web, how computers connect to the web, and how we can behave responsibly online. It will be divided up into 3 parts: 1) Lesson: What is the web? 2) Assignment: Weebly Meta-Website 3) Lesson & Mini-Assignment: Internet Ethics |
Site: Line-Mode Browser Video: The Web is Not the Net Doc: m1notes_lesson1 Assignment: Weebly Meta-Website |
1) Intro to Web Design Activity Program: Code Academy Show Me: Your final product Due Date: Wed, Feb 8 |
Let me be frank: for many of you, the first unit we cover in this course will not be exhilarating. It is content-based, rather than hands-on. It is about learning, rather than doing. It is a lot of information about the history of the internet, what a website is, and how to be safe online. It is not what we will be spending the majority of this course doing. So. Before you make up your mind about this course, I think you should have a taste of what we WILL be spending the majority of this course doing: coding in html. The steps of this activity are fairly simple to follow, but I doubt that you will have any real idea of what you are doing. That's okay. We will get to that. For now, all you need to do is follow the instructions and be amazed as you see a web page you built from scratch emerge right before your very eyes. |
Additional Resources
Free, Copyright-Free Audio
Sound Bible (sound effects) YouTube Audio Library (independent music and sound effects) Bensound (independent music) Free Music Archive (independent music) Online Image Editors
Picmonkey (photo editing site) PixlrExpress (photo editing site) BeFunky (photo editing site) |
Copyright-Free Photos & Graphics
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) |