Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions9Comments38

All comments

  • Anthony Rosman• 510

    @D3press3dd

    Posted

    Nice job Ana, really good job, keep it up!. you can add a little transition in the button hover and it give you more fancy details. let me create a pull request with the changes to show you

    Marked as helpful

    1
  • 👾 Ekaterine Mitagvaria 👾• 7,640

    @catherineisonline

    Submitted

    Hello, Frontend Mentor community! This is my solution to the REST Countries API with a color theme switcher.

    I appreciate all the feedback you left that helped me to improve this project. I fixed the issues I had previously and added new features per your recommendation.

    I have done this project a while ago however if you are here and have any feedback, tips, or ideas to share, I will be more than glad to hear them out!

    Thanks

    REST Countries API with color theme switcher

    #react

    13

    Anthony Rosman• 510

    @D3press3dd

    Posted

    wow, you've grown quite a bit in the area, keep it up, check out this tool for animations https://www.framer.com/motion/ you can see what you can do in my solution to this challenge, it is really intuitive you can check this video https://www.youtube.com/watch?v=u_95SPKE6vg and see how it works in just 5 minutes

    0
  • Jesus Rebeitte• 110

    @Rebeitte

    Submitted

    For this challenge I practice a little of flexbox, the background circles were a challenge, I used z-index to put it behind the card, and position: absolute to move it, however, I'd like to know if there’s a better way to do it, I tried adding the two circles using background-image: url(''), url('') but it doesn't work well when I tried to move it to reach the desired design

    Profile card component

    #accessibility

    1

    Anthony Rosman• 510

    @D3press3dd

    Posted

    Amazing job, looks really cool, keep the hard work and happy coding

    1
  • Samson Sham• 140

    @samsonsham

    Submitted

    I got 2 questions in this challenge.

    1. I put a violet colour overlay on top of the image but the colour is way too difference from the design. Style guide has no instruction to that. How could I make the colour as the design does?

    2. I don't know how to determine the media query breakpoint for my responsive design. Style guide said Mobile: 375px, Desktop: 1440px. What does it mean? I try to use (min-width: 1440px) as desktop breakpoint but it doesn't seems to be a correct way to me. Could anybody give me some ideas how to start working with responsive design?

    Stats Preview Card

    #sass/scss

    4

    Anthony Rosman• 510

    @D3press3dd

    Posted

    Hi Samson let me help you a bit

    1.-to get the color like the design you just need to use mix blend mode

    2.-you dont need to use a breakpoint like the style guide, they put that as a reference, so the idea is to do it completely responsive where the max screen is 1440 and the min is 375, thats mean that you dont have to worry to do the design for 4k screen or bigger than 1440

    1
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    Hola Camila, buen trabajo, lo unico que te podria recomendar es echarle un vistazo a los problemas de accesibilidad, el que dice que deben contener main element, es envolver la card en un main , agregarle un aria-role a los div, algo que tambien te recomendaria es hacer un reset a todos los elementos del documento para que no te afecte el box-sizing

    *,
