kimmichurri / km-comp-challenge-2

static comp challenge 2

Static Comp 2

About the site

This site is a job posting page complete with various menu items, a job description table and links to reach out via social media or email.

Tech/Framework Used

CSS and HTML

Features

This site is fully "responsive" to 320px for mobile complete with hover states and links.

Challenges/Wins/Fixes

I challenged myself to try using grid on this website. I struggled with how to use grid with media queries but through reading, trial and error was able to make a site that looks great at various page widths all the way down to 320px. I used a table for the first time and found this helpful in organizing information. In my next project I will attempt to make a table-like structure using grid for comparison.

Another challenge I faced is that when I opened my site in Firefox the buttons were a different color. They did not look bad but in the future I would resolve this issue so that the spec holds up against all browsers.

Wins: Not only did I use grid like I wanted to, but I also was able to implement the use of ems which I have wanted to do for a while. This was great for certain parts of the project because many of the elements styled with ems would reduce in size as the page width reduced so my media queries could be shorter.

I felt more comfortable approaching this project. I asked for feedback from upper-level peers on my wireframe and the initial stages of this project so that I knew I was starting with a good foundation.

Not only did I use grid like I wanted to, but I also was able to implement the use of ems which I have wanted to do for a while. This was great for certain parts of the project because many of the elements styled with ems would reduce in size as the page width reduced so my media queries could be shorter.

Things I would fix: -The bottom right "outside connect" section needs to fill the entire container to the bottom of the page to be flush with the bottom of the graph. -The text mext to the small "manager" photo in the table needs to be centered with the photo. I currently am using "vertical-align: super" which makes it look slightly better but not quite up to the spec. -The left sidebar should reappaar and disappear by clicking the menu icon to the top right of it. Currently it is being hidden with a media query at a certain page width. -I would change all of the "dividers" onto the page so that they are not horizontal rules. The horizontal rule doesn't look like a completely straight line all of the time- there seems to be a vertical edge sometimes on some of the lines.

Author

Kim Myers

Spec

My Site- Desktop

My Site- Reduced Screen Size

My Site- Mobile