Skip to content
Submitted almost 2 years ago

Newspaper Landing Page Using CSS Grid Areas

Blac_Koder•30
@Eddie7145
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

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 :

  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?

Community feedback

  • Harshit Joshi•120
    @TheFoxianPosted almost 2 years 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 :)

    1
    Blac_Koder•30
    @Eddie7145Posted almost 2 years 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

    0
  • Dytoma•550
    @DytomaPosted almost 2 years 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 😇

    1
    Blac_Koder•30
    @Eddie7145Posted almost 2 years 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

    0
    Dytoma•550
    @DytomaPosted almost 2 years 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.🙌

    0

Please log in to post a comment

Log in with GitHub

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