Submitted 6 months ago

First Newbie Challenge With HTML and CSS Only. Desktop First Approach.

TheGDneo• 100

@GD-neo

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

This was the first Challenge I ever completed on my own.

I most proud of setting up my machine, connecting to and working with GitHub and managing to complete the task set without a tutorial or direct help.

What challenges did you encounter, and how did you overcome them?

The most difficult part was understanding how to use the :root functionality as to avoid having to write out the color codes each time. I found an article on freeCodeCamp where someone had the same issue/question which helped me better understand and adjust my code.

Next the "card" seemed to have a shadow on the bottom border which I had difficulty re creating. I used a combination of the MDN explanations of box-shadow and trial and error to reach a solution that seemed to look good.

What specific areas of your project would you like help with?

I still struggle to fully understand how to use box-shadow. In my solution I used the syntax:

box-shadow: 0px 4px 16px 0.1px var(--project-grayishblue);

While I understand that the first two inputs move the shadow on the x/y axis, the third and fourth input I don't fully understand.

I would have liked to adjust the shadow so that there is less on the sides and the opacity is even lower so that the shadow would be more subtle.

In the attempted solution I did not access the Figma files.

Community feedback

Bryan Li• 3,550

@Zy8712

Posted 6 months ago

Hi there! Your solution looks pretty solid.

To answer your question regarding box shadow:

the third number controls how blurry the shadow is. The larger the value the bigger and lighter the shadow becomes
the fourh number controls how much further the shadow spreads out from the center point of the shadow. Positive values makes it grow, negative values makes it shrink.

In your case, I think you should do something along the lines of:

box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.1);

I don't remember them specifying what colour to use for the box shadow, so I might be wrong. Either way, hope you find this feedback somewhat useful.

P.S. This guide really help me when working with box-shadow: link.

Marked as helpful

TheGDneo• 100

@GD-neo

Posted 6 months ago

Thanks for the explanation @Zy8712.

I had to use box-shadow on the next challenge I did and your explanation of the purpose of the other inputs I was not sure about really helped me out. Thanks again

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord