All solutions

Prior to this I have done 5 frontend mentor problems using pure css and html with some javascript when needed. I am now transitioning to React. Theres 0% chance I do 5.

This one was a real challenge. The accordion was hard, I tried my own way of doing and... it worked! It doesn't have fancy animations, but its mine and it works so I'm happy. I hoped to learn some animations for it, but it never came to fruition. In addition, getting the mobile image to be placed on top was very difficult for me, but I got there. I was really proud of when I got that to work :). But it has a problem with the way Im doing something else :( To center the card, I am using flex with justify-content and align-items. All well and good. Except, the accordions expand and add more content, meaning that to remain centered the card expands vertically in both directions. I tried very hard to make it only expand downwards and didn't get anywhere. The only thing I found I could do was set a padding top on the main - essentially give it a fixed position but then the card is no longer centered. I tried a large padding top then centering but it centers only on the body of the container, meaning it was too low. But then because it expands upwards as well, when you open enough accordions the image goes off screen. You win some and you lose some :P I got some good practice getting the image aligned anyway.

I listed out some of the challenges I face while I was coding. This is an incomplete list, but here it is

• Getting the shadow underneath the card to look correct
  • Immediate thought was box-shadow, but that doesn't seem to quite work. I believe it would be doable by having another object there as the border radius appears to be different as well.
• Overuse of flexbox
  • I used flexbox pretty much everytime to try and center things. Centering things is unreasonably difficult without it tbh.
• React adding a <div id="root"> to wrap all my content had so many unintended consequences. I think this will become more natural with practice though.
• Managing media queries.
  • I want multiple components in multiple files to react to media queries, but;
    • I dont want to have multiple sources of the size to change at
    • Then media queries are riddled throughout the code
  • Is it better to have a completely separate file for the media query?
    • But then we get a super css file :/
    • Using a var in media queries doesn't seem to work
• Im not sure how to make the card only expand downwards when I expand one of the accordions. In current state, when enough content is open it goes off screen (due to the image being positioned absolute and relative to the top of the card)
  • It would be better to keep the top in a fixed position

Now this is not a complete solution. The desktop version's images are not working correctly. Everything else works except that. The boiling point that made me decide to shelve this challenge for now and just submit it was that I do not understand position relative vs absolute vs the others YET, and so getting those images to display correctly just doesn't seem feasible until I have a strong grasp on those concepts. Especially as one image needs to be hidden on overflow and the other needs to not. I intend to come back to do the following.

1. Fix those damn images
2. Animate the accordions
3. Make the card expand downwards only

My next step is to learn grid and position better. They seem very important

This one was one of the easier ones but I got to practice and learn a few things

• The solution has many reusable classes as all the cards are nearly identical except for the text content - the styling is consistent across all cards.
• The button is an interesting problem that doesn't appear interesting until you actually try it. Essentially, we need to find a way to make the text transparent. But that isn't enough, because if we do we just see the button. We actually need to change the mix-blend-mode. In addition, the border of the button on click is not actually a border. This was a cool intro to how to make cool seethrough buttons :)

I wanted to make the site scroll horizontally once a certain minimum width was hit the result summary. Instead, it just resized. It did work when I set main to overflow: scroll, but this did not work well with the desktop design. I could have made the media query fix that but I figured there was a better way. Essentially, I want the component to eventually scroll offscreen so that it can still be used on extremely, tamagochi sized screens.

I also am unsure about the whole structure of my CSS. The file is quite large and hard to follow for the most part. I have isolated some shared things and some reusable css classes but at the same time I feel like it could be improved.

And finally, font-size... I wanted to set an entire div container with a few separate containers of text to the same font-size (notably the summary-item class). This had unexpected results, the font sizes were different. I figure this is because there is some averaging of font sizes being applied here as h1,h2,h3,p,etc all have a default font size in most browser and my css reset does not remove them. My research showed that I'm just gonna need to apply the font size directly to the container for the text but I'm wonder if there is a better way? It is extremely counterintuitive and honestly seems kinda useless in its current functionality so I must be missing something :)

Also, I didn't even see the data.json in the repo rip. E: Ive integrated the data.json file and it works by just rotating the colours. I don't think its the best way to do it but it gets the job done. I used a template but it kinda makes the code hard to read. If you were only looking at the HTML it would be hard to understand I think.

Theres a weird issue when I reduce the screen size to very small horizontally the background (body and main elements) stop taking up 100% of the screen even though I have them both set to 100% height. I've tried setting width to 100% as well but it didn't do anything.

The most difficult thing here was centering the product card on the body itself. Honestly, centering anything is really difficult because CSS seems to have so many different properties relating to it. I went with

body {
  display: grid;
  place-content: center;
}

and I honestly couldn't tell you why this works.

I have found that to center something, you need to add properties to its parent. Is this generally true? IE for the product card, I can't add a css property to the card itself

.product-card {
  my-centering-code
}

as this seems to only center its content, not the element inside of its own container.