Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
32
Comments
617

Abdul

@Samadeen8,560 points

Water 💦, Earth 🌎, Fire 🔥, Air and Code, Just like the Avatar I'm trying to master all 5 elements.

I’m currently learning...

JavaScript, React, Node

Latest solutions

  • Interactive-rating-component Using HTML CSS and JS.


    Abdul•8,560
    Submitted about 3 years ago

    1 comment
  • intro-section-with-dropdown-navigation Using HTML CSS and JS


    Abdul•8,560
    Submitted about 3 years ago

    0 comments
  • huddle-landing-page-with-curved-sections with HTML and CSS


    Abdul•8,560
    Submitted about 3 years ago

    1 comment
  • Fylo-landing-page-with-two-column-layout using HTML and CSS


    Abdul•8,560
    Submitted about 3 years ago

    0 comments
  • fylo-dark-theme-landing-page Using HTML and CSS


    Abdul•8,560
    Submitted about 3 years ago

    0 comments
  • huddle-landing-page-with-alternating-feature using HTML and CSS


    Abdul•8,560
    Submitted about 3 years ago

    1 comment
View more solutions

Latest comments

  • Uzochukwu Cecilia Oloh•50
    @Nsebo
    Submitted over 1 year ago

    Blog preview card built using simple HTML and CSS

    4
    Abdul•8,560
    @Samadeen
    Posted over 1 year ago

    Hello Nsebo

    Great work on completing this challenge. Cheers!! 🎊🎊

    Some adjustments are needed to place your container in the middle properly.

        display: grid;
         place-content: center;
         min-height: 100vh; 
    
    

    I hope to see more solutions from you.

  • 👾 Ekaterine Mitagvaria 👾•7,860
    @catherineisonline
    Submitted about 3 years ago

    REST Countries API with color theme switcher

    #react
    14
    Abdul•8,560
    @Samadeen
    Posted over 2 years ago

    Hello Catherine... You did beautifully well on this project, can you kindly recommend resources to learn React

  • Woodrow Martyr•120
    @wmartyr
    Submitted almost 3 years ago

    Used HTML, CSS, and Flexbox.

    1
    Abdul•8,560
    @Samadeen
    Posted almost 3 years ago

    Hey Woodrow!! Cheers 🥂 on completing this challenge.. .

    Lets firstly work on your accessibility issues.

    • Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="card"> instead of <div class="card">.
    • Your footer should be <footer class="attribution"> instead of <div =attribution>
    • Images must have alternate text - Its hard for screen readers to pick up messages from images without alt text.. Its always advisable to include alt text to aid screen reader

    This should fix most of your accessibility issues.

    • For your design here is a tip to center your container both vertically and horizontally display: grid; place-content: center; min-height: 100vh;

    . Regardless you did amazing... hope you find this helpful... Happy coding!!!

    Marked as helpful
  • Adejokun Ibukunoluwa•20
    @IAdejokun
    Submitted almost 3 years ago

    Responsive QR Code Component

    1
    Abdul•8,560
    @Samadeen
    Posted almost 3 years ago

    Hey Omo Iya mi!! Cheers 🥂 on completing this challenge.. .

    Lets firstly work on your accessibility issues.

    • Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="content"> instead of <div class="content">.
    • Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <h5 id="top">Improve your front-end skills by building projects</h5> should be <h1 id="top">Improve your front-end skills by building projects</h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

    This should fix most of your accessibility issues.

    . Regardless you did amazing... hope you find this helpful... Happy coding!!!

    Marked as helpful
  • James Kofi Myers•660
    @kinjames
    Submitted almost 3 years ago

    nft-preview-card-component

    1
    Abdul•8,560
    @Samadeen
    Posted almost 3 years ago

    Hey!! Cheers 🥂 on completing this challenge.. .

    Lets firstly work on your accessibility issues.

    • Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="card"> instead of <section class="card">.
    • Your footer should be <footer class="attribution"> instead of <div =attribution>
    • Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <h1 class="big-text"> Equilibrium #3429 </p> should be <p class="big-text"> Equilibrium #3429 </h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

    This should fix most of your accessibility issues.

    . Regardless you did amazing... hope you find this helpful... Happy coding!!!

    Marked as helpful
  • MohammedC4r•10
    @MohammedC4r
    Submitted almost 3 years ago

    NFT Card - Using SASS, BEM

    1
    Abdul•8,560
    @Samadeen
    Posted almost 3 years ago

    Hey!! Cheers 🥂 on completing this challenge.. .

    Lets firstly work on your accessibility issues.

    • Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="card"> instead of <div class="card">.
    • Your footer should be <footer class="attribution"> instead of <div =attribution>
    • Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <h2 class="card__heading">Equilibrium #3429</h2> should be <h21class="card__heading">Equilibrium #3429</h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.
    • Images must have alternate text - Its hard for screen readers to pick up messages from images without alt text.. Its always advisable to include alt text to aid screen reader

    This should fix most of your accessibility issues.

    . Regardless you did amazing... hope you find this helpful... Happy coding!!!

    Marked as helpful
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

Mentor of the Week - 1st Place

This badge is awarded to the top placed community member on the weekly Wall of Fame.

Mentor of the Week - 2nd Place

This badge is awarded to the 2nd placed community member on the weekly Wall of Fame.

Fun fact

Keypunches were used in early computing to punch precise holes in stiff paper card. The punched cards were then used for data input, output, and storage. No code linters or auto-complete suggestions to help out back then! 😅

Mentor of the Month - 1st Place

This badge is awarded to the top placed community member on the monthly Wall of Fame.

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