Refine Site & Website Checklist

Refresh your screen before class to see if there are updates to this page. Also refresh if returning to check on video postings.

By this class you should have chosen a template. You may use the EZ template or the Scrolling Nav template which were demonstrated last recitation. Or, you may find your own template. In today's recitation we cover all of the items that need to be in your website. I will do this in the context of the Scrolling Nav template, but you can implement these items in the template of your choice.

class recording status	link
posted	Build out the scrolling nav site Video Session From Spring 2023

Resource	Link
Template File	Download Scrolling Nav Template
Example Site	Student Z Scrolling Nav Sample Site
Extensive Documentation in Slides	Student Z slide documentation

Here is a checklist that you can use to make sure you have all the parts of your website done before posting to OPAL and submitting.

Grading Point Scale

02.03 grading rubric

tip

Control+F (PC) and Command+F (Mac) will help you find what you are looking for on this page if you get stuck building your site. Six Keyboard Shortcuts Every Computer User Should Know

1. Use Word to export a real or example resume in pdf format. Save it to your web project folder. Not sure about this? See this video.

2. Find a template, verify it works for you and start building your site. See templates in the left sidebar more information.

3. Confirm you have a home page file named index.html. You should not have a file named home.html. If you are using a one page type of theme, you will create sections. If you are using a multi-page theme, you will create pages.

4. Confirm you have an About Section or Page. If not, create one.

5. Create an Interests Section or Page.

6. Create a Classes Section or Page.

7. Home Page Content: email with an https://www.albionresearch.com/misc/obfuscator.php obfuscated email address generator. | How to do it (This is not needed if you have a working Google Form.)

8. Home Page Content: Image or graphic that loads fast and gets attention.

9. About Page Content: Have some custom about info related to you. Add a relative link to your resume file in the code of your about.html page. If you saved it or put it in the right folder, you will be able to easily link to it.

10. If you did not save, or already put, a pdf formatted resume in your website project folder on your laptop, drag a copy named yourlastname-yourfirstname-resume.pdf into your project folder. You will need to link to this using a RELATIVE link. See this static screen shot for help. or check out this animated gif

note

You cannot preview your resume pdf file in a text editor. So if you see a lot of raw code, or if you get an error message when you click on it while in the text editor, ignore it. What matters is that you can download it or view it in a browser based pdf plugin. Not every has a browser that can preview a pdf file. You will be graded on will it download if clicked.

A RELATIVE URL points to a file within a web site:

<a href="firstname-lastname-resume.css">My Resume</a>

A RELATIVE URL can also point to a file within a directory in a web site:

<a href="files/firstname-lastname-resume.pdf">My Resume</a>

Don't use an absolute URL (contains an http:// link) to point to your resume on another server or even on the opal server:

<!-- don't do this: -->
<a href="http://www.example.com/firstname-lastname-resume.pdf">My Resume</a>

11. Classes Page Content: Absolute Links to each class you are taking this semester. If your classes do not have links, then you can link to the department. Or, you can use absolute links to other sites in the content of your site. The primary goal is that you know how to link to something out on the web. Mozilla Developer Network on best practices for creating hyperlinks

Here is some sample code. You could combine this with tabs (ex. 1, ex. 2) or pages (ex. 3, ex. 4 ) to meet your third level requirement.

<p>These are the classes that I am taking this semester.</p>
      
<h2>INLS 161</h2>
<p>Tools and concepts for information literacy. Includes software use and maintenance, 
computer applications, and networked information systems.<br> 
  <!-- Absolute link example below -->
  <a href="https://ils.unc.edu/courses/2019_spring/inls161_001/01/index.php">Spring 2019 INLS 161</a></p>

<h2>Economics 125</h2>
<p>The idea of the course is to inspire and change the entrepreneurial mindset and
 show that there is a creative process to it. We have guest speakers come in most
  days to talk about their projects and give us ideas of our own. It has really
  shifted the way I perceive a business and how it operates.<br> 
   <!-- Absolute link example below -->
   <a href="https://guides.lib.unc.edu/eship">Economics 125</a></p>
      
<h2>Spanish 300</h2>
<p>SPAN 300 is a review of Spanish grammar and composition. I feel like this class 
has really helped me improve my grammatical and conversational skills.<br> 
<!-- Absolute link example below -->
<a href="https://romancestudies.unc.edu/advising/spanish/" target="/_blank">Link to UNC Spanish Advising</a></p>

<h2>Philosophy 105</h2>
<p>A course on how to identify, analyze, and evaluate arguments by other 
people and how to construct arguments.<br>
  <!-- Absolute link example below -->
  <a href="https://philosophy.unc.edu/undergraduate/undergraduate-courses/spring-2018/phil-105-001-critical-thinking/">Philosophy 105 Class Web Page</a></p>

12. Interests Page Content: At least an HTML ordered list.

<ol>
 <li>book1</li>
 <li>book2</li>
 <li>book3</li>
 <li>book4</li>
 <li>book5</li>
 <li>book6</li>
 <li>book7</li>
 <li>book8</li>
 <li>book9</li>
 <li>book10</li>
</ol>

13. Third level pages or section: You can use classes or interests. In past classes three placeholder objects for links to tasks 3-5 were required. Single Page Example and Multipage Example I no longer require the placeholder objects if you use classes or interests for your third level.

14. Every page should have a page last updated object.

<p>
  <script>
    document.write("Page last updated on " + document.lastModified);
 </script>
</p>

15. Make sure your all your navigation links work.

16. One client side script. (Javascript example.) See the Scripting notes in the left sidebar for more information. This is a specific required rubric item distinct from other rubric items that may or may not use javascript.

17. One server side script. (Google Form or Google Fonts or Google analytics.)

18. Make sure that all of your images have "Description" attributes.

19. Verify that you do not have any spaces in file or folder names. I count this as failed validation score.

20. Verify that your image names and your source code CASE/CASE case/case match: (image.jpg must point to image.jpg) (image.jpg cannot point to image.JPG on OPAL)

21. Upload to Opal with your SFTP program.

22. Check HTML validation: Copy a link from your home page and paste in the validation form: i.e. https://opal.ils.unc.edu/~onyen/my-website/index.html

23. (Optional; not graded) Check CSS Validation: Use same URL: i.e. https://opal.ils.unc.edu/~onyen/my-website/index.html(If you make an obvious error, apart from the theme, and it causes a visible, serious break or problem, I will let you know in your feedback so you can fix the issue.) Do your best to fix validation errors that are obviously your code edits. If the issue is with your template, that will not count against you. For example, if you are using a bootstrap template, there will be some CSS validation issues with the bootstrap.min.css file; but, you should not be touching that file, so it is not your fault. (Unless you did indeed edit it by accident.) There may be some issues with cut and paste Google Font and Google Form code, as well. That will not affect your validation grade.

24. Submit your assignment in Sakai. Paste your url in the assignment text box. If you can't figure out your validation errors, mention that in the submission post.