All solutions

Hello! 👋

This is my 5th solution on Frontend Mentor, built using static HTML5, CSS3 and vanilla javascript as always. 🙂

This challenge solution was built in 1 hour (+2 minutes) due to little time on the weekend, and the html/css code is thus not beautiful to look at (possibly lots of bad code habits). Due to the little time measuring was done by the eye (no tools) and the design is possibly far from "pixel correct" as desired.

I had trouble getting the image to look crispy dark as in design, I've tried "multiple" techniques and all such but to no avail, so any feedback on how it could be done would be appreciated. Any other feedback from the community, pointing on my mistakes and bad habits, would also be greatly appreciated!

I'll hopefully be back for another challenge next week, see you all again then! 🙂

• Shirajuki

Hello! 👋

This is my 4th solution on Frontend Mentor, built using static HTML5, CSS3 and vanilla javascript. 🙂

This was planned to be finished last week in the easter break, but I it became busier than expected so I had less time to work on this (work time on this project now totals to about 4-6 hours). I didn't quite have the motivation to animate the "share dialog" popup and that's why it is boring as it is.

Figma 🎨 was used once again for measuring which has made quite easier to get the measurement "right", but is still however difficult to get the solution to be as "pixel correct" as possible. I would love to hear about how the community work on this as this is a recurring problem I see on all my solutions (that the solution pixel perfect as I hoped it to be).

A question I have in mind is how one efficiently display an image inside a wrapper without stretching it in any way. As of now I use the wrapper with an overflow: hidden, hiding the part that is overflown in the image, and would love to know other solutions to this. Any other feedback from the community commenting on my implementation would be greatly appreciated!

I'll hopefully be back for another challenge next week, see you all again then! 🙂

• Shirajuki

Hello! 👋

This is my 3rd solution on Frontend Mentor, and also my 3rd week here! As this was my first intermediate challenge, and also quite simple, I chose to build it using static HTML5 and CSS3 and vanilla javascript. 🙂

I used more time on this solution this week as Easter break 🐣 just began for me and thus I it took 4-5 hours on this solution in the span of 2 days. Feedbacks on my excessively use of pseudo-element ::before/::after, if that may be unnecessary or not, to my solution of the flipping animation of the card are appreciated. I tend to also write lots of redundant and unclean code but I am willing to improve, thus any feedback from the community on that or anything else are also greatly appreciated!

Once again I used Figma 🎨 for measuring which has made it a lot easier to get the measurement, but is still difficult to get the solution to be "pixel correct" on a big display as my monitor is smaller than 1440px. The solution uses the WebStorage API / LocalStorage for saving the countdown timer, and the use of setInterval for the countdown. 💻

I'll be back for another challenge next week, happy Easter and see you all again next week! 🙂

• Shirajuki

Hello! 👋

This is my 2nd solution on Frontend Mentor, and also my 2nd week here! As this was a newbie challenge with no dynamic elements, I chose to build it using static HTML5 and CSS.

I had little time working this week and thus only used about 2 hours on the newbie solution, which means that there is probably still lots to improve code quality-wise. Even though I do believe that I did quite well on this, I still hope for some feedback from the community! Any feedbacks on my use of "percent" (%) on the opposite side for the background-circles as well as the CSS syntax, since i tend to write lots of redundant code for styles, are greatly appreciated!

This time, I used Figma for measuring which has made it a lot easier to get the measurement right even though the monitor on my laptop is smaller than 1440px. All in all I've had a good time relaxing while working on this solution and enjoyed it very much.

I'll be back for another challenge next week, see you all there!

• Shirajuki

Hello! This is my first challenge as a newbie front-end designer on frontendmentor and it has been quite a blast! The challenge was done in a rush (7 hours total in 2 days) and thus the code is quite ugly as there's lots of redundant parts and bad practices which can make it hard to read the code.

Feedback I would like to get would be how one can add the background images such as "bg-pattern-intro.svg", "bg-pattern-circles.svg" in a way that is responsive? I used background-image in CSS for this as of now, and don't know if HTML5 img tag would've been better for this or not? It was also difficult to correctly get the measurement as I only did it by the eye, is there any suggestion on how one can efficiently get the measurements/size of the elements to correspond to the design pack given? Any other suggestions on how I can improve are appreciated!

Thank you in advance!

• Shirajuki