site files

files

What I did:

For this unit, I added CSS to my webpages to make them look more pleasing. The first thing I did was go to w3schools to learn the basic CSS syntax and best practices. After that I read through their tutorials to learn more about each style attribute, then I started learning about making a webpage responsive, navigation and dropdowns. One of the major challenges I faced this unity was making a table that would look good and function well for mobile devices, with the help of this video I was able to do it though. I also needed a way to separate the different sections on the pages and decided the best way to do this would be to use a small line as a divider but I also needed to find a color palette for the theme of the site.

What Went Well and Didn't Go Well:

Overall everything for this unit went good, the only thing that I think I would say was bad is the fact that I was exposed to the CSS for making a variety of different things which left me stuck thinking in terms of how the CSS was done for the examples and I didn't write my own CSS for some of the more complicated things like the top navbar. I was having some difficulties with the drop-down menu for projects in the top navbar, the drop-down content was not showing at all, I thought that the issue was with setting .top-navbar .dropdown: hover .dropdown-content class display to block but the issue was actually in .top-navbar .dropdown-content the position needed to be changed to fixed. I realized that the issue was in this statement because the dropdown class li I added a red border that showed on hover so I knew the issue was part of a different statement. I wanted to have all the content done and added to the site by this point but as there is so much I have not been able to add it all, due to the amount of needed content I will probably still be adding it for the next 2 units. After uploading the files to my webspace the styles were not loading until each page was refreshed, but that was only on my desktop. Everything loaded fine on my phone and laptop.

What I Would Do Differently:

I would try harder to ignore that I know and have access to the CSS for certain things to challenge my self and write the custom CSS for the more challenging things.

The Most Valuable Thing I Learned:

The most valuable thing I learned was making the site responsive and how to use media queries. I found this to be very valuable because it is something that I will be using on every website I create so it is best to have a good understanding of how they work and the applications early on.

Learning OutComes:

Easily Maintained & Well-Structured

I wrote my CSS in an external file, it is just the one file shared throughout all the pages as they all have the same relative design. I have used comments to indicate different sections in the style sheet keeping related CSS grouped together and have also not used any in-line styles. I have also tested the page in google chrome, firefox, internet explorer and edge

Standards-Compliant

For the formatting of the CSS I followed this and follow the CSS3 standards based on what I learned here thus I have applied properties and values that are compatible with CSS3 standards, this can be seen throughout the CSS file.

Responsive Design

Using the w3schools tutorials I was able to make a website that would shape the content based on the screen width of the user's device I tested the responsiveness with the Firefox browsers web developer tools. Unfortunately, until I start using Javascript I cannot make the navigation bars work responsively yet for mobile devices.

Relations to Unit 1

As one of the big goals of this site is the ease of use and to be easy to follow it was important that I make it obvious when you have reached a new section. To do this I added a divider class (style.css line 160) and used it after each section was done. With the use of columns(.col-) and rows(.row), I was able to remove pointless white space and more easily group together related content. For example in Projects -> Top-Downshoot I could show an image of the methods and then but a detailed explanation the right. Being able to group these related areas of content this way will make it easier for people who want a linear path of progression (Personas: James) because they will be less likely to skip something and then be confused later on. And the images are .jpg for loading optimization. Jenny likes to use a site that looks nice and has a good feel so it was important to have a good color palette that is not too large thus the dark mode does not use too many colors. after adding the styles my webpages now look at how they are designed to from the design documentation mockups. Most needs rely on the content and its location on the page not the look of it so that's it.

Indicative Grading Criteria Self Grade

A - the pages are easy on the eyes, explicit attention to the needs from Unit 1 are met, support across multiple browsers tested, variety of CSS properties used, use of comments, and well structured

Citation

w3schools (2020) Fancy Table, source code

w3schools (2020) Navigation Bar horizontal source code

w3schools (2020) Navigation Bar vertical source code

w3schools (2020) responsive columns source code

Milan (2020) Divider, source code

all citations are documented in the css file