Week 07
In Canvas with Proctorio - Exam 01
Reminder - Project 02 (My Interest)
-
Goal
- Create a multiple page website in a MyInterest folder with a navigation menu system (using a header and a footer)
- Opportunity for creativity in content and design
- Opportunity to demonstrate learning
- Tell about a hobby or interest that you have (should be different than what you will use on your HireMe site)
- The site should have enough content to make someone want to visit the entire site
- Create MyInterest/index.htm
- Due by Thursday 04-02-2020 at 11:59pm
- One re-grade request allowed from Thursday 04-02-2020 at 11:59pm until Thursday 04-16-2020 at 11:59pm
- Grade value: 10% of your final grade
- Content should include
- Multiple pages in a new style that tell about an interest (the site should have enough content to make someone want to look at the site)
- You can begin from Kirk's template; you need to modify the css to make it uniquely yours
- At least 3 images that you created (photos that you took or designs that you made)
- Site should not contain images created by others (modifying someone else's image is not acceptable)
- Content: Multiple pages in a new style that tell about an interest (the site should have enough content to make someone want to look at the site)
- -50% not multiple pages, I will allow up to a C for a re-grade request
- -50% barely any content, I will allow up to a C for a re-grade request
- -30% not nearly enough content
- -30% no images (need 3)
- -20% only 2 images (need 3)
- -10% only 1 image (need 3)
- -10% not quite enough content
- -05% could use some minor content changes
- Spelling/Grammar:
- -50% not nearly enough spelling/grammar to check
- -30% not quite enough spelling/grammar to check
- Design: You can begin from Kirk's template; you need to modify the css to make it uniquely yours
- -50% did not modify the css enough (or at all) to make it uniquely yours
- -20% designs and/or images that don't scale (i.e. not responsive)
- -20% navigation menu responsive design problem
- -05% minor responsive design changes needed
- -05% spacing between content and the edge of the page
- -05% color scheme
Video/Transcript: IMS222 - WebPage07
(watch this video in a new tab or window)
Here I'm going to create WebPage07. I'm going to start by duplicating my WebPage06 which on the Mac is duplicate. You can do copy/paste on Windows. Rename that to WebPage07.htm. I'll will steal the code from the responsive page after I open it with my text editor. Here's my Kirk's sample responsive design page. View the source, select all, copy. In the text editor, select all, paste for a good starting point. Soon I will get the ResponsivePage.css styling. Duplicate a page and rename it. I'll use WebPage07.css. Edit WebPage07.css with the text editor. View the ResponsivePage.css, select all, copy, go to WebPage07.css, select all, paste, save it and check it. Close ResponsivePage.css and ResponsivePage.htm in the browser. Next I'll remove unnecessary code and re-title the page. Link to WebPage07.css (or whatever you call yours). Add a header (we'll add an h1 tag later). Reload the page to see the changes.
For the assignment, apply changing background colors when the window is resized. When you change the width of the browser window, the background color will change. Change the colors to something unique in the CSS document and remove unnecessary CSS. Add a question mark followed by something unique to force a reload of the external stylesheet. Reload the page and verify that the colors are what you expect them to be.
Next we'll add 3 images named with your UniqueID underscore 04, 05, and 06 dot jpg. I have 3 images in my downloads folder. I'll use an application called Preview to edit my images. You can use whatever image editor you like. You'll need to resize the image to 1000 pixels wide, then crop it to 315 pixels tall, export it (or save it) in jpg format as your uniqueid in lower-case underscore 04, 05, or 06 dot jpg on your local machine. Then move those images to your web folder. By resizing the image to 1000x315, the new image should be well under .5MB. Next add HTML to display those images and verify that the images are displayed properly.
It's nice to present the images with a little design so I'll iterate with breaks, then move to div's, and will add some styling for all images on the page in the external stylesheet to make them responsive and add some white space using padding.
Finally, to firm up my understanding of responsive design I'll change the background color default to a blue-ish color. You can see the iteration process as I work to find my problem. Also notice that in my external stylesheet I have the body type listed twice unnecessarily. I could have just added the styling in the body type the first time it was listed.
Assignment due by Thursday 03-12-2020 at 11:59pm
Goal- Demonstrate understanding of photo sizes (dimensions and file sizes) for use on the web
- Demonstrate ability to follow specific directions
- Due by Thursday 03-12-2020 at 11:59pm
- One re-grade request allowed from Thursday 03-12-2020 at 11:59pm until Thursday 03-19-2020 at 11:59pm
- Grade value: 1% of your final grade
- Content should include
- Apply changing background colors when the window is resized by stealing Kirk's sample responsive design page (you'll need to grab the .css document too)
- The background color of the page needs to change while resizing the width of the page
- Use your own colors
- Control the colors using an external style sheet
- Optional: Practice CSS - Change the styling of a header, bold, paragraph, responsive design page size background color, and something that you pick
- Add 3 images of yourself to this page with file names of uniqueid_04.jpg, uniqueid_05.jpg, & uniqueid_06.jpg (so Kirk's picture names would be hopkinks_04.jpg, hopkinks_05.jpg, & hopkinks_06.jpg), to be used as new pictures for our class site
- Photo details
- Dimensions: 1000x315
- You must be the only person primarily in focus in the photo (you can have animals, but no other people in focus)
- Filenames must be: uniqueid_04.jpg, uniqueid_05.jpg, and uniqueid_06.jpg (all lower-case)
- Photos need to be good quality
- -10%: No changing background colors in an external style sheet using Responsive Design
- -10%: Using Kirk's background colors (Responsive Design)
- -10%: Missing Photo uniqueid_04.jpg
- -10%: Missing Photo uniqueid_05.jpg
- -10%: Missing Photo uniqueid_06.jpg
- -10%: Photo naming convention should be all lower-case uniqueid_04.jpg
- -10%: Photo naming convention should be all lower-case uniqueid_05.jpg
- -10%: Photo naming convention should be all lower-case uniqueid_06.jpg
- -10%: Dimensions must be 1000x315 uniqueid_04.jpg
- -10%: Dimensions must be 1000x315 uniqueid_05.jpg
- -10%: Dimensions must be 1000x315 uniqueid_06.jpg
- -10%: You must be the only person in the photo uniqueid_04.jpg
- -10%: You must be the only person in the photo uniqueid_05.jpg
- -10%: You must be the only person in the photo uniqueid_06.jpg
- -10%: Photos need to be good quality uniqueid_04.jpg stretched
- -10%: Photos need to be good quality uniqueid_05.jpg stretched
- -10%: Photos need to be good quality uniqueid_06.jpg stretched
- -10%: Photos need to be good quality uniqueid_04.jpg grainy
- -10%: Photos need to be good quality uniqueid_05.jpg grainy
- -10%: Photos need to be good quality uniqueid_06.jpg grainy
- HTML/CSS (i.e. mechanics) grade reduction amounts as shown on Kirk's Pet Peeves