This was my second javascript challenge on javascript, proud of my work.
What challenges did you encounter, and how did you overcome them?I had a little problem with toggling the the rating numbers.
What specific areas of your project would you like help with?Overall feedback on the project and the code would be helpful.
Well done man, great stuff!.
I have an observation though; i can't navigate through the numbers with just my keyboard, using the tab button. That's an accessibility flaw... it would have been more correct using the form & > radio inputs + submit button.
still, great job
Well done, Blessing. Just a few corrections:
Use semantic, landmark elements. All the contents in the div container should be in a main tag
The direct children of a ul or ol element must be an or li. In the case in your project, use:
<ul>
<li><a href=""></a></li>
</ul>
myimage.png or my-image.png or my_image.png, not my image.pngi started with tailwind to practice and vanilla javascript and oh boy. the original javascript is in the main.css. it worked. but than also learning tailwind and trying to adjust things and let ai "fix" a problem, all hell broke out, finally after hours of bugfixing i tried a tooltip from flowbite and `i must say that is a nice system. I didn't have the nerve to adjust the mobile design.
Well done.
When the button is clicked and the share options pops up, clicking the button does not close the pop up, i think that is a bug.
Also, the social media images should be in <a> tags
Nice work. Some corrections.
It is a wrong practice to limit the body to a specific height. Use min-height: 100dvh instead. On a larger project, that height you used on the body will cause bugs.
This challenge does not need a media query... However subsequently, if you have to use a media query, they must be in responsive units like rem.
Use responsive units for font sizes too. Rem is fine. /* 1 rem = 16px*/
finally, also try and use a Modern CSS Reset at the top of your stylesheets. You can check out Andy Bell's Modern CSS reset or the one by Josh Comeau.
Great job, once more
Really enjoyed working on this project, it helped me test out level on CSS.
What challenges did you encounter, and how did you overcome them?I encountered a bit challenge during the creation of the social link buttons, I had to make research to figure how to get it done.
Well done on completing the challenge. Just a few observations:
Make sure you start each project in a different folder, don't put all your projects in one folder
Use the DRY (Don't Repeat Yourself) principle in your CSS. You have many margin: 0; and padding: 0; in multiple places. You can use:
* {
margin: 0;
padding: 0;
}
brings me to my third point. Try and use a modern CSS reset before your styles in your CSS file. Check out Andy Bell or Josh Comeau's CSS resets
there are too many combinators. Using just a CSS class will be fine.
avoid using px for font size or for media query. It's bad for responsives.
Nice job, once more
I didn't have much experience in grid-layouts but could master this challenge almost without problems.
What challenges did you encounter, and how did you overcome them?Sizing img elements. At first, I used percentage units. Then, I saw that if the screen width gets smaller the image looks very weird. So, I used rem-unit instead.
I really enjoyed this one. good challenge
What challenges did you encounter, and how did you overcome them?responsiveness always takes time
What specific areas of your project would you like help with?overall feedback on the project
Well done mate. I had fun doing this when i did this too because i learnt several new things.
One thing i'd correct is, that <section class="nav-bar"> should actually be a header.
Nicely done, once more.
It was an exciting challenge, I had fun throughout the journey
What challenges did you encounter, and how did you overcome them?no problems
What specific areas of your project would you like help with?Overall feedback on the challenge
Well done. Just have a few comments to make:
Avoid using px for font sizes and media-queries. Use responsive units instead like rem or em
Try and use a modern CSS reset at the top of all your CSS files. You can search for the one by Andy Bell
There's no hover for the call-to-actions
The Download for iOS and Mac should be in a tags, not button tags
-On some screen sizes(between 540 and 600px,between 900 and 100px), the page is not very responsive because of the media-queries you used.
-the footer should also have a background colour
Well done once more
Do que você mais se orgulha? aprendi a lidar com heranças e diferentes tipos de estilização
Next time I will use relative units for typography to adjust it to different screen sizes better
What specific areas of your project would you like help with?I would like to understand better how to make typography more responsive
Nicely done challenge! Your solution looks great.
I have some suggestions however:
min-height: 100vh; instead on the body.padding on the bodywidth: 100%, and a max-width: 20rem(thats 320px) on the .card insteadOtherwise, a lovely work.