Skip to content
OverviewSolutions
8
Comments
7
Kairat Kempirbaev
@kairat-kempirbaev

All comments

  • sheri•220
    @sheri0441Submitted about 2 years ago

    Great project, help me understand the many concept of the react, react-router and Tailwind CSS.

    Question : How can you improve speed of the website?

    Country API with Tailwind CSS

    1
    Kairat Kempirbaev•260
    @kairat-kempirbaevPosted about 2 years ago

    Hi, @sheri0441

    You can use a lazy loading approach. Just hard code 6 countries in a view and update your state when you get the rest

    Alternative would be to make use of a local storage. On each refresh you would get the local cache instead of making many requests.

    Hope that helps.

    Happy coding

    Marked as helpful
    0
  • Marco Djurovic•10
    @ocramovicSubmitted about 2 years ago

    For some reason my image (the QR code) isn't showing up on github pages, but it's working fine on live server (localhost).

    Flexbox

    3
    Kairat Kempirbaev•260
    @kairat-kempirbaevPosted about 2 years ago

    Hi,

    Can you change the path in your image tag src="images/image-qr-code.png"

    It seems the issue is with the githubpages

    When it is nested the CDN is distributing from the sub project you specified in pages / makes the root which is not a root of your project.

    PS: I might be wrong. Not using pages.

    Marked as helpful
    1
  • Kairat Kempirbaev•260
    @kairat-kempirbaevPosted about 2 years ago

    Hi Itaro

    It looks perfect

    I am trying to improve design skills and would like to share a couple of observations. Hope those details would improve your solution:

    "* Out of 5" text can be aligned by base. This way padding from top/bottom would look even and elegant. On mobile phone the text doesn't fit in the specified background. "Selected" overflows the container.

    Looks nice. Mobile screen is quite hard to address sometimes, especially with custom components. Desktop version is perfect, i like it.

    1
  • Kairat Kempirbaev•260
    @kairat-kempirbaevPosted about 2 years ago

    Hi Wasim,

    I have a feeling the text needs the same amount of pixels as a gap. (For re-usability em,rem,vw metrics are easier to maintain)

    Container needs alignment. Padding should match the QR code image gap. In my opinion making a small gap between the border of a container would be a great solution. No need to have exact padding.

    This tutorial helped me the most: https://scrimba.com/learn/design

    I don't know whether frontendmentor partnered with scrimba but both learning platforms teach the Space Travel Mission. I think it won't hurt to review both.

    Nice work

    Happy coding.

    Marked as helpful
    0
  • Kairat Kempirbaev•260
    @kairat-kempirbaevPosted about 2 years ago

    Hi,

    I have noticed you are experimenting with a color.

    Right now I have a couple of websites to help you with color picking. They can help with contrast and triad:

    • https://color.adobe.com/create/color-wheel
    • https://mycolor.space/

    They will definitely improve combinations with a dominant color!

    And the content alignment can be improved a little. Space under the Submit Button is taking a little more space than needed.

    Besides Visuals everything looks perfect for me.

    Good luck!

    Marked as helpful
    1
  • Shiva•670
    @shivaprakash-sudoSubmitted about 2 years ago

    At first, I had problems displaying the respective error messages for the inputs without having to manually hiding and displaying them. After playing a little bit, I figured an easier solution by looping through the inputs and accessing the children of the respective parent container.

    Also, I'm struggling to update the input border colour to red, without having to drastically changing the current code. So if you guys have any input (😉) on making the code/design better and also making the input border red, please feel free to comment.

    Intro Component with Signup Form using Tailwind-css

    1
    Kairat Kempirbaev•260
    @kairat-kempirbaevPosted about 2 years ago

    Hi Shiva,

    Input field has many variations. Type can be email/password/text

    There is a special pseudo class :invalid for this exact reason. If the typed text is not an Email this pseudo-class activates and you can put { border:red } for this pseudo-class

    Hope it helps to solve a problem with the least amount of change to your existing code base.

    Marked as helpful
    0
  • Kairat Kempirbaev•260
    @kairat-kempirbaevPosted about 2 years ago

    Hi, @JuanfGalloo

    • QR code position.

    On Scrimba I took an introductory UI tutorial.

    They emphasized to keep the space between the elements even. I have a feeling the most pleasant to an eye position for a QR code would be equidistant from the TOP/RIGHT/LEFT borders.

    It looks great anyway. Good job.

    0