Hey All! Here is my Learning Diary for Unit 3.

Work I Have Done For The Unit:

Throughout the course of Unit 3, I spent time developing well-structured, easily maintained, standards-compliant CSS code, that I feel does an outstanding job meeting the needs of the personas and scenarios I outlined in Unit 1. 

While styling my website, I made excellent use of both CSS 2 and CSS 3 options to develop two different style sheets, style.css and works.css. As of now, all the pages on my website can be categorized into two areas, either a main page, or a blog/works posting page. The two different style sheets target these two categories of pages, specifically, 'style.css' is used to style my index.html, whereas 'works.css' is used to style my project and blog pages.

In both style sheets, I have used 'CSS Grid' and 'CSS Media Query' to layout content, and create dynamic pages that present themselves well on screens of all sizes (i.e. Laptops, tablets, mobile devices). Both CSS Grid and CSS Media Query are advanced CSS3 techniques that enabled me to write accessible CSS that not only looks good, but can easily be maintained and reconfigured in the future.

Both CSS grid and CSS Media Query are fully supported and compatible with over 90% of internet browsers used today. For the 10% of users who's browsers do not support these CSS options, the website degrades gracefully, and the content is displayed in a simpler format without issue. The graceful degradation of the website can be largely attributed to my wide-spread use of div and span tags in Unit 2, which provided the HTML with a strong structure. In fact, my efforts in writing strong HTML code in Unit 2 made styling the website very easy, as my HTML required almost no changes.

Overall, the style of my website matches my initial design from Unit 1 exactly. In my Index.html I have a header at the top of the page, that contains both my name, and a stylized menu. The menu contains links that connect to different sections (bookmarks) within the index.html. Outside the header, there are 5 main sections. I am particularly proud of how the 'works' and 'blog' sections of index.html are styled. They each contain links formatted as 'cards' with an image and title that connect to individual works and blog pages. This format is an attractive way of presenting content to users who may be interested in learning more about the experiences and blogs I have posted on the site.

Learning Outcomes & Requirements:

The goal of this unit was to "write well-structured, easily maintained, standards-compliant CSS code to present HTML pages in different ways." Based on the look of both my website and my code, I feel I have met and exceeded this criteria.

In terms of requirements, there were a number described:

Requirement 1: an attractive set of pages that effectively separate the content, structure, and presentation of the site

• I met and exceeded this requirement. Using a combination of CSS and HTML divs, I effectively separate website content in a way that is appropriate for both computers and mobile devices.
• Links to works and blogs are formatted as 'cards', which are an attractive way to present content.
• The website is structured is website in a way that is easy to navigate, allowing users to find the information that they are most interested in. 
• Text on the website is easy to read and well presented. There is not too much, nor too little text.

Requirement 2: sophisticated use of a wide range of CSS options to format, style, and position content on the page, using many different selectors, combinations of selectors and declarations in a manner that enhances both communication and presentation as well as demonstrating mastery of the technology

• Wide use of CSS grid for positioning content on the page. (display:grid)
• Used more traditional CSS display properties like 'display:block to position text within divs
• Sophisticated use of CSS media query to enable dynamic position of content for effective display on devices with a wide range of screen sizes
• Used many different selectors and declarations to enhance website presentation, and effectively format content such as links.

Requirement 3: close and explicit attention to the needs identified in Unit 1

• Dr. Whittmer was interested in accessing the website to view projects Jamal (me) has involved in. He needs to be able to access the website from his iPad, and quickly navigate to see Jamal's 'works' and 'experience'. The website meets Dr. Whittmer's because it is fully compatible with his tablet, and he can find all the information he requires on the home page. Specifically, when Dr. Whittmer accesses the website, he will see menu links that will take him directly to the 'works' or 'experience' sections of the website. He can also scroll down the index.html, and find the information presented with images and large text.  
• Sanjay Lee was accessing the website from LinkedIn with goal of seeing who Jamal is. Sanjay also wanted to learn more about the automotive projects Jamal was involved in. The website meets Sanjay's needs, because as soon as he accesses the main page, he can scroll down to the 'works' section and see links with corisponding images. If he clicks the links it will redirect him to more detailed information about a particular project. These project pages have a simple structure and are easy to read, putting a direct focus on content. 
• Both Matthew and Stacy were interested in reading content that would demonstrate Jamal's interests. The website meets their needs, because as soon as they accesses the main page they can immedietly develop a high-level understanding of Jamal's interests from the various 'blog posts' and 'works' headlines.  If they would like to learn more, they can access individual blog posts or works pages.
• In another scenario, Dr. Norbain accessed the website with a link that took her directly to an individual 'works (project) page'. She would then navigate to the main page from the project page. The website meets her needs because on every individual project/works page or blog page there is a menu at the top linking directly back to the main page. 

Requirement 4: no cross-browser compatibility issues and degrades gracefully if browsers do not fully support CSS

• No cross-browser compatibility issues. The website looks and feels good to use on a wide-range of browsers, and additionally on a wide-range of devices.
• I used media query to develop a version of the website specifically for use on mobile devices
• The website degrades and maintains the same style of looks even when a users browser does not fully support CSS

Requirement 5: well-presented and maintainable CSS code with good use of comments and structure

• CSS code follows the structure and order of the website, making it easy to maintain and understand. (i.e. the formatting for the header of the page is located at the top of the css code)
• CSS code contains comments that enable a developer to understand what is happening at certain places in the code
• The names for classes are highly relevant, and make sense for the sections of the website they target.

Requirement 6: certainly making good use CSS 2, likely using a number of CSS 3 options

• CSS Grid and CSS Media Query are vital components of CSS3 and used throughout the code
• CSS2 appears throughout both style.css and works.css in the formatting of text and divs sections

Requirement 7: A typical style sheet might extend over several pages, and it is quite likely that you may include more than one style sheet.

• I wrote two style sheets for the website that each extend over several pages.

Submission: 

SCIS Web Space (working-copy): http://student.athabascau.ca/~jamalha2/

Permanent Location for Unit 3 HTML and CSS Files on SCIS: http://student.athabascau.ca/~jamalha2/unit3/

.Zip File:  

Github Pages: http://jamalhabash.ca/comp266/