All solutions

Submitted 10 months ago
EasyBank Landing Page using Astro and Sass
#astro#sass/scss#accessibility
HTML
CSS
JS
0
Hey, there! 👋

🤖 This is my solution for the EasyBank Landing Page using Astro and Sass.
- Built a multi-page website ("404" and "Coming Soon" included).
- Dynamically generated blog articles along with pages.
- Structured a Sass style system with _tokens.scss.
- With accessibility and responsiveness in mind.
❓ Questions:
- This is my first time building a multi-page Astro site.
- How can I make active current page link for navigation in Astro? After many tries, it works fine on localhost, but I'm still having the issue after deployment.
- Assets vs Public. It really confused me when importing images and icons in Astro. I read the docs, and it mentions that images in the src/ folder are processed. I couldn't understand what they meant by 'processed'.
- And, of course, I'm open to hear other suggestions.
Thanks for reading. Really appreciate any feedback and advice! 🙌
Submitted about 1 year ago
Pricing component with toggle using React and TypeScript
#react#typescript#accessibility
HTML
CSS
JS
2
Hey, there! 👋

🤖 This is my solution for the Pricing component with toggle challenge using React and TypeScript.
- Built switch toggle only using CSS
- Dynamically generated data using JSON
- CSS custom properties are always here to save my day
- Learned not to put centering styles in the <body> element, but rather in the <div id="root"> in React. It took me some time to figure that out
❓ Questions:
- How can I improve the accessibility of the switch toggle? Because it's hard to know whether it's set to "annually" or "monthly" except for the visual representation.
- I used the useState hook to pass down the value to the Toggle component along with its function to update its state. Is it a good idea to implement it this way?
- Which one would have worked better to pass the data: State or Context? And, why?
- And, I am open to other suggestions.
📈 Updates:
- Based on received feedback and suggestions, improved the accessibility of the website.
Thanks for reading. Really appreciate any feedback and advice!
Submitted about 1 year ago
News Homepage using HTML, CSS and JS
#accessibility#vite
HTML
CSS
JS
0
Hey, there! 👋

Just completed this challenge with the final touches. Balancing creativity, accessibility and functionality, the end result turned out the one I wanted to achieve.

I have one question regarding a11y. If you look at the design, you can see the popular news section at the bottom as a list. For the first time, I think it was the perfect place to use the ordered <ol> list items, rather than traditional undordered <ul> ones. Let me know if this is a place to use it and what approach would you take?

I am more than happy to hear your suggestions, comments and feedback. Let me know what I could do better.
Submitted about 1 year ago
Fylo dark theme landing page using React and TypeScript
#react#typescript#vite
HTML
CSS
JS
0
Hey, there!

This is my second time taking on this challenge. The first time, I had done it using HTML and Sass. But, this time I decided to try with React, TypeScript, and CSS modules. Overall, it was a great and fun experience.

There's one thing that's bugging me though. If you look at the design, in the hero section, there's a button, called "Get Started". However, I think that it's the link button. And, the problem is that when making a Button component, how can I make sure that it supports both the button (<button>) and the link (<a>)? I tried wrapping my Button component around the a tag, but it created acccessibility issue by making it double-focusable on keyboard navigation. What would be the best practice?

I would be more than happy to hear your suggestions and feedback on my solution.
Submitted about 1 year ago
Frontend Mentor | Expenses chart component
#accessibility#vite
HTML
CSS
JS
0
Hey, there!

I just completed this challenge. That was lots of fun! After playing around a little bit, it didn't take me long to figure out how to implement a dynamic chart. And, here's the approach I went with:
1. Find the highest value in the data array
2. Divide the remaining values by the highest value
3. Multiply the result by 100 to get the percentage
4. Use the percentage to set the height of the bar
In other words, if the highest value is 50, and we want to find the height of 20:

20 / 50 => 0.4 * 100 => 40%

I would be more than happy to know about your approach and how you implemented. Also, if you have any suggestions or find any bugs, please do let me know! I'll always look forward to learning new things.
Submitted over 1 year ago
Fylo dark theme landing page
#accessibility#bem#cube-css#sass/scss
HTML
CSS
JS
0
Hi, there! I just completed this challenge. It was a fun and crazy project.

