All solutions

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

• Draggable theme switcher
• Keypad navigation via arrow keys
• Pipeline for transpiling and minifying CSS and JS

What challenges did you encounter, and how did you overcome them?

• Making the layout work on my iPhone SE. Support for container query units is still lacking for Safari in iOS 15.8 and below. I solved this by switching to viewport units like vi and then using cqi units as progressive enhancement for browsers that support it.

• Building a 3-way theme switcher using the progressive enhancement approach. First radio buttons, then CSS animations, add minimal JS to apply the theme, and finally allow the handle to be dragged. Learned a lot about pointer events and dragging!

• Applying CSS grid layout to the table element. I solved this by applying display: contents to the tbody, tr, and td elements so that the button keys can participate directly in the table's CSS grid layout.

What specific areas of your project would you like help with?

I haven't spent a lot of time on improving the screen reader accessibility, so if you spot any room for improvement, I'd love to hear it!

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

I finally figured out how to bundle CSS and JS with Eleventy! I used Lightning CSS and esbuild for bundling CSS and JS, respectively. Next time I plan to maximize the features of these bundlers, like transpiling modern syntax, minifying, etc.

What specific areas of your project would you like help with?

Feedback on accessibility is welcome!

I used instant and afterward validations for the input fields, with errors that have aria-live="assertive". For submit validation, if there's more than one invalid field, I show the error messages with aria-live="off" and instead announce a screen reader-only error summary indicating the number of invalid fields.

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

I'm proud of taking a "first principles" approach and implementing the CSS and JS without a bundler, only using the native import features available in the browser. Not exactly ideal from a performance perspective, but it's good for learning. I promise I'll use a bundler next time. 😉

What challenges did you encounter, and how did you overcome them?

HTML forms. Dividing the work in stages definitely helped keep things sane and manageable. So first I worked on structuring them semantically, then making sure they follow the design, and finally adding field validations. It's frustrating when I encounter a gotcha, but coming up with a workaround feels pretty satisfying. 😌

What specific areas of your project would you like help with?

For accessibility testing, I'm limited to using VoiceOver on my iPhone SE, so feel free to let me know how I can improve the accessibility implementation. Of course, you can comment on other parts of the code as well!

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

I'm proud of the way I structured my code. I think I did a pretty good job dividing code into components and modules that have distinct responsibilities, so it would be easier for other devs (or myself in the future) to understand the code and improve it.

