Skip to content
OverviewSolutions
3
Comments
25
Md Irfan Rahman Mubin
@Md-Mubin

All comments

  • Pornchanok Pinnuwat•30
    @ppearyxx
    What are you most proud of, and what would you do differently next time?

    I try to write this by myself not study from YT first. and better improve in CSS style learning.

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

    I learn to play CSS component since I haven't played this much. but ya still didn't know it at all but it's good start for me.

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

    Still not sure about responsive. Also, I have learned that we can't use gap since gap only works when the parent container is using display: flex, display: grid, or display: inline-flex/grid. May need to know more about it. Will try to improve!

    Social link profile practice HTML&CSS.

    2
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    You can add width:100% of container for under 375px display. As you can see your contianer does not adjust under 360px display.

    Also, insted of using margin:10px for every social-link li a tag , you can simply use display:flex, flex-direction:column and gap : 10px; Even though your approach is good.

    Marked as helpful
  • Ehi•160
    @Ehiejakhian
    What are you most proud of, and what would you do differently next time?

    I'm proud of the responsiveness of the page, its awesome and cool. My best yet. Next time, I'll love to use less CSS.

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

    Padding. I had to make all the left and right padding of the content same while keeping the margins at 0. Using percentages worked for me.

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

    I don't see any, but I'll always welcome criticism and suggestions. Thanks people!

    Huddle landing page with alternating feature blocks

    #accessibility
    1
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    Remove padding-left and padding right. As these thing giving under scroll bar of the page which is a bad UI

  • neeta Purohit•160
    @neetaPurohit
    What are you most proud of, and what would you do differently next time?

    I'm most proud of achieving the exact design with proper alignment and smooth hover effects. Next time, I would use semantic HTML tags for better accessibility.

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

    One challenge was aligning the icons and text properly in a single line with equal spacing. Another major challenge was creating the image overlay effect with the eye icon on hover. Initially, the overlay didn’t cover the image perfectly, and the eye icon wasn’t centered. I solved it by using position: absolute and proper z-index inside a relative container. After a few layout adjustments and testing, everything started working smoothly.

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

    I'd like feedback on improving the image hover effect and making the layout more responsive. Also, suggestions on better semantic HTML structure or cleaner CSS practices would be helpful.

    NFT Preview Card Component – HTML & CSS Solution

    2
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    You can handle that border without using a extra div that you used class name "line". Use padding insted of margin in user classname and than use "border-top : 2px solid #(your color)" to get that line desgin.

    Marked as helpful
  • Mohammad Irfan•490
    @Mohammad-Irfan-Noorzada
    What are you most proud of, and what would you do differently next time?

    I'm proud of building the full project with React, including form validation, success message logic, and clean UX. It all worked smoothly in the end.

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

    Structure components better from the start, and maybe add tests or animations.

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

    Improving code structure (e.g. breaking components more cleanly). Writing cleaner and more reusable form logic. Optimizing UX (e.g. better animation for the success message). Deploying more professionally (e.g. using a custom domain or CI/CD). Accessibility and performance checks.

    Contact Form Main

    #react#react-hook-form
    1
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    Your email input needs more validation. use regex.. I can use test@gmail in there and it is taking which is bad. if your using regex try finding different version for the email validation

  • sema nur özyılmaz•100
    @semaozylmz
    What are you most proud of, and what would you do differently next time?

    I'm proud of how I was able to apply responsive design principles effectively while ensuring WCAG accessibility compliance. Creating a well-structured style guide helped streamline the development process and maintain consistency across components. Next time, I would focus more on refining the color contrast ratios to enhance readability and explore different typography pairings to improve the overall visual hierarchy.

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

    One of the biggest challenges was maintaining pixel-perfect proportionality across different screen sizes. Ensuring that elements aligned correctly while staying visually harmonious required multiple iterations and trial-and-error adjustments. I overcame this by leveraging flexbox and grid layouts efficiently, testing designs at various breakpoints, and adjusting spacing dynamically.

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

    I’d love feedback on optimizing responsiveness further, particularly ensuring smoother transitions between breakpoints. Additionally, any suggestions on refining the typography choices for better readability would be helpful. If there are areas where I could improve my WCAG compliance or any accessibility considerations I might have missed, insights on that would be greatly appreciated.

    Recipe Page

    1
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    Insted of using ::before for that dot. You can use "li::marker{margin-right:10px}" to give some space between the content and the bullet mark...and be sure to remove the "list-style:none" from ul css...

  • P
    Snah.•110
    @Snah19
    What are you most proud of, and what would you do differently next time?

    What I most proud of is that I managed to build this solution from the ground up with a knowledge of both CSS Grid and Tailwindcss. Next time I would learn how to use the @apply (I don't know what it's called) since I have used a lot of Tailwindcss classes especially I use arbitrary value a lot.

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

    Aligning thing to get it closer the design is challenging and my solution was just experiment it, if it work well I can move on and if it doesn't work just simply try more solutions, that's it. Specifically I play around with CSS Grid a lot in this challenge.

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

    I might need help of how to install Tailwindcss in my project properly since I only know how to use it with CDN. If you feel generous, you can help me finding free resources of how to install Tailwindcss the right way in your project, or give me some best practices.

    Four Card Feature with Tailwindcss

    2
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    I think for normal HTML and CSS stick with the CDN. When you work with the frameworks / librery than you sould use related way with them. And use container.. And give it a width and use margin:0 auto; to keep the content in middle.

  • Bella•610
    @Bonu7222
    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?

    ..

    product list with cart

    1
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    In responsive, create a navbar for the cart.. And make it toggle to on and off to make the cart show and not show on top.. Thus it will be better UI..

  • justshreeya•20
    @justshreeya
    What are you most proud of, and what would you do differently next time?

    practiced html, css

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

    none

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

    none

    Blog Preview Card with HTML & CSS

    1
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    No need to use class name in every tag. Like insted of using .card-img... you can use .card img{}... Use sementic tag. Good for page optimization. You can use class name if have to use same tag more than one, under a div/parent div...and you need to use class name than.

  • Md Irfan Rahman Mubin•210
    @Md-Mubin

    So far so good. Your previous projects are also great. You can add, loading="lazy" in img tag. Makes page faster and boosts performance on mobile. For this small one does not matter that much. But in big big project it does.

    You can write responsive codes in another file. And connect it with the html. Like create a responsive.css file and than connect it with html just like the style.css. you can create a css folder and put the style and responsive css file in it. Good for the folder/file structure.

  • Ivan Deshchenko•40
    @mrfrend
    What are you most proud of, and what would you do differently next time?

    It's not like I'm proud really. I try to return my skills. Not like I had much before :) I want to think more clearly about structure of pages. How to make it more

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

    I didn't know at first how to manage different sources of one image. I found a solution to use <picture> with <source> inside it.

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

    When should I choose flex over grid? Is there a way to handle confusion about sizes of elements more clearly?

    Product card using HTML and CSS

    2
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    It is just your preference. Like I have never used grid. Only flex. But, it is working for me. One of my friend prefers grid over flex. Still ok and working. Just use what you are more comfortable with. No hastle.

    Marked as helpful
  • P
    Snah.•110
    @Snah19
    What are you most proud of, and what would you do differently next time?

    What I most proud of is that I could make the project responsive and try to make it look as close as possible the the design. Next time what I would differently is I would make the card grow from small to large based on the screen sizes rather than make it appear larger instantly

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

    I tried to use outline rather than border thinking that the outline will not take up more space for the card ended up it appears square on mobile devices so later I switch back to use border and yes the border is round with the card.

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

    I want to know of there are tools that we could test our project on mobile devices.

    Responsive Blog Preview Card with CSS Alignment and Flexbox

    1
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    You can use the live site in your phone that you created and posted here. Or, you can use browser inspect. Right click on browser and you can inspect it. Than you can change the the screen width and height. And customize it in responsive codes. Make sure to use Firefox browser for the responsive insted of Chrome. Chrome gives better UI/animation but in development to fix/make the responsive better use firefox browser as it's engine is better for it.

  • P
    Klevis•720
    @21Kl3v1s21
    What are you most proud of, and what would you do differently next time?

    Test purpose only

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

    a

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

    a

    FRM-Contact-Form-Next

    #next#tailwind-css
    1
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    You can add error massage on the top right of each input to let user know the error insted of just using required. That will be a good practice. And, also when you do the thing work will be like. When the input is empty and clicking submit will show the error but when user start writting in input the error massage will go away auto.

  • P
    Snah.•110
    @Snah19
    What are you most proud of, and what would you do differently next time?

    What I most proud of is that I can implement the project without the need of using the Figma files (since the file is not working). Next time if the Figma file is working I will do it much better.

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

    Getting the correct size of the QR Card was a bit challenging since I have no Figma file to look at the correct width and height of card so I have to make an estimation on it

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

    Since this is a very basic QR Card, I do not have anything get help with yet (maybe later challenges I have)

    QR Code Component with CSS Flex Box to Center the Alignment

    2
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    Impressive. Just an advice, no need to use class name always when you can select html sementic in css. Like, in "qr__text" div you used a h2 for headline and p tag for the info. So, in css you can grab them like using ".qr__text h2{}" and ".qr__text p{}".... by that you no need to give extra class name for each of them. It realy helps the css in optimization. Even though this small projects does not matter that much. But for the big big project, matters. And it is also a good practice. But if there are more than 1 same tag in under same div than you can give class name and you need that.

  • P
    Lampros Liontos•180
    @reteov
    What are you most proud of, and what would you do differently next time?

    This time, I was able to get things done relatively quickly. Additionally, criticisms from a previous project helped me see the mistakes I was making, which made a very big difference overall; the CSS is now much more compact, but still gets the job done, and I didn't take as log to get the job done.

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

    The biggest challenge was the sizing of the grid elements; I originally started with auto for both dimensions, but this ended up causing the small elements to be too wide, messing up the layout, making things look unbalanced. Once I started using direct percentages (25% horizontally, 50% vertically), the layout looked much closer to the original. A little spacing went a long way after that.

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

    I'm still not getting exact distances, but I was previously advised not to sweat it out. Besides, I'm sure that if exact margins were important, there would have been more specification in the design document telling how much space needed to be there.

    As the saying goes, this is close enough for government work.

    I hope.

    Testimonials Grid using CSS/HTML only.

    2
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    I would say don't use 100vw in body. As you used here, in your ouput you can scroll left right/there is under scroll. That is bad ui. Also, no need to use 100vh in body too. You can use that on a section part if that needed. Right now as it is only one section, so no need.

  • İrem Ay•80
    @irem-ayyy
    What are you most proud of, and what would you do differently next time?

    Bu projeyi kolay bir şekilde yapabilmemdi. Çünkü bunu yapabilecek tecrübeye sahiptim.

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

    Mobil Responsive tasarımda birazcık zorlandım onunla da önceki notlarımdan yardım alarak üstesinden geldim.

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

    Mobil Responsive tasarımında yardım alırdım. Çünkü bu konuda çok deneyimim yok.

    Responsive Tasarıma duyarlı "QR KOD BİLEŞENİ"

    #anime-js#bootstrap#cube-css#tailwind-css#animation
    1
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    in img, class name that you used "qr-blue" , use width: 100%; and height: 100%; in your responsive @media

  • Aayush Trivedi•10
    @aayusht200
    What are you most proud of, and what would you do differently next time?

    I used CSS flex box to create the structure which made it responsive and easy.

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

    setting up git xD

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

    right now none may be with being able to do the same task more efficiently.

    use CSS Flex Box and its properties to archive this.

    2
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    well you have under scroll bar ... remove width:100vw; from your body css. also use margin:0; in your *{} css which you can say global css. For not show the side scrollbar as body is taking extra 8px margin in your output.

  • resegoreey•30
    @resegoreey
    What specific areas of your project would you like help with?

    How do I make the picture to have that color on the final project? Also, I'd appreciate some advice on my desktop styling as it seems a little bit off.

    CSS Stats Preview Card

    1
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    if you have coloring picture you can try using filter: in css and if there is no solution just make a div/span inside of img-card and than poition:absolute it, witdh and height 100%, left-0, top-0 and give the img-card postion:relative in css to make it the parent div. and just color that child div/span that you absolute

  • Muhammad Pauzi•60
    @4glightning
    What are you most proud of, and what would you do differently next time?

    I managed to design the website exactly to the design given and the next thing that i would try differently is that using other method like javascript for dynamic font resizing.

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

    looking for other method to resize the font to make it responsive in each screen sizes. I used the github copilot to help me find other method available and it is really helpful and i also learn so much other method available to make the font to be responsive.

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

    How do pick the correct font sizes or family for my website? is there a tips on how to set the perfect font size or family to your website to make it more user friendly or make it readable.

    I used flexbox to center the card and also used rem for font sizes.

    2
    Md Irfan Rahman Mubin•210
    @Md-Mubin

    you can do it in css file. go to google fonts / (https://fonts.google.com) select font that you like in there click get font and you can either downlaod it or get embeded code.. for the embeded code => ther will be 2 options link and @import in @import copy the import link (not the script tag) and paste it in top of the css file .. than from the place you copied the link, under it you will see font-family just use that in the places you want to use now.. or you can make it variable your wish

    Marked as helpful