Tasks due by 11:59 p.m. on due date.
Task02 GRADE SHEET (UPDATED w/PHP deletion)
Quick links that are helpful to have:
NEW VIDEO: Integrating Google Fonts in your site
NEW VIDEO: Automatic Push Webhook Setup
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.
You may use any applicable tool to do this task. Use the Atom editor or try a different tool. (Atom is probably the best option if you don't want to break your work-flow to go to the command line every time you want to git add and git commit and git push.) But, if you are okay with the command line, you may use a WSIWYG html editor or any other free editor or Dreamweaver. (Adobe has integrated git into Dreamweaver).
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,
Since we did not incorporate this in the 2.1 starter theme you will need to add it to each page. I will demonstrate how to do a global project search and replace to get this done fast.
Look at the code on my demo site index.html
to see an example of this working as a self-contained script:
See line 58 through 60
I have a different example on my demo site about.html
page. It is using the DOM tree and getting the element by ID:
See line 60 for the html and line 63 for the src file connection
This is the main.js
file with the javascript:
Look at line 3
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.
If you follow the tutorial on the web lab page in the lab class session, and use the get element by ID process with the linked main.js
file, that will be sufficient for this task, and you will not have to go looking through the links below.
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.
You do not have to complete the server side script task
Create filename example.php
somewhere on your site. Link to it from any page. Put a custom php echo
in the page and upload it. Don't use hello-world. Change it to something else. See this page for how to create the php page
This will satisfy your server side script requirement.
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! -->
When you create this site, create it in the repository that you have pulled from Carolina CloudApps Source Control. You will then git push
it to your Source Control Account.
If you did not get this set up in the class session, here is a video on how set up an automatic build with a webhook.
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 git push to submit your website to Carolina CouldApps.
last page update: Friday Oct 20, 2017