Skip to content
OverviewSolutions
20
Comments
16
Abhi
@abhi-zero

All comments

  • Abhi•320
    @abhi-zeroPosted 2 days ago

    Hey Glitcc,

    Your project is amazing! It's exactly like the layout provided. When I made this project, mine wasn’t that good, hahaha. It doesn’t matter whether you learn slowly or quickly; just focus on mastering your fundamentals and don’t rush into learning frontend development.

    Good luck with your future projects!

    0
  • Abhi•320
    @abhi-zeroPosted 2 days ago

    Hey brother, your project’s email validation and success message aren't working.

    0
  • Stryde2022•170
    @Stryde2022Submitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    this was a little tough but i am proud that i was able to get it done. I would look to get this done efficiently

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

    N/A

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

    css positioning

    Responsive landing page for recipes using css

    1
    Abhi•320
    @abhi-zeroPosted 20 days ago

    Hey, your solution is looking great! I have some general suggestions:

    1 Separate CSS Files: It's a good practice to use a separate file for CSS and place it in its own folder. For example:

    project-folder/
├── index.html
└── styles/
    └── style.css

    This makes it easier for others to access and read your solution.

    2 Font Hosting: Consider hosting your own fonts instead of relying heavily on Google Fonts. You can search for "@font-face" to learn how to do this.

    3 Design Image: When you work on a project, always check the design image, not just the preview.

    If any other suggestions come to mind, I will update this comment.

    Good luck with your future projects!

    Marked as helpful
    0
  • Abhi•320
    @abhi-zeroPosted 20 days ago

    Hey, your preview looks good, but there are some minor issues. Here are a few suggestions:

    HTML:

    Image Tags: I noticed you used two <img> tags in your HTML. While this isn't wrong, if your project requires changing images based on screen size, it's best practice to use the <picture> tag instead. (You can search for "picture tag" on YouTube or Google for more information.)

    Heading Spacing: For your h3 heading ("Perfume"), I see you've added spaces using the keyboard. This isn’t a good practice. I recommend using the CSS property letter-spacing for proper spacing.

    CSS:

    Card Sizing: For projects like this that involve creating cards, I suggest using min-width and max-width properties to ensure the card sizes stay within those limits.

    Mobile Version: In the mobile version, only the top corners are rounded, but in your solution, only the right-side corners are rounded. You should apply theborder-radiusproperty for both desktop and mobile versions with different values.

    General Suggestions:

    Separate CSS Files: It's a good practice to use a separate file for CSS and place it in its own folder (e.g., folder: styles > file: css/style.css). This makes it easier for others to access and read your solution.

    Font Hosting: Consider hosting your own fonts instead of relying heavily on Google Fonts. You can search for "@font-face" to learn how to do this.

    If you need any help, just let me know. If you want sources, you can find them on the MDN Web Docs or on YouTube. If you can't find what you're looking for, feel free to ask any mentor on this site; they are really good people. You can also directly ask me!

    Good luck with your future projects!

    0
  • BiiN•50
    @BiiN12Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    It's dynamic and fully responsible website. I added some extra style to make it look good but i will publish it on github. For now i'm just solved the challenge and it's been fun.

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

    When it's at small screen, the background image is get cropped out. So, i rotate the image when it's in small screen and it's looks perfect.

    Responsible 3 Column Preview Card

    1
    Abhi•320
    @abhi-zeroPosted about 1 month ago

    Hey, brother! The preview link for your project isn't working, but I saw the screenshot. The background looks awesome!

    1
  • Jorge•190
    @f-avalosSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I would like to make modifications to the text balloon that is displayed when the Share button is pressed, specifically about the way in which this type of elements should be designed within the structure of the web page, but right now I can't think of it. nothing.

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

    This time I had no problems with the length and width of the card, since I was able to set a size that adapts to different devices, this time I had problems with the content that is displayed when the Share button is pressed, in a phone view I didn't have any major problems but when displaying it as a text balloon I couldn't properly handle the position in which it can be found in certain resolutions.

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

    As I mentioned above, I had complications regarding the content that is displayed when pressing the Share button, I would like to ask for advice or recommendations to better manage the position in which said content is (speaking from the desktop view, on the phone I think it looks good).

    Article Preview Component

    1
    Abhi•320
    @abhi-zeroPosted about 1 month ago

    Your design is pretty awesome, and that hover effect on the article is also amazing! Plus, I love the transitions and animations. Good luck with your future projects! Eat, sleep, and rest well.

    0
  • Abhi•320
    @abhi-zeroPosted about 1 month ago

    Hello, I appreciate the work you've put into this; the solution looks great, and the footer is quite impressive. However, I did notice that the mobile version could use some improvement in its appearance. It might be beneficial to experiment with it a bit more. This is simply my suggestion, and I understand that you have your own approach to the design.

    1
  • feelgooddd•30
    @feelgoodddSubmitted about 1 month ago
    What challenges did you encounter, and how did you overcome them?

    There is an issue with overflow where the change anchor tag escapes it's flex container on my friends iPhone 14 using safari but I'm unable to replicate the issue with any dev tools or other browsers and do not have my own iPhone to test with. On a variety of different android devices using chrome this issue does not exist and it only exists in Firefox when the width is reduced below 280px.

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

    If anyone can help look over my flex containers and items and give me feedback if I've implemented and used them correctly or if there is a better and more efficient way I could have used them please give me critique here so I can improve my skills using flex.

    Order Summary Page using flexbox

    2
    Abhi•320
    @abhi-zeroPosted about 1 month ago

    Hey bro, I think you should remove the border from the main component and the button. Instead, use the box-shadow property (e.g., box-shadow: 1px(x-axis) 1px(y-axis) 15px(blur-size) color).

    For the overflow issue, you might want to use both min-width and max-width to ensure that the size of your main component lies between those values. For example:

       min-width: 200px; 
   max-width: 300px;
}
    Marked as helpful
    0
  • YazanJbara•100
    @YazanJbaraSubmitted about 1 month ago
    What specific areas of your project would you like help with?

    spacing between elements is done using paddings , i don't know if it's the right solution or not for spacing , can someone review and tell me what is the right approach for spacing?

    CSS Social Link Challenge

    1
    Abhi•320
    @abhi-zeroPosted about 1 month ago

    Your solution looks good and well-formatted. I'm not too concerned about spacing right now because I used to approach it the same way when I started. But now, I use Grid and Flexbox. I'm also a beginner, but I have some suggestions for you:

    Don’t worry, I’ll provide the links for these in the next comment.

    0
  • Maobugichi•470
    @MaobugichiSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    learned and applied BME

    responsive nft-card

    2
    Abhi•320
    @abhi-zeroPosted about 1 month ago

    Hey bro, you used position: absolute for your overlay. If you want the image hover effect to match the given task/project, you need to use the opacity property. Set the overlay's opacity to 0 initially, and then change it to 1 in the hover rule. The value 0 will hide the overlay, and the value 1 will make it visible.

    0
  • Abhi•320
    @abhi-zeroPosted about 1 month ago

    In the mobile version of your site, the image overflows to the right side. To fix this, I think you should use md:hidden { overflow: hidden;} </code> because there is a div with the class name md:hidden, and you placed the image inside it. We need to apply the overflow rule to the container, which is why it should be written like this.

    Marked as helpful
    1
  • Abhi•320
    @abhi-zeroPosted about 1 month ago

    It's looking good. I think you need to add some margin around the main grid.

    0