Great job in creating a responsive website! The layout looks great and it looks very similar to the original design.
Here is some feedback:
Make sure you're sizing down the fonts so that tablet and mobile views can get the best user experience.
I see that you applied a lower opacity for the footer image, that ended up making the elements within it transparent as well.
When using header tags, make sure there is only one h1 tag on a page and make sure you are using them in order (h2 → h3 → h4...). You can always change the font sizes accordingly.
Lastly, this is a tip that was given to me in a previous challenge that I thought would be helpful to you.
📌 You can use the <picture> tag when you have different versions of the same image.
Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.
Example:
<picture>
<source media="(max-width: 460px)" srcset="{desktop image path here}">
<img src="{mobile image path here}" alt="{alternative text here}">
</picture>
What are you most proud of, and what would you do differently next time?
I'm glad I got my solution to even look close to the design. I'm most confident with how I placed the grid items. I don't know if making named grid areas is the best way to go, or by telling the grid items how many rows/columns to span,
What challenges did you encounter, and how did you overcome them?
Placing the grid. I tried using "place-content: center;" but I couldn't get that to work (I know there has to be a reason.) so I used the horizontal auto margin method instead.
What specific areas of your project would you like help with?
I feel like I need to get better control of grid placement, any feedback for use in the future is appreciated.
Should these footers with copyright info ~always~ be placed at the bottom?
What are you most proud of, and what would you do differently next time?
My proud is that I am just using custom HTML and CSS for making this design. I designed this card without using any framework. Its look like great without any framework. Next time I will be more efficiently and professionally design the product and also using advance tools to solve my challenge.
Hi friend! Good efforts in your solution. Something that I am learning and recently trying to implement more in my projects are accessible code. I think you should give it a shot in your next challenge. It could be as simple as using meaningful tags for containers and headers and always including an alt text for images. Small projects like this are great for practice!
Your solution looks great dude! I'm amazed by how close you got it without having the Figma file. I also liked how you didn't keep the links static and they actually redirect you to a website. Nice work!
Your solution looks awesome! The only feedback I have is to set a width and height property to the card so that on the desktop view it's a bit smaller. You also did great on the responsiveness of the site (:
What are you most proud of, and what would you do differently next time?
I've never used media query while making webpages..this time i learned about it to complete my task...and i learned to deploy my project in github also..I'll try to submit all my webpages in github from now
What challenges did you encounter, and how did you overcome them?
As i don't know anything about github....i learned everything by the articles provided in this site..I had overcome this situation by creating a github account..by installing git bash..and deploying my code in git hub
What specific areas of your project would you like help with?
I want my project to be about jss which i haven't learned...by doing these projects i try to learn them