Skip to content
OverviewSolutions
5
Comments
8
Alin Costea
@CosteaAlin93

All comments

  • Alin Costea•190
    @CosteaAlin93Posted over 1 year ago

    Hi Ananya :) Very nice work on the design. I would have a few extra hints:

    • you could make the 'submit' button wider to be 1:1 with the design
    • on the functionality:
      • clicking submit while no rating is selected >> this case should show an error message or some hint to the user to click a rating before submitting thus, not allowing the user to go to the next step. To do this, above or below the submit button, create a paragraph element which will contain something like 'Please select a rating!' , and style it to be hidden (display: none;) and only show it when the button is clicked without a rating being selected

    Other than that, all seems fine, congrats for the solution. Let me know if my hints are not clear :)

    All the best,

    Alin

    Marked as helpful
    1
  • Alin Costea•190
    @CosteaAlin93Posted over 1 year ago

    Hi Vishal, There could be a better way to do this. First of all, let's define some cases:

    • clicking submit while no rating is selected >> this case should show an error message or some hint to the user to click a rating before submitting. To do this, above the submit button, create a paragraph element which will contain something like 'Please select a rating!' , and style it to be hidden (display: none;) and only show it when the button is clicked without a rating being selected

    • selecting a rating and pressing submit >> this should not point to to index2.html. Rather, use the same trick as above. Consider your content on index.html as the 'rating view' and the content on index2.html as the 'thank you' view. Combine the HTML from the both files in a single one. Now, if you have a rating selected, clicking submit should hide your 'ratingBox' element and in his place, you should display the 'thankYouState ratingBox' element.

    • and one more thing: clicking submit on your solution will give a rating by default. If you fix the first case above, this situation will disappear.

    Marked as helpful
    1
  • Alin Costea•190
    @CosteaAlin93Posted over 1 year ago

    Hi Ferney! Awesome design!! At a very close inspection, I would modify just a few minor things to make it 100% pixel perfect:

    • you need to add just a bit of rounded corners to the content; to do so, I would wrap the 3 article elements into a div or section element and apply the rounded corners to it
    • for the paragraphs, you need to add the Lexend Deca font ;)
    • and add a bit of padding to the y axis (on the vertical) to the learn more buttons so they become a bit more bulkier
    • and yea...make the SUVs text into SUVS

    Once again, congrats for the solution. Hope my hints make sense and are on the point. Drop me a message if anything is not clear.

    All the best,

    Alin

    0
  • Alin Costea•190
    @CosteaAlin93Posted over 1 year ago

    Hello Meliodas!

    Congrats for your work! The design is almost perfect, except for some very minor things:

    • you need to add some rounded borders to the main element
    • the h2 elements, need to have font-family: Big Shoulders Display, sans;
    • add a bit of thickness to the fonts used in the <p> and <button> elements so you are 1:1 with the design

    Keep up the good work, let me know if you have and doubts about my answer :)

    Marked as helpful
    0
  • Alin Costea•190
    @CosteaAlin93Posted over 1 year ago

    Hello Jafar ! Nice work :) A few remarks:

    • start designing with a 'Mobile-first' perspective, this way it's easier to adjust the elements for bigger screens once mobile view is done
    • on the Mobile design, you should reduce the width of the cards, so you are 1:1 with the design and also because once I make my window really small, the p text is not properly visible
    • the h1 font family should be 'Big Shoulders Display'
    • and on the Desktop view, same thing, you should set the width of the <p> element so ~150px, so the text wraps nicely within the container, else it gets 'under' it's neighbour element

    Keep up the good work, let me know if you have and doubts about my answer :)

    Marked as helpful
    0
  • Alin Costea•190
    @CosteaAlin93Posted over 1 year ago

    Hi Pulkit! Overall, it looks good. A few hints for the design:

    • try surrounding the root element into an <main> element so you avoid the 'Document should have one main landmark' error
    • the image-container element, could be a bit smaller in width to keep the proportions as a whole
    • the image is too stretched, perhaps background-size: contain; will fix it looking more like in the solution
    • the font-weight of the h2 could be ticker
    • the span containing 'CHANEL ' text, didn't have to be green
    • a bit ticker font on the price
    • and don't forget the little icon on the 'Add to cart' button :)

    On the Mobile view:

    • image is perfectly set
    • for the content part, you could increase the height a bit, or the spacing between the individual elements

    Considering you are using Tailwind for this, my advice would be:

    • always start designing with the 'mobile-first' design in mind
    • once the above looks on point, start using 'md:flex-direction:row;' etc, for styling for the 'Desktop view'

    Keep the solutions coming! Planning to do your approach once I start learning a bit or React!

    Marked as helpful
    1
  • Isaac Lezama•50
    @IsaacLezamaSubmitted over 1 year ago

    Hi, I made the solution for this challenge but I'm not very good with media querys and responsive designs, so it would be really appreciated if you could make observations and comment some advice or resources, thank you all in advanced!

    result summary component with html and css

    1
    Alin Costea•190
    @CosteaAlin93Posted over 1 year ago

    Hello Isaac!

    • it would help if you would wrap both the 'result' and 'summary' div into another one (let's put this div a class 'card'). Why? because, if you notice on the desktop screen, the white background is applied to the whole card, and the violet color only on the 'result', thus making that effect
    • on the responsive side; I always begin designing something 'mobile first', then adjust stuff based on higher resolutions
    • in this case, you could set flexbox; , flex-direction: column; on the 'card' div
    • and use a media query, for card, to become flex-direction: row; once the resolution is above 768px
    • the design overall is done, one little detail, on the 'summary' div, reduce the margin of the 'continue' button, so that it is aligned with the items above it.

    Try the above and let me know! Hope my review helps.

    Best wishes,

    Alin

    Marked as helpful
    0
  • Alin Costea•190
    @CosteaAlin93Posted over 1 year ago

    Hello Tales :) Your design is very good. What you could do to make it 1:1 with the target:

    • reduce the padding between qr-code and the margin
    • change the .text p with .textos p to properly target the paragraph and have the color work

    Keep up the good work!

    Marked as helpful
    0