Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

News Homepage

Agil 180

@Agil-Saputra

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What should I do to improve this project? What your honest opinion about my code? Do you think I should use framework such as react and tailwind to build this project?

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hi Agil, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

If we see how the layout is behaving at higher resolutions, with the help of google dev tools, we will see that it is stretching a lot, to solve this we can use a max-width with the value we want the content to stop growing and to center use a margin: 0 auto

body {
    max-width: 1440px;
    margin: 0 auto;
}

Avoid using px, If your web content font sizes are set to absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. if you want to keep using px for development and then format the whole code to rem, you can use this vscode extension: px to rem

The rest is great!

I hope it helps... 👍

Marked as helpful

1

@SinisaVukmirovic

Posted

Hello!

To improve, use more (all) HTML5 semantic elements, and use them more correctly. Unlike most beginners your are using some semantic elements, which is great, but also misusing some of them.

More on semantic HTML5 elements

Also, use of headings (h1, h2, h3...) elements is not correct.

More on headings in HTML5

Your code, in general is OK, but for a beginner it is quite good. Learn and apply said things and it will be very good code.

And, while learning, you should stick to making everything with vanilla CSS and JS. Move on to frameworks only when you learned the fundamentals.

Hope this helps!

1

@TjasaZil

Posted

Hi Agil,

good work on the project. To enhance your code you can put the navbar section outside of the main component and wrap it into <header> tag. You can read more about the tag and why it is used here. I also see that all of your pictures do not have an alt attribute. Some of the alt attributes are empty. It is good practice to describe the picture in the alt attribute, just in case, the user can not see the image (slow connection, broken src or the user uses a screen reader).

I do not think you need to use any frameworks with this project, as it is pretty simple. Basic HTML, CSS, and a bit of JS are enough. You can redo the challenge once you know some frameworks if you want.

Otherwise, you are doing great :)

Cheers! 🥂

1

Please log in to post a comment

Log in with GitHub
Discord logo

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