Submitted over 1 year ago

Newspaper Landing Page Using CSS Grid Areas

Blac_Koder• 30

@Eddie7145

Preview site View code

This is a solution for...

News homepage

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

What I found difficult while building this project was most with the images, I had a tough time making them responsive, so I would like to ask my fellow developers for the best way to make images responsive (pinching them in and out).

The areas of my code I'm most unsure of are mostly my JavaScript section more especially because I'm new to it, but here it is below:

const CloseMenu = document.querySelector('.close-menu-sect'); const NavWrap = document.querySelector('.nav-wrapper');

CloseMenu.addEventListener('click', () => { NavWrap.classList.toggle('hide'); })

So my questions are :

What are the best ways of making and image responsive?
Is there an easier way to write JavaScript code other than the way I wrote it?
Is there any way to write CSS code more easily and efficiently?

Community feedback

Harshit Joshi• 120

@TheFoxian

Posted over 1 year ago

Hey! Good job and congratulations on completing this challenge // Here I've few feedbacks based on my observation: - font family is missing, mobile menu is also missing same goes for the hamburger. Other than that for css improvisation I suggest use css preprocessor such as SASS, or simply use bootstrap with the basic required css customisation. Happy Coding :)

Blac_Koder• 30

@Eddie7145

Posted over 1 year ago

@TheFoxian Thank you very much for your comment, I really appreciate it and I'll definitely look into it.

I would like to connect with you, so that we could build each other So could you dm me on twitter @blac_koder

Dytoma• 570

@Dytoma

Posted over 1 year ago

Hey 👋

Good job on completing this challenge

For your questions, here is my suggestions:

To make your images responsive, you can give an object-fit: cover property to the image to fill in its container and you can give your images a display: block/inline-block to style it correctly and give it width: 100% and height: 100%
For easy way to write CSS code, I will suggest using CSS pre-processors such us SASS, you can check this Sass tutorial for more info
For javascript there are a bunch options out there but you should be comfortable with javascript syntax before you dive into learning javascript frameworks or libraries. You can learn React.

Happy Coding 😇

Blac_Koder• 30

@Eddie7145

Posted over 1 year ago

@Dytoma thank you very much, I really app your feedback and I'll definitely put in the work

I would like to connect with you, so that we can develop our skills together So could you dm me on twitter @blac_koder

Dytoma• 570

@Dytoma

Posted over 1 year ago

@Eddie7145 You're welcome. I'll get in touch with you, right now I'm a bit busy so I may not dm right away but I'll make sure to send you a message when I'm ready.

For the moment, ou can continue improving your skills until we meet.🙌

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