Skip to content
OverviewSolutions
30
Comments
59
Renan Tiscoski
@DonUggioni

All comments

  • Renan Tiscoski•1,240
    @DonUggioniPosted almost 2 years ago

    Hey Samuel,

    Great job on this one! I really liked the idea of fetching data from an API. I would try and improve and UI a little bit, it feels all too rough at the moment. Also, you could try to create a login and sign up form so users can create an account and save their favorite titles in a "to watch" list.

    Happy coding 🤓

    0
  • Renan Tiscoski•1,240
    @DonUggioniPosted almost 2 years ago

    Hey Yaman,

    The folder structure looks good to me, only thing I would do is get rid of the unnecessary stuff like the design files and style guide for example.

    Other than that, great job! It looks really good 👍

    1
  • Renan Tiscoski•1,240
    @DonUggioniPosted about 2 years ago

    Hi there,

    For some reason, the page is not responsive. On my laptop, I'm unable to click the button to generate the password as it's hidden outside the view port. Also, the bar has no color, it might be because I'm using firefox so maybe it needs some kind of webkit to work properly.

    Marked as helpful
    0
  • Renan Tiscoski•1,240
    @DonUggioniPosted about 2 years ago

    Hey there,

    As far as I know, you don't need to use underscore to name a css module with React.

    You can create as many components as you'd like, there is no set rule for that. One consideration you can have when creating components is if the project will grow and the same components will be used in many different places.

    Happy coding 🤓

    0
  • Renan Tiscoski•1,240
    @DonUggioniPosted about 2 years ago

    Hey there,

    To be honest, I think, your solution looks really good! You did a good job there, don't worry too much about it. Every project is a learning process and I'm sure that on your next project, some things will become easier and others will just be a new challenge and learning opportunity. Also, this is an incredibly simple project so, really don't worry about it too much =)

    Keep it up and happy coding 🤓

    Marked as helpful
    1
  • Renan Tiscoski•1,240
    @DonUggioniPosted about 2 years ago

    Hey Aijalon, great job on this one!

    The code looks good and the JS and easy to read.

    A couple of things I would have done differently are:

    To center your .main__container, you could have set the body to

    display: flex, align-items: center, justify-content: center

    This way, you make sure it's always centered in the screen.

    Other thing is the button, you could have used the :hover pseudo-class instead of the :active, or even better, you could have used both, for example: on :hover you apply the current shadow and then on active, you can reduce the spread a bit to create a visual effect when you press the button.

    Other than that, pretty good job 👍 Keep it up!

    Marked as helpful
    0
  • Renan Tiscoski•1,240
    @DonUggioniPosted about 2 years ago

    Hey there,

    To make a page responsive, you need to use media queries. Search google or youtube for CSS Media queries and give it a go.

    I'd advise you starting with something more simple, this project can get hard if you don't have much experience since there is a lot of different components.

    0
  • Renan Tiscoski•1,240
    @DonUggioniPosted about 2 years ago

    Hey there,

    The animations look pretty nice! Great job . 👍

    1
  • Renan Tiscoski•1,240
    @DonUggioniPosted about 2 years ago

    Hey there,

    I think your problem might be in your media query code:

    @media (max-width:650){ #box-1, #box-2, #box-3{ width: 100%; height: auto; } }

    You're not specifying the units on your max-width and I think it should be @media and (max-width: 650px).

    Also, you could change flex box direction to column when it reaches that media query, to make it adapt to screen size.

    0
  • Renan Tiscoski•1,240
    @DonUggioniPosted over 2 years ago

    Hey there,

    When dealing when SVG's, I like to tranform them into a sprite. A sprite is like a collection of svg's put into one single file. Look it up, it can be pretty handy. You can create these files online for free. Then in React, you do the following:

    Import the file into the component - import icons from '../../assets/images/icons-sprite.svg';

    Then, to use a specific icon, you can do this:

    <svg className="item__icon-check"> <use className="item__svg" xlinkHref={${icons}#icon-check} /> </svg>

    It works for me and I find it easier to deal with SVG's, change their fill colors, etc.

    Hope it helps!

    Marked as helpful
    1
  • Renan Tiscoski•1,240
    @DonUggioniPosted over 2 years ago

    Hey Val,

    I think overall, it looks great! Good job!

    The only thing I would point out is those arrows in the phone number field, they look a bit off. Have you considered removing them?

    That's it, keep it up!

    0
  • Renan Tiscoski•1,240
    @DonUggioniPosted over 2 years ago

    Hey Eya,

    Great job on finishing this project 👍 I noticed the score goes below zero, is that how it's supposed to be or should it be >= 0?

    Also the background color when you hover the options look a little too strong visually, but that is just my personal taste.

    Keep it up!

    Happy coding 🤓

    0
  • Renan Tiscoski•1,240
    @DonUggioniPosted over 2 years ago

    Hey May,

    Centering the card in the middle of the screen should be easy, you can set the body to:

    height: 100vh; display: flex; align-items: center; justify-content: center;

    That should do the trick.

    0
  • Renan Tiscoski•1,240
    @DonUggioniPosted over 2 years ago

    Olá Rodrigo!

    Muito boa essa solução! Gosto mais do teu design que o original, acho o design original desse desafio horrivel. O jogo do Mário no final sem dúvidas levou-me 30 anos atrás no tempo hahah

    O que eu tenho a apontar é o seguinte:

    Eu testei a app no Firefox e Chrome, no Chrome tudo funciona à 100%, no Firefox os botões de seleção não estão a funcionar corretamente. O botão que era suposto ser vermelho dentro do seletor, ta branco e muito grande, possivelmente também tens que adicionar este pseudo-elemento ::-moz-range-thumb para que funcione no Firefox. O som das teclas também não funcionar no Firefox, isso não te sei dizer a razão porque nunca utilizei sons nos projetos que fiz.

    Já fiz um projeto em que tinha um custom slider e foi uma chatisse pra por a funcionar como deve ser em todos os browsers.

    Fora isso, ótimo trabalho com o design e as animações 👍👍

    Marked as helpful
    1
  • Renan Tiscoski•1,240
    @DonUggioniPosted over 2 years ago

    Hey there,

    Congratulations on finishing this one, there is a couple of things I would point out;

    1- I would work a bit more on the responsiveness of the overall page, specially between the 1020px and 800px range.

    2- I would make the mobile navigation show up over the hero section, right now, when you open the mobile nav, it pushes everything down and I believe that's not something that is expected, you can easily fix that by setting it's position to absolute or fixed.

    Hope it helps!

    1
  • Renan Tiscoski•1,240
    @DonUggioniPosted over 2 years ago

    Hey there,

    Good job on this one =)

    Redux can be a pain and I believe it might be better for really big projects with lots of state management. Did you try using the createContext hook?

    1
  • Renan Tiscoski•1,240
    @DonUggioniPosted over 2 years ago

    Hey there,

    It seems to be working fine on Chrome, but it doesn't work on Firefox. I've noticed that happening quite often. Not sure why that is but it does happen.

    Other than that, it looks good and works well! Good job =)

    Marked as helpful
    1
  • Renan Tiscoski•1,240
    @DonUggioniPosted over 2 years ago

    Hey Glenda,

    In visual studio code, you can add an extension called Live Server, after you add that, it will show on the right bottom a button that says "Go Live", when you click on it, it will open a browser window that will refresh every time you save any file in your IDE. That way, you can check what you are doing at any time. Also, to check how it looks in different screen sizes, you can use the chrome dev tools to adjust the window size to see where and what you should change in any given width.

    Other thing I can suggest is start using REM and EM, pixels are a fixed unit that will not change according to user preferences.

    Some things in your css that can be improved like this like:

    border-top-left-radius: 0px; border-top-right-radius: 7px; border-bottom-left-radius: 0px; border-bottom-right-radius: 7px;

    There is a short hand to write border-radius, you could have done like this:

    border-radius: 0px 7px 0px 7px;

    The first position is always the top left corner, and it goes in a clock wise direction for each corner.

    Hope it helps!

    Happy coding!

    Marked as helpful
    0