Skip to content
Submitted about 2 years ago

Responsive News Homepage using CSS Grid areas

Harou37•50
@Harou37
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

Hi Guys! This is my first ever web dev project which i had a lot of fun doing!!

I didn't use javascript or any frameworks as I haven't learned them yet, although I'm really happy with how this turned out, however I had a lot of trouble dealing with fonts which is funny because they're supposed to be the easiest.

Also, I'm not quiet sure about the grid layout cuz at some point it was overflowing and didn't really know how to fix it.

So yeah there is still a lot of learning for me in my (hopefully) long journey and I'll be very glad if your advices take part in it.

Community feedback

  • Sidi-Ali•50
    @Sidi-AliPosted about 2 years ago

    Hi Harou37, Great work here. I have noticed there is no image showing when viewing your solution on a mobile screen size. In your media query @media screen and (max-width:760px), you used background-image: url(/assets/images/image-web-3-mobile.jpg). I guess removing the forward slash before assets will resolve this issue.

    Happy coding.

    1
    Harou37•50
    @Harou37Posted about 2 years ago

    Hi Sidi-Ali, Glad you liked it!

    The image is a oopsie for me, forgot to edit that, thanks for notifying me about it.

    Happy coding for you too.

    0
  • Adriano•38,250
    @AdrianoEscarabotePosted about 2 years ago

    Hi Harou37, how are you?

    I really liked the result of your project, but I have some tips that I think you will enjoy:

    your code is very clean, I share everything with semantic tags congratulations. I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Read more, he is not confirming a form, or something like, it will be redirected to another page, to read more about!

    To resolve do this:

    <a>Read more</a>

    The rest is great!

    I hope it helps... 👍

    1
    Harou37•50
    @Harou37Posted about 2 years ago

    Hi Adriano, I'm doing great. Hope you're doing great as well!

    I'm very happy that you liked the semantic tags.

    Thank you for your tips, really helpful and I will make sure to keep them in mind for future projects.

    1

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