Hello
This looks pretty good overall except the attribution is overlapping the component on mobile - no need to position that absolutely
Here are some tips for improvement
- look up how and when to write alt text on images, and how to treat decorative images
- you have some invalid html in here at the moment, opening h2 tags but closing h3 tags
- annual price and the price can't b I th be headings, that makes no sense. If Annual price is the heading, then the price is the content belonging to that heading - a paragraph
- think again about when to use buttons and when to use anchor tags. What is it you expect proceed to do? What is it you expect change to do? (If this was a real project) It's really important to choose the right element for the job
- not sure why you have two media queries in here. Most of your css is mobile first except the background image on body for some reason(?) I'd switch that, use the mobile image as the default and move the desktop background into the min width media query you've already got
Well done on this, good work so far. And yes absolutely use rems, that's spot on. It means everything will scale together no matter the users zoom or font size settings
Marked as helpful
@stevednick
Posted
@grace-snow
Hi Grace, thank you so much for such detailed and helpful feedback. I'm working on all those fixes now. I notice a few mistakes after my hurry to get this submitted last night, and really don't know what I was doing adding a second media query (doh!).
Everything you say makes perfect sense to me but I will definitely have to do a little more reading abut using buttons and anchor tags. In this case it feels to me that all the clickable elements are likely to navigate you elsewhere (except possibly the change button?). Does that mean that they should all be links? I'll do some reading!
Thanks again, I really appreciate it!
@stevednick
Posted
@grace-snow
So, have done some reading and I've decided to keep the cancel item as a link as it would likely just navigate away but have proceed and change as buttons as they would be changing things in the front or back end. Is this how you would approach this?
I think I am starting to understand better when to use on or the other but it seems like a bit of a dark art!
@stevednick I would only have change as a button as I'd presume it would toggle the price to monthly or something
This isn't a form so I'm not convinced proceed would be a button. I think it would navigate to another page. Even the label "proceed" implies movement/navigation
Marked as helpful
