link to files on student server: http://student.athabascau.ca/~kimberlyli13/comp266/Unit3/

Learning Diary:

So CSS is super fun - I feel like learning CSS helped me to understand HTML so much more especially div containers - which I've now got a decent grasp on. I honestly won't lie, the HTML assignment where we needed to create div and span tags but couldn't use them really threw me off because I needed the full picture to understand, now I do and it's so much fun! I was asking myself over and over "why are we creating styles when we aren't supposed to use them?". The internal use of styles mislead me in the tutorials - I think this has a lot to do with using only the w3 school tutorials specifically because they don't really explain where the separation of HTML and CSS begins. Anyways - I wound up just taking my div classes and their specifications and cutting them out of my HTML source code and pasting them in my external CSS source file, I then just left the div tags. I definitely feel A LOT more confident about my HTML now, because I understand what I need and what I should leave out.

Truthfully, CSS cemented my interest in web development, so I'm really quite excited to get better at it - excitement aside I did have some issues with styling my site, but mostly with the position and display properties - this led to some serious trial and error where I essentially had my editor open and was just doing iteration after iteration until it looked the way I wanted, these were incredibly minute changes mostly to the display and position property values, which I feel now that I mostly understand, but I tried many different things to get my body to display a certain way and was struggling with my footer especially. I'm not entirely sure if the absence of article and aside tags really affected my pages but I did end up adding and removing them to see how my layout would appear with all my containers in a static position.

PLEASE NOTE: I created two separate and external style sheets for my website, there are two types of pages essentially, 3 are split bodied pages (there are two containers side by side inside the body with a header and a footer), and 3 single bodied pages (one body container with a header and footer) which the nested containers are then styled within. I did this to make use of two style sheets for layout purposes, but to also prepare myself for the potential changes I will need to make in the javascript section of this course. I wanted a clean look on my website as it's meant to be a professional web design company, so I wanted it to look minimal, but stylish. I think I was A BIT ambitious here and definitely do not feel like I am a CSS genius yet, but I think relative to the course I have done a really good job and have challenged myself to go beyond just basic concepts and to investigate ways to make my website more accessible and user friendly.

ANOTHER NOTE: The header for the career, contact and policies pages appears differently on purpose. I did not set the background for the header to an image for the home marketing or design pages as I am trying out two different style sheets so I can see which layout functions better with javascript - I will be updating the headers after the next unit.

I decided the best course of action would be to keep the colour scheme simple in tones of blue and some white backgrounds, and black text. - I did style background colours and text colours inside my navigation bar, and body divs. I am planning to add a background slideshow to my .bodyLeft div class style, but I am waiting to learn javascript because I would like to create a slideshow.

I struggled for a while with making my div containers take up the full remaining view height of my home, marketing and design pages, I've referenced these sources on Stack Overflow:

https://stackoverflow.com/questions/40653348/how-to-make-a-div-fill-remaining-vertical-space

https://stackoverflow.com/questions/25672892/take-all-available-viewport-height-via-css

I haven't re-used any of this code, but this lead me down the path of figuring out what calc() abilities were, and that lead me to this article:

https://css-tricks.com/a-couple-of-use-cases-for-calc/

This source gave me some weird info because I wasn't sure exactly what native CSS was, and then I got confused here because it was talking about using libraries, and android apps, so I wasn't entirely sure about this and didn't want to use it because I really truly didn't understand it yet - but then I did give it a try and it worked, so that was pretty cool! I didn't solve my verticle height problem with it but it did allow me to fit my body containers exactly as I wanted to. 

On the verticle height problem, I reviewed the CSS units portion on the w3 website:

https://www.w3schools.com/cssref/css_units.asp

I tried to apply this but wasn't sure I was doing it right, that led me to this:

https://www.codegrepper.com/code-examples/css/css+height+100vh+vs+100wh

This was an epiphany for me, I feel like the w3 schools tutorial is so basic it doesn't really cover the new CSS 3 features, but the view height and view width units are literally amazing and combined with calc() it's made the layout so much easier to do on my homepage, but then it threw things off on my other double-bodied pages - so I needed to play around some more with formatting my tables properly to fit inside the .bodyRight container.

I did leave my span tags, as they were required in the last Unit but we couldn't use them so I wanted to ensure they were used, I just uncommented them - I did edit them very slightly, this was for purely aesthetic reasons, and because I didn't fully understand span tags prior to this (I literally thought they were exclusively for borders because of the w3 tutorial not really specifying that they could be used for much more) I wanted to show that I had learned their actual use and that I could make my page look less idiotic.

I want to note here that I used these two additional resources when creating my style sheets, and I did not re-use this code as I did not use any internal CSS, but I did use this as an educational tool to better grasp the concepts of positioning. I did not comment this into my source files as I did not actually re-use any code whatsoever.

https://www.educative.io/edpresso/how-to-make-side-by-side-divs-in-html