*::after,
*::before {
  margin:0;
 padding:0;
 box-sizing:border-box;
}

    Marked as helpful

    1
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    I dont know why im getting the screenshot bugged like that 😢😢😢

    0
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    I hope you like it the fancy button animation in the dice

    0
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    Nice job Débora, if you want to add the local storage thing, its really easy, take a look to this https://developer.mozilla.org/es/docs/Web/API/Window/localStorage and if you need some help to apply it , let me know, happy coding

    0
  • Arthur Roberts• 410

    @arfarobs

    Submitted

    I found this challenge pretty easy. I used Flexbox for the design I thought it was the most logical choice. I wanted to add an extra challenge by trying not to use any media queries and still have a responsive component. I had three issues: 1 - When changing the size of the screen the border-radius disappears. I assume that the only way I can solve this is with media queries. 2 - This issue Is not a major problem, however when the screen width is less than 260px the paragraph text doesn't wrap. 3 - When I ran this on lighthouse it gave me the following error: "Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn more." -- It says that the element in question is a div, but I don't have any divs in my HTML. This confused me.

    If anyone has the solutions to these issues it would be greatly appreciated.

    This is the first time that I have made a thorough readme. Any advice would be great.

    Also, any feedback on better practices when coding would be great.

    Thanks.

    Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn more.

    Responsive 3 column card component using flex box and 0 media queries.

    4

    Anthony Rosman• 510

    @D3press3dd

    Posted

    I hope you understood my explanation because my english is really bad, but i try 😁😁, happy coding.

    Marked as helpful

    0
  • Arthur Roberts• 410

    @arfarobs

    Submitted

    I found this challenge pretty easy. I used Flexbox for the design I thought it was the most logical choice. I wanted to add an extra challenge by trying not to use any media queries and still have a responsive component. I had three issues: 1 - When changing the size of the screen the border-radius disappears. I assume that the only way I can solve this is with media queries. 2 - This issue Is not a major problem, however when the screen width is less than 260px the paragraph text doesn't wrap. 3 - When I ran this on lighthouse it gave me the following error: "Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn more." -- It says that the element in question is a div, but I don't have any divs in my HTML. This confused me.

    If anyone has the solutions to these issues it would be greatly appreciated.

    This is the first time that I have made a thorough readme. Any advice would be great.

    Also, any feedback on better practices when coding would be great.

    Thanks.

    Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn more.

    Responsive 3 column card component using flex box and 0 media queries.

    4

    Anthony Rosman• 510

    @D3press3dd

    Posted

    Take a look to this article Flex, if you use flex shrink to 0 it will overflow the parent, in this case the parent is main, so because yo have overflow:hidden the part overflowing its not showing

    Marked as helpful

    0
  • Arthur Roberts• 410

    @arfarobs

    Submitted

    I found this challenge pretty easy. I used Flexbox for the design I thought it was the most logical choice. I wanted to add an extra challenge by trying not to use any media queries and still have a responsive component. I had three issues: 1 - When changing the size of the screen the border-radius disappears. I assume that the only way I can solve this is with media queries. 2 - This issue Is not a major problem, however when the screen width is less than 260px the paragraph text doesn't wrap. 3 - When I ran this on lighthouse it gave me the following error: "Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn more." -- It says that the element in question is a div, but I don't have any divs in my HTML. This confused me.

    If anyone has the solutions to these issues it would be greatly appreciated.

    This is the first time that I have made a thorough readme. Any advice would be great.

    Also, any feedback on better practices when coding would be great.

    Thanks.

    Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn more.

    Responsive 3 column card component using flex box and 0 media queries.

    4

    Anthony Rosman• 510

    @D3press3dd

    Posted

    however when the screen width is less than 260px the paragraph text doesn't wrap this problem is because of the flex shrink flex shrink

    Marked as helpful

    0
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    Nice job, just fix the accesibility issues, just add alt text " " empty atleast, replace the div attribution for a footer for the lang error just add a main container and i think thats it, if you want to check the accesibility problems before upload your project, you can search on google chrome extension de axe accesibility its a good extension to check this kind of problem, happy coding.

    Marked as helpful

    0
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    Hi Juan really good job, i just would recommentd reduce some padding at top and bottom like this Padding

    Marked as helpful

    1
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    Hola Raul te quedo cool el diseño solo añadele un margin-top a la version desktop porque cubre toda la pantalla como puedes ver aqui preview

    0
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    Amazing job, just dont forget the accessibility issues, but nice work i like how you did it with react, amazing, happy coding💻💻

    0
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    Hi, just a few things -Dont use a static 85vh to the height because if i have a 4k screen, it will looks really weird, like this Preview

    -remember that if you add flexor grid the first level of childrens well be affect, the level 2 children not, so youre aplying flex to the container instead of the div cardfor that reason the content overflow it, look Preview

    -remember that you need to add the desktop version , if youre a little bit confuse maybe check some solutions on the community, you can check my solution too and thats it

    happy coding, if you have doubts, you can write me without problem💞💞

    Marked as helpful

    1
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    Amazing job, for fix the accesibility issues just add a main container and add a role to the divs happy coding if you dont know how to do it you can download an extension called axe accesibility

    Marked as helpful

    1
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    Amazing job, for fix the accesibility issues just add a main container and add a role to the div card, happy coding

    Marked as helpful

    1
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    Amazing job, dont forget to take a look to the accesibility to fix just a main container and add a role to the div card.

    Marked as helpful

    0
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    Really good job, just maybe add the border radius to the hover state too, because looks weird when pass from rounded border to square border.

    Marked as helpful

    0
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    look the screenshot that i post to know what i mean

    0
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    Hi lloydkun, its really cool but im having a problem, check the resolution between 1300 and 1400, it is showing taking all tha viewport for me, really weird , take a look. Screenshot

    0
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    Kirsty this is really amazing job, congratulations i hope i could do something amazing as you.

    1
  • Anthony Rosman• 510

    @D3press3dd

    Posted

    Hi Cristian really cool design but remember that the desktop active is different than mobile active, just fix that and is on fire.

    1