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!
I place items in the center by using on parent DOM.
.parent{
display: grid;
place-content: center;
//or
place-items: center;
}
hope it helps!
Any feedback is welcome.
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!
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.
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!
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?
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
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 (?).
Hey man! Great work!
Just wanted to say that buttons All, Active and Completed doesn't work. You can do it easily by using the computed property.
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!
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!
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!
Thanks for checking out my solution. Please share your opinions and feedback so that i can improve it more.
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
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
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 & remAny suggestions on how I can improve are welcome!
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.
