Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
18
Comments
10

Busari Akeem Tunde

@Aalphakeem-AdroitAbuja, Nigeria370 points

Quiet but not blind!

Latest solutions

  • Huddle


    Busari Akeem Tunde•370
    Submitted 5 months ago

    0 comments
  • PING Launch Soon Page


    Busari Akeem Tunde•370
    Submitted 5 months ago

    0 comments
  • Launch Countdown


    Busari Akeem Tunde•370
    Submitted 6 months ago

    0 comments
  • News Page


    Busari Akeem Tunde•370
    Submitted 6 months ago

    0 comments
  • QR Code

    #accessibility#pure-css

    Busari Akeem Tunde•370
    Submitted 6 months ago

    1 comment
  • 3 Columns

    #bootstrap#pure-css

    Busari Akeem Tunde•370
    Submitted 6 months ago

    0 comments
View more solutions

Latest comments

  • Most Musfika Akter•20
    @musfikaakter
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm not proud of anything. It was easy for me. I just wanted to give it a try.

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

    No challenges. But I learned something more about linear gradient.

    Responsive QR With HTML & CSS

    2
    Busari Akeem Tunde•370
    @Aalphakeem-Adroit
    Posted 6 months ago

    Nice one 🥰

    Just add a background of White to your content. You're there ✨

  • Abdur Rafay Ahmed•20
    @AbdurRafayAlpha
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    It was pretty easy to build. Suggestions are welcomed!

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

    Setting the width and height of element as close as possible to the original image was quite difficult.

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

    .

    Basic Html and CSS

    1
    Busari Akeem Tunde•370
    @Aalphakeem-Adroit
    Posted 6 months ago

    Congratulations on the completion of this challenge 🎊

    Try removing height: 71vh; from your .main as it's unnecessary if you want your project to be accurate.

    Give your .main some padding maybe 10 or 15px and lets see.

    If your columns are looking clumsy after this change, try making your image and a div carrying your two paragraphs the child of your .main. With this, you can give your img a border-bottom: 20px;.

  • pooja-bharadwaj•40
    @pooja-bharadwaj
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    What I'm Most Proud Of: I’m proud of successfully completing my first responsive web design project and deploying it live using GitHub Pages. It felt great to see the design come to life, especially after figuring out how to center elements and make the card look visually appealing on both mobile and desktop devices. I also enjoyed learning the workflow of using GitHub for version control and deployment, which was completely new to me.

    What I Would Do Differently Next Time: Next time, I would:

    1. Organize my project files better by using a dedicated folder for images and assets right from the beginning.
    2. Write a README file with clear details about the project to make it more professional.
    3. Optimize the image for faster loading on the live site.
    4. Test the site more thoroughly to ensure all elements work as expected after deployment.
    5. Use a CSS preprocessor or modular approach to manage styles more effectively as the project grows.
    What challenges did you encounter, and how did you overcome them?

    Challenges:

    1. Image Not Displaying on the Deployed Site: Initially, the QR code image wasn’t showing on my live website, even though it worked perfectly in my local preview. I realized it was due to incorrect file paths, but fixing them while keeping the project organized was confusing for me.

    2. GitHub Workflow: As a beginner, I struggled with understanding how to manage commits, repositories, and file organization during deployment. At one point, I deleted the repository and had to restore it, which added more complexity.

    3. File Organization: When trying to move the image file into a separate folder (e.g., images/), the website stopped working because I hadn’t updated the path correctly in my HTML file.

    How I Overcame Them:

    1. I referred to GitHub documentation and followed step-by-step tutorials to learn about deployment using GitHub Pages. Restoring the deleted repository taught me a lot about handling such situations.
    2. To resolve the image issue, I placed the image in the same folder as index.html for simplicity during deployment, ensuring it worked. In the future, I’ll pay more attention to organizing my files from the start.
    What specific areas of your project would you like help with?

    Improving File Organization for Deployment:

    1. I’d like guidance on how to properly structure my project files (e.g., keeping images in a folder) while ensuring everything works smoothly during deployment.

    2. Understanding GitHub Pages Deployment: Although I managed to deploy my project, I’m still unsure about some steps in the workflow, like handling uncommitted changes and ensuring all necessary files are included.

    3. Optimizing HTML and CSS Code: I’d appreciate feedback on whether my HTML and CSS are structured efficiently and follow best practices, especially for responsive design.

    4. Debugging Issues with Missing Resources: Help with understanding why resources like images sometimes fail to load after deployment and how to prevent this issue in the future.

    5. Exploring Advanced Styling Techniques: Suggestions for enhancing the design and learning advanced CSS techniques to make the project more visually appealing.

    QR-Card using Media queries

    2
    Busari Akeem Tunde•370
    @Aalphakeem-Adroit
    Posted 6 months ago

    I've gone through your code. You've done well. Keep it up 👌✨🎊

    Add .card {border-radius: 20px; padding: 15px;} to your card and see the difference.

  • Layla Wakily•200
    @Laylawakily
    Submitted 6 months ago

    Order summary component

    1
    Busari Akeem Tunde•370
    @Aalphakeem-Adroit
    Posted 6 months ago

    Great!

    You've tried your best. To fix your background image, try using background-repeat: no-repeat; and background-size: 100%;.

    background-image: url(./images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    

    Feel free to ask more questions if you have any. You can also correct errors in my solutions. I'm not perfect.

    Marked as helpful
  • Houlaymatou B.•110
    @code-techhb
    Submitted 6 months ago

    Personal Card

    1
    Busari Akeem Tunde•370
    @Aalphakeem-Adroit
    Posted 6 months ago

    Congratulations on attempting the challenge! ✨

    It's great that you decided to step out of your comfort zone and try something new. You've done well in taking on the challenge, and it's important to remember that every experience like this helps you grow as a developer.

    For future challenges, try to stick to the provided UI design as closely as possible, as it’s part of the challenge to follow it.

    But in your free time, feel free to experiment and build things however you like to showcase your creativity and skills.

    Keep going, you're on the right track! 👌

    Marked as helpful
  • Nikhil Bhaladhare•270
    @nikbhaladhare2104
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I have added the dark mode for the form which looks really modern. But I have omitted the interactive part of the challenge as I have already worked on that.

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

    Some CSS properties for the Button toggle. Extensive trial and run method.

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

    No but again i want to re-iterate that this project doesn't adhere to the interactiveness of the challenge as I am trying to add new things in the project.

    Contact Form with Modern Form enabled using React

    #react
    1
    Busari Akeem Tunde•370
    @Aalphakeem-Adroit
    Posted 11 months ago

    Not bad! I love the fact that you incorporated Dark and Light mode ❤️

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub