Personal Website
- Due Nov 9, 2020 by 11:59pm
- Points 40
- Submitting a text entry box, a website url, or a file upload
For this assignment, create an account with glitch.com. This will allow you to create a website online. Create a basic website that you can use in your teaching. There are 2 parts to this assignment: (a) structure (HTML), and (b) styling (CSS). We recommend that you work on the HTML the first week and CSS the second week. Don't put everything off until the week it's due.
HTML requirements (recommendation: work on these the first week)
- At least 3 .html pages (3 pts)
- Use of heading tags (e.g., <h1> <h2> etc.) on each page (1 pt)
- <p> tags to indicate different paragraphs of information (1 pt)
- the use of a blockquote (1 pt)
- an ordered (<ol>) or unordered (<ul>) list with at least 5 items in the list (2 pts)
- hyperlinks that allow navigation between each of the pages in your site (4 pts)
- a table with at least 3 columns and 5 rows. One of the rows should be a heading row (5 pts)
- at least 3 images (3 pts)
CSS requirements (recommendation: work on these the second week)
Create a cascading style sheet to style the simple personal website you created previously at glitch.com Links to an external site.. Your stylesheet should be an external stylesheet and must include:
- change the font used by the entire page (1 point)
- 2 custom classes (2 points)
- styling for at least 2 specific ids (2 points)
- border styling for 1 element (1 point)
- background styling for the page (1 point)
- Custom hyperlink styling (including link, visited, and hover) (4 points)
- custom styling for your ordered lists (2 points)
- The repositioning of at least 2 elements using CSS (4 points)
In addition, you must add the following tags to at least one of your original pages:
- At least 2 new <div> tags (2 points)
- At least 1 new <span> tag (1 point)
To turn in your project,
- Name your app by clicking on the icon in the upper-left hand corner of the screen. Change the name to something like Miss_Firstname_LastName (something you might use as a teacher).
- Once you have named your site, click on the "Share" button below the name of your site and copy the "project page" link. Submit this link in Canvas.
- That's it! Hopefully, I should be able to see your site now.
Extra Credit (+1 point): Complete the assignment survey Links to an external site. to let us know how long this assignment took you, how much you learned, and what questions you have. In order to receive your extra credit you MUST indicate in the comments on this assignment that you completed the survey.
Rubric
Criteria | Ratings | Pts | |
---|---|---|---|
Font (CSS)
Change the font used by the entire page
threshold:
pts
|
pts
--
|
||
Custom Classes (CSS)
At least 2 custom classes
threshold:
pts
|
pts
--
|
||
Custom IDs (CSS)
Styling for at least 2 specific ids
threshold:
pts
|
pts
--
|
||
Border (CSS)
border styling for at least 1 element
threshold:
pts
|
pts
--
|
||
Background (CSS)
Background styling for the page
threshold:
pts
|
pts
--
|
||
Hyperlink (CSS)
Custom hyperlink styling (including link, hover, and visited)
threshold:
pts
|
pts
--
|
||
Lists (CSS)
Custom styling for your ordered lists with at least 3 properties styled (e.g.,different bullets, different numbering, border, background, font)
threshold:
pts
|
pts
--
|
||
Positioning (CSS)
The repositioning of at least 2 elements using CSS
threshold:
pts
|
pts
--
|
||
Custom HTML (CSS)
At least 2 custom <div> and one <span> tags (note: you will have to make this change in your html). Please point out where these new html tags are.
threshold:
pts
|
pts
--
|
||
3 pages (HTML)
At least 3 different web pages (.html)
threshold:
pts
|
pts
--
|
||
Headings (HTML)
Use of headings tags (e.g., <h1> through <h6>) on each page.
threshold:
pts
|
pts
--
|
||
Paragraph tags (HTML)
At least 3 <p>...</p> tags to indicate different paragraphs of information.
threshold:
pts
|
pts
--
|
||
Blockquote (HTML)
The use of a blockquote to indent/offset a quote or other important piece of information.
threshold:
pts
|
pts
--
|
||
List (HTML)
An ordered (<ol>) or unordered (<ul>) list with at least 5 items in the list.
threshold:
pts
|
pts
--
|
||
Navigation (HTML)
At least 3 hyperlinks that allow navigation between each of the pages in your site.
threshold:
pts
|
pts
--
|
||
Table (HTML)
A table with at least 3 columns and 5 rows. One of the rows should be a heading row (<th>...</th>)
threshold:
pts
|
pts
--
|
||
Images (HTML)
At least 3 images.
threshold:
pts
|
pts
--
|
||
External Link (HTML)
A link to an external site (i.e., a web page that is not one that you create, such as as https://byu.eduLinks
Links to an external site. to an external site.).
threshold:
pts
|
pts
--
|
||
Total Points:
40
out of 40
|