I tried a different approach when writing CSS. I used many utility classes and variables in the root. Something new for me.
What I found confusing was using utility classes for 'padding', 'margin' and gaps, so they look good in both mobile and desktop.
Is there a different approach on classes or something else that makes it easier to make mobile-first/responsive websites?
PS. Feedback welcome
Hey Alex, looks nice!
I've found using CSS functions like clamp() and max() or min() help make my websites a bit more responsive. I try making a flex class, too, because I like to use flex pretty often. I see you used min a couple times, definitely give the others a shot (clamp can be tricky to get used to, but worth it!).
As some extra feedback: I noticed the right image is pretty small around 800px wide, and the logo is pretty tiny, too. Maybe add some extra media queries in to fix? (or give the above functions a shot!)
Overall looks nice, keep up the good work, dude!
Should i add pagination?
Hi femizi!
Looks pretty good. You might want to consider using/learning "react router dom" to make navigating the page easier.
For some stylistic criticism, I'd recommend adding transitions to the dark/light themes for a nice effect that's easier on the eyes. The padding on the cards also seems a bit too large on larger screens.
Overall nice work, keep it up, man!
Do you have recomendations for the image part? I have used media queries and display: block; / display: none; stuff to hide or show the images when necessary. But I think there could be a more suitable solution for this.
Looks good Esteban! You could always use the <picture> element to switch up which images your page loads more responsively. It's basically a pure html way of having your browser choose which image it should load based on display/device scenarios. Check out this Mozilla tutorial for more info: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction
Hope this helps!
This was my first project utilizing an API. I was very excited to start and finally finish this.
Any suggestions on best practices, such as utilizing API's, concise and more convenient SASS coding, and Javascript tips with APIs are very much welcome.
Thank you!
Looks good Nyrell, congrats on finishing your first project utilizing an API!! Looks very good too. Some minor suggestions:
I'd wrap your code inside the fetchAdvice() function in a try/catch block to catch errors. You could also add an if statement to see if your response returns 200-209 (ex: if (response.ok){ ...some code }). You might find this video useful for some extra tips: https://www.youtube.com/watch?v=_9vgd9XKlDQ
UI-wise the dice remains rotated after I click on it, unless I click off. You might also want to add some styling to let users know there's the 2 second wait between advice (like a countdown timer and a way to prevent clicking the button, or something).
Great job again, keep it up!
This project was a true challenge for my current knowledge, focusing on the characteristic that every time you click on a neighboring country, that country will be rendered and so on with the others, it was the part that was most difficult for me but I am very happy of having been able to carry it out and finish this project.
I have used Vanilla JS trying to be more familiar with the basics of JS, without resorting to a framework, I have also decided to alter the style of the challenge a bit and give it a different style, such as when clicking on one of the countries instead of being rendered on the same homepage, the page opens a modal window that provides us with more detailed information than what we have on the homepage.
If you all have any suggestion. Please let me a message. Thanks a lot
I like your different takes on the site style-wise! The modal especially is a nice touch. I like the image showing no country has been found and emojis next to certain info, too. Some suggestions:
-Adding a transition when toggling between light/dark modes can help make the change feel more smooth. -I can search for white space in the search bar -- using the .trim() method on your search input can help prevent this issue. -Try adding some styling to let users know clicking on a border region will take them to that region. -Check over your report for some minor accessibility issues.
Overall great job, again love the changes. As an additional challenge maybe try displaying regions conditionally based on search input while the user types (hint: the .filter() method can be helpful here!). Keep it up, man!
the most challenging part was designing a custom checkbox and I still can't figure out how to set a gradient color border for round checkbox I haven't implemented drag and drop but added one extra feature to edit to-dos. I am having issues in implementing drag and drop so working on it. Feedback is welcomed.
Looks good Kirty! Cool change from the main design of editing tasks. I recently completed the challenge, too. I included some links in my GitHub repo that helped me implement the drag-and-drop API in my own project you might find helpful!
If I could offer a couple suggestions, I'd add transitions to elements effected by the theme switch and increase the font-size a bit for the bottom buttons.
Nice work overall, keep it going!
Looks nice dude! I noticed you have a black bar above the Instagram card in the dashboard. If you want to try getting the linear-gradient border, you can use pseudo-element on the card with a position absolute that sits on the top of the card. Add the gradient as the background background, some height, and a border-radius and presto!
Keep up the good work!
