Design comparison
Solution retrospective
Please, I will appreciate any idea on how to improve on this solution and what to add or removed from it. I look forward to your suggestions. Thank you
Community feedback
- @nityagulatiPosted over 4 years ago
Hi Saka, here are some suggestions to improve upon the code.
-
Go through the report generated for the solution and implement the fixes recommended.
-
Move all the inline styles you currently have in the HTML file to your CSS file. Inline styles make it more difficult to revise and modify the site and it's not the best way to go.
-
Instead of using
float: left
andposition: relative
etc and adding empty<p></p>
and<br>
tags to achieve the layout, you can use Flex or Grid to align and space the elements and then add appropriate margins and paddings as Richard suggested. Floats are fine to use in small cases such as positioning a button or a particular element. However, it's not the best practice to use them for creating layouts. -
Instead of using
<li1>
and<li2>
tags. I would simply use<li>
tags and then use a class to apply different styles as needed. Also,<li>
tags should always be child elements within the<ul></ul>
or<ol></ol>
tags.
Keep up the good work! :)
1@sheriffsakaPosted over 4 years ago@nityagulati Thank you very much. I really appreciate your suggestions. I will work on them.
0 -
- @Richard-08Posted over 4 years ago
Hello! Good work! You can improve navigation. Add logo, links and button to different containers <div></div>. And then parent container "topnav" make flex. Example:
<nav class='topnav'> <div class='logo'></div> <div class='topnav__links'></div> <div class='topnav__btn'></div> </nav>Styles: .topnav { display:flex; justify-content: space-between; align-items: center; }
Then you can add padding, margin and it will be like in design:) Good luck!
0@sheriffsakaPosted over 4 years ago@Richard-08 Thank you very much I will work on it.
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