All solutions

Question 1: Why do my images not show up? I swear I did it correctly

Question 2: How can I improve my file structure?

Question 3: When making the Vite Project, what is the difference between choosing between JavaScript + SWC & just normal JavaScript?

Thank you!

This is my first ever React app. I used Vite instead of create React app. How can I improve my react code / react file organizational skills?

Also in Vite, what is the difference between JavaScript + SWC & just the normal JavaScript option?

Thank you!

The final design looks a bit different because I was more focused on the JavaScript side of it rather than the CSS. I'm back at school now everything is slowed down too. My JavaScript is NOWHERE near ideal. Any pointers on how to improve on the JS would be appreciated!

I can tell I'm improving on my form validation. I really enjoy creating these types of projects now. On to the next!

This is my first time dealing with API's. I definitely needed youtube help on the code for the API but I'm going to keep learning and figuring it out! Any comments on how APIs work would be greatly appreciated!

My only issue is that on line 40 of my JS file, the lightShareButton.setAttribute("fill", "var(--BasicallyWhite)"); seems to not work correctly. I've tried to fix it but I can't seem to change the color of the SVG on click. Any help on this would be appreciated!

Summary: I had a very hard time planning out my css positioning. JavaScript comes easier to me than css positioning. I am unsure how to start my projects without creating a set width and/or height px value. I know it is best practice to code with both desktop and mobile in mind, but I always just start in mobile and say “I’ll deal with media queries at the end.” I had MAJOR issues with positioning the 2 cards absolutely as well as adjusting all of the elements inside of the cards.

Questions / Issues

1. My main issue is how can the card be positioned absolutely to the background, but also positioned relatively to the elements inside of the card.
2. Typing “3333 3333 3333 333f” into the card number box does not show a red border. The solution should be around lines 64 - 84 of JavaScript. I just can’t find it.
3. Also on the desktop, the card number inputs from right to left instead of left to right. Not sure what's going on there lol
4. I don't know how to add a linear gradient on an input border so I just added a single color.

Thank you so much for any feedback at all, I appreciate it!

What're some better practices for CSS positioning instead of using set px values for width and height?

I need help with CSS Positioning Please!

Any tips on organizing my elements without using rigid px values for the height and width?

Thank you!

This is my first attempt at using the SCSS preprocessor instead of normal CSS. I absolutely love it. I mainly use it just for indentation, but that alone makes me never want to go back to normal CSS haha.

How is my SCSS? How can I utilize the preprocessor even more?

Onto the next! 🖥️

How can I improve my CSS positioning? How can I clean up my code?

This challenge was pretty difficult for me. The JS wasn't actually too bad, it was the CSS positioning of the 3 images that I had trouble with.

I will come back to this after some more CSS positioning knowledge has been gained. Hopefully, it will be perfect then.

Onto the next!

Question 1: When should you use a div vs a section?

Question 2 How is my HTML Structure? How can it be improved?

Question 3: How is my CSS Positioning?

Thank you!😁

How is my HTML, CSS, JS Formatting?

How can I improve on my code in anyway?

1 This is my first time using Semantic HTML, please lmk how to improve on it / what I did well.

2 General Question: If an image is by itself in the HTML, should it be wrapped in a div or can it be left alone? For example, I have my images with classes mobile photo and image in the entire leftside div. Would it be best practice to have another div called photos for example so that I can be more specific in my code?

3 For future creators of this challenge, the green color isn't in the style guide so I added it myself: Forrest Green: rgb(75, 135, 107);

Thank you so much! I'm super glad how this one came out, onto the next!😎

❗Question: If you look closely at the photo of how it's meant to look, the blue rectangle has rounded corners and is on top of the white rectangle with no rounded corners. I tried that, but I couldn't get them to overlap. How would I do that?

Thank you!

Question: I have an issue with CSS position, the way I centered my "card" div was by adding display: flex, align items and justify content to the entire body of the HTML Document. What is the best practice / easiest way to center the div, as well as center the text within the card?

Thank you!