Submitted about 2 years ago

vanilla css and vanilla javascript

Allen nade• 70

@Allenade

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

pls tell me where am wrong and explain well

Community feedback

Elaine• 11,400

@elaineleung

Posted about 2 years ago

Hi Allen, good job here! I just got three things to point out:

In your report, there are many accessibility issues that you need to firstly take care of; these are mostly about the tags that are in the <body> tag right that really should belong in the <head> tag. Try to move them to the head tag and see if that helps to get rid of some issues.
Try reorganizing the folders in your repo since the images are not showing at all. Right now, your img folder is in the css folder; the img folder normally should not be under the css folder.
The container in the desktop view is very big right now. Instead of width: 90%, try width: min(90%, 28rem).

Hope some of this can help you out.

Marked as helpful

Abdelrhman khalil ali• 300

@abdelrhmanKh

Posted about 2 years ago

Hi ALLEN the Problem with the photos that you included

<img src="/resource/css/img/icon-star.svg" alt="star" class="circle-star">
//you should remove the /
<img src="resource/css/img/icon-star.svg" alt="star" class="circle-star">
// or  Put The dot 
<img src="./resource/css/img/icon-star.svg" alt="star" class="circle-star">

second As you have only one box in the middle I prefer using the grid for this but you can add a min-width of 300px and max width of 450px so that it keeps it simple and as the design

.container {
    display: block;
    min-width: 300px;
    max-width: 450px;
}

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord