Skip to content
OverviewSolutions
11
Comments
5
Halí V.
@halivert

All comments

  • Halí V.•230
    @halivertPosted over 1 year ago

    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
    @ApesosmarcSubmitted over 3 years ago

    • 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)

    Vanilla CSS + JS Tip Calculator

    2
    Halí V.•230
    @halivertPosted over 3 years ago

    You could use the toFixed method result.toFixed(2)

    0
  • Ahmed Faisal•5,095
    @afrusselSubmitted over 3 years ago

    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 :)

    Intro component with sign up form

    1
    Halí V.•230
    @halivertPosted over 3 years ago

    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 Alejandro Rosas Vera•145
    @said-alroveSubmitted over 3 years ago

    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.

    3-column-card component with SASS using the SMACSS methodology

    2
    Halí V.•230
    @halivertPosted over 3 years ago

    For your three accessibility issues:

    1, 3. Document should have one main landmark

    You could wrap the three cards inside a <main>

    1. 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
    @NikolasMatiasSubmitted over 3 years ago

    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.

    3 Responsive Columns Using Flex and Mobile-first workflow

    2
    Halí V.•230
    @halivertPosted over 3 years ago

    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