All solutions

3 hours set up before diving into the first querie. Using more compartmentalized code, the set up was longer, but it made my code more DRY. Because of that, it took longer to finish this project, but for larger projects I believe this can reduce the time and amount of code. Seems like font size going from Figma to a browser isn't 100%, I had issues with fitting text inside the buttons. One of them had a paragraph element in it and the other didn't. It seems it's best to have a text element inside the button than to just have the text in the button. Still having a bug where I can't use Margin and padding to define all the sides, but I have to define each side individually using margin-top, margin-right, etc, which is annoying. I'm going to try another pre-processer next time to see if I have the same issues. I also noticed, the images provided are never crystal clear in the browser, I wonder why that is? This also took three weeks because I was working a lot. But after not looking at the code for two weeks, I was able to come back to it with minimal issues, which is a good progress. I packaged with parcel this time, I was told it was more light weight but the package seems huge compared to the last packager I used. Not sure why? Also getting Parcel to work with Vercel was more than annoying if you're using SASS as there doesn't seem to be any good documentation on how to do so. Finally figure out I had to add the root directory as dist in Vercel, it might have been somewhere, but my newish eyes couldn't find it.

Learned a little more trying to update a font fix that somehow broke when I was trying to upload to Vercel, where I have to rebuild the project using parcel each fix. Also was getting some Vercel bugs, where it wouldn't update correctly when I redeployed my project. Then when I remade the deployment it wasn't working. It seems like if I choose Parcel in the framework drop-down, it'll fail deployment. Which I used both methods, with parcel selected and without and they both deployed, so it seems luck of the draw in my eyes. All in all, I'm going to use another packager for my next projects.

Was fun to build. I used a function to convert px to rem. I was wondering if that was a fine way to do it, as well as using SASS modules to split the css media queries in multiple CSS files so I didn't have one long file. Any feedback would be appreciated.

I finally figure out positioning images without dealing with a scrollbar. Overflow clip margin came to the rescue, so far, positioning was one of my weakest skills but I'm glad I figured it out. I wonder why that propertie was difficult to find when googling. For some reason it worked on day and the next it didn't unless I defined it as 0. No idea why. I originally started with a desktop first design, but after feedback on my last challenge and I restarted it in a mobile first mindset. I actually enjoy this method more. I'm having less issues scaling up. Not sure when it's best to use CSS resets so I didn't use it here. I used grid for the first time in this project and I had many issues with scaling that up, so maybe for those properties it would've been for the best. So I want to practice that more of that in the future. Any feedback would help! I tried to implement all the notes I had for my last challenge!

Took me around 8 hours to finish this one. This one was a doozie, getting the curved elements and positioning the images made me pulled my hair out. I originally had the top swirly images in a Flexbox with the middle blurb and phone image, but the right image made the page scroll right to reveal white space after spending an hour trying to figure out how to remove the white space without messing up the curved element and the phone overhang, I move the images to be parented to main instead of the hero section to escape the overhand property.

I used z-index to get them back over the hero section. This would allow me to keep my curved element(which took many hours to figure out) and the swirly designs. Ending up getting white space again when everything was said on done the upper right swirl worked before and now it stopped even though I had overflow set as hidden, so I just downloaded the cut off version from figma.

When working on the tablet design I noticed that the middle section was laid out differently so I have to add the h3 and paragraphs under the numbers into their own flexbox so I could get the mobile design down. A lot of trial and error. So in all, getting initial layout took only 90 minutes and getting the curve and swirls down took many hours :) Next time I'm just going to use a SVG.

After this, I'm going to focus more on responsiveness of flex as the site works at the breakpoints, but not really in the in-betweens, so I believe I've been going about it in the wrong manner, going to mess around with max H and W values next time to see if that will be more responsive. Also going to try SCSS next so I can compartmentalize the CSS when dealing with the Media Queries so I can reduce the size as I was getting a little cross-eyed with all the lines of CSS.

If anyone could give any tips on my CSS as I believe I went about the responsiveness in the wrong manner

Took me around 8 hours to finish this one. This one was a doozie, getting the curved elements and positioning the images made me pulled my hair out. I originally had the top swirly images in a Flexbox with the middle blurb and phone image, but the right image made the page scroll right to reveal white space after spending an hour trying to figure out how to remove the white space without messing up the curved element and the phone overhang, I move the images to be parented to main instead of the hero section to escape the overhand property.

I used z-index to get them back over the hero section. This would allow me to keep my curved element(which took many hours to figure out) and the swirly designs. Ending up getting white space again when everything was said on done the upper right swirl worked before and now it stopped even though I had overflow set as hidden, so I just downloaded the cut off version from figma.

When working on the tablet design I noticed that the middle section was laid out differently so I have to add the h3 and paragraphs under the numbers into their own flexbox so I could get the mobile design down. A lot of trial and error. So in all, getting initial layout took only 90 minutes and getting the curve and swirls down took many hours :) Next time I'm just going to use a SVG.

After this, I'm going to focus more on responsiveness of flex as the site works at the breakpoints, but not really in the in-betweens, so I believe I've been going about it in the wrong manner, going to mess around with max H and W values next time to see if that will be more responsive. Also going to try SCSS next so I can compartmentalize the CSS when dealing with the Media Queries so I can reduce the size as I was getting a little cross-eyed with all the lines of CSS.

If anyone could give any tips on my CSS as I believe I went about the responsiveness in the wrong manner

Finished this challenge in less than an hour. My biggest worries are if my CSS is structured correctly and the way I implemented responsive is correct(or are their more efficient ways of doing it?). Also if my practice of using h1,h2,h3 is good, should I just use classes instead of changing the designs of every h1,h2,h3 element?

First time in months that I touched basic CSS and HTML since I've been learning backend and React. Took about 7 hours, which is 5 hours longer than I thought, I had to have a lot of reminders but it was good practice. Getting the plus buttons to the right took longer than I want to admit, as well as getting the keys to navigate the questions.

Looking for any feedback on my CSS and Javascript code!