Blog preview card UI

Community feedback

• 

  Junier Bolívar 🕷•710

  @JunbolPosted 7 months ago

  Hi Gaurang! here are some recommendation for your project: PROS: Most of the features are there, it’s almost done.

  CONS:

  1. README.md: Remember to use the README.md template and adjust it (using Markdown syntax) with your own details and links in GitHub there is still the original README file. Also would be good if you show your final screenshot.

  2. Screenshot: Your screenshot doesn’t match the original design, the drawing is out of place in the screenshot.

  3. Alignment:

  a. The alignment of the "Learning" element don’t follow the design brief given they should be centered 🐞 Reason: Forgot to add display: flex ✅🛠Solution: Add display: flex

  but wait there are more issues 🔍 😱🚒🚒 .... I will download your code to test it. I am sorry fixing this will require more of my time. My advice to you is if you use Flexbox always add the beginning display: Flex and especially for this project use flex-direction: column for the rest follow the link bellow to study about using Flexbox. A healthy word of prevention: be careful with the property you use like position:relative and where you use because it could mess all the its children.

  4. Credits: The photo is missing: 🐞 Reason: missing 'dot' in path: <img src="/assets/images/image-avatar.webp" alt="Author profile"> ✅🛠Solution: Add the 'dot':

   <img src="./assets/images/image-avatar.webp" 
  

  5. Footer: The footer is not there and it needs to be away from the Name and Photo of the presenter: You could add margin-bottom: 2rem on the .name class.

  6. Box-shadow: The **box-shadow **property is not inline with the design brief (unless you wanted to change the design).

  RECOMMENDATIONS:

  1. Semantic HTML: Try to use as much as you can semantic HTML in your index.html file this with readability , accessibility (AOM) (screen readers) (SEO). You could go here and check it out: (https://web.dev/learn/html/semantic-html) I went there again and I realized to add the ARIA ‘role’ attribute (in all my htmls 🤪

    <main>
      <section>
        <h1>Main title</h1>
        <p>Paragraph </p>
      </section>
     </main>
  </body>
  

  2. Flexbox: I’m sure you use 3wschools to refresh stuff. But these two new kids on the block are really great:
  3. [Flexbox] (https://web.dev/learn/css/flexbox)
  4. [Flexbox] (https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/) Good look and Keep going!

  Cheers Junier

  0
• 

  Imerzion•120

  @ImerzionPosted 7 months ago

  Hi Guarang,

  Looking at your solution to the challenge, there seems to be a few errors when comparing the solution to the design.

  One of those issues being the colours that you have chosen do not match those given in the criteria.

  There also appears to be an issue with one of your images not pulling through at the bottom of the card (probably due to an error with your folder structure).

  Happy coding,

  ~ Imerzion

  0