blog-preview-card-main using css and html

Community feedback

• 

  Martin Fuentes•20

  @cmfc31Posted 7 months ago

  1 - You should remove the media query @media (min-width: 1440px) from your code since makes the card align to the left side on bigger screens.

  2 - Instead adding the svg file code directly in your index you can just simple load the image from your assets folder using an img tag.

  <img class="blog-image" src="assets/images/illustration-article.svg" alt="Article image">
  

  3 - You should also implement the hover effect on the blog title and card drop shadow as an extra challenge. Also notice that in a mobile view the font sizes changes a little bit. To do this you can add a media query similiar to the one you try to use before. I usually set the mobile breakpoint in 640px.

  @media(max-width: 640px) {
    font-size: 12px;
  }
  

  4 - In your classes names avoid adding names that start with an upper case. Instead name your classes following the kebab-case convention.

  1
• 

  Junier Bolívar 🕷•710

  @JunbolPosted 7 months ago

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

  CONS:

  1. Card alignment to the left on desktops: 🐞 Solution: ✅ Basic structure semantics and the use of Flexbox : Start with body and main:

  /* Decorative styles */ /* Query for mobiles */
  html,
  body {
   margin: 0;
   padding: 0;
   margin-top: 0px;
   margin-bottom: 0px;
   height: 100vh; /* This ensures that the body takes the full viewport height */
   background-color: var(--color-yellow);
  }
  
  main {
   display: flex;
   justify-content: center; /* This centers the children of .mainContainer vertically along the main axis */
   align-items: center; /* This centers the children of .mainContainer horizontally along the cross axis */
   display: flex;
   flex-direction: column;
   height: 95vh; /* This ensures that the body takes the full viewport height.The only way to centered vertically is to use this on main */
  }
  

  Inside <main> you could add a <section class="card"> for your card

  Solution ✅The for the media querie for desktops you could delete it as Martin said it.

  2. README.md: Remember you have 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.

  3. Screenshot: Your screenshot doesn’t match the original design, fix the alignment of the "Learning" title with the Date.

  4. Alignment:

  a. The alignment of some elements don’t follow the design brief given they are centered (unless you intended to do so) and they should be aligned left b. The card is not centered in the screen on desktop view: Reason:

  4. Footer: The footer need to be away from the Name and Photo of the presenter: You could add margin-bottom: 2rem

  5. SVG: I don't know if that was intetionally but you pulled off writing XML inside your HTML to add the svg file.

  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 🤪

  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