https://stackoverflow.com/questions/5453586/how-to-set-the-style-of-an-image-in-a-div-class

I will also note now that I have had to edit my HTML files from my Unit 2 submission very slightly, these are the changes I made, and why:

I changed the link to the stylesheet in the index, marketing, and design pages as I decided to change the name of the style sheet, I also added a different style sheet link to the careers, policies, and contact pages, as well as edited the footers of all 6 of the pages as I seemed to have forgotten to do this in Unit 2 so they would have span tags. I also rearranged the .bodyRight and .bodyLeft div tags for my positioning - I did this because it made more sense for the flow of the page. 

Linking Design to needs outlined in Unit 1:

My website now has the advantage of visual mark-up, and I've used this to display the elements of my page in more visually enticing ways. My personas and scenarios entirely rely on the services and information that this website offers, so I have tried to punctuate that information using colour, text, and layout choices, making it easy to find, and easy to engage with. I used the website as a space to showcase the formatting skills of Structure Design.

On the home/marketing/design pages I used two navigation menus positioned at the top and bottom of the page which utilizes nested div containers and span tags - this allowed for me to make the navigation menu appear as buttons instead of simple and boring links. I used padding and text spacing to make them look larger and to position my text in the center. This makes them easier to see and appear as obvious navigation buttons, their titles are telling and it improves the navigation throughout the site, making information easier to find for any and all personas, but particularly my older personas. The body of these pages is split, the left side is going to eventually be a slide show with its other content, but for now, is either empty (as all it will contain is a slideshow) or it is housing the same content as before - this content will be styled around the slideshow on the left, so it is very minimally styled right now, but on the right side of the body I have utilized positioning to create a different area for information. I feel the split-bodied design allows the pages to meet the needs of many personas at once, by being visually captivating (once the slideshow is done), by being easily navigable, and by providing informative content in a clear and easy to find way. 

On the career/contact/policies pages I changed the headers to include a background photo, I did this because I feel the photo gives the page a more professional design (I know it's grainy, I'm not a stock photo wizard yet and this was what I could find) but I wanted to showcase that I could do both. I aligned the photo in the center of the header, and had it completely cover the space inside the header border - I set this to adjust for various devices by setting image width to calculate 100% minus the borders/radius/padding. I feel like this meets the needs of Janes persona, who is seeking something visual and edgy. It also meets Dirks needs because he is lost in the web design world and it would make him feel like Structure Design is capable of making his website look professional too. This page layout makes good use of colour and borders/padding to delineate separate parts of the body, it communicates the content effectively, and has the functionality as well - an example of this is the careers page which uses a table to display all job opening data, followed by a form with the capability of accepting a resume. The Contact page meets the needs of every persona with an inquiry for services by allowing a channel to ask specific questions, and not just with radio buttons, but a textarea that can be manipulated in browser, this specifically meets the needs of Jackie's persona, as she is usually on her phone and this allows more functionality for that. The policies page offers a confidentiality policy which would be of interest to Darlene's persona, as she is in the corporate world and wants to have a pre-existing company website overhauled, as well as databases built for client information - I have no idea how to write a policy so I feel like this page lacks content, that is something I plan to add as we progress. 

NOTE: It is likely over the next few units I will be changing the footer of all the pages to appear like the header of these instead. I would like to create a more uniform layout but I am waiting for feedback and the javascript portion of the course. It's also very likely I will be changing the layout of the other three pages to have a similar body format as this (not a big change, just adding a div), and updating photos/media because I'd like more professional images but I'm working on finding those still.  

Grading:

- My website looks nice, it has a colour scheme and utilizes two layouts and showcases what I can do in different ways. It is well structured and easy to navigate, the titles of menu buttons are obvious, and the page content matches what a user would expect to find there. The pages are functional and linked together, and they look very nice for being made by someone who just learned CSS. I feel that my layout will become more uniform as the course progresses, but for now having two layouts allows me to try more and learn more.

- My website uses many CSS properties including position, display, width, height, border, border-radius, padding, background-image/position/repeat/size, text alignment, color, font-family, font-weight, letter-spacing and several of their declarations, such as relative, static, fixed, inline, block, in-block, 100%, 50px, groove, dotted, RGB colors, and the calc() function. My website also makes intelligent use of div containers (classes) to create separate containers within the body which can be positioned anywhere within the bodyBox container.

- I have identified precisely how every part of my website relates to the needs of my personas in the above section of my journal entry entitled "linking design to needs outline in unit 1".

- I have tested these pages on chrome, edge, and internet explorer and they work and look the same on all 3 browsers. 

- My code is very well structured and I have included many comments describing what I am doing and why (mostly for myself). I cited the references used in my journal entry, but I did not re-use any code, I intelligently reapplied the concepts. 

- I make use of many CSS 3 options, such as relative length units (%), opacity, and rounded corners. 

Content Embedded: