All solutions

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

Since icons were not provided for some reason (or I forgot to copy them over haha), I used Phosphor Icons for my social media links.

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

I used Svelte with Astro to handle the JavaScript in this component. I wanted to make sure the accordion was accessible so instead of rebuilding my own accordion I used a Svelte component library called shadcn-svelte. This is a Svelte implementation of the popular shadcn ui component library for React.

I believe this challenge is a bit harder than a Newbie challenge if you were to consider accessibility. Especially if you intended developers to implement this from scratch without relying on an external library.

Nonetheless, I learned a lot from completing this challenge.

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

Decided to use this as my own social links page so I included my own info and profile picture. Continued to use Tailwind v4 alpha because it makes it super easy to add custom colors.

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

Used the alpha version of Tailwind v4. v4 requires a lot less tooling and setup compared to older versions. Instead of using a tailwind.config.js file, you can simply configure tailing using a global css file! It's so easy to add custom colors, font-sizes, and other properties.

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

Decided to practice Tailwind again using the alpha version of Tailwind v4!

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

Has some responsiveness issues. The widths could have been better off implemented with viewport units or container units and the fonts could have been made responsive using clamps(). Uses :has() selector to implement the toggle switch. I also tried to make the toggle switch accessible with a focus outline.

Makes good use of custom properties, the :has() selector, and nesting.

I tried my best to make the inputs accessible, especially when selecting the tip percentage. That's why I chose to deviate from the design guide and add an explicit input field for the custom tip percentage. I don't think that having a bunch of radio buttons and then a number input within the same fieldset does not seem ideal to me.

Used SCSS for handling colors and javascript for the theme switcher. Used grid for the buttons.

Made with grid. Used SCSS and shadows from OpenProps.

The solution is inspired by Kevin Powell's solution for this problem.

Instead of using the provided images, I wanted to experiment with some APIs that give you placeholder images. I find them to be extremely useful when creating mockups and rough designs! For this project I used https://picsum.photos/

For this challenge, I decided to implement some cutting-edge CSS features. These are native CSS nesting and the View Transitions API. Note: as of the posting of this solution only Chromium supports the View Transitions API and not many browsers yet support native nesting. This is why the generated screenshot shows a broken UI.

I find native nesting really cool as it's an implementation of one of the coolest features of sass/scss. It makes it easier to keep your styles organized without having to duplicate a lot of code.

The View Transitions API makes animations easier to implement. I recommend reading this article by Jake Archibald at Google as well as the official MDN web docs page if you want to learn more about it. Btw, I helped edit the MDN page and my pull request got merged!

There are a couple of things that don't work as they should. I'm getting some very weird bugs with styles being applied to elements that don't have the associated class. Also, I did error handling differently from the way Frontend Mentor specifies.

And shoutout to Adam Argyle's Open Props for giving me some premade, easy-to-use animations via CSS variables.

Anyway, I found this challenge really fun. I learned a lot about native nesting and the view transitions api. If I were to keep working on this, I would probably almost completely rewrite it since using a lot of cutting-edge features at the same time isn't the best for compatibility. Also, my JavaScript could definitely be cleaned up.

Still a work in process. No functionality whatsoever

Okay. So this one is really scuffed. I tried to use tailwind alongside my regular styles in my solid app but found out it overrides my styles. So I decided to put the tailwind project in a separate folder. I decided to use just plain HTML. For simplicity's sake, I'm using the Tailwind Play CDN for my styles and Alpine JS for super basic functionality. I know this is not exactly what the challenge calls for but I sadly have other things to do. 😅

Also, it seems that the HTML parser that FEM uses doesn't play well with AlpineJS. So this one is gonna have a ton of errors.

I may improve this later on when I have the time.

For this challenge, I utilized both Grid and Flexbox. I used Grid to create the whole container for the component and Flex for some of the individual items in the component.

I also utilized a CSS Reset for this challenge. A CSS Reset is a stylesheet that replaces some of the browser-injected styles and essentially "resets" your site's styles into a standard baseline. Basically just overriding some default values. I based my CSS Reset on the resets of Andy Bell and Josh Comeau.

Again, I used CSS Modules for this challenge. I think I've really grown to like them. They allow for fairly easy styling of components since you don't have to worry about namespace collision.

I also played around with :focus and :focus-visible to try to make the button a little bit more accessible by showing focus states. Obviously, I still have a long ways to go before I can call myself an accessibility expert. Though, after recently learning about the CPACC and WAS exams by the IAAP, I think I actually want to pursue a certification in accessibility.

Anyway, feel free to leave any comments and suggestions!

Adding and styling the click animation for the buttons was fun. It consists of three parts:

1. Changing element scale on hover and click
2. Setting the drop-shadow and box-shadow on hover and click
3. Adding a transition for each

[Update 2023-03-05] I updated the code for this challenge to use an h1 tag as recommended by a Frontend Mentor user.