I need a bit of help with share button in mobile preview. Since it is toggle on/off in mobile screen size it is positioned below the 'share-box' but when I set position and put the z-1 it is on top but on same position (because of flex I believe) so one of the link is below it and it is not usable 😅.
And if anyone knows a good JS course? I watched a few and when I do watch and follow along it is very logical and easy but this little bit of code took me long enough to understand that I need to really master the basics and learn to recognize the steps myself.
Thank you!
I tried to do it using tailwind but it was confusing to me a bit, too many things to have in mind advanced, or is it just me? So if someone has a suggestion for tailwind it would be awesome. Or maybe you think it is a bit too early or maybe I should make some more projects using regular css/sass? Thanks!
I did a bit of research about and elements and I think I figured it out but any feedback on this topic is more than welcoming. :D
So just a qq. I've made the social links as an unordered list. I guess that is ok too but do you think maybe it is better to write them as separate div elements, or even make them as buttons inside list elements?
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!
