News homepage

Community feedback

• 

  Dylan Heslop•1,570

  @dylan-dot-cPosted 7 days ago

  It is Looking good! But there are a few places to improve!

  • The mobile design looks good but there is too much space between the articles in the new container. ALso there are some spacing issues which is due to line-height on the h1 text(make it smaller)
  • You used some fixed percentage heights and widths on the images which causes them to stretch uncontrollably on tablet screens. Best to use a specific width for the images along with object-fit:cover; to help the images look good on all sizes. It's mainly a problem with the div you have with a width of 15em and a height of 10em. Try not to put heights on images, unless you want some of it to be cropped out. You can also search up aspect-ratio in css. Normally put a width on images and the height will auto adjust to the image.
  • also within the main container, I think you overuse divs here and could make some good use of semantic html as it is easily more relatable when building a blog page. So for each section of the grid, could actually be a section element as it highlights a section of you blog homepage. and you could make each blog an article instead of an div.
  • You have been consistent with using the heading tags but when you reached the last three, things went sideways. I think it's better to put the h2 or h2 tags on the title of those blog posts instead of the numbers as the titles are more important, the numbers are just there for styling and don't really tell screen readers much compared to the actual title.

  Overall well done with using tailwindCSS, but I suggest that you use it with frameworks like React/Vue where you dont have to rewrite those classes for similar elements in your code. Also you can remove the attribution styles and put them in the css file.

  Take care, great solution!

  Marked as helpful

  0

  ---

  

  Yash Babani•890

  @Yashbabani0Posted 7 days ago

  Hey Dylan, thanks a lot for your detailed feedback and suggestions!

  I appreciate you taking the time to review my project. I'll keep your advice in mind for future projects. Spacing & Mobile: I’ll pay closer attention to line height and spacing between sections, especially on smaller screens, to improve the layout.

  Images: I’ll incorporate your tip on using object fit cover and aspect ratio to prevent images from stretching and to maintain their aspect ratio on different screen sizes. I’ll also avoid setting fixed heights on images going forward.

  Semantic HTML: Using elements like section and article instead of div is a great suggestion to enhance accessibility and readability. I’ll be sure to apply this to future blogs or content-heavy pages. Headings: Your point about prioritizing the titles over numbers with heading tags makes sense. I’ll adjust my approach so screen readers can better interpret the content structure.

  Regarding your note on Tailwind with frameworks, I’ve used React and Vite in other projects feel free to check them out!. For this one, though, I was just in the mood to write it in plain HTML and Tailwind—no particular reason, just keeping it simple this time. Thanks again for all your detailed advice,I appreciate it! 😊 @dylan-dot-c

  0