Skip to content
OverviewSolutions
31
Comments
40
Ahmed Ali
@qayoommunawar

All solutions

  • Project Tracking Intro Component

    #accessibility#pure-css#van-js
    Ahmed Ali•650
    Submitted 3 days ago
    • Make the main section more responsive to prevent image distortion on larger screens, while maintaining a consistent wrapper width for both the navbar and hero section. Here is how i acheived it for now:
      main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-block: var(--spacing-md);
    gap: var(--spacing-lg);
    overflow-x: hidden;
  }

  main .main-img{
      min-width: 130%;
      transform: translate(4%);
  }
    • To create an image overflow effect on the right side, I used the following approach:
      main .main-img{
      min-width: 130%;
      transform: translate(4%);
  }
    • I explored multiple approaches for larger screens and ultimately settled on this layout.:
       main{
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        overflow: auto;
        max-width: 90%;
        padding: calc(var(--spacing-lg)*2.65) var(--spacing-md);
        margin: 0 auto;
        padding-inline: 0;
        padding-inline-start: 1rem;
        margin-right: 0;
        gap: 1rem;
        height: 100%;
    }

   

    main .main-img{
        min-width: 60%;
        transform: translate(10%);
        flex: 1;
        height: 100%;
    }
    • Any constructive suggestions—especially regarding the main section layout and image handling—are most welcome.
    0 comments

  • Sunnyside Responsive Landing Page

    #accessibility#pure-css#van-js
    Ahmed Ali•650
    Submitted 4 days ago
    • how i can manage header+hero section bg without giving header or backgroound img height:100vh; ? because it does not looks good, and the other way if height is not used image is not shown fully.
    • should i use fluid-grid style or manage it through media query ?? for example in section.img-gallery i styled images using fluid grid: here is the css snap:
      .grid-gallery{
    display: grid;
    grid-template-columns:
        repeat(
          auto-fit,
          minmax(370px, 1fr)
        );
    justify-content: center;
    align-items: center;
}
    • in section-flex which is bascially a grid layout, i set grid-rows so that both the image and text take exactly the same height and width, is this a good practice ? wether i use flex for this ?? what is the best practice in these scenerios ??
      .section-flex{
    display: grid;
    place-content: center;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2,1fr);
    justify-content: center;
    align-items: stretch;
}
    • looking forward to any postive suggestions to enhance my grip on desgin and logic.
    2 comments

  • Responsive Bloggr Landing Page

    #accessibility#pure-css#van-js
    Ahmed Ali•650
    Submitted 7 days ago

    I am looking for suggestions and help regarding

    • background layout of infrastructure-section
    • how can i modify my html structure to make my code more clean and swift ?
    • any suggestions adding value to my knowledge are welcomed.
    0 comments

  • Tip Calculator Using Js

    Ahmed Ali•650
    Submitted about 1 month ago

    Javascript logic is not doing well, any suggestions and improvements are most welcome.

    • I am not sure if my js is doing the right calculation, i reviewed some of the solutions on frontendmentors but most of the solutions differ in results.

    • how can i calculate every time any of the value changes i.e my program calculate for once, to do another calculation, the program is needed to be reset.

    • would be very thankful for your suggestions and reviews.

    1 comment

  • Interactive Sign Up form

    Ahmed Ali•650
    Submitted about 1 month ago

    how i can make form more interactive ?? js is a mystery can always be improved. How can i check when user is inputting data weather it is valid or not and show an error ???

    2 comments

  • FAQs Accordion Interactive Component

    Ahmed Ali•650
    Submitted about 1 month ago

    looking for accessibility suggestions, thank you.

    1 comment

  • Interactive Rating Component Usin Vanilla JS

    Ahmed Ali•650
    Submitted about 1 month ago

    Constructive feedback welcomed

    1 comment

  • Ping Responsive Landing Page With Form Validation

    Ahmed Ali•650
    Submitted about 1 month ago

    Any constructive feedback is welcomed.

    1 comment

  • Aricle Preview Component Using CSS & JS

    Ahmed Ali•650
    Submitted about 1 month ago
    1 comment

  • Newsletter Sign Up Form Using CSS and JS

    Ahmed Ali•650
    Submitted about 2 months ago

    optimizing js and css responsiveness. any suggestion and improvements are appreciated.

    1 comment

  • Base apparel sing up form with validation

    Ahmed Ali•650
    Submitted about 2 months ago
    0 comments

  • Responsive Sign Up Form With Validiation Using Js CSS

    Ahmed Ali•650
    Submitted about 2 months ago

    Mention in above section.

    1 comment

  • Responsive Chat App

    Ahmed Ali•650
    Submitted about 2 months ago
    1 comment

  • Responsive Testimonial Grid Layout

    Ahmed Ali•650
    Submitted 2 months ago
    1 comment

  • Ressponsive Huddle Single Section Using Flex Box

    Ahmed Ali•650
    Submitted 3 months ago

    what would be the best approach to attain best responsiveness in this case ? i used flexbox can it be done better even with flexbox or grid ??? how can i use clamp for heading font-size so that it changes its size as per vw???

    2 comments

  • Ressponsive Proof Section Using Flexbox

    Ahmed Ali•650
    Submitted 3 months ago

    How can I add top and bottom backgrounds ?? i never tried maybe due to laziness or time, but ::after is good ?? Suggestions are appreciated.

    2 comments

  • Responsive Preview Section Using Flexbox

    Ahmed Ali•650
    Submitted 3 months ago
    1 comment

  • Responsive Price Section Using Flexbox & Grid

    Ahmed Ali•650
    Submitted 3 months ago
    0 comments