I'm pretty satisfied with my solution but let me know your thoughts on my solution. I definitly think the most interesting part about this solution is the nav menu responsiveness to screen size and it's animation.
No I don't, I think that will be over engineering this little static site.
I have just completed this challenge using React.js.
First I worked on a Vanila JS solution that utilizes state and a fetch request to render cards for every category object in the data.json. However I hit a wall getting all the cards to rerender when I changed the value on the state. So I just switched to using React and after taking the time to relearn React, I got my cards rendering and rerendering perfectly on state change.
May I have tips on how to further optimized my jsx code? Or even on fixing the Vanilla JS version's branch. I'd appreciate any feedback.
UPDATE* I have just completed this challenge using React.js, using a map method on the data.json to render the cards. All I had to do was convert my html to jsx, impliment a few lines of code from my original js file to the React's .jsx files, and relearn how state and props work.
Hey! 's up? Please if you have any advice that can help me improve, i'm all ears. Thanks. :)
Great solution! I took a peak at your code to see how you did the cyan overlay and learned alot from how you utilized opacity with scss.
At first I tried using the border-top property on the cards to produce the different colored highlights. However, I found the border would wrap around the corner radius of the boxes and didn't produce the desired effect. So I tried using the ::before pseudo-element for the card. It looks closer to the design, but still not perfect. Is there a better way to produce this effect on the cards that will more closely match the design? Also, any other feedback is welcome. Thanks everyone!!😎✌
Looks great!! Only possible improvement you can make is to move your images lower.
I tried to achieve this by adding a "justify-self: flex-end" to your card-icon class, but that didn't work for some reason. However adding "margin-top: auto" to card-icon did the trick. "margin-top: auto" basically gives margin-top the biggest possible, forcing the content to the bottom of it's container. And if you give "auto" to both margin top and bottom to the same content, you end up centering that content vertically. A similar effect can be achieve with margin left and right.
Nice solution, the animation was a nice touch too! I also posted my solution using react. After a quick glance at your code I noticed you styled your components within the .jsx files (where I made a separate scss (css) file, and linked it to it's corresponding .jsx component).
Do you write your styles in the .jsx because that's how you're learning react, or is there advantage to writing styles in this way? Just curious.
Another question, why do your class names look weird. I think they look generated, is that because of a dependency you are using or something?
I got some good practice with this. I'm learning React so it was great to work with a little component, mapping out state for the questions and using an onClick method to toggle the question. Plus I got to work on things like the accordion css animation showing the answer and rotating the arrow.
The only thing that really got me was how do you hide the left side on the larger image when on desktop? I thought z-index would be involved but I could never figure it out. Thanks!
I got the same problem. Adding " overflow: hidden;" to your container might do the trick, however the orange square becomes invisible too.
When resizing the browser window on my solution, the picture gets awkwardly stretched. I understand this is due to me setting the width of the image to 100% width and height, but if I remove that then I get unwanted empty space.
We got different causes to having black space. To more more specific, my blank space comes from setting up CSS Grid to have 2 columns of 1fr each(50% width each), one column for all the text and one for the image. Without styling the image, I get vertical blank space to the right of my static image when the browser window gets wider. Setting the image's width to 100% helps to remove the blank space and resize the image to get bigger and smaller as the viewport changes, however between desktop and mobile view (tablet view I guess??) the image looks badly stretched.
