Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
291

Bader Idris

@Bader-IdrisJordan2,880 points

I set a commitment to myself to be a student for the rest of my life.

Latest solutions

  • modern countries api application using vue3, with TS

    #sass/scss#typescript#vue#express

    Bader Idris•2,880
    Submitted 10 months ago

    learning RestFul APIs is crucial to apply such projects!


    2 comments
  • Todo app with localStorage


    Bader Idris•2,880
    Submitted about 2 years ago

    0 comments
  • multi-step using pure HTML, CSS, JS, and little NODE.JS

    #node

    Bader Idris•2,880
    Submitted about 2 years ago

    2 comments
  • E-commerce product page


    Bader Idris•2,880
    Submitted about 2 years ago

    0 comments
  • product-preview-card-component-main


    Bader Idris•2,880
    Submitted about 2 years ago

    1 comment
  • Random quotes fetched from a specific website which derives JSON text.


    Bader Idris•2,880
    Submitted about 2 years ago

    1 comment
View more solutions

Latest comments

  • Abdelwahab•150
    @Abdelwahab121221
    Submitted 10 months ago

    Simple project with API

    1
    Bader Idris•2,880
    @Bader-Idris
    Posted 10 months ago

    good job, but there are two fast comments from me about this, the dice works on each two clicks, so it should work on each click, lastly: you can use this

    .icon {
        user-select: none;
    }
    

    to make the button more effective

  • Cyril Muchemi•190
    @cyrilmuchemi
    Submitted about 2 years ago

    ecommerce cart solution

    1
    Bader Idris•2,880
    @Bader-Idris
    Posted about 2 years ago

    you can improve the add to cart button and make it useful when you collect the innerHTML of the increasing number on its left, to change the cart above, instead of increasing the number of items directly, simply make the function works with the button not the increasing-decreasing symbols [ - + ]

  • Carlos Ceron Santacruz•10
    @carlosCeron
    Submitted about 2 years ago

    Flexbox, Css variables, React

    #react
    1
    Bader Idris•2,880
    @Bader-Idris
    Posted about 2 years ago

    You can set the container in the middle of the screen as a response project, when you add these CSS properties to it:

    .container {
      top:50%;
      left: 50%;
      transform: translate(-50%,  -50%);
      position: absolute;
    }
    

    the might new feature is transform, it has many lovely properties you can discover, I personally admire it. I hope it's useful

    Marked as helpful
  • George Olatoyan•1,500
    @Olatoyan
    Submitted about 2 years ago

    Responsive E-commerce website using CSS Grid, Flexbox and JavaScript

    1
    Bader Idris•2,880
    @Bader-Idris
    Posted about 2 years ago

    You can put all elements inside a container, to set the paragraph a specific, and by using display: flex you can easily change between phone and PC media queries, nevertheless, the function of clicking on the image slider, doesn't work on PC, and phone needs to change main images container's width, paragraphs needs to be bolder and a little bigger than what they are. Achieving this phase is great, I salute you for that🎉🎊

  • Paweł Stasiewicz•40
    @pawelstasiewicz
    Submitted about 2 years ago

    QR code component

    1
    Bader Idris•2,880
    @Bader-Idris
    Posted about 2 years ago

    You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

    .container {
      position: absolute;
      top:50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    

    the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful

  • Masha-bit•10
    @Masha-bit
    Submitted about 2 years ago

    My First QR component site

    #web-components
    1
    Bader Idris•2,880
    @Bader-Idris
    Posted about 2 years ago

    You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

    .container {
      position: absolute;
      top:50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    

    the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful

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 - 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! 😅

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