Summary - Githubissues

Rubric Score

Criteria 1: HTML Structure

Score Level: 4
Comment(s): HTML implementation enables proper use of media queries

Criteria 2: Visual Layout for Both Desktop and Mobile Sizes

Score Level: 4
Comment(s): Desktop & mobile layouts math the wireframe in all sections

Criteria 3: Responsive Design (Media Queries, Responsive Units, etc.)

Score Level: 4
Comment(s): Media queries kick in at appropraite breakpoints

Criteria 4: Visual Design and Accessibility (Color Palette, Typography, Transitions, etc.)

Score Level: 4
Comment(s): CSS transtitions were used

Overall Score: 16/16

Congrats on finishing your capstone project! Overall you did an excellent job implementing all the requirements for the projects from the desktop & and mobile layouts top making use of all the tools you've learned about thus far. Apart from this, you did an excellent job increasing the readability of your files by making use of whitespace and adding comments throughout your project.

One thing I did notice was that for your main section when the user hovered on the start here button the rest of the content above would jump and then go back down where the cursor was moved. To alleviate/fix this you can add the border you were adding with the : hover class so that it's present in both states.

For example before your learn-something span rule was the following:

.learn-something span{
  display: flex;
  justify-content: center;
  background-color: rgba(74, 74, 74, 1);
  color: white;
  padding: 1rem 0rem;
  width: 100%;
}

With the border in place it would look like:

.learn-something span{
  display: flex;
  justify-content: center;
  background-color: rgba(74, 74, 74, 1);
  color: white;
  padding: 1rem 0rem;
  width: 100%;
  border: 2px solid rgba(74, 74, 74, 0.5);
}

georgefv / Colmar-Academy