Tasks due by 11:59 p.m. on due date.
Task02 GRADE SHEET (this is working now!)
You may use any applicable tool to do this task. Use the Atom editor or try a different tool.
You have a lot of sources for ideas:
You may make your site exactly like the examples if you wish, but I hope that you will find this task useful enough to custom-build your sites to meet your own needs and design ideas.
You may build upon Task 2.1. Or you may use a template to create an entirely different look. But the site must meet the conditions specified for this task.
You will create a web site for use in your work with this and other classes. In its structure, your site will look something like this diagram:
In particular, your site will include the following:
A top level home page that will incorporate at least your name, links to at least the second level pages on your web site.
Your email address which should not be retrievable by a web crawler. You should obfuscate your email address. You may use this service to obfuscate the email address, or some other strategy. If you decide to use a contact page you can put your email address there or use a form.
Keep your site consistent in look. If you don't choose to use a template, at least ensure that all the pages share a similar look in terms of backgrounds, font style and color, and use of bullets.
Don't overload your home page. Keep it simple so that it loads quickly
use hyperlinks (either as text or as linked image objects) to ensure the user can navigate throughout your site.
Every page in the site should have hyperlinks to your home page.
All pages should have links to other pages on the same level in the site structure.
In our example above,
Look at the javascript code on my demo site index.html
to see an example of this working as a self-contained script:
See line 58 through 60
More info on Document.lastModified from Mozilla Developer Network.
one example of a javascript client side script somewhere on your site. This is in addition to the page updated link.
Here are some links to some samples. Some of these are difficult, so don't choose any that are too hard. Go for the easier ones.
I will demo this in class.
At a minimum, your home page needs to meet W3C validation for HTML and for CSS. It must validate in order to get any points for this component. If it doesn't validate, the W3C tool will point out the line of code where the invalid code is located.
If you are using the Bootstrap framework or a Bootstrap based theme, then use this validation service: validator.nu.
If your non-Bootstrap HTML or CSS does not validate
at W3C, and you don't think it is your error, run it past the validator.nu service to double check the errors. Your sites that you have to build do not usually need all the CSS that is in a theme, so you might try deleting and offending line. Make sure you back up your home page.
Please validate your pages and fix what you can before you submit for early review. One thing that the validation wont catch, but that I will catch, are your page titles.
This is not valid code for your project:
<title>Innovation Theme - Home Page</title> <title>Task-2.1</title>
Every page requires a custom title:
home page: <title>Your Name - Home Page></title> level 2 page: <title>Your Name - Interests</title> level 3 page: <title>Your Name - Classes - INLS161</title>
Dont leave any spaces in your file names or directory names.
images/head shot.jpg/ <!-- this has a space! -->
The esthetics grade is going to be the toughest part to gain a full credit. ( But this is not the majority of the grade, so don't get too anxious!) If you only have one image on your site and the flow does not work from page to page, then you are not going to do as well on this section as someone that puts in the work.
The top students will have CSS or HTML images on every page and it will be obvious that they have put in significant time and thought. If you are using a fancy theme, and you don't make it your own, you may not do as well as someone that uses the 2.1 theme, but adds a lot of custom work.
If you include a custom made SVG graphic, I will be impressed. I demonstrated how to do this in the images class with the method draw web-based editor.
You will use SFTP to post your website to the SILS OPAL server.
This above demo site is built entirely with the skeleton boilerplate and a responsive menu snagged from codepen. Those two items are the basis for the 2.1 theme. Here are links specific to the 2.1 theme:
Below is the html code for alignment; put these in your .html
and they will connect with the css in your custom.css
file.
<img class="align-right" src="images/clock.jpg" alt="clock image">
<img class="align-left" src="images/clock.jpg" alt="clock image">
<img class="align-center" src="images/clock.jpg" alt="clock image">
The CSS code for alignment should be in your custom.css
file.
If you have a larger image, and you want to contain it to a column, and you want it to resize when the browser size is minimized, use the below image class. This image class was created by the author of the skeleton theme, and if you have linked to the skeleton.css file, then it should work for you.
<img class="u-max-full-width" src="images/image.jpg" alt="Image Description">
The name of the class is important to breakdown: u is for utility. So this is not a foundational css rule; it is a useful utility. The max-full-width part of the name describes what it does. It makes sure that an image will resize and fill up the column.