All solutions

This was the most demanding project so far for me when it comes to CSS Grid. It's a great learning opportunity if you still need some intensive practice on this resource.

This is a great project if you need to integrate your Flexbox and Grid skills into a single responsive design.

As usual there seem to be some perceptible differences between the Figma model and the FEM's solution screenshot, but I won't obsess over those and will stick to the Figma model.

I've just completed my first challenge using TypeScript. The transition from JS to TS was quite a relief: working with weakly typed languages feels like trying to blindly maneuver through a minefield! The IDE can help but it only goes so far. I intend to only use TS from this moment forward on my web apps.

This project builds up on previous challenges and doesn't present a big step up in difficulty for those who managed to build the solutions for the previous ones.

With this project I reach my first milestone on Frontend Mentor: Complete ALL newbie challenges.

• This time I skimmed through the documentation of SCSS and managed to implement my first web project using it.
• This week I'll take a few days off from shipping solutions and will take the necessary time to learn TypeScript. This way I'll be able to make the most out of the 35+ Junior level challenges that lie ahead.
• FEM's solution screenshot makes it seem as though the content should be shifted a few good pixels to the right, which doesn't make any sense on any viewport. For this reason I chose to keep it centered.

• This project took me a few more hours than expected to complete when it came to JavaScript. I wanted to make use of the opportunity to try more complex code than I got used to in these humble 3 weeks of frontend development experience. This time I managed to use ES6 classes syntax along with inheritance and polymorphism to make the code as re-usable as possible.
• Seeing how clumsy it is to implement an abstract base class in JavaScript I decided to take a look into TypeScript for my next projects. This will be a good addition to my skill set.
• I also took some hours in this project to set up a GitHub organization that would allow me to share secrets between all repositories so that my CI/CD actions could run smoothly with as little manual intervention as possible.
• A CI action was added to automatically provide a Lighthouse code audit on pushes to the master branch.

This was the first time I implemented some basic email validation on JavaScript. I made so I could re-use the code in upcoming challenges that bring the same requirement.

The validation itself is not bullet-proof (since it's client-side, anyway), but provides a good start.

This was the first project, however, in which I decided to make a design change. The FEM's model includes a submit button that feels completely out of place with an apparent "3D-look" that sticks like a sore thumb and is disturbingly reminiscent of iOS's slide-to-unlock feature. It makes no sense visually. I thus removed the linear gradient and the box-shadow in favor of a flat style. I also changed the email field's background color so a higher contrast would differentiate it more from the feature's overall background.

I had a lot of fun in this project making use of localStorage for the first time to communicate state between different web pages on the same project. It also gave me the opportunity to practice more prototype-based implementations on JS so I can keep being the OOP maniac I like to be! :)

This project required a lot of work due to the sheer number of design exceptions everywhere. It's not like all cards followed the same patterns -- there were changes that had to be dealt with between each card and, for the same card, for each of the breakpoint viewport dimensions.

It's a good project overall if you need to practice your CSS Grid skills.

On my second project using JavaScript I implemented buttons to trigger animated link sharing balloons. This was my first time using event handlers to actually modify an element’s positioning and firing transitions.

This is my first project using JavaScript. I implemented the accordion's basic functionality as well as a capability to collapse all non-active questions.

The solution works fine but FEM's automatic screenshot feature keeps acquiring an inaccurate image. The deployed version looks as it's supposed to be, though.