tommygebru/bws-colmaracademy

bws-colmaracademy's Issues

Summary

Grade: Meets Expectations

Summary:
Tommy, congrats on finishing your capstone project! Overall you did an excellent job as I didn't see any errors in your project syntactically or structurally. You also implemented all the required specs for the project, and the responsiveness of your page was impressive as it adapted to every screen size I tested it in.

The only issue I saw in your project I saw dealt with style/formatting as discussed in issue #2. Do consider reading this article as well that covers formatting for HTML for improving the readability of your code.

I didn't see you use any of the following properties/pseudo classes so consider researching them to expand your CSS skills: hover effects, transitions, https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

This codepen showcases how you can use hover effects and transitions together!

CSS Comments

Great job adding comments to your stylesheet!

https://github.com/tommygebru/colmaracademy/blob/1f55ee45c3ee9f58e5cb147dcc2ff6bc25a0bb72/style.css#L5-L7

Media Query Use

Excellent job with your media queries! Making use of all these queries increased the responsiveness of your page tremendously!

https://github.com/tommygebru/colmaracademy/blob/1f55ee45c3ee9f58e5cb147dcc2ff6bc25a0bb72/style.css#L17-L23

Ampersand symbol

The ampersand symbol is a reserved character in HTML which is why it is highlighted in red in the line of code below. It is a reserved character since it is used to add other special characters via their entity reference.

Considering this the way to correctly add an ampersand symbol is by replacing & with &

https://github.com/tommygebru/colmaracademy/blob/1f55ee45c3ee9f58e5cb147dcc2ff6bc25a0bb72/index.html#L37

CSS Style Guide

Your style sheet is very compressed! It is the most space and size efficient, short of being completely compressed to remove all spaces and line breaks. Your technique would require the least vertical and horizontal scrolling as you write and edit CSS but at the potential cost of increasing the difficulty in browsing and finding things you are looking for.

Take a look at this style guide and analyze whether you'd want to adopt its guidelines as an alternative.

Some mentioned in the style guide, for example, are having one selector per line, having a space before the opening { and your properties should all be on new lines as shown below:

section.campus-showcase .main-column {
  width: 60%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px 24px;
}

section.campus-showcase .main-column h1 {
  font-size: 1.85em; 
  font-weight: bold; 
  margin: 10px 0; 
  align-self: flex-start;
}

section.campus-showcase .main-column p {
  margin: 24px 0;
}

section.campus-showcase .main-column span {
  margin: 24px 0;
  align-self: flex-start;
}

section.campus-showcase .main-column img {
  width: 100%;
  height: auto;
}

It's up to you how you format your stylesheet so consider doing some more research in this area to decide which formatting standard suites your needs better.

https://github.com/tommygebru/colmaracademy/blob/1f55ee45c3ee9f58e5cb147dcc2ff6bc25a0bb72/style.css#L55-L72

Alt Attribute

Great job including the alt attribute!

https://github.com/tommygebru/colmaracademy/blob/1f55ee45c3ee9f58e5cb147dcc2ff6bc25a0bb72/index.html#L109