Skip to content
OverviewSolutions
8
Comments
10

Banini-AD

@Banini-ADAccra Ghana130 points

My name is Banini, and I'm from Ghana. I'm excited to take a big step in frontend development and to be part of this large frontend community. I welcome any corrections, suggestions, or guidance from anyone in the field. Thank you and happy coding, everyone!

I’m currently learning...

I currently know the fundamentals of JavaScript, but I'm not yet fluent in applying them. I hope to establish a solid foundation before moving on to what's next.

Latest solutions

  • Responsive article preview

    #accessibility#sass/scss
    Banini-AD•130
    Submitted about 1 month ago

    I could really use your help with fluid typography, as I'm not completely familiar with it. If you have any helpful resources, I'd greatly appreciate it. Additionally, I want to learn more about Sass, so if you could share any resources on that as well, it would be fantastic. Thank you, and happy coding!

    1 comment

  • Responsive testimonial page

    #sass/scss#accessibility
    Banini-AD•130
    Submitted about 2 months ago

    I want to enhance my understanding of Sass and improve my coding skills in this area. My goal is to write efficient Sass code and leverage its features to my advantage. If you have any helpful articles, videos, or books on Sass, please share them with me. Thank you!

    1 comment

  • Responsive Four Card Feature

    #sass/scss
    Banini-AD•130
    Submitted about 2 months ago

    I would love your help with my Sass files—if you could take a look and share some tips on how to improve them, that would be fantastic! Also, I'm eager to level up my CSS grid styling, so any advice you have would be super appreciated. Thank you so much!

    2 comments

  • Responsive product preview page

    Banini-AD•130
    Submitted 2 months ago

    Feel free to check out my solution and give me feedback on things you think I could do better.

    2 comments

  • Responsive Recipe Page using Flexbox

    Banini-AD•130
    Submitted 2 months ago

    As I mentioned earlier I had problem using HTML hr element so if anyone have an explanation on why the hr element did not appear on the web page. And also I want to learn more on web accessibility so if you have any solution (like a blogpost or any tutorial video) to my problem feel free to let me know. I look forward to your help.

    0 comments

  • Accessible Webpage using keyboard navigation

    Banini-AD•130
    Submitted 2 months ago

    As I mentioned earlier I have problem using HTML tabindex properly and effieciently so if anyone could help me I would be really grateful. And also I want to learn more on web accessibility so if you have any solution (like a blogpost or any tutorial video) to my problem feel free to let me know. I look forward to your help.

    1 comment
View more solutions

Latest comments

  • P
    Anna Willis•70
    @AniaWillis
    What are you most proud of, and what would you do differently next time?

    I used this project to review CSS and vanilla JavaScript and to practice reading Figma designs. In a real-life project, I would build it with React and Tailwind.

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

    I tried to show exactly the parts of the images that were shown in the Figma design. However, it is a common issue that when working with a single image, the visible part of the image will not be exactly the same as in the Figma design.

    Responsive article preview component built with flexbox

    1
    Banini-AD•130
    @Banini-AD

    Great solution! However, please try to use relative units like em, rem, vw, and vh as much as possible. They significantly help in building responsive layouts. Happy Coding 😄.

  • Puermuta•150
    @Puermuta
    What are you most proud of, and what would you do differently next time?

    It was very hard to figure out, and i am proud of what i learned in JavaScript, and how i integrated it for the page.

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

    It was quite challenging to get the tooltip working. I ended up creating a free element outside of the card, and positioning with absolute relative to the button. I made it toggle reveal/not reveal using JavaScript. Fun!

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

    I found it hard to make the page responsive this time. If you try to scale it for example 900x900, it is disgusting. I think I could make it work using clamp() or something like that, but I am not sure.

    Would also love some response on my JavaScript as well as the structure of my SCSS.

    Article preview with SCSS and JS

    #sass/scss
    1
    Banini-AD•130
    @Banini-AD

    I studied your JS code and saw that you styled a lot of things in the JS file. Focus on styling everything with CSS, using visibility and class lists in JavaScript to keep your code straightforward.

    Marked as helpful
  • Banini-AD•130
    @Banini-AD

    I think you should create different repository for individual project in GitHub. That will help you a lot.

  • Danu•50
    @danuwiradaningrat
    What are you most proud of, and what would you do differently next time?

    I'm proud that I managed to build this challenge completely using only HTML and CSS without any help from frameworks. I learned how to properly use flexbox to center elements both vertically and horizontally, and how to create a card layout that looks similar to the design.

    If I did this challenge again, I would improve the mobile responsiveness earlier in the process, and I would explore using semantic HTML and maybe try BEM or a CSS preprocessor like Sass for better structure. I also plan to write cleaner, more reusable code as I go.

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

    One of the biggest challenges I faced was getting the layout to be properly centered on the screen. At first, I used flexbox on the entire body, which caused everything (including the footer) to center together. I fixed it by wrapping the card in a container and applying flex only to that part.

    Another challenge was making the card look good on mobile devices. I had to experiment with padding and max-width settings to make it feel balanced and not too squished. Looking back, debugging with browser dev tools helped me a lot.

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

    I would appreciate feedback on the responsiveness of my layout, especially on smaller screens. I'm also not 100% confident about my use of padding and spacing—whether it matches the original design closely enough. Any tips on writing cleaner, more maintainable CSS would also be great!

    QR Code Card | My First Frontend Mentor Solution

    2
    Banini-AD•130
    @Banini-AD

    Great work, pal! Just a quick tip try using variables more in your CSS. They make it much easier to manage and update styles consistently. Also, consider using more semantic HTML elements like:

    <header> </header>
<article> </article>
<footer> </footer>

    They’re really helpful for improving your page’s SEO and overall structure.

    Also, try to avoid using fixed CSS units where possible. Using relative units like rem and viewport-based units (vw, vh) can really help with responsiveness and accessibility.

    I also noticed this in your CSS:

    body{
margin:0;
}

    If you’re aiming to reset all default spacing, it’s better to apply it globally using the universal selector:

    *{
margin: 0;
padding 0;
}

    This will remove all the browser’s default margins and paddings for a cleaner layout.

    Other than that, I think you did a great job overall—keep it up, and happy coding!

  • Leccon1•170
    @Leccon1
    What are you most proud of, and what would you do differently next time?

    I am proud that I was able to make 3 types of adaptive: on PC, on tablets, on phones. I am also proud that I was able to learn how to use display grid

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

    I encountered problems with the adaptive, but I solved them very quickly)

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

    in none, I am perfection itself :0

    testimonials-grid-section-main using display grid

    #sass/scss
    1
    Banini-AD•130
    @Banini-AD

    Great solution.

  • P
    Ha Tran•210
    @hatran-hattt
    What are you most proud of, and what would you do differently next time?

    I've learned several tips and methods while tackling this challenge:

    • Applied CUBE CSS (a thinking and organizational CSS Methodology) and 7-1 patterns (way to structure CSS files into logical directories)
    • Used CSS Grid for responsive macro layout.
    • Applied fluid type scales and space scales more easily with the help of Utopia
    • Generated CSS Custom Properties & Utility Classes for Colors using Sass mixins and maps

    Responsive four card layout using CSS Grid

    #cube-css#sass/scss
    1
    Banini-AD•130
    @Banini-AD

    Great solution, mate! I’m still new to CSS and Sass, so I couldn’t fully follow how you wrote your code. If you’re open to sharing some tips, I’d really appreciate it!

View more comments