Notyan21• 160
@Notyan21
Submitted
Halí V.
@halivert
All comments
- Halí V.• 230
@halivert
Posted
Hey @Notyan21 this is a great solution to the challenge, I just want to make some suggestions here:
- Using of dynamic viewport units
- You can add a color to box-shadow after the last dimension, to make it look transparent, e.g.:
box-shadow: 2px 2px 14px -10px rgba(0, 0, 0, 0.2);Also I want to congratulate you for the following points:
- Great use of CSS properties
- Nice class naming (good BEM practices)
Keep up with the good job 🎉
0 - Apesosmarc• 20
@Apesosmarc
Submitted
-
How could I have improved my CSS using BEM naming conventions?
-
How can I get JS to show the extra zero for total amounts? (12.50 instead of 12.5)
Halí V.• 230@halivert
Posted
You could use the toFixed method
result.toFixed(2)0 -
- Ahmed Faisal• 5,095
@afrussel
Submitted
First time I validating this form. Added a valid message with changing border color with an icon in each field.
If you have some suggestions or feedback, please let me know. Thanks in advance :)
Halí V.• 230@halivert
Posted
There are some issues with the error icon in the live site, the fixed route for the icon is:
src="images/icon-error.svg"Good job 👍🏽
0 @said-alrove
Submitted
Hi!, what's up? I had already made this challenge a few weeks ago, but I started to remade my projects (including the Frontend Mentor challenges) trying to apply new things I've learned, such as SASS (I had already known SASS, but just recently I finished of reading the documentation and practicing with it, so just now I feel confident enough to build projects with SASS).
I have to add that I used my own kinda library with mixins for SASS, such as mixins for media queries, Flexbox, and Grid.
Also, something important to mention is that I used the SMACSS methodology for structuring this project. I've already used this methodology a couple of times, but I'm still in the process of mastering it.
Feedback is always appreciated :D.
P.D. Likewise I've implemented the use of logical properties such as inline-size (width), and block-size (height) due to nowadays there's already enough browser support for them.
Halí V.• 230@halivert
Posted
For your three accessibility issues:
1, 3. Document should have one main landmark
You could wrap the three cards inside a
<main>- Page should contain a level-one heading
Sections could have an h1 level heading
Also the way you write your styles is great for modularity.
Good job 👍🏽
1- Nikolas Matias• 65
@NikolasMatias
Submitted
I decided to take advantage of first-child and last-child pseudo-classes to make some changes in the border-radius of my vehicles. I though this way cause I needed to change the border-radius only in the first and last element of the divs using ".vehicle" class. Since the border-radius just change in this both elements.
I thought about using another class for it, but I think this way using pseudo-classes was better. What do u think about it? Should I do it in another way?
Another thing I would love to understand better is the use of more advanced html tags. If u see my code u will see I used sections tag but I don't really know why I should do it and I don't know when I should do it. So, if u have any advice about it, It would be amazing!
I think that's it.
Halí V.• 230@halivert
Posted
I like how you use first-child and last-child pseudo-classes, that's a nice approach.
If you want to use semantic HTML5, I recommend read this article https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Also I recommend to use Vue.js components, instead repeating tree times the same (or almost the same) code.
Good job 👍🏽
1
