Skip to content
Submitted 11 months ago

Flex grid

Racheal•10
@Rachmtbs
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What I found difficult was linking the image. I have always had an issue with this; I know how to find a link and add it, but I have never had success when the image is on my own computer. Centering the card on the canvas proved challenging. I am unsure about the font and the background color in the learning process. I would appreciate any helpful feedback. What am I doing wrong, and how can I improve?

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted 11 months ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • Firstly, use the <img> tag to display an image. Depending on the location of the .html file, you should write the path to the image. Here are some concepts:

      Note: You can find more information by searching "relative path on html" on Google.

      • To display an image in the same folder as your index.html file, simply use ./ followed by the image name.

      <img src="./my-image-in-the-same-folder" alt="">

      • To display an image inside a folder, use ./ followed by the folder name and the image name separated by "/"

      <img src="./my-folder-name/my-image-in-the-a-nested-folder" alt="">
      • Never use the entire path of your PC, like C:\Users\rache\OneDrive\Desktop\codechallengs, as it won't work.

      In this case, the image is named "illustration-article.svg" and is inside a folder named "images," which is within another folder named "assets."

      So, if you put it all together, the path to the image would be:

      <img src="./assets/images/illustration-article.svg" alt="">
<img alt="Greg Hooper's Avatar" src="./assets/images/image-avatar.webp">

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
    0
  • Sean Buckle•410
    @seanbucklePosted 11 months ago

    Limit the number of <div> tags you use.

    Try to use more semantic ones, such as <header> <nav> <main> <article> <section> <footer>

    It will make it a lot easier to read the code not only for you, but also the browser.

    See link: https://www.w3schools.com/html/html5_semantic_elements.asp

    Try this for the image:

    <img src="./assets/images/image-avatar.webp" alt="Greg Hooper's Avatar">

    When it comes to centring in this particular case when using grid just use the following:

    display: grid;
place-items: center;

    For font, look at this link: https://developer.mozilla.org/en-US/docs/Web/CSS/font

    To make font and colour values reusable consider using CSS variables.

    See link: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

    Possible layout:

    body{
display: grid;
grid-template-rows: 1fr auto;
}

    <body>
<main>
<article class="card">
//card contents
<article>
</main>
<footer class="attribution">
</footer>
</body>

    Links on layouts and grid see below:

    https://1linelayouts.glitch.me/

    https://css-tricks.com/snippets/css/complete-guide-grid/

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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