Skip to content
OverviewSolutions
5
Comments
6

Ahsan

@ahsanmaSri Lanka110 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Ahsan•110
    @ahsanmaPosted about 1 month ago

    Hi @Pattykev,

    You have tried a different approach in coding the design.

    I have gone through your code and here are my thoughts,

    1. Consider setting your paddings, margins and font-face properties to more align with the design.

    2. I would avoid using id's, as it would be difficult to override it unless with more id selectors, in the case of large codebases, maintaining it would become difficult.

    3. divs with a class of .bloc, have two flex container properties, which only works if this container is set to display: flex. It does not work with flex items.

    Hope this helps!

    0
  • P
    ⭐⭐--Taylor--⭐⭐•140
    @Taylor-McNeilSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Not letting the spacing on the lists get me. It was quite annoying but an easy fix once I figured it out.

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

    I was using too many divs when I first built the site, and this led to major spacing issues when trying to align the markers

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

    Not much, maybe the media queries? Did we even need media queries to make this work?

    Recipe Page

    1
    Ahsan•110
    @ahsanmaPosted about 2 months ago

    Hi @Taylor-McNeil,

    Great!, you have achieved the design with minimal code,

    I went through your solution code and my thoughts are below,

    1. Instead of using negative margin for lists, you could set list-style-position to inside and then style it via ::marker pseudo element. Although it has limited properties to style.

    2. For the main image, you have used negative margins. Consider using padding for desktop design using an image wrapper, and then remove the padding for mobile design. Also, you have used calc() to set the width of the image. Instead, you could use max-width: 100%, which will scale the image to the container size.

    3. <hr /> tag is deprecated. Instead, try adding a wrapper with padding and adding a border-bottom.

    4. Consider keeping meaningful names for classes as a best practice.

    Hope this helps!

    Marked as helpful
    1
  • Ahsan•110
    @ahsanmaPosted about 2 months ago

    Hi @shenglow,

    You have done a great job,

    I checked your solution and wanted to share my thoughts,

    • You could use Flexbox which makes it easy to style, whereas using absolute positioning, takes out from the document flow.

    • Consider making meaningful names for CSS Custom Properties, for example for color, you could use --clr- and for font-weight you could use --fw- etcetera.

    Hope this helps

    0
  • Ahsan•110
    @ahsanmaPosted about 2 months ago

    Hi @shawna-donnelly,

    You have done an awesome job

    Marked as helpful
    0
  • P
    Selina Lavery•50
    @SelinaLaveryDevSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of how much better I am getting at creating the semantic html, and CSS based on the figma file. And my use of variables for the presets. Will try to use less fixed measurements next time.

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

    With the image for the mobile screen I noticed that the border radius disappeared, then realised to use the object-fit property and set to cover.

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

    How best to set responsive measurements and still be able to get the card and content to be exact, for both desktop and mobile.

    Blog Preview Card using semantic HTML and CSS

    2
    Ahsan•110
    @ahsanmaPosted about 2 months ago

    Hi @SelinaLaveryDev,

    You have done a great job,

    I hope the responsive measurements you are referring to is, typography. In my design, I tried to achieve it using the CSS clamp() property. There is a great tool I found to calculate the desired value apart from the minimum and maximum is at https://clamp.font-size.app/

    I hope that I have added some value regarding responsive typography,

    Happy Coding

    Marked as helpful
    0
  • Aalyan Ateeb•20
    @Al-RihlaSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I learned a lot about centering the content as well as responsiveness. I would Like to learn more about them.

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

    I had almost forgotten about centering a single div. I used Sheryian Coding School to learn about it. Chat GPT also helped me in reducing extra code.

    QR-Component

    2
    Ahsan•110
    @ahsanmaPosted about 2 months ago

    Hi @Al-Rihla,

    Great job coding the design. But I have some suggestions which I think, could improve your coding.

    • Once the width of .card has been set to max-width: 320px;, setting width: 100% and height: auto for the image, would be sufficient, in my opinion, because the image would automatically take up 100% width of the container, subject to paddings and margins.

    • Referring design details in figma file regarding the padding and margins would be another improvement, since it had been provided for us rather than eyeballing and making design decisions

    I hope that I have added some value to your coding.

    Happy Coding

    0