@Charlie025xSubmitted 12 months ago
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.
Charlie
@Charlie025xAll comments
- @Charlie025xPosted 12 months ago
No I don't, I think that will be over engineering this little static site.
0 - @Charlie025xSubmitted over 2 years ago
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.
@Charlie025xPosted over 2 years agoUPDATE* 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.
0 - @itzjterSubmitted almost 3 years ago
Hey! 's up? Please if you have any advice that can help me improve, i'm all ears. Thanks. :)
@Charlie025xPosted almost 3 years agoGreat 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.
Marked as helpful0 - @gchristoffersonSubmitted about 3 years ago
At first I tried using the
border-topproperty 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::beforepseudo-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!!😎✌@Charlie025xPosted about 3 years agoLooks 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.
Marked as helpful0 - @rizky-pmSubmitted about 3 years ago@Charlie025xPosted about 3 years ago
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?
0 - @mackievaSubmitted over 3 years ago
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!
@Charlie025xPosted over 3 years agoI got the same problem. Adding " overflow: hidden;" to your container might do the trick, however the orange square becomes invisible too.
0 - @Charlie025xSubmitted over 3 years ago
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.
@Charlie025xPosted over 3 years agoWe 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.
0
