mattchupp / colmar-academy Goto Github PK

Seen here: https://github.com/mattchupp/Colmar-Academy/blob/master/resources/css/index.css#L106-L109
This way, you have consistency in the layout throughout the page.

Nice job with this project! I liked how you added your own design bits to the code - such as the darker background color for the Start Learning section.

In terms of improvement, I recommend adding padding around the edges of your page, writing the mobile styling for your page, and using classes instead of IDs for repetitive elements in the HTML.

If you're looking for a challenge, I'd recommend trying to switch this page to implement bootstrap. Here's a link to get you started: https://www.w3schools.com/bootstrap/. Keep up the great work! :D

It seems like your page is missing some padding on the edges, which causes the images and text to be bigger than expected. I recommend adding some!

I noticed while skimming your mobile screen that you were missing your media queries. I suggest looking into them and adding this component to your project. Here's an article for help: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Seen here: https://github.com/mattchupp/Colmar-Academy/blob/master/index.html#L46-L72

Since these elements have repeated IDs, and IDs are supposed to be unique, I recommend using classes instead.