Skip to content
Submitted over 2 years ago

Newspaper Landing Page Using CSS Grid Areas

Blac_Koder•30
@Eddie7145
A solution to the News homepage challenge
Preview (opens in new tab)Code (opens in new tab)

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 :

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

Please log in to post a comment

Log in

Community feedback

  • Harshit Joshi•120
    @TheFoxian

    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 :)

  • Dytoma•550
    @Dytoma

    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 😇

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