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 posts - FAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : Misc : Podcasts for each unit
Updated resource pages: Unit 1 - Unit 2 - Unit 3 - Units 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
Hello,
Here is my learning diary and submission for Unit 3.
Work done
For Unit 3, I read all of the material on Moodle and some of the resources that were linked. I spent a lot of time reading about CSS and watched several tutorials on youtube. Then, I created one stylesheet using standards-compliant CSS code.
Personas
I tried to make my layout simple and easy to navigate for the people who don’t want to spend too much time trying to figure out where to find things on the website and to get them to keep coming back (Persona 1). I included links to external websites for the plants I featured so that someone looking for more info on plant care can follow the link (Scenario 1). I also included plant toxicity information about the plants so that my Scenario 2 & 3 people can easily know if the plant would be suitable for their pet-friendly homes (cats and dogs). I included lots of pictures and tried to make the website aesthetically pleasing for persona 2 (and scenario 3). I included a blog page that features various types of plants so that the people in scenarios 4 and 6 can easily find plants that have low-light requirements, or find where to buy plants in their area. I ensured cross-browser and device compatibility in my code for the various types of users by testing it in different ones and including a CSS reset at the beginning of my code (e.g. Scenario 4 uses an iPhone). I didn’t make the website too wordy and used simple words and lots of pictures so that someone who may not have a perfect understanding of English can still easily use the website (persona 3).
Learning Outcomes
The learning outcome for Unit 3 was to be able to write well-structured, easily maintained, standards-compliant CSS code to present HTML pages in different ways. I achieved this outcome through the creation of my unit 3 cascading style sheet (see in attachment). The content of the CSS file is well-structured (each section is clearly defined, proper spacing and formatting was used), easily maintained (many comments so that anyone can look at the code and easily figure out what does what) and standards-compliant (I used code found on the websites recommended on Moodle). You can see that each HTML page looks different (but follows the same theme).
Explain and analyze what went well and what didn’t
I found that learning CSS basics went really well and it seemed straightforward enough. However, it wasn’t as easy when I started to actually write the CSS code. I wanted to use code available online, however I found it very difficult to adapt it to the purposes of my website or to suit the HTML code I had already written. Although this unit says not to change the HTML code, it was making my work so difficult not to that I had to go back and change some of the code to make it possible to apply the css. I spent way more than 15 hours for this unit, and I’m not sure why. Maybe I tried to make it too pretty, or maybe I had too many html pages. Some of the changes I made:
I have no previous experience with CSS so there was a big learning curve.
If I was to do this again, I would not try to make everything perfect, but just focus on making everything functional and compliant and meet the requirements for the course.
The most surprising thing I learned is how much you can actually do with CSS!
The most useful thing I learned was the css box model and how margins and padding works.
What I learned about myself is that I easily get overwhelmed when I try to do too much at once, I need to focus on small parts and do everything one step at a time, and not spend too much time on unnecessary components.
Resources:
CSS Crash Course For Absolute Beginners – Traversy Media
Learn CSS – Codecademy
Pseudo-classes: https://www.w3schools.com/CSS/css_pseudo_classes.asp
Inspiration: https://pixelarity.com/editorial
Submission
Link to website: http://student.athabascau.ca/~soniade4/COMP266/Unit%203/Website/
The Landing is a social site for Athabasca University staff, students and invited guests. It is a space where they can share, communicate and connect with anyone or everyone.
Unless you are logged in, you will only be able to see the fraction of posts on the site that have been made public. Right now you are not logged in.
If you have an Athabasca University login ID, use your standard username and password to access this site.
We welcome comments on public posts from members of the public. Please note, however, that all comments made on public posts must be moderated by their owners before they become visible on the site. The owner of the post (and no one else) has to do that.
If you want the full range of features and you have a login ID, log in using the links at the top of the page or at https://landing.athabascau.ca/login (logins are secure and encrypted)
Posts made here are the responsibility of their owners and may not reflect the views of Athabasca University.
We block sites that track your web browsing without your permission. If a link is greyed out, click once to enable sharing, once more to share.
Comments
Hello Sonia!
I've been keeping up with your posts since unit one and i love how simplistic yet elegant your website is! You chose some gorgeous colours and it looks very professional. Keep it up!
Bassim
Hey Bassim,
Thank you so much for the feedback! It really helps!
Sonia