Submitted about 1 year ago
my first responsive page, using flex,trying to make it look as similar
@josueguido
Design comparison
SolutionDesign
Solution retrospective
Any suggestion or correction would be very helpful.
Community feedback
- @ChamuMutezvaPosted about 1 year ago
Hi Josue Guido
- the link to your repository is not working, check that your repository is set to public. Without your code , we cannot give a proper feedback
- the
body
element should never have thewidth
set , it should be left on its default state.min-height: 100vh
is recommended for making sure that content can fit and provide the vertical scroll when necessary. - event listeners should not be used on non-interactive elements such as images. They are associated with elements such as buttons
- the HTML of your site does need to be changed but will need the proper link to your repository. Responsive images are displayed using elements such as the picture element, using CSS to hide and display images is not best practice. You may have taken this challenge early before getting feedback on the small challenge(if you have done them)
1@josueguidoPosted about 1 year ago@ChamuMutezva Thank you, I just changed the repository to public.
0@ChamuMutezvaPosted about 1 year ago@josueguido
Getting the HTML will be the first step. I have mentioned some of the recommendation above
- heading elements should follow an order where the
h1
is the first heading element of a page. The h1 can only be followed by an h2 heading element(that is to do with heading elements) - do not skip heading elements. - always use semantic html for creating an accessible website. The
learn more
should be an anchor element - it is a link to another page or section. The hamburger menu should be a button. - heading elements act as a summary of the content to follow - hence a number as a heading element does not offer much information to users.
- for best practice, there is need for separation of concerns in your code. Do not mix your Javascript with your html, the js should be in it's own file.
- keep your specificity as low as possible by using classes for styling. Do not use Id for styling and avoid nesting of your css where possible.
- font sizes should not be in px value, rather use rems. See the following article why font sizes should not be in px
- use fixed heights on elements should be avoided - that can cause content to be cut off if it doesn't fit the container height. Let the contents decide the height
- styling using the mobile first approach is recommended
1@josueguidoPosted about 1 year ago@ChamuMutezva Thank you very much for the recommendations, I already solved some points.
0
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