This document lists the features I'm looking for in the Prog 109 2018 final. Please note that I'm not expecting everyone to get everything right. Instead, do the best you can. It is much better to turn in an imperfect final than it is to turn in nothing. I tend to be a generous grader, and students who have come regularly to class and turned in all the assignments are very likely to pass the course,perhaps even with a better than expected grade. If, however, you don't turn in the final, you will be at considerable risk since the final is one third of your grade.
The primary goal will be to show me that you understand the two areas we have focused on:
- HTML and CSS
In particular, I will to see that you:
- Can complete most of the homework assignments.
- Can polish your midterm theme and one or two features to it.
Another way to think about your overall goal for the final is that you want to turn in code that just works. The links in Canvas to your GitHub Pages should just work. The links in your program should just work. The assignments we have worked on should just work.
This will be a take home final, due on middle or later half of the week of Dec 2, 2018. I'll have a more precise date late, but the 5th would be a reasonable approximation for you to work with for now. I strongly suggest that you begin working on the final Nov 28th, and do a bit more work each day until it is due.
Here are list of features I will look for:
- Links to your site and theme home page.
- A site home page (index.html) in the root of your repository that contains links to all your homework and your theme.
- A theme home page in the root of your theme that points to all the pages of your theme.
- A favicon.ico file in the root of your repository.
- This subject addressed further down in this document.
- An alternative CSS file that can be activated by a button click.
- This should appear on three pages: your home for your site and theme, and on your about page. You can use the same two style sheets on all three pages.
- The details of how to implement this are covered below.
- Do the best you can to get your site to work on a mobile device such as your phone.
- Polish, polish, polish. You now have a chance to revisit your theme, and should be able to fix
problems I pointed out when grading it, and also add new features.
- Your code for all pages should pass HTML Validate
- All your links should work
- There should be no errors in the console page of the developer tools.
Perhaps we will be lucky, but I'm expecting quite a few students to turn in pages with errors on them. However, it you can get your site to render entirely error free, and still meet a good percentage of the requirements, then you can expect to be in very good shape. But if you do have errors, don't despair. Just do the best you can and turn in the assignment on time if at all possible.
I don't know how I've managed to get this far in the course without broaching this topic. It is, however, a simple one, and it adds considerable polish to your site.
To add a favicon to your site, simply put an image file called favicon.ico (favicon.png should also work, I think), in the root of your site. You can find favicons in the Wikimedia Commons and elsewhere.
One simple way to create a custom icon is to use Windows Paint to create a 16X16 or 32X32 PNG file and put it in the root of your site. If you want a bit more control, you can load it like this:
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
In any case, everyone should have a favicon for the site. I would like to see unique favicons whereever possible. Consider creating the icon yourself or scanning the web free free favicons that you can use.
For extra credit, create a favicon for your home page, and another favicon for your theme. If you do this, please call it out when you submit the assignment so I don't accidentally overlook it.
Load at least two stylesheets on three pages, including the home page for the site and your theme. You can pick the third page, but let me know what it is. Allow the user to switch between the two style sheets by first choosing a radio button and then clicking on a regular button. The basic technique is explained in the Alternate StyleSheets document. I don't quite give you the whole solution there, however, because I want you to use radio buttons in the final.
The two stylesheets you use in this exercise should significantly change the appearance of your page. For instance, you might have one stylesheet that has a blue theme, and another with a green theme. Or one that is dark, and the other light. It is up to you. But don't do anything too subtle, I want to be able to see the change quickly and easily.
Besides implmenting the code to switch stylesheets, the other thing I'm looking for here is evidence of your understanding of CSS. If you can create two stylesheets, both of which work, then that will be at least some evidence that you are doing more than just cutting and pasting code you saw in class. It should, I hope, show that you have some understanding of what the code does.
NOTE: If you can't get the radio buttons, or even a simple button click to work, you probably will still want to create the two style sheets to show me that you understand the basics of how stylesheets work.
If you are like me, and have very little aesthetic sense when it comes to design issues, then you might want to use this tip:
- Pick a dominate color for a stylesheet and then make all the elements or sections of the page show in various shades of that color. For instance, if you choose blue as dominate color, then everything on the page should be in shades of blue: LightBlue, DarkBlue, Aqua, AquaMarine, Cyan, DarkCyan, DarkSlateBlue, DodgerBlue, LightSkyBlue, PowderBlue, SkyBlue, etc. This won't necessarily make your page pretty, but it is a good fallback strategy if your default color choices are unduly upsetting friends and family.
At the bottom of the Radio Choices assignment there is a button that shows this in action.
At least two students had themes with pictures that were not rotated properly. I discuss a way to rotate an image 90, 180 or 270 degress in the Box Transforms document.
Turn it in
I'll be looking for three things
- A link to your home page
- A link to your theme home page
- A link to the third page you chose for your alternate stylesheet.
- The URL of your repository
Of the three, the most important is the first. If you can't give me a valid link to your home page (not a link to your repository, but to your home page running GitHub Pages, then I will have serious concerns about whether you have absorbed some of the basic points covered in this course.
Another key issue I will be looking at is that your home page links to your assignments and your theme. Creating links in your documents is a crucial skill that anyone passing through this course should master. Be sure to tell also include a link to the third page that contains buttons for changing the CSS.
On most of your pages, try to follow our basic structure:
Two key areas I will be looking at:
- Do you understand the file system, that is, can you set up links that contain relative paths?
Assuming you can master number 2 above, the next thing I want to see is evidence that you understand loops (mostly for loops) and branching (if statements).
Or to put the same issues in somewhat different terms: Did you master the main subjects we covered this quarter? This includes, of course, demonstrating that you understand HTML tags, how to structure an HTML document, and CSS.
Here are some extensions to Visual Studio Code that I'm finding out about very late in the cycle. Most of you know that I'm new to Code, so I too am learning the ropes. These extensions are quite helpful, and might make your experience of completing the final easeier.
I'm particularly sorry I didn't find Intellisence for CSS earlier. In class, I frequently tell you to block copy text to avoid types and other minor irritants. At least on CSS class names, this solves the problem by giving you Intellisence (hints in the IDE) when it is most needed.
HTML hints can be seen by selecting View | Problems from the menu.
NOTE: You can install extensions by selection Ctrl-P and typing in the string found at the top of the extension page linked above.
This is not an extension, but a tool. However, consider installing Link Checker. This is a very important tool. I'm simply not going to talk about how many broken links it found on our site the first time I ran it. Let's just say that was about 10 times more than I was expecting, and I was expecting quite a few.
It is easy to overlook the outline view which is built into Visual Studio Code, at least in recent versions. If it is available on your system, it will be at the bottom of the Project Explorer.