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

All comments

  • Dellenar•160
    @dellenarSubmitted over 1 year ago

    It was challeging with dealing lots of stuff and classes. At start it come as mess to deal with so many variables but at the end i managed to make it trough. I don't know if my code is mess and sure it's not 100% clean but i did my best. As time goes i believe i can make it way more smooth. All i have to do before dive into coding need to plan each section and create common classes for the same variables to make it more clean.

    Please Check out my code and see if you have any advice for me. It's been almost 2 month since i start coding with HTML+CSS. So you can comment me about if i'm at a good point compared to 2 month of study. Thank you in advance ! Also thanks to the Frontendmentor to provide us such challenges to improve ourselves

    Fylo-Landing-Page HTML+CSS

    2
    Suleman Tasawar•380
    @Suleman-TasawarPosted over 1 year ago

    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
    0
  • Suleman Tasawar•380
    @Suleman-TasawarPosted over 1 year ago

    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
    0
  • Alessio Valastro•190
    @AlessioValastroSubmitted over 1 year ago

    Hi, that's my solution on the challenge. I submitted a non-finished version in order to receive feedback on the grid layout. Thanks for helping!

    News homepage

    1
    Suleman Tasawar•380
    @Suleman-TasawarPosted over 1 year ago

    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

    0
  • Suleman Tasawar•380
    @Suleman-TasawarPosted over 1 year ago

    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
    1
  • Suleman Tasawar•380
    @Suleman-TasawarPosted almost 2 years ago

    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 🙃

    0
  • Daniel•10
    @AltESVSubmitted almost 2 years ago

    ##NFT Preview Card

    NFT Preview Card with Vanilla JS Script includes and NFT object that can be used to dynamically update name, description, price, time and creator. This could also be pulled from e.g. firestore to make the project full-stack.

    NFT Card

    1
    Suleman Tasawar•380
    @Suleman-TasawarPosted almost 2 years ago

    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 🙃

    0
  • Suleman Tasawar•380
    @Suleman-TasawarPosted almost 2 years ago

    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
    0
  • Suleman Tasawar•380
    @Suleman-TasawarPosted about 2 years ago

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

    1
  • Awizee•40
    @awizeeSubmitted about 2 years ago

    I didn't use the hamburger image giving so I'm not sure of the code written down

    I will attend to any question relating to html css and js relating to the task given

    Responsive Grid landing page

    2
    Suleman Tasawar•380
    @Suleman-TasawarPosted about 2 years ago

    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
    1
  • Suleman Tasawar•380
    @Suleman-TasawarPosted about 2 years ago

    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
    0
  • Suleman Tasawar•380
    @Suleman-TasawarPosted about 2 years ago

    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
    1
  • Cornflakes•290
    @CornflakesPlusSubmitted about 2 years ago

    Hello FEM community!

    I got extremely busy with my work this month, so this project took a while to complete. I only had time to code for two hours a week, seriously 😄. I wasn't able to code consistently with this project, so sometimes I felt out of context. It also has many missing pieces but I had to make it work.

    Anyways, as always, I would appreciate any feedback. Some things I need guidance with are:

    1. How to have better HTML for the star icons without repetition
    2. Background image using the background-position property

    and any other specifics. Thank you all!

    Social Proof Section ~ FlexBox | Responsive Design

    3
    Suleman Tasawar•380
    @Suleman-TasawarPosted about 2 years ago

    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

    1