@slothmast3r
@henrimh
Submitted
The most difficult thing for a 100% noob at CSS, was centering the element vertically. So alternative ways are appreciated. I found a lot of ways to do it though, but nothing was as easy and pretty as this.
Everything else I'm pretty much OK with, but do tell if something's funny.
EDIT: I noticed that the fonts were not working for outside connection!
@slothmast3r
Posted
I place items in the center by using on parent DOM.
.parent{
display: grid;
place-content: center;
//or
place-items: center;
}
hope it helps!
@Codablack23
Submitted
@slothmast3r
Posted
Antarctica doesnt work :c
Marked as helpful
@uzzii-21
Submitted
Any feedback is welcome.
@slothmast3r
Posted
add some animations on hover :D
I saw that you use rem and px interchangeably, just stick to the one type and it will be fine.
I would use min-height: 100vh; instead height: 100vh on main{...} because it is easier to add content later.
But after all great job on this challenge!
@darthTh0t
Submitted
Hi fellow developers,
This is my second challenge. It helped me understand the fundamentals of CSS on a much deeper level. Please let me know if any error is left behind. Thanks and have a great day.
@slothmast3r
Posted
Hi. Congrats on your second challenge!
.main-container .image-card div{
...
top: 60;
...
}
you forgot to use any units on top attribute. what i recommend is using position: relative on parent class and position: absolute on child.
Please avoid using *{...} it makes code unreadable.
Add some animations to make it look cooler
Good luck!
Marked as helpful
@VaheAA
Submitted
Pretty easy, but i notice one problem with API calls in Firefox (in Chrome all is good). After fetching first advice and clicking on the button to get new one, call response comes with the same advice every time and new object is fetched only after page reload, whenever in the Chrome all working fine. What it can be?
@slothmast3r
Posted
Hey man! Great work!
I studied your code and i found that you are repeating height: 100% in your css code (in main and #app). My personal choice is min-height: 100vh because you wont run on a problem like your content doesnt fit in div
Marked as helpful
@MingZoox
Submitted
@slothmast3r
Posted
Hey man! Great work!
I only have UserExperience issues.
What i recommend is while using searchbar compare strings by using lowercase. I only can find France when I type "France", not when I use "france"
When I use dropdown - I have no idea at what region I am in. Maybe consider show selected region (?).
Marked as helpful
@saadman-galib
Submitted
@slothmast3r
Posted
Hey man! Great work! It looks really nice, just exactly like in design!
Unfortunately dice button doesnt work :'( What I recommend is usage of event handling on this website GUIDE HERE @click="someFunction"
Next thing what I would do is define color variables. There are many ways to do this. The most common is by :root{...} GUIDE HERE
Good luck with further coding!
Marked as helpful
@gcarter89
Submitted
This is my first attempt at this challenge.
I think my main aim in the next attempt is to separate out the components even more.
I've deviated from using the v2 API and used the newer version of the REST Countries API instead.
I think there are a few things to improve which I'll add in my future attempts:
Anyway, let me know what you think and what I could do to improve the app!
@slothmast3r
Posted
Hey! Great work! I have to say your project is super fast and smooth. What I want to say that you need to work on your error handling for example Antarctica doesnt show up at all because of some undefined keys. Good luck!
@sshiv5768
Submitted
Thanks for checking out my solution. Please share your opinions and feedback so that i can improve it more.
@slothmast3r
Posted
Hey man! Great work. I studied your code and what I recommend is to be more consistent in your styling (or just use classes). Your styles are all over the place. Some in DOM elements e.g. style="..." some in <styles>.... </styles and some in file style.css. Just use one and be consistent
Marked as helpful
@ekrzak
Submitted
Hello! This is my first challenge and one of the few I've ever done. I'm doing the freeCodeCamp courses meanwhile. Any feedback could you give me it would be awesome for my learning. I'm struggling with the responsiveness, but I was reading that it's not mandatory to this challenge.
Thanks! Esteban
@slothmast3r
Posted
Hey man! Great work! I studied your work and it is preatty solid. What I would also do in these type of challenges:
px I recommend em & remMarked as helpful
@DesignToWebsite
Submitted
Any suggestions on how I can improve are welcome!
@slothmast3r
Posted
Hey man! Great work! Your solution is absolutely solid.
What I would do in these type of challenge is using grid. https://css-tricks.com/snippets/css/complete-guide-grid/ It will definitely help you write styles a little faster.
Marked as helpful
