Skip to content
OverviewSolutions
11
Comments
16
Suleman Tasawar
@Suleman-Tasawar

All 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 🙃

  • Yusuf Babatunde•310
    @owocoded
    What are you most proud of, and what would you do differently next time?

    Using the basic of css to finish d project

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

    Placing the background image and also the etherum icon.

    Responsive landing page

    1
    Suleman Tasawar•380
    @Suleman-Tasawar

    Hi Yusuf i checked out your solution and found it very creative.Overall the solution looks good but there are few things that you can do to improve your solution. (1)The nft images looks a bit stectched you can adjust it buy using min-width:250px or something like that. (2)The content Profile looks a bit smushed try giving it a line-height These are my suggestion.Hope you liked the feedback Keep Coding!

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

    You did a nice job on the News Page Challenge espacially the animation on the startup.Also our code looks well structured

  • Suleman Tasawar•380
    @Suleman-Tasawar

    The Challenge look perfect.I think there are something that you want to improve First the navigation links are hard to read i don't think that is the color that should be used as navigation link.Also there is too much padding on the top and bottom of the side bar you can look upto it.One last thing the head of the first blog is missing(The sidebar). I hope you like my feedback. Happy coding

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

    Hi Ahmad your solution was much creative but there are somethings that i think you can add to you Page to make it attractive First i noticed that you did'nt add any hover effect on button and navlinks Secondly the page was good on Desktop but lacked responsivsness Lastly i noticed that in mobile version the image of the three blog posts were hidden

    I hoped that you liked my feedback i did'nt mean to offend you in any way! Happy Coding

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

    The solution is perfect but there a few things that i think you can improve in your solution (1)The news side bar on the right's text is hard to read you can try the colors given in the style guide (2)Secondly you try to stick to colors provided in the style guide (3)When i visited your solution live the font size was to large you can you the font size of 16px

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

    As far as i know that the Section tag is used when there is content that you want to show by order like for example consider a book it has headings,paragraph,diagrams Its default property is block

    section{ display block; }

    while the div tag does'nt have any special purpose you can put any content inside it.Consider you testamonial solution.You can use two parent div containers.One for the upper textual content and Another for the testamonial.

    <div> has default property display block;

    while the blockquote tag is used to reference a section quoted from another Page or Site

    <blockquote cite="www.frontendmentor.io/"> FrontendMentor:A Frontend Portal to practice Webdesigning </blockquote>

    Does this help you in any way

  • Suleman Tasawar•380
    @Suleman-Tasawar

    The solution looks very good but i think that The side news bar should be smaller and The image can use a bit of resizing

    The Solution is amazing cheers

  • Suleman Tasawar•380
    @Suleman-Tasawar

    Feedback is Appreciated :)

  • Suleman Tasawar•380
    @Suleman-Tasawar

    i dont get it why is it showing pixeled broken on design comparison does someone know how to fix this

    Feedback is appreciated

  • Suleman Tasawar•380
    @Suleman-Tasawar

    Looks very good

    Marked as helpful