Submitted over 1 year ago

News homepage

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Preview site View code

This is a solution for...

News homepage

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

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

szam• 800

@k-stopczynska

Posted over 1 year 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 helpful

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted over 1 year 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 😊

szam• 800

@k-stopczynska

Posted over 1 year 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 helpful

hebrerillo• 350

@hebrerillo

Posted over 1 year 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 helpful

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted over 1 year ago

@hebrerillo Thanks for the feedback! 😊

Aijalon Bode• 70

@capitolcomputers

Posted over 1 year ago

A good job right there!

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted over 1 year ago

@capitolcomputers Thank you!

Aleksander Tysklind• 820

@outerpreneur

Posted over 1 year ago

Great work! Almost nailing the original. Looking forward to following your steps one day! :)

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted over 1 year ago

@outerpreneur Thank you. Good luck with your journey!

JoshuaWBlick• 270

@JoshuaBlick94

Posted over 1 year 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.

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted over 1 year 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%;
}

JoshuaWBlick• 270

@JoshuaBlick94

Posted over 1 year ago

@catherineisonline Does it only appear when the navbar is active? If so how did you achieve that too. Thank you

Nabil Wasir• 680

@NabilWasir

Posted over 1 year ago

Great work as usual

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted over 1 year ago

@NabilWasir Thanks 🙌🏻 Still a lot to improve

faizan• 2,420

@afaiz-space

Posted over 1 year ago

@catherineisonline

add box-sizing: border-box; in the ** * universal** selector;
replace height:100vh; with the min-height:100vh; in the body element.
remove margin-top: -0.6rem; from the .featured a element.
replace align-items: top; with align-items: flex-start; in the .post class.(Content is overflowing by giving height of post class)

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted over 1 year 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

POTB• 330

@Peteonthebeat

Posted over 1 year ago

Great work as usual!

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted over 1 year ago

@Peteonthebeat Thank you 🙌🏻

Jahongir Murodboev• 180

@jahongirdev

Posted over 1 year ago

Nice work Catherine! 👍👏

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted over 1 year ago

@jahongirdev Thank you!

Please log in to post a comment

Join 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