All solutions

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

Hi👋. This is my solution to the Room-Homepage challenge. I'm proud of the time spent thinking of CSS, it was much faster than before, and I was able to use grid-line-names to implement the layout in no time.

I also made sure that the carousel was progressively-enhanced. Without JavaScript, the carousel navigation buttons are faded out and the content is made a scrollable area, so that users can still access all their content. When the script comes in, then the complete functionality is implemented

I also added a dark mode, and in line with progressive enhancement, I made the primary navigation to always be seen, with or without JS

My stack as usual is HTML, SCSS, and TypeScript using Vite to bundle it all

If you have the time, check it out, and feel free to comment on anything in the code,

Happy Coding, Ayobami

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

Hi y'all👋. This is my solution of the dropdown page challenge. Well, through this project, I had to learn how to style the detail and summary elements, and I did a bit more than I usually do to my navigation to make a logical tab order with the inert HTML attribute

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

Like I said above, my biggest challenge was dropdowns, or more appropriately, choosing the right element for correct dropdown accessibility.

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

I would like some tips about CSS organization, because, yeah... the code worked, but it's pretty much spaghetti styles at this point, and would be hard for others to start working on.. So, whatever resources you have that can help are highly appreciated

My stack for this project, was vite, typescript, and scss

Happy Coding, Ayobami

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

What I am most proud of is the fact that there were no CSS or JavaScript hacks, and I, at least to the best of my knowledge created the layout in a "standard" way? I also used this project as kind of my tutorial in SolidJS. I also tried hard to be more functional in this project (making sure most of the functions have no side effects)

Something I would try to do differently would be to get faster, reduce the amount of time spent thinking on CSS for a relatively simple layout

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

If you have the time, check it out and whatever comments you have to improve the codebase's quality are highly appreciated

Happy Coding, Ayobami

Hey guys! This is my solution to the job listings problem, I used sass, and typescript, I also tried being cognizant of a11y. If you can, take some time to look at this solution.

As always comments, are always appreciated. Happy New Year to everyone

Ayobami

Hi. It's been quite a while since I posted solutions here. I've been busy with med school, but now with the holidays, I can restart programming.

So, this project, I did most of it by hand including the routing and state management. I did use a tiny library called nanostores though, to give me stores to work with. It was mostly ok, and I tried being cognizant of a11y.

I also ended up adding a few features like system theme and a to top button,

Anyway, if you can, check the project out, and all comments are welcome, even appreciated. Happy Coding,

Ayobami

Hi y'all 👋. This is my solution to the Crowdfunding website. Please do call me out on my mistakes, and hopefully how to fix them.

Ayobami

Hi devs👋. This is my solution to this FMIO challenge. I focused more on accessibility and sematic markup. I used tailwindcss for this one. Please don't hesitate to call me out on my mistakes (and hopefully, how to fix them!), it helps a lot

A side note: This site generates colour contrast accessibility issues. I think the problem is from the design(even though I darkened the colors just a teeny, tiny bit)

Hi ya'll 👋. This is my solution to the credit cards form challenge. As usual, I threw a dark mode in there. And I tried to work harder on accessibility in this challenge. What I found troublesome was adding a border-gradient to the inputs. I had intended on using pseudo-elements, but they don't work. I later settled for border-image(which doesn't work with border-radius). I would like to know if there are other approaches to this.

Any comments on the code and how to better it would be greatly appreciated. Happy coding💻,

Ayobami

Hi y'all👋. This is my solution to the time tracking challenge. I did make some CSS changes to it though, and added in a light mode.

Comments on how to better the project or anything in the code would be greatly appreciated. Thanks,

Ayobami

Hi y'all 👋. This is my solution to the todo app challenge complete with dark mode and drag and drop functionality. Also this feels like something that should work offline, so I made it a PWA, with the app data kept in local storage.

The best part of this project for me is that I got to test out a new part of JavaScript I've been learning - "The Proxy Object" which I used to create a crude reactivity system and couple the app state to the UI

The part I found just a tad tricky was the drag-n-drop, but I later figured the answer was just to switch the order of the todos. I also focused a tad more on accessibility.

Technologies used:

• Typescript
• sass
• vite

Anyhow, please if you can, take some time to check it out and as always, feel free to comment on anything in the code.

Happy coding, Ayobami

Hi y'all. This project was quite nice for me because it helped me solidify my knowledge of CSS Grid and introduced me into using Grid to create a canvas and move things around(even overlaping them), without having to use

* {position: absolute;}

and all its baggage.

Hi guys👋. If you can, then go through this IP tracker I built with vanilla js and sass. I added loading states in and made it that it searches for the user's IP adress on load. Please feel free to comment on anything in the code.

I did encounter a slight problem though, when trying to place the IP info section at the design-specified position. I decided to use a transform and negative margins, which led to using some magic numbers. I would like to know if there is a cleaner approach to this situation

Thanks, and Happy Coding💻, Ayobami

If you can, take sometime to check out this app. I added a few things like a loading state, an error state, and made the entire thing a Progressive Web App.

Please feel free to comment on anything in the code

This is my first time using tailwind css, So if you can, please take sometime to check and comment on anything about the code