I also feel more confident in deciding when or not to use an external package to solve a problem. In this case, implementing the form without a form library is possible, but I decided to use React Hook Form because it seemed like a good balance between ease of development (I don't have to implement the error validation from scratch) and the performance hit on the app (package size is pretty small at 8.5KB).

What challenges did you encounter, and how did you overcome them?

For working with dates, JavaScript's built-in Date class proved sufficient for this app. One gotcha I encountered was that the Date() constructor doesn't throw an error when passed an invalid date. For example, creating a Date object for April 31, 1995 will be evaluated to May 1, 1995. So, to check for invalid dates, I compared the input date and the parsed date. If they're not equal, then the form won't pass validation.

What specific areas of your project would you like help with?

Any feedback on the animations? I added it last and didn't want to over-optimize, but I feel like it could use more oomph. It's my first time using React Spring, so I'm still not aware of its full capabilities. Anyway, constructive feedback is welcome!

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

I started this challenge as a quick coding practice, so I'd say I'm proud for taking the initiative and avoid getting a bit rusty. 😆

Built this one with just HTML and CSS.

On a side note, I've recently read Gitting Things Done and Effective Development Handbook, two very engaging books that helped me better understand Git conceptually and practically. I applied the things I learned from those books while working on this challenge, so my commit graph just feels so satisfying to look at 😆

I initially planned to use Vue here, but considered Alpine.js since it's lighter and seemed more fit for this simple one-pager.

Also trying to play around more with Git and GitHub.

No build step, yay!

This is actually my first time using Bootstrap on a solo project 😳 (that I know of, at least). It's pretty cool, especially the responsive burger menu that comes out of the box.

That said, I feel limited by the utility classes it provides for spacing properties (margin, padding) compared to Tailwind. But I guess that's intentional, so that devs would still use CSS instead of just cluttering their HTML with tons of utility classes. I appreciate that.

As always, any feedback is welcome!

This challenge is like a milestone for me, since I got to reuse components from my previous solutions like the accordion and burger menu.

One thing I found difficult while building this project is deciding where to put certain styles and keeping track of them. Should I put this CSS rule in the container element or the <p> tag? Did I already use this style in a previous section? Do I need to refactor this into a reusable class? I found myself asking more and more questions like these.

I didn't use a CSS/UI framework/library, but I definitely see the convenience of using one in bigger projects with a lot of shared styles across different sections and pages.

Feedback on code structure, best practices, and other aspects of the code are welcome and much appreciated.

More React and TypeScript practice.

Just a quick exercise to practice React and TypeScript.

My second solution built with Svelte and SvelteKit. I'm really enjoying this framework. Too bad there aren't a lot of job listings for Svelte developers 😢 Ha!

Finally tried Svelte and SvelteKit, which I think is a natural next step after learning the WebC syntax. Working with it is so much more pleasant than React. Aside from the simpler syntax, it's also less restrictive on how you want to integrate CSS, so in my case I had component styles as well as a CUBE CSS-style directory structure.

I did borrow some organizational ideas from the Next.js 14 tutorial, such as putting all UI-related assets and components inside a ui directory. I also added progressive enhancement to the burger menu, so if JavaScript is disabled or not available, the nav links can still be accessible to the user. I got some inspiration from this tutorial by Andy Bell.

I plan to do a multi-page project next to try out Svelte's routing features. Any Svelte pros out there, let me know what you think!

Built this challenge with my new favorite, 11ty + WebC. I also sprinkled a bit of GSAP animation goodness just for fun. Let me know what you think!

Tried a new template language called WebC for this challenge, and overall it was a pleasant experience. Compared to React, it's less verbose (it's just HTML) and I like that I can place my CSS and JavaScript along with the component markup. It also compiles to static HTML, so it works even if JavaScript is disabled.

The only issue I had was with trying to use a prop in the component CSS to set the color of the top border dynamically. I couldn't figure out how to do it, so I just used the style attribute with CSS custom properties for now. If anyone knows how to do this, feel free to share your feedback! :)

I was reading a tutorial on how to use Next.js as a static site generator, so I tried using it on a FEM challenge for practice. I chose this challenge because unlike blog posts, notifications usually change more often, so it makes sense to choose a framework that has client/server-side rendering over an SSG to avoid rebuilding the site every time the data updates.

I learned about Server Components in React, so even if JavaScript is disabled, the notifications still appear (yay progressive enhancement!). I even made a skeleton loading UI as the data for the cards are being fetched, but somehow they didn't work in production build. Might look into that when I have some time...

Working with Next.js is nice, a lot of things are already prepackaged for you (e.g. no need to download Google Fonts - just import the font you want from next/font/google). Though sometimes I get confused whether I should make a piece of code a server or client component. Any tips and advice for those who are more experienced in Next.js would be appreciated.

Been interested in Web Components for a while now, so I tried using it in this challenge to encapsulate the logic of the share button and tooltip. It worked out pretty well (I think).

I also challenged myself to come up with a solution that doesn't require a build step, which forced me to learn about node module resolution—something I took for granted before. In the end, I used Rollup for bundling (it's not a build step, right?) for node module resolution and JS minification. It isn't as easy as Vite and required me to find and configure plugins that I need, but overall it helped me gain a new perspective on the importance of front-end tooling.

What did you find difficult while building the project? Implementing the custom checkbox, in particular ensuring that it stays reusable and progressively enhanced. I used an SVG sprite combined with the <use> element to reduce inline SVG bloat as the number of todo items increase.

Which areas of your code are you unsure of? I have added focus rings for basic accessibility, but I haven't done enough testing to manage the focus after some events, like when the user deletes a todo item.

