Description
Please seek help from each other as best you can and credit any JS code you get from other sources.
Learning Outcomes p5
UPDATE: PLEASE MAKE SURE YOU SUBMIT A LINK
TO YOUR GIST THAT CONTAINS YOUR WEBPAGE,
NOT A LINK TO THE PREVIEW OR CS HOMEPAGE. WE WON’T BE ABLE TO GRADE YOUR SUBMISSION OTHERWISE.
1. Create a Basic Webpage
1. Create a Github account at https://github.com/join (https://github.com/join) and login. Tip: You can get the student pack when using your UW email, which will give you unlimited free private repositories.
2. Go to https://gist.github.com/ (https://gist.github.com/)
You will be creating a GitHub Gist for your homepage. GitHub Gists are small, special kinds if GitHub repositories that make editing your code and other files through a web interface, and sharing those project with other on the web easy. You can use GitHub’s online interface to work on your webpage online, or your favorite git client to clone it to a local repository and push back your local changes to GitHub.
3. Name the new file home_page.html and type in the following HTML:
4. Click on Create secret gist button, as shown below
5. To view your web page from the internet (with your web browser)
1. Copy the shareable link for the gist. It will look something like this:
https://gist.github.com/<github-Id>/a6b778e81623b0e2eb92bb0f8afead71
(https://gist.github.com/%3cgithub-Id%3e/a6b778e81623b0e2eb92bb0f8afead71) The number in the link above highlighted in bold is the gist-id. Note it down, you will
need it to view your website.
2. To view your website, we are going to use the gist preview tool
(https://gistpreview.github.io/ (https://gistpreview.github.io/) ), that renders websites from GitHub GISTs.
Enter the gist-id and file name (home_page.html) and click on submit. You should now be seeing your website
UPDATE 08/03: gistpreview does not support external files well (it will have trouble displaying images in the HTML and css and javascript in external files won’t work).
An alternative is the platform blocks: http://bl.ocks.org (http://bl.ocks.org) . You can create a preview of your webpage by creating the link: http://bl.ocks.org/[git username]/[gist id]. Replace [git username] with your username and [gist id] with the id of your gist (the number highlighted above).
2. Add Additional Items to Your Homepage
1. Add the following via HTML and / or JS to your home_page.html page:
1. a header with the course number, CS400
2. a footer with your hometown or favorite or least favorite town
3. a list of favorites or least favorite things
4. an image (png or jpg)
2. After completing the above, add the following to your project:
1. a table
2. a link to another page (either one you create or another on the internet)
3. After completing the above
1. add a button named “CHANGE” that the user can click.
2. Add some JavaScript to the button so that the button label changes with each click of the button. The JavaScript can be inline in the html, or in an externally linked file.
3. Submit
4. Hosting as CS Webpage on the Department Server(optional)
1. Remote connect to best-linux.cs.wisc.edu
2. Clone your Github gist into you CS hosting space. In your CS home directory do the following:
3. You should be able to see all your website files from your GIST
4. View your web page from your web browser:
1. Launch your web browser
au c you eb b o se
2. Go to http://pages.cs.wisc.edu/~cslogin/demo/home_page.html (replace cslogin with your CS login. Do not remove the tilde ~ character, which is needed to access the alias)
5. To update your changes from the GIST run the following command in the demo folder:
GitHub Gist Webpage
Criteria Ratings Pts
Created a personal webpage as a GitHub Gist
Student created their own website without using third party page builders.
Page is accessible on GitHub and the Gist can be viewed as a webpage with the Gist HTML viewer. 6.0 pts
Full
Web page does not 0.0 pts
Used a thirdparty page builder or code is not accessible. 6.0 pts
Page (h1) Heading (optional) and Title
The page has a h1 heading and the home page’s title is set. 2.0 pts
Full
as a Gist1.0 pts preview.Missing or
incorrect code
Page is missing a heading or the page’s title 0.0 pts
No
Image
The page has at least one image showing with an alt text. 4.0 pts
Full
showing in the2.0 pts
browser tab.Missing alt
text image does not display or alt 0.0 pts
No
H2, List, or CSS
There is a sub-heading, list, or uses CSS. tag is mi
4.0 pts
0.0 pts
Header Footer
There is a header and footer section in the web page. 4.0 pts
Full
Missing the header or footer 0.0 pts
No
Button or other JavaScript
Full
3.0 pts Missing or incorrect code
There is a user interface control, but 0.0 pts
No
there is no JavaScript functionality.
Criteria Ratings Pts
Page Link to another
The page links to another html page in the same Gist or to an external URL on the Internet. The user can use “back” on their browser to return back to home page. 4.0 pts
Full
There is a link to another page, but that page does not 0.0 pts
No
home page.
