Design comparison
Solution retrospective
I would like to know is it even correct ? Personally for me look similar as example picture give but not sure if code is correct
Community feedback
- @l3lazePosted 12 months ago
An excellent first shot for a beginner :) Did you use something to help build it, or is this all by hand? Curious because of the CSS in particular - seems like there are both unused and advanced selectors in the top section, and then basic selectors which are all used in the bottom.
If you haven't already, make sure to scroll near the bottom of the page on your FM solution and look for the automatically generated accessibility and HTML reports as they can find things that many humans may miss.
The only issue I can see with the HTML seem like nitpicks:
-
The outer
div
is indented one extra space. Easily fixed, and could be automated by a code formatter or warned about by a lint tool. -
class=main-border
seems like a bad identifier for the main container. A main element, or class of main or main-container, may be better.
CSS (ignoring top half, as it seems generated):
-
Designs on FM seem to all be vertically and horizontally centered. Easiest way I've found is to use flexbox, but there are people doing it with grid, and obviously it'd be possible to simulate with %, though it'd be harder and possibly less user-friendly.
-
The style guide includes a width for the designs, which have all been
375px
for mobile and1440px
for desktop so far. Your content (other than the attribution) is417px
wide in total, and does crush well to fit the minimum but outgrows the desktop design. Designs can be opened in an image editor to "reverse engineer" many measurements, or opened in an image preview and carefully placed to lineup with the browser window by usingalt + tab
to switch between the browser and image. I've been eyeballing it, but measurements would be more accurate of course. -
The
font-family
should include a generic fallback in case a user block Google Fonts or it doesn't load for any reason. -
Repeated colors, e.g.
hsl(0, 0%, 100%)
would be more readable as named CSS vars.
Marked as helpful1@RolandVelsPosted 12 months ago@l3laze I uses css "reset" that some youtube tutorial used. Thanks you for your feedback.
1@l3lazePosted 12 months ago@RolandVels Ohh, interesting - must be something like a normalizing reset.
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