All solutions

Hey everyone, happy Friday! 😄

This was a tough challenge, and glad that I finished it. Curious to hear your feedback on my animated button when no rating is selected.

Glad to finish this one! 😄

Curious to hear your thoughts on my class naming for the images portion. Also is there a go-to descriptive style for image class names that you use?

<img src="img/illustration-box-desktop.svg" alt="Orange box with @ symbol" class="card__img-decal">
<div class="card__wrapper-img">
  <picture>
    <source media="(min-width: 900px)" srcset="img/illustration-woman-online-desktop.svg">
    <img src="img/illustration-woman-online-mobile.svg" alt="Girl using a monitor" class="card__img-primary">
  </picture>
</div>

As a bonus to this challenge, I made the image popup on click of the main image.

Making the background spheres look similar to the design was a challenge! I tried a bunch of ways of positioning both images and ultimately went with the best approach I could think of. I used a combination of vw, vh and % and that made it easier for me to understand the positioning.

I was hoping to get a lot closer to the design for the background spheres, curious to know what methods you used to simplify the process for you.

Hi everyone, 👋

Happy with how the responsiveness came together in this project. However, I came to wonder what "real world" media queries are targeted in a professional project. 🤔

My current method I'm going by is targeting 1400px and 375px. In between those targets, I've developed a pattern of targeting: 900px, 700px or 800px, based on where it breaks in these challenges.

Is my method normal (fix it as it "breaks")? Should I standardize my approach by targeting specific sizes? For example, common screen sizes mentioned by a blog.

Would really like to hear your thoughts. Thank you for reading, have a great weekend! 🙂

Hey everyone, 👋

Would appreciate some insight on finding the right middle ground between the accessibility/semantic-html feedback and design challenges.

My current layout has a section as the parent, and article as the child elements. I used section because it groups content, and article because it contains self-contained content.

<section> # cards wrapper
  <article> # card
    <h2>
    ...
  <article>
    <h2>
    ...
  <article>
    <h2>
    ...

Feedback suggests that page should have an a level one heading (h1), but the design doesn't call for one. Going away from design, I could add a h1 to completely fix it, but is that the right call?

Or is there a better way of approaching this, maybe restructuring the html? I looked around in some recent solutions, but couldn't find a clear answer.

I feel like it is an issue that I'm going to face a lot, and maybe you have before. Any help is greatly appreciated, thanks for reading!

Hey everyone,

Not exactly sure media query target is good enough or just overthinking this. 🤔

The design readme specifies for 375px target for mobile devices, but my coded design is too large even before hitting this target. So, I made it target 900px so it wouldn't overflow.

Is that the right solution, or would the correct solution be to incrementally make a series of media queries to make the design smaller until the target 375px is reached?

I was in a "rabbit-hole" of redesigns as it scaled smaller, but as a went further along I stopped the "time-sink", feeling that it wasn't into spec, and I scrapped the code.

I would like to make a revision to this project, as I am stuck and very invested at this point! Thank you for reading and I would love to hear your thoughts! 😄

Hi everyone 👋

I'm having trouble with sizing to scale of the design. Is there a technique that I'm missing that makes it easier than just flipping back and forth? Or is this the best it gets 😅

Currently, I'm putting them side (design) by side (code) and "guess checking".