Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
11
Comments
14
Mohaymenul Islam
@nayem567

All comments

  • Kelechikizito•340
    @Kelechikizito
    Submitted 8 months ago

    job listing page using react+vite+tailwind

    #react#vite#tailwind-css
    1
    Mohaymenul Islam•310
    @nayem567
    Posted 8 months ago

    Great job. This is looking almost very similar to the original design !

  • Isadora Aguiar•60
    @isadoraguiar
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am happy that I completed the challenge.

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

    The challenge was not using the design file.

    What specific areas of your project would you like help with?

    Nothing yet.

    Responsive blog card using css flexbox

    1
    Mohaymenul Islam•310
    @nayem567
    Posted about 1 year ago

    perfectly done. good job

  • Vinzz•280
    @Vinzz34
    Submitted over 1 year ago

    Results Summary Component

    #sass/scss#bem
    1
    Mohaymenul Islam•310
    @nayem567
    Posted over 1 year ago

    Your mobile design is also good. I've checked your code, you can try using less fixed pixels to make responsive easily. Rely more on flex, it will take care the issue. Overall pretty good man

    Marked as helpful
  • Mohammad Aminul Islam•160
    @aminbd90
    Submitted about 4 years ago

    Using CSS flexbox

    1
    Mohaymenul Islam•310
    @nayem567
    Posted over 1 year ago

    Beautifully done bro

  • Mark Owen Policarpio•30
    @uragunz16
    Submitted over 1 year ago

    recipe-page-main

    1
    Mohaymenul Islam•310
    @nayem567
    Posted over 1 year ago

    You did pretty good. I see nothing noticeable should be changed. Handled finely. Good Luck man

    Marked as helpful
  • Stefan Bojkovski•720
    @xStephx
    Submitted over 1 year ago

    Solution Recipe page

    #bootstrap
    7
    Mohaymenul Islam•310
    @nayem567
    Posted over 1 year ago

    well done 👏

  • Louis_Vil•40
    @LouisDev23
    Submitted over 1 year ago

    Chatapp CSS illustration using flex

    1
    Mohaymenul Islam•310
    @nayem567
    Posted over 1 year ago

    Hello @LouisDev23.

    Congratulation on completing this project. Here are some feedback and suggestions on your chat app:

    • Centering First of all, Center your Body Elements vertically. To do this you just have to add a height to your body: body{ height: 100vh; } . As you are using flex to the body element, giving a height will align its children properly.

    • increase padding to the "chatbox" div and to other elements inside of this.

    • chatbox pictures are not clickable, make them clickable with giving them a link. You can use <a> <img> </a> style, means putting the image inside anchor link.

    • yes, adding an icon is little difficult when we start. But it's actually simple when you know the process. There are many Icon library in the internet that you can use. One of the most famous one is "Font Awesome". Just go to their site and follow the documentation. It's pretty straight-forward actually. I'm doing this for you:

    in the head section of your html, add Font Awesome CDN:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

    Then inside your button add the font-awesome icon: <button> <i class="fas fa-chevron-right"></i> </button> .

    • There needs to be some spacing inside the text div.

    • There is an .attribution div. You have put it inside the text div. Replace the .attribution div out of that text div, this .attribution should come after the text div.

    • In Mobile view, the text section is not aligned properly. make it centered by using margin or flex.

    I hope these helps. Let me know if I can help further. Good luck and Thank You.

    Best Regards, Mohaymenul Islam

  • MOHAMED RIYAS•110
    @riyas2309
    Submitted over 1 year ago

    blog-preview-card

    1
    Mohaymenul Islam•310
    @nayem567
    Posted over 1 year ago

    Hello @riyas2309. Congratulation on completing your first project. Your Code is organized. There is not html, css error in your code. Also looks great visually.

    • Yes, the solution includes semantic HTML.
    • Yes, it is accessible; no specific improvements needed.
    • Yes, the layout looks good on a range of screen sizes.
    • Yes, the code is well-structured, readable, and reusable. Good Luck.
    Marked as helpful
  • Sodiq•10
    @sodiqmmv
    Submitted over 1 year ago

    Blog preview card HTML & CSS

    2
    Mohaymenul Islam•310
    @nayem567
    Posted over 1 year ago

    Hello @sodiqmmv. First of all congratulation on completing the project. There are some issues that I would like to address to make your template look better.

    CSS Validation: First of all validate your css with a css validator, there are few parsing errors in your css.

    Container Placement:

    A major issue is your "Container" div is out of your HTML "Body". And why this has happened? The reason is that you used :

    blog{ position: relative; top: 190px; left: 595px; }.

    Solution: Don't use position relative in this context. The best use case of this would be using CSS Flex or Grid. I would recommend Flex as to begin with. You can position your html elements according to your needs without breaking the layout of html body, by using Flex.

    In Mobile device, your content is not showing. You must have to make your site responsive for mobile. You have to learn this "Responsive Website" topic. There are plenty free tutorial and articles about this topic.

    To give a quick fix, follow the previous correction I have provided above. Don't use position relative to the container element, Use Flex to position it.

    My advise to you would be check how to position html elements properly with css properly. There are few subjects that you have to get comfortable. These are: CSS Flex, Grid, Position, Media Query.

    Take some time learning these, then revisit this project once again to identify your mistakes and make it better.

    I wish you good luck on this journey.

    If you need any further help, feel free to knock me. Thanks

    Best Regards, Mohaymenul Islam

    Marked as helpful
  • Melvz•30
    @MvPorcalla
    Submitted over 1 year ago

    Blog Preview Card

    #accessibility
    2
    Mohaymenul Islam•310
    @nayem567
    Posted over 1 year ago

    Hello @MvPorcalla. Congratulation on completing the project. Your template looks very good and there is also no HTML, CSS error in your code. Here are some tips to make this look slightly better:

    Give your body a height of 100vh, so it takes the full height of the page, otherwise the bottom section is having empty white space.

    Your can take your "attribution" to the bottom of the page: .attribution{ display: flex; height: 10vh; justify-content: center; align-items: end; }.
    As you have given the "card-container" height of 90vh, the attribution should take other 10vh of the remaining height. This way the page height is filled perfectly. Also, consider increasing the font size of the attribution text.

    In responsive mode, you can give your "card-container" a little more margin to left-right side.

    I hope this helps. Let me know if you need any further help. Thank you.

    Best Regards, Mohaymenul Islam.

    Marked as helpful
  • HruthVik•10
    @CoderHruthvik
    Submitted over 1 year ago

    blog-preview-card

    2
    Mohaymenul Islam•310
    @nayem567
    Posted over 1 year ago

    Hello @CoderHruthvik. You have completed the task, congratulations. But There are few issues you can take care of.

    To start with, when using 'Display:flex' to a container, you don't need to give the flex child items to 'position:relative' or 'margin-left', 'margin-top' etc. You can position the flex child using various flex properties like 'justify-content', 'align-items' etc. In your code, you have used the 'justify-content', 'align-items' property to the flex child but positioning it with 'display:relative' has conflicted with this and resulted improper positioning.

    Then another tip is to avoid giving the element a fixed height if possible. That way the element is going to take only as much space as it needs according to its inner elements. You can take necessary space through margin and padding. You can try this.

    In your code, another mistake was using the flex-child as inline-block. Avoid this if possible.

    Responsive mode of your template also became unaligned because of the mentioned issues. My suggestions would be take some time to understanding the layout better. Then do the project once again. So you could get near to perfection.

    Let me know If you need any further help. Thank you

    Marked as helpful
  • asad1001•10
    @asad1001
    Submitted over 1 year ago

    Responsive accordion FAQs page using html css and vanilla Javascript

    2
    Mohaymenul Islam•310
    @nayem567
    Posted over 1 year ago

    Well Done. And no, don't write new html, css for the mobile design. The html are always same. You have to use "media query" for mobile design. It is called Responsive Web Design. You will find good videos and articles all over the internet about this, specially check out Youtube. To be a Web Developer, learning responsive web design is a must. Good Luck

    Marked as helpful
  • dahmide•190
    @dahmide
    Submitted over 1 year ago

    Expenses Chart Component Challenge Solution

    1
    Mohaymenul Islam•310
    @nayem567
    Posted over 1 year ago

    It's good

  • Akshay Magrani•975
    @akshaymagrani
    Submitted over 4 years ago

    FAQ accordion card using Bootstrap

    2
    Mohaymenul Islam•310
    @nayem567
    Posted over 4 years ago

    Where is source Code ? Github page error . Correct your github page

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

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

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