snapzie / f1-3-c2p1-colmar-academy Goto Github PK

Sorry for sending this review so late, there was a mix up in the review assignments.

Great job on the project! You do a good job with a challenging project! Your code quality is really high and it's really easy to review your code.

As far as responsiveness is concerned, I think you do a really good job. The only compliant I have is that you could have added a bit more breakpoints, but that wasn't explicitly stated in the spec, so it's not a major issue that you haven't done it. Do take a look at the Google Guidelines linked in one of the previous issues to get an idea of how to get your mind around responsive design.

As a challenge, I would recommend trying to implement the responsiveness of the project with Bootstrap. I think you'll find that it makes many things easier and saves you from having to write many things yourself.

Once again, great job on the project and keep up the great work!

Great job on the code quality! Comments are helpful to separate sections and the CSS is divided into meaninful segments.

I know the spec specifies only a large screen and a mobile view, but it's important to know how to implement good breakpoints to avoid issues such as this:

I would recommend going through the Google Responsive Design guidelines. They provide examples and explanations and how and when to use breakpoints.

I see that you tried to implement a lot of the responsive features by just changing the display of the elements for the screen and mobile views. While this is a possible solution, it's not really the best for a number of reasons.

1. When you change the window size, you will experience a sudden change in the display of some items which looks glitchy (bad for user experience);
2. You essentially have the same content twice on the page;
3. It's manageable for 2 media queries, but what happens when you have 5? How about 15 media queries?

A better approach is to break out a pen and paper and draw out the page in both views (large and mobile). After you do that, find which elements are the same. What's the difference between the elements in the two views? Example: in one view you have an image on the left and text on the right while in mobile you have image on top and text on bottom. You do a great job of that with the main banner image, just need to implement it the same way in the other places too.