I'm proud of completing this challenge!
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Great job in creating a responsive website! The layout looks great and it looks very similar to the original design.
Here is some feedback:
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>
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?
Hi friend!
Your code gave me more insight on how to use grid-template-area so thank you! I feel like the way you used grid areas was very intuitive.
To use place-content you need to set a display to the container like grid or flex!
My go to method for centering containers is something like this
container {
display: flex;
justify-content: center;
align-items: center;
}
I've been removing the footer completely... I just shout Frontend Mentor in my github. Hopefully I don't get in trouble for it [:
However, good work dude!!
I did it well enough
What challenges did you encounter, and how did you overcome them?I don't have any problem
What specific areas of your project would you like help with?I don't have any
Looking good! Something I would recommend is using "img" tags and including the svg file instead of including the entire svg in your html.
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!
Great job Nick! Something I would recommend for responsive websites is to prioritize mobile designs first and build the desktop design after.
Tried to make it look pixel-perfect without even having the Figma file with dimensions.
What challenges did you encounter, and how did you overcome them?I have encountered a few issues with the margin and padding as I haven't got the Figma file.
What specific areas of your project would you like help with?Any suggestions are all welcomed.
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!
I tried to keep it as vanilla as possible.
What challenges did you encounter, and how did you overcome them?Making it look close to the design on different viewport sizes. I managed it by going through 2 css books and experimenting a lot.
What specific areas of your project would you like help with?Just some honest feedback. Thanks
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 (:
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
I recommend looking at youtube tutorials and documentation for git. It doesn't look like you pushed your finished code to github
