Design comparison
Solution retrospective
Hello, Frontend Mentor community! This is my solution to the News homepage.
I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
Community feedback
- @k-stopczynskaPosted almost 2 years ago
Hi! Great job on finishing the challenge!
Since you feel pretty good in CSS and HTML I have suggestions for you.
Firstly: try adding transitions on active elements like navbars/ hamburger buttons (it can be simple like opacity and scale, or moving from one side using translate X or Y with transitions ease-in/ ease-in-out).
When you feel comfortable with it, try some cubic-bezier effects: here is a playground for it: https://cubic-bezier.com.
After that try animations (like rotating some elements when clicked or sth like that).
When you do that and your projects will become more dynamic- it will be time for some preprocessor like Sass.
Hope this helps, happy codind!
Marked as helpful0@catherineisonlinePosted almost 2 years ago@k-stopczynska Thank you so much. I wanted to add some transition but wasn't sure what type of transition to add because when I tried something it looked buggy so decided to put it off. 😃 I will try these suggestions, thank you 😊
0@k-stopczynskaPosted almost 2 years ago@catherineisonline here you have some pretty examples: https://themewagon.com/responsive-navbar-collection/
Try some of them to know how this works, break them, then restore:)
Enjoy!
Marked as helpful0 - @hebrerilloPosted almost 2 years ago
Hello Catherine!
For a portrait screen size mobile like 710 x 375, when you open the navigation menu, the links are not displayed properly. To fix that, just decrease the 'margin-top' in this rule:
.nav.active .menu { gap: 1rem; margin-top: 50%; }
A better approach would be to statically position both the '.amburger' and the '.menu' elements.
Marked as helpful0@catherineisonlinePosted almost 2 years ago@hebrerillo Thanks for the feedback! 😊
1 - @capitolcomputersPosted almost 2 years ago
A good job right there!
0@catherineisonlinePosted almost 2 years ago@capitolcomputers Thank you!
1 - @outerpreneurPosted almost 2 years ago
Great work! Almost nailing the original. Looking forward to following your steps one day! :)
0@catherineisonlinePosted almost 2 years ago@outerpreneur Thank you. Good luck with your journey!
0 - @JoshuaBlick94Posted almost 2 years ago
Hello Catherine, This project was well done and executed. I would like to know how you were able to put the background blur when the navigation menu is active.
0@catherineisonlinePosted almost 2 years ago@JoshuaBlick94 Thank you! I added pseudo-element ::after to the navigation bar and set the following style for it:
.nav::after { display: inline-block; position: absolute; content: ""; width: 100%; height: 100%; background-color: hsla(0, 0%, 24%, 0.46); backdrop-filter: blur(2px); top: 0; left: -100%; }
0@JoshuaBlick94Posted almost 2 years ago@catherineisonline Does it only appear when the navbar is active? If so how did you achieve that too. Thank you
0 - @NabilWasirPosted almost 2 years ago
Great work as usual
0@catherineisonlinePosted almost 2 years ago@NabilWasir Thanks 🙌🏻 Still a lot to improve
0 - @afaiz-spacePosted almost 2 years ago
@catherineisonline
- add
box-sizing: border-box;
in the ** * universal** selector; - replace
height:100vh;
with themin-height:100vh;
in the body element. - remove
margin-top: -0.6rem;
from the .featured a element. - replace
align-items: top;
withalign-items: flex-start;
in the .post class.(Content is overflowing by giving height of post class)
0@catherineisonlinePosted almost 2 years ago@afaiz-space Thanks and I already had border-box in * and don't even have 100vh anywhere :D I tried to change everything else and it totally messed up my whole website. I will just leave it as it is
0 - add
- @PeteonthebeatPosted almost 2 years ago
Great work as usual!
0@catherineisonlinePosted almost 2 years ago@Peteonthebeat Thank you 🙌🏻
0 - @jahongirdevPosted almost 2 years ago
Nice work Catherine! 👍👏
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