Personal Website:
Tutorials Project

The goal of this project is for each student to begin collecting a series of Web Design tutorials. Students will search the Internet for tutorials that they find interesting and engaging. The objective is to find tutorials that have the potential to increase the student's skill set. It is also important that each tutorial yields an end product that can be added to the student's personal website. Each tutorial will be hyper linked from the student's Tutorials page on their personal website. The end product of each tutorial will then be added to the student's web page.

Note: Students are welcome to link to video tutorials. However, you are responsible for bringing in your own headphones to listen to the video tutorials, and you are responsible for staying on task.

Students are required to present their completed work to the class as part of their assessment. The student will open each tutorial in a separate tab in Google Chrome. The student will show each tutorial website. Then, the student will show examples of completed tutorials. Finally, the student will invite the class to ask questions.

In the event that the student has not completed the entire assignment, the student will still present the work they have completed for partial credit.

Part One: Find Six tutorials

In this example, you are looking for a Photoshop Tutorial.

1. Open Dreamweaver.
2. Open your tutorials page on your personal website.
3. Create a new Div Tag for your project. Refer to Image Project One for instructions on how to create a DIV for your tutorials.
4. Open Google Chrome.
5. Go to Google, and type Photoshop CC Tutorials into the search field.
6. From the search results, find a link to a tutorial that teaches you how to do something interesting that you didn't know already.
   1. Example: How to Use the Photoshop Clone Stamp Tool
7. IMPORTANT! Make sure it is a link to an actual tutorial- not a list of tutorials or an offer to buy tutorials. A tutorial should teach you how to do something. If you don't see step-by-step instructions on how to do something, don't use it. Choose a different page.
   1. BAD Example (this is just a list! Plus, it's the wrong version of Photoshop!) Photoshop Elements Tutorials
   2. Another Bad Example (they want your $money$) Free Videos, Tutorials, and More!
8. Once you find a tutorial that you want to use, drag it's Favicon (the small icon to the left of the URL or web address) to your Bookmarks Bar (Ctrl+Shift+B). Once you have all six tutorials, move on to the next step.
9. Return to the first tutorial you selected.
10. Copy the title of the page.
11. Return to Dreamweaver.
12. Type Photoshop CC and Pixlr E Tutorials, and then hit Enter.
13. Paste the title of the page.
14. Select the title.
15. Return to the page in Google Chrome.
16. Copy the page's address.
17. Return to Dreamweaver.
18. Paste the address into the Link field in the Property Inspector.
19. Save, and then test the link.
20. Spell check. Then spell check again.
21. Make sure you double check every link.
22. Use this method to find add more tutorials. As noted below, for image editing, you can use either Photoshop CC and/or Pixlr E tutorials.
23. After you add three image editing tutorials in Photoshop CC and/or Pixlr E tutorials, add three Web Design tutorials as per the retirements listed below.

top

Requirements:

1. Create THREE Photoshop CC and/or Pixlr E tutorial links.
2. Create THREE Dreamweaver CC tutorial links.
3. Your project must be placed in your Tutorials Div Tag.
4. Present your tutorials as a bulleted list, like this:
   (the table can be visible invisible- it's up to you)

1. Photoshop CC and Pixlr E Photomerge! How to Merge Multiple Photos How to Use the Photoshop Clone Stamp Tool Add text and shapes Dreamweaver CC How to make a website change for cell phones & tablets Create a responsive menu How to Embed YouTube in Dreamweaver

5. Make sure the tutorials are on new techniques, and not on something we've already covered.
6. You have to be able to show an "end product" on your web page.
7. Challenge yourself, but avoid choosing tutorials that will take hours to complete. you will not get a higher grade, and you risk missing the deadline for the project's completion.
8. If you find that the tutorial is ineffective, find a better tutorial. There are literally thousands.

top

Part Two: Review your tutorial page paragraph

1. Review and revise the paragraph you wrote for the Tutorial Page. Integrate the specific tutorials you have chosen.

top

Part Three: Complete the tutorials

• After you are completely done with Parts One and Two, complete each of the tutorials.
  
• Do not start on the tutorials until you are completely done with Part One and Two, and you have links to the six tutorials as described above.
• If you are working on an images tutorial, make sure you save the original and make a copy. Later, you will need "before" and "after" versions of the image.
• Remember, these tutorials are designed to be completed independently. Please don't ask me to explain each of the steps, and guide you through the tutorial.
• If the tutorial is really too difficult for you, replace it with something less challenging.
• If the tutorial doesn't work for you, replace it with a tutorial that does. Remember, there are tens of thousands of free tutorials to choose from.
• You may create any folders you wish to organize the files for your tutorials. A standard strategy is to create a folder names tutorials inside your images folder, and then make sub-folders as needed.
• In the case of the Photoshop CC and Pixlr E tutorials, you must show the technique in a "before" and after" format. You can present them side by side in a table, or with a rollover. Make sure the "after" and "before" versions are exactly the same size.
• As with all previous projects, DO NOT TURN OFF CONSTRAIN PROPORTIONS TO RESIZE AN IMAGE! Use the Crop Tool, or perhaps the Resize Image Dialog Box, or even the Resize Canvas Dialog Box, depending on the situation. But NEVER TURN OFF CONSTRAIN PROPORTIONS to resize an image. You will loose major points on your project if you do. Your images will also look awful, terrible, and amateurish if you do.
• Place your examples on your Tutorial page. If you have a compelling reason, you may put your examples on any other page of your website. Please ask first.

top

Part Four: Present your work to the class

• Open your tutorial page on the main screen
• Open each tutorial in a separate tab in Google Chrome (use the center "scroll button" on your mouse
• Show each tutorial website
• Show each completed tutorial on your website
• Ask the class if they have any questions

top

F.A.Q.

Q: Is it okay to complete each tutorial before I look for the next one?
A: No. Follow the work flow described in the directions. Find and link your tutorials first (as described in Part One), and then complete them (as described in Part Two).

Q: Is it okay to center align the links?
A: No. Center alignment for lists should be avoided just as much as center alignment for body text.

Q: Can you link to several tutorials within the same site?
A: No. Find six different sites. As of this writing, there are 25,300,000 results for the search "Photoshop CC Tutorials."

Q: Is it okay to link to a list of tutorials?
A: No, and you will loose a significant number of points if you do. Read instruction #7, above.

Q: What if the page I want to go to is blocked?
A: Choose a different page that isn't blocked.

Q: Can I use tutorials for other versions of Photoshop CC or Dreamweaver CC?
A: I advise against it. Other versions might very well have different tools and capabilities, so the tutorials won't be entirely useful.

Q: What if I can't do something that the tutorial asks me to do? Some of the tutorials ask me to select items that aren't in the menus.
A: You should confirm that the tutorial is for Photoshop CC, Pixlr E, or Dreamweaver CC. If the tutorial is for a different version, chances are excellent that the menus are different. If this is the case, reread the instructions above (especially numbers 5 and 20), and replace the tutorial on your web page with an appropriate tutorials. Also, look at the previous question in the F.A.Q.

Q: If I don't understand how to do something, is it okay to ask you for help with it?
A: Yes, but not during class time. I am available for extra help after school, Monday and Wednesday. You can also replace the tutorial with something less challenging if you wish. Also, you can always look up how to do nearly anything in the Help menu of the application itself. The Help menu is usually located in the top right corner.

Q: Is it okay to include a tutorial for something I already know how to do, such as "How to create a Simple Hyper-link"?
A: No. This is a waste of your time and mine. It would be like including a tutorial on how to tie a shoe, or how to sharpen a pencil. Challenge yourself by learning something new, please.

top