Landing : Athabascau University

Unit 2 - HTML Site Building

  • Public
By Shirley Thang in the group COMP 266 August 12, 2020 - 2:19pm

Sample critiques: http://student.athabascau.ca/~shirleyth13/COMP%20266/Unit%202/Fixed%20Samples/

Site: http://student.athabascau.ca/~shirleyth13/COMP%20266/

HTML Files: Unit 2 - HTML Site Files

Learning Diary

Unit 2 - Learning Diary - Shirley Thang

 

 

Describe briefly what you have done as work for that unit.

For the second unit, I first looked at the two sample HTML files and critiqued and corrected them based on the HTML guidelines. The samples were fixed and an outline of the changes was provided in a separate file. I also created the third page by myself which was linked throughout the two samples.

The other thing I did for this unit was to create the foundation of my website. The outline was based on what I provided in unit 1. I created 10 HTML files—home, in the news, big ideas, overall, unit 1, 1.1, 1.1 lesson, 1.1 practice and contact.

 

Describe the rationale for what you have done, relating your work explicitly to the personas and scenarios you developed in Unit 1.

The goal of this unit was to use HTML to create a site that is well-structured, easily maintained, standards-complainant and accessible code that related the site design I proposed in unit 1. I had to take into consideration of the personas and scenarios throughout writing the code and design. For example, Athena uses an iPad and Marcus uses his phone when accessing the site. I need to make sure the site is compatible with multiple browsers and devices. I also have Philips who is dyslexic, therefore the text must be accessible to him as well. However, this will be something I have to change more in style in the upcoming units as this is part of the CSS and Javascript designs. With this, I ensured that the texts are visible and easy to read and that there are various header sizes used to indicate what is important and what are just texts. I also tried spacing out the sections of the text to not overwhelm the user.

I created the navigation bar at the top that is lining horizontally, as per my Unit 1 design. I wanted dropdown menus for the navigation bar, however, that was not possible just with HTML. Therefore, what I did was to create those dropdown menus on the pages and linked them together. Furthermore, on the home page, from the site design, there is going to be a scrolling banner on the middle. Unfortunately, a scrolling banner was not possible at this stage and therefore, I just created a list of what are part of the scrolling banner and linked them to their individual pages.

 

For each learning outcome for the unit, explain how you have met it, with reference to the content that you produce (typically your code or other design artifacts).

Write well-structured, easily maintained, standards-compliant, accessible HTML code.

 http://student.athabascau.ca/~shirleyth13/COMP%20266/Unit%202/

I created 10 HTML codes for my site (see link above). These took into account my unit 1 site design and the various personal and scenarios mentioned. I wanted to make an accessible site for personals that are using various devices (ie. Laptop, phone, iPad) and also different browsers. I ensured that the texts are visible and easy to read and that there are various header sizes used to indicate what is important and what are just texts. I also tried spacing out the sections of the text to not overwhelm the user. I tried to make it well structure, intuitive so the user can easily navigate the site. I made sure I followed the expectations, the problems listed in the unit outline and ensured they were part of the HTML codes for the site. I ensured I followed the HTML guidelines such that they are standard compliant.

B

 

Explain and analyze what went well and what didn’t.

What went well in this unit was getting started with writing the codes and planning on where to start. I referred to tutorials on HTML. I found w3schools to be a good site for guidance.

What didn’t go as well was the idea of having dropdown menus and how to create them at this stage as there were limitations on just using HTML for it. As a result, I decided to link them to the main page of each section.

 

Describe what you would do differently if you had to do it again.

I don’t think I have much to do differently that will be a substantial impact on the site. However, I would go through the codes again and add more tag to indicate its appearance, position, or behaviour. However, as of right now, I am still slowly building the site one step at a time and do not have a full picture of the aesthetics and colours of things.

 

What aspects of these tasks were most difficult for you, and why?

Surprisingly, what I found the most difficult was uploading the files onto the university’s server. For some reason, I found it difficult to follow the steps and wasn’t as intuitive as I thought it would be. Unfortunately, I felt scattered when trying to navigate this process but eventually found my way.

 

How did your previous experience help and/or hinder you in completing the tasks?

My previous experience helped me complete this unit as I had some knowledge of writing HTML codes and to get started on the unit. However, I needed to learn more about it and used tutorials and examples to guide me

 

What was the most surprising thing that you learned?

One of the most surprising things I learned was how to create the contact form. I had no experience on this and what I usually do is look at examples and other sites and their codes and try to create my own.

 

What was the most useful thing that you learned?

The most useful thing I learned was to create HTML pages which is one of the foundations on web programming. There are a lot of things to do with the knowledge of HTML codes. I’m not perfect at it but at least I have some knowledge about it.  

 

What did you learn about yourself as a result of completing these tasks?

Something I learned about myself from completing this unit was that once I get the hang of something, it will become easier. A lot of the pages were very similar (header, footer, etc). All that was different was the space for information and mostly they were texts. Once I got the background aspect that is consistent throughout each page, it made it a lot easier to create the next pages.

 

Comments

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.

(Required)

(Required)


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