Landing : Athabascau University

Group members: this is the place for your learning diary. Use this to post your zipped-up site at least once each unit, and your reflections as often as you wish (at least once per unit). Please write your reflections directly in the post, not as attached files. Where you do need to attach documents, such as for unit 1 designs, use PDF, PNG or JPG formats. You can attach files using the 'Embed content' link in the editor.

QUICK COURSE LINKS:  Add blog post - Read latest group postsFAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : Misc

Unit 2 Learning Diary

  • Public
By Kelsey in the group COMP 266 March 16, 2020 - 4:26pm

Site files

site files on GitHub

link to the site

Fixes to sample1.html


Fixes to sample2.html

The doctype was correct, the opening head tag is on the wrong line, the closing head tag is also on the wrong line, there is nothing specifying the language used, the meta tag is not closed, whats nested in the head tag is not indentid properly.

What I did:

I started by going through the unit 2 study guide and then I started learning HTML using the following site After going through the HTML section I looked at turning HTML into XHTML (as we could choose to use html5 or XHTML I choose html5 and did not do any XHTML) and used this to learn what tags were not supported in HTML 5 and this to find the Attributes that are not supported in HTML5. Then I began to write a ruff-draft of the content that I would be using to populate my pages and list what types of examples I would be using. I then proceeded to learn Github, if you don't use GitHub I would recommend you start and sign up for the student version (here) as it comes with lots of free helpful things. Then I wrote the HTML for all my pages in HTML5 while reading up on proper HTML formatting. As of right now I still have much of the content left to fill out, but should have most of the content for the site filled in by the end of unit 3. then I uploaded the site files to my webspace so I could run the HTML through this and find out where there was bad HTML that I missed. After everything was in good standing I re-uploaded the files to my webspace and added the files to my GitHub here.

What went well and didn't go well:

Creating the content for the site has gone smoothly so far, but formatting everything to flow from one section to another in a very smooth simple and easy to follow way has proven more difficult than I had anticipated.

What I would do differently:

I would have mapped out the personas from unit 1 and how their specific needs are met much earlier in my design process because that held me back with many different edits while writing the content. for example, when I first started making the site the sections in the side navbar as well as the top navbar were not in any particular order and just thrown in based on what I was currently working on and I had to come back and change all that so there was structure. I could have saved myself time by putting more planning into the work but I was too eager to start writing HTML. I should have also found a named all the images in the same convention at the start to avoid wasting time renaming all of them.

The most valuable thing I learned:

That I don't put enough time into planning and need to take my time when it comes to the creation of this site. And how valuable GitHub is as well as how to use it.

Learning Outcomes:

[1] Write well-structured, easy to maintained, standards-compliant accessible HTML code.

As seen in the What I did section I used an HTML validator to check that I had standard-compliant HTML code You can view the site file here on GitHub. The HTML is well-structured because of the sections being organized with divs and IDs, though there is much more that can be done I thought it would be better to wait until I start using CSS as what I will be doing is not 100% clear without it and I have also not finished writing all the content. One area I am not sure about is how I have structured many of the img tags as the only way to keep them at most 80 characters long with easy readability. There is also a table in CSharp.html that I may be switching into an unordered list and removing the dots as I am unsure if the data in it classifies as tabular thus it may be inappropriate to use one for it. The personas and their scenarios are taken into consideration below

  • James: needs a linear path of progression - The sections have prerequisites at the top of the page and suggest where to go next
  • James: tell if he has learned what he needs - There is a quiz section (No content yet)
  • James: want to become a better programmer - C# has a section on the best practices
  • Key: slow wifi - the images are JPG which take up less space they are also all low resolution much has yet to be addressed
  • Key: easy to follow tutorials - The content only covers what they will absolutely need in a structured way
  • Jenny: likes having in-depth knowledge - the project will be very detailed and there will be links to more details about all of C# (not done yet)
  • Sebastian: likes to play around with things and get hands-on - (yet to be addressed)
  • Montana: runs into a problem and is unable to find a solution on the website - yet to be addressed
  • I am unable to address everything this early on into development

Given the Indicative Grading Criteria

  • 50% HTML structure, maintainability, standards compliance, accessibility, comprehensiveness—including use of heading styles, text emphases, images, multiple pages, hyperlinks, forms, tables. - full 50%
  • 15%: Accuracy and depth of critique - full 15% as I have sample1 and sample2 fully and re-written then in a proper format
  • 30% Linking with personas and scenario - 25% as I was unable to link them all at this time
  • 5%: Effective communication - full 5% as I have provided links to all my work and given detailed explanations

self-awarded grade of A


These comments are moderated. Your comment will not be visible unless accepted by the content owner.

Only simple HTML formatting is allowed and any hyperlinks will be stripped away. If you need to include a URL then please simply type it so that users can copy and paste it if needed.