Skip to content
OverviewSolutions
8
Comments
11
Sohail Jafri
@thesohailjafri

All comments

  • Sohail Jafri•350
    @thesohailjafriPosted over 3 years ago

    Well, Great Work on your first project

    You just need to adjust the color of the rating div. it too saturated compared to the og design.

    Else everything is Great :]

    Marked as helpful
    1
  • Sohail Jafri•350
    @thesohailjafriPosted over 3 years ago

    GREAT WORK,

    here is some feedback for you

    1. make font-weight of 'order summary' bold
    2. add padding-bottom to the text below ' order summary'

    else everything is great🙌.

    have a good day maucz :]

    0
  • Sohail Jafri•350
    @thesohailjafriPosted over 3 years ago

    Great Work,

    here are some tips for your solution

    1. add box-shadow to the button 'proceed to payment'
    2. increase the box-shadow radius and spread or reduce the alpha 'A' element of shadow color (RGBA color code) of card element

    else your solution is great🙌

    have a nice day :]

    Marked as helpful
    0
  • Sohail Jafri•350
    @thesohailjafriPosted over 3 years ago

    Jesus, really great work, I don't have any feedback as such commented here to appreciate your work

    1
  • Sohail Jafri•350
    @thesohailjafriPosted over 3 years ago

    learn more from breaking? I didn't shaw that on the preview.

    0
  • Marko•65
    @ElioskasSubmitted over 3 years ago

    It's my first attempt at something like this after about a week of learning css and html. Any feedback is appreciated.

    I used HTML and CSS (flex)

    3
    Sohail Jafri•350
    @thesohailjafriPosted over 3 years ago

    Great Work On Your First Challenge Marko,

    1. I would sugguest you use Figma/adobe XD for mapping the size of elements so that you would get the exact result as of design, your design is quite big compared to the og design.

    2. Mobile responsiveness is missing.

    3. Increase the spread and blur of box-shadow and reduce the alpha of RGBA, something like this: box-shadow: 10px 10px 51px 14px rgba(0,0,0,0.24);

    you can use the tool like these to get your box-shadow right:

    https://cssgenerator.org/box-shadow-css-generator.html

    https://getcssscan.com/css-box-shadow-examples

    I Hope These Feedback Helps You :]

    Marked as helpful
    2
  • Sohail Jafri•350
    @thesohailjafriPosted over 3 years ago

    First of all great work on your first challenge .

    here are honest and sincere feedbacks as you said for it

    1. add some padding in text like h1 h2.. and p.

    2. add object-fit : cover or contain to an image tag in sponsor section has images are getting squeezed in desktop view.

    keep coding and have a nice day:)

    0
  • Sohail Jafri•350
    @thesohailjafriPosted over 3 years ago

    1. Try adding cursor pointer on sign-up button (mouse-hover event)

    2. Colors are a bit different in solution and design, there is a style guild available in the provided folder which contains the exact color (HSL color code) that is used in the design.

    3. GREAT WORK, KEEP IT UP ~_~

    Marked as helpful
    0
  • kpav•185
    @kpav33Submitted over 3 years ago

    Initially I thought the challenge will be quite easy despite being tagged as advanced. But getting the React Router to work properly for each country sub page and particularly to make it so that by clicking on any of the bordering countries takes you to that country sub page, ended up being more difficult than I expected. Additionally I did not realize that custom styling a select field will be as complicated as it ended up being.

    I have a question regarding the country flag images on the root page. Not all images are the same size so sometimes, some flags end up having white empty space and don't fit in the div properly. I somewhat fixed this issue by using object-fit: cover CSS property, but this makes some of the flags look weird. I was looking for better solutions, but couldn't find anything on my own. If someone could point me in the direction of how I could solve this problem in a better way, I would appreciate it.

    Additionally if anyone would take the time to go over some of my code and could give me some feedback on my code quality I would be grateful.

    Thank you for your answers in advance.

    REST Countries API solution, React, React Router, Styled Components

    1
    Sohail Jafri•350
    @thesohailjafriPosted over 3 years ago

    First of all great work on Rest Countries🙌,

    You can fix that image white space issue by using 'object-fit: cover' in CSS. Just define the width and height of image-div or img-tag and set object-fit to cover so that the image takes the whole div space.

    0
  • Yukti•10
    @yukti-singhSubmitted over 3 years ago

    When I open the code locally on my system everything works fine, but when I uploaded the code from GitHub all the elements gets messed up. Any suggestions how can I solve this?

    Atom, CSS, HTML

    2
    Sohail Jafri•350
    @thesohailjafriPosted over 3 years ago
    1. Add google fonts link in head tag (https://fonts.google.com/) example for Poppins font:
    <head> ... ... <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" </head>

    and add font-family in root CSS accordingly example: *{ font-family : Poppins, Arial; }

    2)To remove the horizontal scroll bar from the bottom add overflow : ''none" to the body tag.

    I hope this fixes the issue you're facing after deploying. Have a good day

    Marked as helpful
    1
  • Sohail Jafri•350
    @thesohailjafriPosted over 3 years ago

    Can you please explain the issue you're facing in detail ?? Jeroen

    0