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:

• Decided to remove the search bar function from the top navigation bar to make the css styling easier, was having issues with making the box look right on the page. May add it later on, but it was too distracting at the beginning and taking up a lot of time for something that is not necessary.
• Changed some wording because I didn’t like it when I read it again
• Changed author information to be a comment instead of appearing on the website
• Changed the nav bar to a list so that it can be more easily manipulated with CSS.
• Changed the blog post page format (html) to make it look nicer
• Changed style of contact form to suit my purposes better and make it easier to apply css
• Add “the secret life of plants” to the website logo (so that I don’t need that header on each page)
• Had some errors, such as forgetting to put “=” between class & class name
• Changed the span class name in the plant page from basic to bold to be more descriptive

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/

Zip file: