HTML & CSS Foundations

Community feedback

• 

  P

  Mihai Chirilov•140

  @MihaiChirilovPosted 9 months ago

  The most challenging part will be to setup the card shadow to increase from 8px to 16px when you mouse hover the title of the blog. You can find a solution online. Here is a good example for a solution which you can implement for your blog card: https://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element The hover effect on the title is easy to setup, simply add the :hover and change the colour to yellow.

  You can slightly adjust the spacing, especially on the bottom part. But the most important thing is that you have started working on a solution which can be improved and refined until you are satisfied with it. Even if it is a very simple example, it teaches you many things about best practices. And with each new challenge you will improve and all the knowledge will build on top of the previous one.

  Good job and keep working on these challenges! Thank you, Michael

  0
• 

  P

  Mihai Chirilov•140

  @MihaiChirilovPosted 9 months ago

  • .card-container should have its black border set to 1px;
  • I would also centre the blog card vertically and horizontally using either:
    • display: flex;
    • display: grid; Each one has additional settings to centre the blog card. Currently if you resize the browser to a smaller width, you will see how your approach is not being responsive. So the easiest way to solve this is by using either flex or grid for the display.
  • I would remove the width of 16% from the class .image-greg img and add the dimensions directly to the <img> tag as attributes: width="32" height="32". This is how the image is sized in the design file.
  • for "Learning" category, I would remove the enclosing <div> and just use <p> or <h2> tag which can be directly styled with CSS by adding a class to it. It is much easier and more predictable to style an element rather than an element inside a div.

  0
• 

  P

  Mihai Chirilov•140

  @MihaiChirilovPosted 9 months ago

  Hello Harsha, Good job on submitting this solution for this challenge. It is important that you have started this journey as a frontend developer. There is a lot to learn in this field. I have a couple of suggestions for you to improve your solution and to get as close as possible to the original design.

  <img src="./assets/images/illustration-article.svg"> requires an alt attribute describing what the image is. It is necessary for accessibility.

  • In my opinion you have overused the <div> element. Your HTML structure is made up of lots of divs and inside them you are using <img> and <p> tags. Maybe you need a quick refresh on the recommended HTML structure. I would suggest to simplify your HTML structure like this:

  <main> <img /> <h2>Learning</h2> <p>Published 21 Dec 2023</p> <h1>HTML & CSS foundations</h1> <p>These languages are the backbone of every website, defining structure, content, and presentation.</p> <div> <img /> <h3>Greg Hooper</h3> </div> </main>

  Of course you need to add CSS classes to the structure above in order to style it.

  • you need to add :hover state for the title of the blog ("HTML & CSS foundations") so that when you mouse over it, it changes the colour to yellow and also the dropshadow of the container increases. This part was the most challenging for me when I have completed this one.

  Thank you, Michael

  0