This challenge was really easy i tried my best to make my solution as close as possible to the original design.
What challenges did you encounter, and how did you overcome them?this challenge wasn't much of challenge
What specific areas of your project would you like help with?i want to know if i overlooked something
You are welcome! Keep on working on other challenges and you will improve in no time! It is a long journey but you will be amazed on how much you will accomplish during your journey. We are all walking the same road :) Thank you, Michael
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
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.
Of course you need to add CSS classes to the structure above in order to style it.
Thank you, Michael
Hello Yahia, I like your solution to this project very much! Good old school CSS to align the social media card horizontally and vertically. :) Everything looks spot on and you have used a clean and simple HTML structure. Good job! My only suggestion would be to separate the content a little more, so that you are closer to the original design. I assume you have no access to the design files (Sketch or Figma). But these are very minor issues that can be addressed or not. It will not affect the functionality of your solution. Thank you, Michael
This was a pretty simple project but good practice to re-enforce my knowledge of flex and mobile design. I am going to start developing projects using a framework such as Next.js rather than just HTML and CSS.
Hello,
I really like your solution to this project. Great job! The only thing I have noticed other than the comments above, is that you should use the custom font suggested in the design (Outfit). For example I have used the @import at the top of my css file like this: @import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');
And then I have used font-family: "Outfit", sans-serif;
This way your solution will be closer to the original design proposal.
Thank you, Michael
I'm proud of how I handle some tricky css because its been a while since I stop coding and now I'm getting at it again. Hope I always have this motivation.
What challenges did you encounter, and how did you overcome them?Centering div, since its been a while I find it difficult because I'm trying to remember it but then I googled it HAHAHA
What specific areas of your project would you like help with?None
Hello Ronie,
I really like how clean and simple your solution is. Great job on using minimal HTML and CSS elements to build this project. I only have a few minor comments/suggestions on how to improve it and make it closer to the original design:
Hi😁! My name is Huy, and this is my solution for this challenge. It's been a long time since my last challenge. I did this in my free time.
Users should be able to:
What I used🚀:
Thank you for viewing! Cheers🎉
Hello Huy, I find your solution excellent! I really like that you made really simple, just using HTML and CSS. Great job! I only have 1 suggestion for you to improve the solution:
In any case, I really admire your commitment to frontend development and your continuous work on these projects! Thank you, Michael
The card image element has no "alt" attribute set. The bottom message/text can be wrapped in a <footer> element.
I am proud to have managed to complete this small project in my first try. Next time I will try deploying the code to a different hosting provider.
What challenges did you encounter, and how did you overcome them?I have not encountered any serious challenges as this is a simple project. I had small issues with the correct css properties. I have overcome these by looking up on the internet the correct usage of those CSS properties.
What specific areas of your project would you like help with?I do not need help with this project.
Hello Anastasia, Thank you very much for your positive and constructive feedback. I will be using flexbox in my next project. Thank you again! Michael
The background color of the window should be light blue grey. The font should be Outfit from Google.
I most proud of using place-items CSS property.
What challenges did you encounter, and how did you overcome them?There were no challenges so far.
What specific areas of your project would you like help with?At the moment there are no such areas.
Hi Valeriy, I really like the simplicity and the use of HTML elements when building this project. The solution is spot-on and it works flawlessly. Congratulations on an excellent job! Thank you.
