Skip to content
OverviewSolutions
18
Comments
9
imranhossainemi
@imranhossainemi

All comments

  • Samiullah•440
    @samir-DeveSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    ...

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

    ...

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

    ...

    CSS, HTML

    1
    imranhossainemi•245
    @imranhossainemiPosted 4 months ago

    Good job, you have used grid flex really well. As a starter myself on grid, I know how hard it is to finish design as it indented to be. I have you will fix the mistake here in the future. Good Luck and best wishes

    0
  • Samiullah•440
    @samir-DeveSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    well I am proud of my persistency, I spent nearly 3 hours without going crazy on just positioning the cards intersections it truly was a butthurt for me. It was the first time I faced such weird card positioning . After all I learned something I didn't know !!

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

    I faced many which I mentioned earlier :)

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

    Blank !!

    Solid CSS and HTML

    1
    imranhossainemi•245
    @imranhossainemiPosted 4 months ago

    Well done and nice work as you try to follow design as a newbie. Some minor and major mistake, but you pull this off head's up to you. I hope you will learn this to above future mistakes.

    • Improve HTML semantic navigation and accessibility.
    • css box shadow technique for particular area. Example: in the design red green yellow blue card top part. " box-shadow: 0px 8px 8px 1px rgba(0,0,0,0.15), 0px -5px 0px -1px hsl(180, 62%, 55%); "
    0
  • Jackson-zablon15•150
    @Jackson-zablon15Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud to make the card responsive to both mobile view and desktop view

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

    I had a problem on changing the image on desktop preview in the @media and i overcome it by using content: url()

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

    I would like help on squeezing the header to make it align exactly as in design, i tried using right padding but didn't work. I would like help on removing the scroll bar on mobile preview, i tried to set the height of body to fit content but didn't work

    Product-preview-card

    4
    imranhossainemi•245
    @imranhossainemiPosted 4 months ago

    Great work! Your use of css variable and build approach mobile first well-thought-out. Some minor mistake here and there in the work, but I think you will fix it as you learn in the future. Good luck.

    0
  • TheAashay•210
    @TheAashaySubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Proud that made it in less time than I estimated and I'll arrange the CSS properties properly while using comments to understand the workflow better.

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

    Encountered challenges while spacing elements, developer tools from browser were helpful for seeing where paddings and margins are currently used and when to add or remove them.

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

    I'll revise the sizes of the content a while later, so do not need any help with it.

    Recipe page with @media query for responsiveness

    2
    imranhossainemi•245
    @imranhossainemiPosted 4 months ago

    Nice try, you did many thing right and worng. Try Follow html structure semantics for accessibility and navigation screen readers. Also the recipe nutrition part can be formated by table tag element, it is easy to manage while designing the page.

    1
  • Kamgo N Elton•70
    @kelton-glitchSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Being able to work out the different detail and add a touch of my own was quite refreshing

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

    Adjusting the middle card seemed to be a challenge at some point, but it was approached from a reminder of knowledge gotten from previous tasks

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

    I think this task was well suited and I would appreciate any feedback I can get from it

    Social links task

    2
    imranhossainemi•245
    @imranhossainemiPosted 4 months ago

    Nice work with font , color and details. As though social link card looks good you need to work on the details of accessibility, correct design pattern of the card.

    • For accessibility you must use role attribute or tags like main, aticle,footer etc. Which helps screen readers and other assistive technologies to quickly navigate to the primary content, bypassing repetitive elements like headers and navigation menus
    Marked as helpful
    0
  • imranhossainemi•245
    @imranhossainemiPosted 5 months ago

    Nice work, but some part need improvement.

    1. Card container size.
    2. Responsive with different devices.
    0
  • imranhossainemi•245
    @imranhossainemiPosted 5 months ago

    Nice work, but some your code section need improvment.

    1. HTML accessible improvement about content landmarks. Ensure all content is contained within a landmark region, designated with HTML5 landmark elements and/or ARIA landmark regions. Screen reader users can navigate to a section based on its HTML element or ARIA Landmark.
      • Example: <div class="qr-container"> you can use HTML5 landmark element <main> and/or ARIA landmark region role="qr-container .
    2. Layout size for image of qr code. Instead of using fix height and width, use percent base width, so image can resize itself base on device or screen width.
      • Example: .qr-image { width: 90%;}
    Marked as helpful
    0
  • Lucas 👾•104,340
    @correlucasSubmitted over 2 years ago

    👾 Hello, Frontend Mentor coding community. This is my solution for the 3 Columns Card Component.

    Feel free to leave any feedback and help me improve my solution or make the code clean!

    • 👾 I added a Custom hover effect on card w/ the Vehicle Types photo on background.

    I'll be happy to hear any feedback and advice!

    3 Column Preview Card (Vanilla CSS + Custom Design & Hover States)

    13
    imranhossainemi•245
    @imranhossainemiPosted about 2 years ago

    hey , what is main purpose of "box-sizing: border-box;"? When I should use it?

    0
  • imranhossainemi•245
    @imranhossainemiPosted over 3 years ago

    Nice Work . Helped me to understand problem

    1