I really enjoyed doing this project after practicing CUBE CSS and Utopia (fluid type scale & sizes) for a while. I think I haven't paid that much attention to every small detail (ranging from a11y concerns to :focus and ::selection processes) before. I learned a lot from this project.

I have some questions, too. While inspecting the design at the beginning, I saw that all images (except the brand logo) are decorative. So, I set them empty alt tag and aria-hidden="true". What do you think about it?

Also, in order to create the linear-gradient on buttons, I used ::after pseudo-element and set background-image on it. So, I could then change the opacity on hover. Also, as a fallback, I set background-color for button itself. Is it a good practice to implement? What approach would or did you take?

Leave any feedback or suggestions you have. It means the world to me!
Submitted almost 2 years ago
Advice Generator App
#accessibility#bem#cube-css
HTML
CSS
JS
API
1
Hi, there! I just completed this challenge. That was pretty interesting, and first experience with API was great, though.

Can you take a look at my JavaScript file? I tried and it worked, but in what ways can I improve it better? Am I doing it in a right way?

I would be grateful if you could help with that and other feedback you like to share.
Submitted almost 2 years ago
Interactive Rating Component
#accessibility#cube-css#bem
HTML
CSS
JS
0
Hi, there! I just completed this challenge. Just like other challenges, this was also a lot of fun. Implemented CUBE CSS for the first time in practice.

I think it is the first 'site' that I mostly focused on its a11y. I mean, for rating scores, I used input with type="radio", made aria-hidden="true" for numbers, and set names for each number, like satisfied, ok, e.t.c. I thought, it would be meaningless for those who use screen readers that read numbers aloud.

Also, it turned out to be the best practice in terms of functionality as it required a few lines of code in JavaScript. All in all, I am happy with that.

I would be grateful if you could inspect my code and tell which part I can improve.
Submitted almost 2 years ago
Interactive Pricing Component
#bem#sass/scss#cube-css
HTML
CSS
JS
0
Hi, there! I just completed this challenge. It was truly a lot of fun and hard work. Design and functionality took lots of time. Yet, I did really enjoy this challenge, especially with the functionality. I need some feedback on how to fill the slider with color. I tried to add background on .slider, but it covers full width. I want to add background color on how much slider has gone. Can you suggest anything that I could do to get my desired result?
Submitted about 2 years ago
Social Media Dashboard
#cube-css#sass/scss
HTML
CSS
JS
1
Hi, everybody! I decided to update this challenge for final touches and bug fixes. I would be grateful if you could give some feedback or show me where I made mistakes.
Submitted about 2 years ago
Social Proof Section
#sass/scss
HTML
CSS
1
Hi, everyone! I just completed this challenge. It was a lot of fun. Especially with grid and transform stuff. At first, I made this design in css. Then, after a little thought, I decided to do in scss. It was great, though. I would be grateful if you could give some feedback or show where I made mistakes.
Submitted about 2 years ago
4-card feature section
#accessibility#bem#cube-css
HTML
CSS
2
Hi, everyone. I just completed this challenge. I really enjoyed doing this with the grid layout. I would be grateful if you could give some feedback on my solution or show me where I made mistakes.
Submitted about 2 years ago
3-column preview card component
#bem#cube-css
HTML
CSS
1
Hi, everyone. I just completed this challenge. It went quite well, though. I would be grateful if you could give some feedback or show where I made mistakes.
Submitted about 2 years ago
NFT Preview Card component
#cube-css
HTML
CSS
0
Hello, everybody. I just completed this challenge. I did my best to match this the same as the design provided and am very happy about the result I got. But the card looks quite big on a normal laptop screen size even though the font size is 18px. However, if you view it at 80% of screen size, the card looks quite the same as the design. I would be grateful if you could give me some feedback, and how to make it even better and nicer. Any questions/feedback/problems are very welcome!
Submitted about 2 years ago
Stats Preview Card component
#bem#cube-css
HTML
CSS
0
I did my best on this frontend challenge. But, I found background image overlay quite difficult. In design, its color is purplish or like that. I tried different colors, trying to match the design. Yet, it has some issues on background, I think. You can view and edit my code on GitHub. Any feedback and questions are very welcome! Thank you