Design comparison
Solution retrospective
Although the project is not fully completed, all the functionalities have been properly set up. However, I acknowledge that there are areas for improvement, such as the lack of mobile design implementation using media queries. Additionally, the desktop design could be enhanced further.
Community feedback
- @grace-snowPosted over 1 year ago
You need to be working mobile first really. And not submitting at all if the mobile styling is not done.
This still needs quite a lot of work. Have you had feedback on earlier challenges?
Here are some fundamentals to focus your learning on
- all content should be within landmarks (main, footer etc)
- don't use large margins to try and create a layout. To center a component on the screen use flex or grid properties along with min-height 100vh
- instead of setting a % width on a component, use max width only (in rem)
- always use a modern css reset at the start of the styles. Andy Bell has a good one you can look up and use
- border radius should never be in %. Use a fixed value for that
- font size must never ever be in px
- use small padding values for the button. This could be a good candidate for the em unit
- you are using a very unusual approach for class names. Consider changing to hyphen-separated strings instead of pascal/camel case
- alt on images is important content - if the images are meaningful they must have proper descriptions of what they look like
- consider using the picture element for responsive images
- this is missing a form and label for the input
- error message containing elements should be present in the DOM at all times, have a unique ID, and be linked to the input with aria-desciribedby
- Try to Indent your code consistently so it's easier to read and easier to spot bugs
- follow me on LinkedIn is not a heading for other content. It's also skipping a heading level but headings must always be in the right order in html. I recommend you move this to a paragraph in the footer (attribution)
- once you've fixed the html, this needs to be listening for a form submit on the first panel, not a button click
Good luck
Marked as helpful1@faom002Posted over 1 year ago@grace-snow
Thank you, Grace (@grace-snow), for your assistance. I will definitely look into it. By the way, could you also assess its responsiveness at this moment?
0@grace-snowPosted over 1 year ago@faom002 it is not responsive at the moment
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord