dalemillar / colmar Goto Github PK

The two items should be lined up with grey box, it would be better if you used the css for the grey box for the two divs above. Also if you noticed that the two white boxes aren't lined up together.

Using auto defeats the purpose of using these two together.

  max-width: 60%;
  width: auto;

Read this article on a better approach here for using both, but to tell you the truth, max width is more than enough here.

https://css-tricks.com/tale-width-max-width/

The idea here is to use a media query so the css hides certain sections of the html while changing the styling of the rest so it fits in the mobile device.

What you are doing here is writing a html section for both mobile and desktop and then hiding one for the other which really amounts to double html work. This isn't really necessary as the media query should be enough to change things.

Below is a link to a codepen for the beginning section of this project as an example.

https://codepen.io/Farish/pen/gGWwoK

You have green borders in your nav bar.

Overall met expectations

Html is welled structured and I saw no issues. I only feel that you were doing double work by doing both a mobile and desktop section. It is really easier to hide things using the media query without writing out extra html.

CSS was fine. You do have some distortion with those two boxes but that is easy to fix.

I did mention max width and width because I believe that using auto with max width percentage is too conflicting. I will tell you I checked off all the width/height/max boxes and it didn't change anything because it was still constraint by the width of the right container.

Since you just finished off with flexbox I like to mention css grids.
CSS grids is a new positioning feature that works with flexbox.

They will be fully supported by browsers soon.

Take a look at this game and see how far you can get to help prepare you for them.

http://cssgridgarden.com/

Also if you haven't done so already we added css grid as the last section of our css course now.

https://www.codecademy.com/learn/learn-css

Maybe as a final challenge see if you can incorporate it into this site.

It is a good practice to use classnames that match the content that you are presenting. That way you can visualize better the content you are placing inside.

Usually overly generic classes names really doesn't convey enough. If you want to use generic class names such for text, then maybe consider using dual classes for the html element with one of the classes conveying the meaning of the content. <div class="courses text"> for example.