Responsive Blog preview card using HTML and CSS

Community feedback

• 

  karlo•120

  @ktorres63

  Posted over 1 year ago

  • I find the use of the tag section interesting, I didn't know about it.
  • In the part of the img tag you forgot to put a description
  • When I want to see your website on Github Pages, only the markdown appears, I'm not sure why but I suspect it's because you named the html file as blog.html when it should be index.html.
  • In a few lines of code you achieve the objective, that seems excellent to me.

  10

  Marked as helpful
• 

  

  Grace•32,130

  @grace-snow

  Posted over 1 year ago

  Here is some feedback I hope it's helpful...

  1. Update the document title in the html head.
  2. The html file name should be index.html
  3. Personally I consider the author image at least to be valuable content that should have an alt description. Check out the post in the resources channel on discord about how and when to write alt text.
  4. All content must be contained within landmarks. That means the section needs to be wrapped in a main. Every page must have one main landmark so it's a good habit to add it in these examples.
  5. I don't think the learning tag needs wrapping in an extra div. Not a problem, just seems unnecessary.
  6. Consider using the time element for the publish date.
  7. You must remove those br tags from the paragraph..don't ever force line breaks like that, let them break naturally based off the content and available space. When you add brs you will cause line breaks in really odd places for users who have a different text size (making sentences very hard to read) and some screen reader users will hear "break" every time a br is used. You don't need them and all they are doing is damage.
  8. The author name is not a heading, it's just a paragraph. Heading elements are some of the most important html elements there are in terms of communicating semantic structure of the content. Headings must only be used when they are headings for other content underneath them. And they must be at the correct level (in order to show relationships between content, just like the contents page in a printed document or book).
  9. It's better for performance to link fonts in the html head instead of css imports.
  10. Get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  11. The body must not be height 100vh. Min-height is fine but height is not. You must never limit the height of elements that contain text, including the body. They need to be able to grow taller when necessary.
  12. Do not use position absolute to center the component on the screen. That is causing it to overflow my screen on all sides because position absolute removes the component from the normal document flow. Instead use flex or.grid properties on the body to center the screen contents (eg make the body into a flex column).
  13. Font size must never be in px. This is extremely important.
  14. Use the specific font weight values for the fonts you've chosen. Don't rely on key word values as these can differ between browsers.
  15. It may be fine, but make sure you definitely understand the difference between padding and margin.
  16. I can't see a max width on this component but am almost certain it needs one. Components like this should usually have a max width in rem (unless they will be placed inside a grid or flex container when used on a real Web page - but that is sadly the context we don't have when building a demo component in isolation like this).

  00

  Marked as helpful
• 

  123dakalo•50

  @123dakalo

  Posted over 1 year ago

  Thanks for feedback will learn as I move forward

  00