Skip to content
Submitted about 2 years ago

News Homepage Challenge (HTML, CSS, JS)

starryrobot•200
@starryrobot
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

After over half a year break from web development I decided to return (<2 years total experience before this break). I chose this particular challenge because I imagined it would be a decent place to start! I found it challenging, particularly in regards to remembering how layouts work and adjusting the layout for RWD. I also had to brush up on basic JS again in order to add the mobile menu.

That being said, I think it turned out well! Please, feedback would be amazing! I struggled with getting the hamburger aligned and I also didn't do any transitions here as I don't know how to do them properly, so the hamburger remains, well, a hamburger and doesn't transform into a close icon. Any help with this would be appreciated. I also struggled with the bottom part of the layout involving getting the size proportions of the images relative to the text next to it correct. In RWD the images are too far away from the text. My method was to reduce the width of the image and I also tried to manually assign a value to the grid area with the image in to be smaller than the grid area with the text. Reducing the image width worked but it didn't adjust the grid area. As you can see from the demo, it hasn't worked! I have struggled with this in the past with mock projects and so any help clearing this up would be amazing!

Thanks!

Community feedback

  • Amal Karim ✅•1,290
    @amalkarimPosted about 2 years ago

    Hi Starry Robot 🤖

    Actually, the hamburger menu image and closed menu image are available to use. But if you prefer to use CSS instead so it could be animated when open and close menu, it could be achieved pretty easily using CSS.

    Add the following declarations to .hb_line class to make the transition smooth:

    background-color: #333;
transition: transform 0.2s, opacity 0.2s;

    Add this style to give transition to the hamburger menu:

    body.fade .hb_line:first-child {
  transform: translateY(7px) rotate(45deg);
}
body.fade .hb_line:nth-child(2) {
  transform: translateX(10px);
  opacity: 0;
}
body.fade .hb_line:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

    That's it. You could play with the transform property to make the transition works as you want.

    Regarding the bottom part, I think there's better method to make responsive image than by reducing the image width. If we reduce the image width without reduce the container of the image, it will only increase the gap between the image and the text, and the proportion will be a bit off.

    Remove this styling:

    .news-item img {
  width: 60%;
}

    And for .news-item, I will personally remove this declaration: grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));, because while it will automatically adjust the width of its children, at some point it will not work as good as we want it to. Instead, I will use something like grid-template-columns: 1fr 2.5fr;, and add @media queries at necessary breakpoints.

    All of these are my personal view. It could be right or wrong. At least, I hope these could give you a new perspective.

    Happy coding!

    0
    starryrobot•200
    @starryrobotPosted almost 2 years ago

    @amalkarim Hey Amal, thanks for the feedback! So the fancy effect for the hamburger menu line is pretty straightforward. I'll have a play around with the code you provided. Thanks!

    Do you think the bottom news portion can be done in flex? I was thinking as much when doing the CSS but have become accustomed to using grid for a lot of things when I know flex can be just as good.

    0
    Amal Karim ✅•1,290
    @amalkarimPosted almost 2 years ago

    @starryrobot of course you can use flex for that. Give it a try!

    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