pablospaniard/colmar-academy

Capstone Codecademy Project

Capstone CodeCademy Project Colmar Academy

colmar-academy's Issues

this changes design from the wireframes

you are more than welcome to change the design, but just wanted to note that this left padding changes it in case it was unintentional

the text sections can be a flex column

.add-str-about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 65%;
  padding: 0 0.75rem 0 1rem;
  /*padding-right: 1rem;*/
}

https://github.com/redstardeveloper/Colmar-Academy/blob/master/resourses/css/style.css#L189

use &amp to escape ampersand

https://github.com/redstardeveloper/Colmar-Academy/blob/master/index.html#L114

experiment with classes for left and right sides of panels

panels 1, 2 and 4 should have the same ratio of left to right sections
left 60% and right 40%
in yours, the ratio is slightly different. The left side is a little too wide

experiment with remaking the project with classes that do this in panels 1, 2, and 4 (main content and thesis)

.flex-content {
  display: flex;
  padding: 0 1.5rem;
}

.flex-content .main-content {
  width: 60%;
  padding: 2rem 1.5rem 2rem 0;
  border-right: 1px solid rgb(245, 245, 245);
}

.flex-content .supporting-content {
  display: flex;
  flex-direction: column;
  width: 40%;
  padding: 2rem 0;
}

SUMMARY

Grade: Exceeds Expectations

Great job!

It is a joy to review this beautiful project. You did a fantastic job and your code is clear and well organized. Your folder structure is great, and you used a reset.css. Your mobile version is perfect and your desktop version could use only minor tweaks. Kudos!
 
Areas for improvement are minor. Add a favicon in your head. This will make the browser tab identify the page. To reduce css repetition, experiment with a few more universal classes, like media containers, but also classes for left and right in the two-column panels. Panels 1, 2, and 4 all have the same ratio of left to right (60-40) so you can make universal classes accordingly. Some padding adjustment might be necessary.
 
As extra challenges, you could make more design choices. You perfectly recreated the wireframes. Now change the colors and buttons. Also build out some more pages of the site using images you find on royalty free image sites like unsplash and pixabay.
 
Great job!

don't hardcode height of header

use padding instead

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*height: 4rem;*/
  background-color: white;
  width:100vw;
  padding: 1rem 1.5rem;
}

https://github.com/redstardeveloper/Colmar-Academy/blob/master/resourses/css/style.css#L20-L26

header can be fixed but isn't fixed in design spec

up to you

https://github.com/redstardeveloper/Colmar-Academy/blob/master/resourses/css/style.css#L12