asakayza99 / colmaracademy Goto Github PK

Rubric Score

Criteria 1: HTML Structure

• Score Level: 4
• Comment(s): HTML implementation enables proper use of media queries. HTML structure reflects the grouping and flow of content in the web browser.

Criteria 2: Visual Layout for Both Desktop and Mobile Sizes

• Score Level: 3
• Comment(s): Desktop layout matches the wireframe in all sections except for one, while mobile layout matches the wireframe in all sections.

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

• Score Level: 4
• Comment(s): Media queries kick in at appropriate breakpoints. Responsive units are used throughout.

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

• Score Level: 3
• Comment(s): A color palette was chosen AND typographic considerations were made.

Overall Score: 14/16

Great work with this project! Your HTML and CSS code were readable and clean, and I liked how you included comments to separate the code for different aspects of the page. You made good use of media queries and responsive units to make the website as responsive as you could get it, and it's clear you put a lot of effort into that! Well done overall!

There were just a few issues I wanted to discuss. Firstly, the "Start learning" section in the desktop layout seemed a bit off to me:

It may have been better to go with a layout where we have 2 rows of pictures, with 3 pictures on each row, just like they have it in the spec:

Besides for that though, I think the page looked really good on both desktop and mobile layouts. A few other things I wanted to point out included this:

It looks like you never put a closing tag for the nav here.

Additionally, I would highly recommend making use of the alt attribute for your images. The alt attribute denotes some text that is shown on the page in the case that the user is using accessibility settings or the images don't load correctly for some reason. We can use it like this:

<img id="bannericonMob" src="resources/Images/ic-logo.svg" alt="Logo">

Adding this attribute can really help make our webpages more accessible, so it's a good idea to add it for all your images. You can read more about it here.

Finally, consider making use of CSS transitions to make your webpage more visually impactful and interactive.

Great work overall! I hope you enjoyed the course!