All solutions

Hello, Frontend Mentor community. This is my solution for the Huddle Landing Page

Easier than my previous challenges. With this challenge done there's only one free newbie challenge left for me to finish. Any feedback is much appreciated!

Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!

Hello, Frontend Mentor community. This is my solution for the Base Apparel Coming Soon Page

Didn't encounter any trouble. The workflow was similar to the Ping Coming Soon Page challenge. For the email validation I created a custom hook to make the code cleaner. Any feedback is much appreciated!

Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!

Hello, Frontend Mentor community. This is my solution for the Ping Coming Soon Page

No trouble worth mentioning. There's a question I want to ask, I used the text in the type attribute for the input. I knew there's an email for the type attribute but it already have its own email validation message. My question is how to create custom email validation message if the type attribute for the input is set to email.

Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!

Hello, Frontend Mentor community. This is my solution for the Four Card Feature Section

No trouble creating the styles, a good challenge to practice using grid. Any feedback is much appreciated!

Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!

Hello, Frontend Mentor community. This is my solution for the Article Preview Component

Finally have some time to do a little project. I used the visibility property from css for the button's functionality. I'm wondering if someone used a different method. Maybe one than can animate the share popup to make smooth transitions. Please do give suggestion and every feedback is also appreciated!

Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!

Hello, Frontend Mentor community. This is my solution for the Social Proof Section challenge

This one also took longer than I expected. I created a separate component for each of the rating card and review card, doing so make it easier to add new review card and ratings with different stars. The layout for desktop view is also quite unique making my scss file quite long. Any feedback is also appreciated!

Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!

Hello, Frontend Mentor community. This is my solution for the FAQ Accordion Card challenge

This project took longer than I expected. I tried creating a custom hook to create the drop down answers. I also created a custom component for each questions to make it easier to add new questions.

Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!

Hello, Frontend Mentor community. This is my solution for the Single Price Grid Component challenge

Another newbie project completed! I didn't find any difficulties during the project but every feedback is very appreciated!

Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!

Hello, Frontend Mentor community. This is my solution for the 3 Column Preview Card Component challenge

I tried implementing an iteration for the different card colors using scss and turned out pretty clean. Also, I separated the data for each card into a separate source file so it could add additional cards to the component. As always, every feedback is much appreciated!

Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!

Hello, Frontend Mentor community. This is my solution for the Profile Card Component challenge

I'm planning on finishing all the newbie challenge and advancing to the juniors one. These newbie challenges are very good to strengthen my css skills. I didn't experience much trouble on this challenge and every feedback is much appreciated.

Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!

Hello, Frontend Mentor community. This is my solution for the Order Summary Component challenge

This challenge is my first attempt in implementing React JS and SCSS in Frontend Mentor challenges. I didn't experience much trouble on this challenge and every feedback is much appreciated

Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!

Hello, Frontend Mentor community. This is my solution for the Interactive Card Details Form challenge

This challenge is my first attempt in tackling junior difficulty challenge. Some question I would want to know from the community are:

• How do you position your card and card elements? I used absolute positioning for the card's texts which I'm not really comfortable using because of the responsiveness.
• How do you create your real-time display? I haven't applied the DRY concept in this challenge and I feel there is a simpler and cleaner code/function to edit real-time.
• How do you create your input validation? I used a lot of conditional statements and I am wondering if there is a cleaner solution for this validation.

Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!

Hello, Frontend Mentor community. This is my solution for the Stats Preview Card Component challenge!

Didn't have much trouble on this challenge and I finally used the <picture> tag which is best practice to display different image depending on the screen size. Pretty much a good exercise to strengthen previous experience.

Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!

Hello, Frontend Mentor community. This is my solution for the Interactive Rating Component challenge

This challenge introduces form and handling form submission. Some struggles I worth mentioning was:

• Creating custom radio buttons. I used radio buttons for this challenge and this is my first time customizing radio buttons. I have fun learning the appearance: none solution to create custom radio buttons.
• Handling the submit button and displaying the thank you card. I used a class with display: none to switch from the rating card to the thank you card.

Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!

Hello, Frontend Mentor community. This is my solution for the NFT Preview Card Component challenge

This challenge really enhance my HTML and CSS fundamentals. Some struggles I worth mentioning was:

• Creating the main image's hover effect, this is my first time adding hover effect to remove the visibility of and element and vice versa. I used the opacity CSS property to solve it.
• Position an element on top of another element, usually I use the absolute positioning quite easily. But knowing that the element must still be inside the parent element, to solve it I need to add position:relative to the parent element.

Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!

Currently I'm using CSS background property to change the source of the image accordingly. Is there a better way of doing it? Is it better to put supporting icons as an element beside the text or using pseudo css selectors. I'm currently using the ::before to insert the cart icon and wanting to know if that is the optimal solution?