All Solutions

This is the most interesting challenge I've worked on to date.

It's my first time working with Figma design styles, and at first I didn't know what to look for but after a while I got the hang of it. I did my best trying to replicate every pixel on this design, but I know that's quite impossible to achieve.

It's also my first time working with a frontend framework like Vue.js, so I'm not completely confident with how my components turned out, or even whether or not they should be a Vue component. So far with Vue I was able to:

• Build a countdown timer component that takes the end date (release date) and countdown to it from the moment the user opens the page.

• Build a subscription form component that checks that all required fields are filled out, and that the email address is in a valid format before submitting the form.

As far as styling these components go, I have created a SCSS partial/module for each one of the components I mentioned.

Hi Frontend Mentor community!

I've finished another challenge. This one is a relatively easy project for me layout-wise, but I had wanted to practice more on my JavaScript skills so I figured I should go for it anyway.

Feedback on any part of my code is appreciated!

Hello!

I'm back with another challenge solution. This time I think I implemented the JavaScript validation a little smoother than the previous challenge's. Validity is checked each time the user focuses out of an input field.

Feedback on any part of my code is welcome!

Hey!

I wasn't too sure what to put in the JavaScript validation side of this project, but I removed the required attribute for the email input element to prevent the :invalid styles from firing right at the start and did that check on the JavaScript side instead.

Aside from that, a simple pattern matching using the regex seen from MDN's docs.

I consider myself a JavaScript newbie, so please advise or give feedback. 🙏

Thanks!

Update: I have updated my solution based on feedback. The email field is now required, but the error message will not fire unless the user has focused and then removed focus on the field. Additionally, validity is now being checked before form submission, returning the appropriate error message based on whether the email input is empty or invalid. In case of user bypassing the required field and submitting an empty input anyway, an extra validation step is still checked on form submit.

Hello!

Another one to practice on my CSS Grid and Sass. Feedback on any part of my code is appreciated! Happy coding! 🎉

Hey! Did this challenge to practice more on Sass. I had a hard time positioning the background with this one. I didn't know how to make the background positioning responsive with respect to the viewport width, so I ended up using media queries on two specific breakpoints to position it the way I wanted.

Feedback on any part of my code is welcome!

Hello! This challenge is more on the easy side for me, but I wanted to practice more on using Sass and I wanted to test how fast I could finish a project like this one so I picked an easy no-JS one.

I forwent the use of a level 1 heading for this project, as I imagine this component will be part of a bigger project which will rightly contain the main heading.

Feedback on any part of my code is welcome!

Hey! It's my first time using Sass in any of my projects, so I spent most of my time reading the documentation to see if I could implement things faster or easier. My selectors ended up a bit more specific than I like, but I think it's okay.

Feedback on any part of my code is welcome!

My solution to the "Article preview component" challenge, implemented using HTML, CSS, and JavaScript. Feedback on any part of my code is appreciated!

This was made using only HTML and CSS. The downside of this approach is that I wasn't able to implement the <detail> transition from expanded to collapsed, as there's probably no pure-CSS solution to that problem. Feedback on any part of my code is appreciated!

Is there anything I could have done to either optimize or organize my code better? Any feedback regarding how to structure elements or styles better would be much appreciated.