Most proud of learning how to use API
What challenges did you encounter, and how did you overcome them?I had some problems with the positioning of the main div, and responsive design, I just researched how to do it on the internet
What specific areas of your project would you like help with?I would love some help with responsive design
It's great that you managed to learn how to use API, well done.
I tried your live preview and found that, while the first click works, subsequent clicks don't change the advice.
The problem is that the browser often caches GET requests to optimize performance, so you need to prevent it from caching the result and get a fresh new response after each click.
In your fetch function, you can pass an object as the second argument to manage that caching mechanism, for example using the no-cache value.
See examples and read more here: MDN
I'm proud that the final product looks really close to the original. I'm always looking to improved, so if I see a better way to implement the solution I will apply to it.
What challenges did you encounter, and how did you overcome them?Nothing in particular this time.
What specific areas of your project would you like help with?I'm always looking for feedback and comments on how to improve my code. Thanks
Amazing work, Carlos!
I don't have anything to add except that you should try using the required font for the challenge.
Otherwise, your solution is awesome. Well done!
For the next time I would like my code to be better structured and in succinct.
What challenges did you encounter, and how did you overcome them?It was an easy task.
What specific areas of your project would you like help with?Nothing
You did great!
I think all you need to take care of is to implement a media query to make it look good on a narrow screen devices as well, like reducing the padding of the main element a bit.
Great work abdullah. You managed to design it correctly as needed.
Try to implement media queries for mobile screens to make it responsive and suitable for such screens.
I applied CSS Flex to this challenge which makes each element look neater and maybe next time I will use a grid to replace flex in arranging the position
What challenges did you encounter, and how did you overcome them?adjust the width of what I made to what is in the design source. the way to solve it is just to estimate it
Awesome. You used flexbox correctly and on point.
I have a few simple suggestions:
In your .tag selector, instead of using width: 75px; you can use something like width: fit-content; or width: min-content; to make the width just as much as the content inside it.
In your .person you used flexbox which is correct but if you make the image bigger, you will notice that they are not on the same horizontal line. You can use align-items: center; to center them vertically and they will appear on the same line.
For mobile devices, you should use media queries to make it a little smaller and more suitable for those devices.
This is one of the multiple options to build this page, the qr-card was centered with flexbox.
Great Work! It's good on different screen sizes and responsive.
I think in your media query for min-width:1000px, if you make the width 300 pixels will be better as it's a little too big with 400 pixels.
and make the text also slightly bigger.
