@viniciusshenri96
Submitted
Hello community, this was my solution to this challenge, any feedback is welcome, thanks!
@elsgoossens
@viniciusshenri96
Submitted
Hello community, this was my solution to this challenge, any feedback is welcome, thanks!
@elsgoossens
Posted
love the way you disabled the button when no score is chosen, great idea :-)
@PassantinoDev
Submitted
@elsgoossens
Posted
You got that layout matching, good work !
Just asked some questions on slack for my solutions and apparently you need to do this using a form and radio buttons (gotta redo my solutions too)...
Keep up the good work.
Happy coding Els
@JassonJr
Submitted
I'm still lacking with the skills to build a proper responsive page, CSS is not my strongest, but I'm definitely getting better at it with each project.
I don't have any questions for now, but I'll continue on the other projects from this plataform since they'll help me improve, maybe I'll have some questions that will need answers. :)
@elsgoossens
Posted
Keep up the good work. It is though but it does get easier. I struggled at first, still ain't perfect but it goes way smooter. I took the free W3schools courses on accessibility and CSS. My notion on image settings improved doing that and I understand accessibility better. It helped me forward.
Some feedback on the warnings of solution:
Happy coding ! Els
Marked as helpful
@Murat-cmd
Submitted
It was really hard for me to add multiple breakpoints to make the card more responsive to screen size, and hovering the eye-icon on top of the IMG was really painful to code. Maintaining image padding with the card container was something I was unable to fix.
Yet, Despite all these problems I still managed to make the card look 90% the same at the given breakpoints provided in the design folders.
@elsgoossens
Posted
Hello Murat,
I avoided the issue of overlaying 2 divs perfectly for the image color change by adding a background to the div (background-color: var(--clr-Cyan);) and making my image's opacity change on hovering.
I did run into a 2 px difference though, luckily I got help (changing the image to be display:block instead of the default display:inline fixed it)
Hope this is of any help.
Still on same challenge myself though ;-)
Keep up the good work
@eraybel
Submitted
Hello, I would be grateful if you could help and guide me about the missing parts in my design.
@elsgoossens
Posted
Hi there,
You still need to add the active states (change colors on hovering, for the image this is a bit tricky, I found this example on codepen that helped my get started https://codepen.io/maxoranew/pen/KEWNMp)
Still on same challenge fixing some issues myself.
Keep up the good work.
Marked as helpful
@VictorResines
Submitted
@elsgoossens
Posted
Hello Victor,
I'm just starting out myself here.
I have learned some things I try to apply now, I put all sizes in rem (because it helps for people with different browser settings: in Chrome, under settings, if you change the appearance, make the font size bigger or smaller) all keeps working fine if you used rem.
By default 16px = 1 rem, but to make my life easier I put the default for all to 10px (so I put html {font-size:10px}, from then on, it is easy 23px = 2.3rem, etc.
The other useful habbit I copied is using variables for color settings and stuff: :root{ --clr-orange: hsl(35, 77%, 62%); --clr-soft-red: hsl(5, 85%, 63%); }
using a color is then: h1{ color: var(--clr-very-dark-blue); }
Besides that I am trying to find as much useful tips as possible.
Keep up the good work, you re doing great !
Happy coding Els
Marked as helpful
@AhmedElshennawi
Submitted
This is my Second challenge, Kindly advise!
@elsgoossens
Posted
I was looking at your solution and thanks to you I started to look up grid layout (I took 2 full courses and neither of them mentioned grid layout, so I only learned flexbox and bootstrap, gonna check out difference myself on https://www.youtube.com/watch?v=3elGSZSWTbM).
Your solution looks good, one small tip maybe it the usage of variables for the colors and fonts so you don't need to repeat those.
:root { --dark-cyan: hsl(158, 36%, 37%); --cream: hsl(30, 38%, 92%); --very-dark-blue: hsl(212, 21%, 14%); --dark-grayish-blue: hsl(228, 12%, 48%); --white:hsl(0, 0%, 100%); --font-montserrat: 'Montserrat', sans-serif; --font-fraunces: 'Fraunces', serif; }
Easy to use background-color:var(--white);
Marked as helpful
@missmbala
Submitted
I have completed the challenge however i could not get the item to centre as per guide image, so any feedback on what has gone wrong in this regard is greatly appreciated
@elsgoossens
Posted
This looks ok. I am new to this too.
I hope to add just a little thing at least: One thing I think is good practice is to write for font-family 'Outfit', sans-serif; instead of 'Outfit'; so if Outfit would not work for any reason there is a fallback. Besides that, keep going, doing great !