@viniciusshenri96Submitted almost 2 years ago
Hello community, this was my solution to this challenge, any feedback is welcome, thanks!
Els G
@elsgoossensAll comments
- @elsgoossensPosted over 1 year ago
love the way you disabled the button when no score is chosen, great idea :-)
1 - @PassantinoDevSubmitted almost 2 years ago@elsgoossensPosted almost 2 years ago
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
0 - @JassonJrSubmitted almost 2 years ago
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. :)
@elsgoossensPosted almost 2 years agoKeep 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:
- A title is mandatory, it is used to display in the browser tab or in search results, so in the header section add <title>Any title you like</title>
- you need to add a language (it is need for people with screenreaders so english is pronounced as english and french as french, etc) So add the lang attribute like this <html lang="en">
- also for accessibility: you need one main landmark, so add <main> and </main> around main content
- All images need an alt tag, used by screenreaders, if there is nothing there the screenreader will start reading the pathname, which is really annoying for people with screenreader. Giving an empty alt text tells the screenreader to skip this. So either it is a usefull image and you give it an alt description, either it is pure for decoration then you add alt=""
Happy coding ! Els
Marked as helpful0 - @Murat-cmdSubmitted almost 2 years ago
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.
@elsgoossensPosted almost 2 years agoHello 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
0 - @eraybelSubmitted almost 2 years ago
Hello, I would be grateful if you could help and guide me about the missing parts in my design.
@elsgoossensPosted almost 2 years agoHi 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 helpful0 - @VictorResinesSubmitted almost 2 years ago@elsgoossensPosted almost 2 years ago
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 helpful0 - @AhmedElshennawiSubmitted almost 2 years ago
This is my Second challenge, Kindly advise!
@elsgoossensPosted almost 2 years agoI 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 helpful2 - @missmbalaSubmitted almost 2 years ago
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
@elsgoossensPosted almost 2 years agoThis 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 !
0
