What was Completed:

As soon as I found out that CSS was used to add website styling, I was extremely excited to learn this chapter. I knew that this unit would allow me to tap into my design creativity. Because CSS is more than just "adding content" to a webpage, I felt that this unit would help me see the beginning of what will eventually be my completed website. Although I enjoyed the simplicity of working in HTML, it did not exactly create a very aesthetically pleasing website. This was of course anticipated to be the case ahead of time. Overall, throughout this unit I took a dive into the study of CSS, then implemented it in order to add styling elements to my various webpages. 

I began this unit by covering all of the posted course material. From there, I began doing my own research in order to help me grasp the fundamental skills before I started coding in CSS (Some of the links that I found to be helpful are attached in the previous post). With an understanding of the basics, I began the planning stage with a detailed sketch of each page. Here I planned out things including but not limited to the overall look & feel of the page, colour combinations, sizing & layout. It was in this stage that I sketched out the layout for the first time. I used this time to determine how the information would be conveniently placed for even the least web-savy users. 

At first, I was planning on making one external stylesheet that would control all of the pages. However, because the information layout of each page is so different, I was having quite a bit of trouble with this. Instead, I opted to sacrifice the modularity of the website's styling for the ability to easily customize each page. The way that the website currently stands, each unique page has it's own designated stylesheet. This is only the case because each topic currently only has one sub-page. In the future, as I further develop the depth of each topic, I would like to make it so that one stylesheet controls the "look" of an entire topic. Hopefully, this will give each of the main topics a different look and feel, possibly making the website easier to navigate (hopfully aiding the users whom are only interested in one of the many topics on my site)

After I had decided the structure of my website styling, I began searching for resources which would aid me through the process of building my webspace. Many of the resources that I found helpful for the seemingly small but tough problems were listed in my previous post. However, I found myself utilizing W3 Schools CSS Page almost constantly for simpler issues regarding syntax related problems and specific semantics. I also used this site to learn how to add an image to a webpage using CSS without writing it in HTML. In this case, it was to import the images used for the background. 

Once I really began to grasp CSS programming, I applied this newly gained knowledge when implementing things such as paragraph styling, header layouts, background sizing & dimming of the original image, etc. All of these steps were completed for the main goal of making my website easier to read & navigate for my desired users. Despite what I mentioned previously, I decided to maintain the styling consistency across pages for my various topics. This is simply because I feel that I currently don't have enough sub-pages for each topic to justify different styles for each. I tested this idea out and found that the website looked confusing and cluttered. It looked as if the website was lacking direction. Thus, for the amount of information currently availible on my site, I prefer uniformity across all my pages. It gives the website a minimalistic feel that is ultimately simpler and more organic to navigate. 

One crucial addition that I made to my site while completing this chapter was the navigation bar. There were several video tutorials on the web that proved vital for styling this piece. I had to do quite a bit of research to learn how to highlight the different navigation titles when a mouse is placed over them. I learned that this task is a basic button animation that is implemented using the hover selector. The use of this tool is typically to select any element that the user places their mouse over. In my case, this was used to highlight the navigator tab of interest with a white box. This addition is obviously problematic for any touchscreen users, however, the detail is so small that it shouldnt effect their experience greatly. I also noticed that using the percent unit of measurement rather than pixel number helped for access from various computers. More specifically, not all sceens are the same, meaning that different sized screens can respond to pixel count very differently.

What went well?

Overall, I feel that this unit went very well. In the beginning of this chapter I was able to gather all the necessary information to learn the basics to CSS web development. Begining by watching long web styling tutorials helped inspire my planning and design process tremendously. I feel that without watching all of those videos, the site would have ended up being a combination of poor colour choices and whim decisions regarding layout. Overall, I was inspired to complete a much more systematic and meticulous planing stage because of this. When it comes to building the design, I was able to implement dimmed background images which durastically improved the look and feel of the site. I am also exceedingly proud of my navigation bar implementation, especially the button animation. 

What went poorly?

Despite that I feel this chapter went well, there are always things that could have gone a little smoother. When I completed my first draft of the website stylesheets I ended up with a home page that didn't look much like a welcome page for a site. From there, I decided to add an additional title page, one that was intended to be simple welcome screen before accessing a more detailed home page. I am also a little disappointed with the fact that I chose to use a style sheet for each individual page. Although this was done in preparation for future growth to the site, it currently makes updating styles between pages much more tedious. One more thing that I wish I implemented more tastefully were the photos, I can't help but think that they could have been integrated into the flow of the design a little better. 

What I would do differently? 

If I were to do this unit again, there are several things that I would improve on with my second attempt. The main thing that I would do is make sure that all of my units of measurment are in percent (%). Although this was implemented for the navigation bar, there are other points in my website were this should have been done. I would want make this change several key reasons. Firstly, while using the percent unit, text remains fully scalable for mobile devices (increasing accessibility). Further, many web-developers use the pixel unit to ensure that a pixel-perfect rendering of their site is displayed by the browser (this is something that I am not currently concerned with). Another problem with the pixel unit is that it doesn't scale upward for visually impared users or downward for mobile users. 

I also would like to change the design of the home page if I were to complete this unit again. I believe that the original page's design was far to cluttered for a welcoming page to a website. I ultimately feel that the styling of the home page does not best represent the message that the website is trying to spread. This may be improved upon if the layout of the information was made easier to follow, or if each navigation topic was given it's own image. I also think that this could help users easily access and find the pages which they are looking for at a quick glance.  

Zipped File of Code: