Hi everyone! Here's my solution :) I would really appreciate some feedback on the following points:
Your card element (class = card ) , is not centered vertically on my screen , i am on my laptop with resolution 1600 x 900 px , you can wrap your .card and .attribution classes in one div and center it .
Anyway great work , and keep up coding :)
This is my first project and I would need a feedback because I don't even know what to ask. I'm learning how to code by myself from 2 months.
What mistakes did I made? What could I have done better? What should I be careful about in such design? How would you rate my code from 1 to 10? ;)
Thank you for your help and support :D
1 . Your cards are not centered vertically on desktop view , solution : use flexbox or grid insted of float , that way you can do it easily , ( Floats work really well in small cases like when there's an element, such as a button, that you'd like to move to the right of a paragraph. But the real issue arises when you start using floats to lay out entire web pages. And the reason for that is: floats are not meant for layouts , instead use flexbox or grid)
2 . Maybe you can add property ' transition ' on your buttons , so when you hover them color change smoothly ( for example : transition : all 300ms linear ; ),
helpful links for research :
Anyway great work , if you have any more questions feel free to ask , and keep up coding :)
This is my first completed challenge, any feedback would be really great for my improvement.
I am on my laptop , and your box is not centered , its at bottom of my page. Its because you set a min height of that element , and i can scroll page way to much .
maybe add overflow hidden to body and remove min height from .element class , and it should work.
Anyway great work , and keep up coding.
I couldn't obtain fix slider control on bottom of avatars. I tried to add an container to images and the control on position absolute but the design is damaged. I hope in the future to have better skills to complete the challenge. I appreciate any advice, thanks.
I think this should work
.container{ position : relative; width : 500px ; // for example height : 500px ; // for example } .container img{ width : 100% ; object-fit : cover ; } .container button{ position : absolute ; // relative to container , this will remove it from flow bottom : 0 ; left 100px ; transform: translateY(-50%); // this will push it down for half of their height }
Anyway great work , and keep up coding :)
I'm very pleased with the JS part of it, but CSS definitely needs some improvement. Leave a feedback, I will be happy to know your opinion!
UPD. updated version finally all works as it should.
Very cool , i am looking forward to build it myself. What was the hardest part for you?
Hi :) Good challenge with a lot of skills covered. Sad tho that the API kinda sucks Any feedback on the React part would be really appreciate :) Thank you!
When i click "more" button scroll bar appear top left of screen , everything else works just fine. Good job :)
Even though I liked the backgrounds images for the given widths, I didn't liked how it turned out outside of those widths (I explained more in detail on the README in the repository). Can you give me any advice of how to make it more responsive for the users screen? Is it the size? Is it the positions? Is it the units I used?
Thank you for taking your time!
You can make your black text little bit brighter , maybe set lower opacity or change color . Overall great work , i think its fully responsive , keep you coding :)
had problems putting an image behind the color in this task and also had problems on the mobile hamburger menu and gave up
Great work dude , ill suggest you 2 things , fix your padding in footer (bottom of page) , and add transition to all your elements that have hoover state , for example 300ms , then it will work much smoother.
Happy coding :)
What should I improve from responsivity and @media queries?
I you want it to be perfect , you can add media queries for i-pad , go to firefox dev tools and press ctrl + shift + m and select i - pad , but its not that big off a deal.
Overall great work dude :)
Much closer than my first challenge solution. Feedback is appreciated.
Good job mate , i have one suggestion for you to improve your project , and that is to add transition of 300-400 ms to your buttons , then the hover effect will be so much smoother.
Everything else is great , its completely mobile responsive , its work on i-pad too . Maybe add some animation when the page loads , if you want to practice css even further.
Overall great work , and keep up coding :)
had problems putting an image behind the color in this task and also had problems on the mobile hamburger menu and gave up
I cant preview your site , your link isnt working for me.
I worked very hard to get this done , ill appreciate any feedback. Hope you like it , and happy coding to you all :)
it works fine but only on screen wider the 1500px , challenge is on 1440 px , i guess its to late now (how use 1440 px screen anyways :) ), just demo it and you will see.