Do you have any questions about best practices? I plan to refactor the logic into custom hooks to keep the code organized. Aside from that, what are other ways I could improve this React project?

I almost used PostCSS to keep the CSS organized, but for now I decided to keep this solution as simple as possible since I'm only making a single component in isolation. Aside from adding a package dependency, that approach would also add an unnecessary compile step for the CSS.

For the responsive layout, I used the Font-size Clamp Generator to use clamp() for font sizes and paddings that scale with the viewport, thus removing the need for media queries.

Another take on another simple challenge using basic HTML and CSS.

Again, I added CSS variables that allow customization, such as --max-width, --min-height.

For the card's layout logic, I used the Flexbox Holy Albatross technique and added constraints specific to this layout. Ideally, the card can hold one to three child segments. That said, nothing prevents users from adding more child segments, but the layout will switch to a vertical layout to prevent columns that are too narrow for the contained elements.

This is a simple exercise in practicing the rule of least power, or not using a cannon to hunt a rabbit, so to speak. It is so easy to fall into the habit of using a framework for everything even when it's overkill for the task at hand. So for this solution, I used a single index.html file - no build step, no frameworks.

I did use CSS variables to make my component a little customizable. I've also thought about turning this into a web component, but ultimately felt it was unnecessary in this case.

In terms of accessibility, I decided to wrap the QR code image in a link, so if the image doesn't load (for users with slow internet) then they can still visit the link. Of course, this doesn't cover edge cases for when QR codes refer to actions other than visiting a link.

Hi! It's been a while since my last solution since I got busy with job hunting, but now I'm back.

I used TypeScript for this solution to get better at it (motivated by a previously flunked job assessment that required TS). At first I was unsure of the benefits of the extra code, but later on I've come to love the type hints that VS Code gives when hovering over a variable or function. Less guesswork = more predictable code.

I also used React Router, specifically the new v6.4 data APIs, which required a bit of departure from the usual React way of using useState and useEffect for data storing and fetching. In fact, I'm currently using the sample data.json provided in the starter files while I'm trying to figure out the best way to integrate API calls with React Router loaders. I'm currently looking into React Query, but any thoughts on how to go about this are most welcome.

That said, I have already set up a data structure via a Country class that can consume the response data from REST Countries API and send it as props to various components.

As for styling, I used a combination of CUBE CSS for the overall methodology and Tailwind for utility classes and implementing dark mode.

Alright, that's all for now. Cheers! ☺️

I used semantic elements whenever possible to avoid having to write additional JavaScript. For the thank you modal, I used the dialog element which comes with an overlay that can be styled with ::backdrop.

For the implementation of the rating component, I used radio buttons which have built-in semantics and interactivity. Sara Soueidan's article on Inclusively Hiding & Styling Checkboxes and Radio Buttons was a huge help as I did manual testing with VoiceOver on iOS to ensure the buttons are accessible by touch users.

It's been a while since I used React, so any feedback on my code would be appreciated. Also, is there a way to make this progressively enhanced with React?

Lastly, I think CUBE CSS works great with React, and I might continue using this setup for my next solutions.

Yes, I finally tried Tailwind! I used it quite conservatively in conjunction with CUBE CSS, which means I still wrote component-based classes instead of taking a utility-first approach. But I definitely see the benefit of using Tailwind, especially for rapid UI development during the early phases of a project. I especially like how it can process design tokens and convert them into CSS custom properties that I can use in my code.

The source code of Build Excellent Websites is my primary inspiration for this project. I tried my best to practice the principles in that site, which is why I only used 2 media queries for this solution (not counting the ones in resets and config files). The rest of the layout are handled by utility classes, such as the Switcher a.k.a. the Flexbox Holy Albatross by Heydon Pickering.

I think I also gained more confidence working with SVG:

• For the logos, I used inline SVG in the header and footer instead of <img> tags.
• I combined the social media icons into an icon sprite embedded in the page, which avoids extra HTTP requests.

I still have to add those oval/spring patterns, but other than that, it's almost done.

Please let me know what you think! Do you think I could've used Tailwind more effectively for this project? Any feedback on code structure/organization?