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 : MiscPodcasts for each unit

Updated resource pages:  Unit 1 - Unit 2  - Unit 3Units 4 & 5 - Unit 6 - Unit 7

mportant notice: the student web server is unavailable. Until this is fixed, we do not require you to upload your site to the student server. See Running a web server on your local machine for details of how to meet the requirements for the final unit

Unit 2 Learning Diary

  • Public
By Celine Grasdal in the group COMP 266 August 17, 2024 - 11:30pm

This unit, I focused on achieving several key learning outcomes:

  • Applying a structured approach to identifying the needs, interests, and functionality of my website.
  • Writing well-structured, easily maintained, standards-compliant, and accessible HTML code.
  • Writing well-structured and easily maintained JavaScript code following good practices.

            Here's a summary of my progress:

            I started by reading through the Unit 2 course instructions and materials, which provided a solid foundation for my work. To enhance my HTML skills, I found a short course on Khan Academy, specifically their Computer Programming JavaScript and the Web section. This course was incredibly helpful, especially in teaching me about the proper use of tags, adding ordered and unordered lists, and fixing code indenting for better readability. For instance, I used this knowledge to clean up my code in Notepad++, ensuring that everything was properly indented and closed, which made the code much easier for me to read and understand (Khan Academy, n.d.).

            Additionally, I learned how to correctly add images to my website. I also explored W3Schools to expand my knowledge further. I focused on learning how to create a simple HTML form page that visitors can fill out and submit. However, I initially ran into a challenge as W3Schools didn’t explain how to have the form email me once the submit button was clicked. After some additional research on their site, I found a tutorial that showed me exactly how to achieve this. I also learned how to add a comment box, placeholders in all the fields, and make fields required before the submit button can be used (W3Schools, n.d.). As a result, I successfully added a contact page to my website, which allows visitors to send me an email via a prefilled email client.

            While working on HTML, I realized I needed a clearer understanding of tags, as W3Schools didn't provide enough detail. I discovered an instructional website by Simmons University that clarified how these tags are used to separate the webpage into sections that can later be styled with CSS. This helped me start thinking about how to design easy-to-read boxes for each section, though I might adjust this once I delve deeper into CSS (Simmons University, n.d.).

            JavaScript also played a role in my progress this unit. I used JavaScript to add a "last modified" date on each webpage. By placing my JavaScript in a separate folder, I kept the calculated time and date neatly on the same line as the text "Modified Date:". W3Schools provided a useful list of JavaScript commands, and a video I found on YouTube offered clear instructions on how to integrate JavaScript with HTML (Hamedani, 2018).

            Finally, as I created the website pages, I was pleased to find that I didn’t need to change my design to fit the needs of the personas and situations I identified in Unit 1. I made sure to add clear sections on each page to make navigation simple and intuitive for all users. I also included text descriptions for images, ensuring that screen readers can accurately describe the content for visually impaired users.

            Overall, this unit was productive, and I feel more confident in my ability to create a well-structured and accessible website. After the references section, I've added links to my critique of the samples we were provided and my website files.

 

References

Hamedani, M. (2018, December 8). JavaScript Tutorial for Beginners Mosh W6NZfCO5SIk. YouTube. https://www.youtube.com/watch?v=W6NZfCO5SIk

Khan Academy. (n.d.). Intro to HTML/CSS: Making webpages. Khan Academy. https://www.khanacademy.org/computing/computer-programming/html-css

Simmons University. (n.d.). Divs, spans, ID’s, and classes. Divs, Spans, Ids, and Classes. http://web.simmons.edu/~grabiner/comm244/weekthree/html-hooks.html

W3Schools. (n.d.). HTML Form Attributes. W3Schools. https://www.w3schools.com/html/html_forms_attributes.asp

Website Critique of Provided Templates