Skip to content
OverviewSolutions
11
Comments
16

Suleman Tasawar

@Suleman-TasawarRawalPindi,Pakistan380 points

Passionate frontend developer with 1 year of experience in designing and developing user-friendly and responsive websites. Proficient in HTML, CSS, JavaScript, and React, with a strong focus on creating clean and efficient code. Enjoys taking on new challenges and collaborating with others

I’m currently learning...

SASS Typescript Tailwind

Latest solutions

View more solutions

Latest comments

  • Suleman Tasawar•380
    @Suleman-Tasawar

    Hi there @dellenar,

    I viewed your challenge Fylo-Landing-Page HTML+CSS and i must say that i am really impressed by the way you approched the solution to this challenge.If by judging you that you starting learing HTML CSS 3 months ago.You code looks well documented as it was easy to read your code and your code folders were well organized but there are a few thing that your can improve to make your solution.

    1. Your font size is really large in large screen devices (PC,Laptop).Trying playing with it to see which one fits the screen
    2. Your Nav Bars in well interms of layout trying adding the cursor:pointer; on hover and trying to change there color as well on hovering
    3. You have used margin-top and padding at the same same which is causing too much space try playing with them and try reducing the padding as well.

    Happy Coding Dear 😊

    Marked as helpful
  • Suleman Tasawar•380
    @Suleman-Tasawar

    Hi there, @Aq1q

    I viewed your solution to NFT preview card using scss.Your code looks clean but there is a problem with the display in large screen.In this case my screen resolution is 1366x786.In large screens its causing stretching in the image and the preview component in taking up almost the entire screen.The display on the mobile screen is fine.

    After viewing your code i noticed that you are % unit to set the width of the container and in your case you are using 80% of the width on the screen.You can use the units like px,rem which is a good way to set the width of any container.Try fixing the width

    Otherwise your code looks well structured on organized.

    Happy Coding

    Marked as helpful
  • Suleman Tasawar•380
    @Suleman-Tasawar

    Hi there Alessio i viewed the issue of your website.By loading it in mobile device i noticed that everything is stretching in mobile version.

    If you think 🤔 about the layout of this project and break it into smaller components.

    For the Navigation we can use flex box for it For the Main hero section we can use grid like you did.

    As in your code your have only used grid-template-column has have given 3 columns.But you did specify how many row you need and i think that is causing the content stretching in your website. You can use grid-template-row:repeat(2,1fr); This will give you 2 rows to put you elements in (The repeat is just a shorthand for grid-template-row:1 fr 1 fr; by repeating it two time)

    and as for the footer you can also use flexbox as the elements need to be placed horizontally

  • Suleman Tasawar•380
    @Suleman-Tasawar

    Hi Sahil,

    I viewed your challenge of Ecommerce product page and i have to say that that your project is full of creativity.The image toggle looks good in styling perspective.

    The page looks good on Large screen and but its lacking small screen display maybe you haven't added the media querry for mobile.Try playing with it to see that it works on small devices.

    Also the css file is very difficult to read as you have minified it as you dont really need to minify it if its a challenge so that others can view your code.

    Happy Coding 😀

    Marked as helpful
  • Suleman Tasawar•380
    @Suleman-Tasawar

    Hi there Nicholas your solution was quite creative but there are a few problems in the mobile view -The three icons are squeezed and causing the third icon to be hidden if your using flex then try changing it flex-direction

    -The info bar that shows the amount of space left is swished in the progress bar

    These are few things that i found which need to be improved

    Happy Coding 🙃

  • Suleman Tasawar•380
    @Suleman-Tasawar

    Hi there daniel congrats for completing this challenge It worked very well.But there are a few things thats you can do to make your project more amazing

    • Try adding some animation like the card fading in or try animating the image.

    -A thing that i noticed is the card seems a little bit small (width) and the Ethereum name is not matching its background try playing with the color

    Happy Coding 🙃

View more comments