Solving a first JS Challenge is what makes me proud, minimizing the amount time.
What challenges did you encounter, and how did you overcome them?using js, css and responsive is little bit js, but alhamdulilah finally i did it.
What specific areas of your project would you like help with?always having some one who can motivate you is better
Keep up the good work!
A little suggestion about code depository storage. Try to put only assets in the asset folder (such as images and icons etc.) and to have a separate folder for code such as css and/or js like src folder. ;)
I learned how to use Grid, Transform, and specific positioning for the quotation mark svg photo. It took me a while to complete, so the next time I use grid, I hope to cut that time a lot now that I've had a chance to learn it.
What challenges did you encounter, and how did you overcome them?My biggest challenge was the bottom row of the grid. There was a lot of spacing within the cards' bottom padding. I ended up utilizing flexbox within the grid to justify-evenly to reduce the white space.
Is there a better way to remove extra whitespace on the bottom row of the grid? I tried h-fit and it made the row horizontally uneven on the bottom so I pivoted to flexbox. I am open to new things to try to improve this part.
Great job!
I've tried tailwind for this project too, very fun one to do! Everything is pretty great!
Try to use grid without defining rows if you don't really need to it will make your programing life easier. For your question, if I understood, the grid area is trying to fill the space and to make your grid even that is why it had the space on the bottom, so when you define the last grid element (the one that is on the side actually) you need to define it row-end position and ofc row-start-position, when you do this it will be the way it needs to but it will be on the left side so when you define the col-start it will move it to the right side of the grid and the rest of the elements will follow. ;)
Since I did it too (although your is more accurate) here is the link to my code so you can compare, maybe it will help you a bit more: https://github.com/LarisaKampe/testimonials-grid-practise6
And than again I am not a pro 😅 so you can check out Kevin. He can explain a bit better: https://www.youtube.com/watch?v=rg7Fvvl3taU NOTE: video is spoiler!
Hope I have helped you a bit. Good luck!
Hello there! Great solution!
Your code is really well organized. Just check the colors again (like bg and shadow of the boxes), and gap. Overall good work!
ps. And just a quick tip all the cards basically have mostly the same css the difference is in color of the border so you could have done it by putting the same class to all the cards like:
card. { background-color: height: padding: border-top: border-radius: box-shadow: etc. } and than just add the different border color based on the second class that is specific for the div. Hope that that makes sense. This is really just a different way of doing things ;)
Great job!
A few tips from me: Make sure you use versatile tags like <h1> for main heading or <p> for paragraphs, not everything should be <div> and it will make your css writing much easier.
look up css variables, there are easy and very helpful for these kind of projects. Using rem unit is really a great way to go! Make sure to add in font-family serif/sans-serif value alongside the font name just to have a second safe option. ;)
Keep up the good work!
For the nutrition section below, I struggled to get it right, and it still isn't that good. Maybe it's because I didn't use a grid. I always use flexbox for everything.
Hello! Nice work :) You can try to use different kinds of HTML tags. You should use <main> tag to close the main part of the page which is in this case the container. h2 for the titles, and there is a handy <table> tag for the table at the end. And add <section> and <article> tags to, just to make the document more concise. Keep it up!
Hello there!
I love the white line separation detail you have added. But It needs a bit of the room to breath if you want to keep the attribution part inside the card, just some visual detail. :)
Here are a few suggestions for your HTML:
And some suggestions for CSS: Love the button animation! :D I would personally put the padding-bottom on the container to be at least 40px.
Keep up the awesome work!
i am proud that i was able to get this project done with only little help, that meant progress for me even if it is just little. Next time, i will take time to understand projects before working on them.
What challenges did you encounter, and how did you overcome them?i had issues with centering the image at the top. Overcame it with help from one of my senior in tech.
What specific areas of your project would you like help with?Centering images in a div or in the body. Then, i would like if i can get online communities to join to improve my skills and to meet new people.
Great work! I center everything with flexbox, than gap is your best friend! ;)
Proud of getting it in the center. Next time would like to get it in the center easily using just writing on line of code
What challenges did you encounter, and how did you overcome them?Getting it in the center. Generating the link for live URL.
What specific areas of your project would you like help with?An easy line of code to position it at the center.
It is really clean and on the spot! Great work! Just a note that the attribution is in most cases on the end of the page but if you like it in the box with the rest of the info that is okay to! :D
