All solutions

This is my first React project on Frontend Mentor.

I kept this simple so there aren't any additional hooks or serious Javascript components. How is this structured? What would you have done differently?

I learned a bit here for future problems:

• I added a class .darkMode to the entire body to activate the Dark Mode.
• More styling practice
• More practice adding and removing classes in Javascript

For Dark Mode styling, I learned (but did not apply for this project) about custom CSS themes and giving projects the same name. However, I didn't know how to appropriately switch themes apart from applying the .darkMode class so .darkMode has all the individual stylings for each changed Element.

Problems:

• I was advised to change the checkbox input to a radio input, but upon doing so, the slider on the radio button did not slide back to the original location unlike my previous rendition.
• I'm still wrapping my head around making use of this idea for future projects:

.dark { --bg: #000; }

.light { --bg: #fff; }

body { background-color: var(--bg); }

I'm having issues with getting the pop-up to be in the correct place, any tips?

For the most part, placing things in the right area was easy, but there were some things that I clearly need to work on.

What I found difficult:

• Padding things within email input. I realized that there's no vertical aligning for text-inputs (at least that I'm aware of) so I had to pad things.
• Javascript 🤝 suicide ideation. While it was helpful to know that my logic was sound- getting it right with javascript syntax was painful.
• Button placement (still messed up)

Questions!

• I clearly need help with the button (colored red for now), what would you do to place it in the right place?

I got stuck a few times on this one:

• I'm having issues with moving the background images (notably .section-4 photography) into the right places. I'm able to move the div itself into the correct place but I'm having issues positioning it the way that it's portrayed in the sample.
• I think I got the navbar correct for Desktop mode, but the answer seemed a bit clunky.
• I had issues with positioning everything correctly at first since things seemed to overlap heavily over each other. I used margin-top: -24rem; to move things to the right place, but it didn't seem right. After a bit of tinkering, the margin-top portions became more reasonable and fit within 2-3 rem;. I could certainly use help with doing a better job with positioning these in future things.

Design-wise, this was incredibly easy to do. I went with a mobile-first design approach after finally getting comfortable with media queries.

HTML/SCSS:

• Design-wise, should this be an anchor tag instead of the button element?
• What would you change?

On the other hand, getting the javascript to do what I wanted proved incredibly challenging. Fundamentally, I understood what it needs to do to show an error message:

• listen for empty sections in the inputs
• adding a div or section for an error message component if there is an empty input

I did this one after a 2 week break so this is a bit sloppier than normal.

Questions:

• What's an easier way to get the button to not go out of bounds in the .left container when the screen size is around 800px? Individual media screens seems a bit clunky here.
• In mobile, .container is set to width: 100%; What is a good way to prevent a gap to the left of the div from appearing?
• I initially used <section> to divide the parts but could not get things to stack on top of each other in mobile. I ended up switching everything to <div>, is this the correct way to go about this kind of issue?

I found the card component easy to build, but got stuck on building the background. After incorporating the background through two pseudo-elements, I was able to position the image correctly as seen in the example.

• I am unsure of one aspect of the .card-parent. If you look into the scss file, you can see where .location (the "London" in this example), has a margin-left: 3rem;

QUESTION: Why does margin-left: auto; / margin-right: auto; not work in this case? Is the parent of .location messing this up?

Questions!

• I'm familiar with the "Don't repeat yourself" mantra, however, I had difficulty making the button:hover effect applicable to the .sedan .SUV and .luxury divs. How were you able to do this?
• How would you simplify the scss to reduce repetition?
• How would you improve accessibility here?

Questions!

• How would your improve accessibility here?
• Would you use an article class and cover all of div class=".left"? How would YOU use an article class here?

Questions!

• I had some difficulty changing the "Change" button, in the scss/css file it wouldn't change.

Process:

• Divided the screen into 2 sides, .containLeft and .containRight. Held together by .allcontain > .container. .containLeft and .containRight were given "flex: 1"; to put them side-by-side.
• .containLeft holds the images
• .containRight holds the h1, article, and .push button

Questions:

• The .containLeft image for the Desktop version does not completely cover the div that it's in. Margin, Border, and Padding (should be) at 0. How do I get the image to completely fill its div so that there is no white space below it?

BIG QUESTION:

• Mobile block stacking. I understand how @media-screen works with changing the pictures between the Desktop and Mobile image since they are two separate images, but how do I proceed in a way that allows all the blocks to stack on top of each other without messing everything up in Desktop view? Currently, nothing in the code has been done to make a mobile version in order to preserve the current Desktop version.