Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
5
P

finkusuma-dev

@finkusuma-dev130 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

  • Product Preview Card with Sass (SCSS)


    P
    finkusuma-dev•130
    Submitted 3 months ago

    I'll really appreciate if there is anyone who can take a look at the Sass partial and have suggestions of what to improve.


    1 comment
  • Responsive Recipe Page utilizing both `px` and `rem units


    P
    finkusuma-dev•130
    Submitted 5 months ago

    I got feedback from Grace Snow for not using sections for this challenge as they don't add benefit. Each of block already has headings that can be used as accessibility navigation. But I still don't understand in which cases the sections are necessary. So if anyone already has clear understanding about this please let me know!


    1 comment
  • Social links profile implementing `:focus-visible` Pseudo-Class


    P
    finkusuma-dev•130
    Submitted 5 months ago
    • What methods do you usually use to write rem? On this challenge I use calc() function.
    • To solve the problem of card shrinks when using max-width inside a flex, I use width and min() function:
      .card{ 
        width: min(calc(327rem / 16), calc(100vw - (24px)));
        /* max-width: 327px */
      }
      
      Do you know any other solutions?

    1 comment
  • I Discovered a Lot of Things on this Blog Preview Card Challenge


    P
    finkusuma-dev•130
    Submitted 6 months ago
    • Usually when I saw a card component, it didn't have interactive elements inside the card. But the card element itself as a whole is interactive (can get focus, hover, has animation, etc). So this challenge is a bit confusing to me. But nevertheless, I did the challenge by adding the anchor element inside the heading, wrapping the text.
    • I used figure element to wrap the image, but I removed it. As this is only a component, and the blog page will list many of this components so the image won't relate with the main content of the page. What is you opinion?
    • Is wrapping the published date with the time element a best practice?
    • I'm using BEM together with nested CSS. Do you recommend this method for more complex challenge?

    Feels free to give suggestions if you see some of my code needs improvements. And also I would greatly appreciate if you could review and give feedback (or comments) to my process and discoveries on this challenge.


    1 comment
  • QR Code Component with Lazy Loading Image


    P
    finkusuma-dev•130
    Submitted 6 months ago

    I've tried to apply the semantic HTML, but I don't know if my code is correct or not. If anyone has suggestions of how to improve it, please contact or message me.


    1 comment

Latest comments

  • MgMyatHtayKhant•220
    @MgMyatHtayKhant
    Submitted 3 months ago

    Responsive Product preview card using Flexbox

    2
    P
    finkusuma-dev•130
    @finkusuma-dev
    Posted 3 months ago

    Nice job overall, your solution looks similar with the design. You use picture element and assign the right images for mobile and tablet layouts. You also correctly use media query to implement mobile and tablet layout.

    I see that there are several improvements that could be made:

    # Mobile layout

    ## The card shouldn't be in fixed width

    You set a fixed width for the card in the mobile layout. This makes the page to have different margins depending on the width of the mobile devices. You can see this in the device toolbar (Chrome) or responsive design (Firefox). You will see that the margin can be smaller (in a small form factor) or larger (in larger form factor such as iPhone 14 Max).

    In mobile layout it's best not to set a fixed width, because we need the page to be dynamically fill the width of the device dimension.

    You can remove the max-width constraint in the .container:

    /* .container > * {
      max-width: 330px;
    } */
    

    ## The card shouldn't be vertically centered

    In mobile layout, the card shouldn't be vertically centered. Because in small form factor such as mobile phone, where the view is very limited, users won't be able to scroll if the content is longer than the device height. So it's better not to assume that the content will always fit the mobile form factor.

    You can remove the .d-flex class from the body:

    <!-- <body class="d-flex"> -->
    <body>
      <!---->
    </body>
    

    And you also can remove the height constraint from the body:

    body {
      /* height: 100vh; */
    }
    

    However, on the tablet layout, where it has larger dimension than the phone, you can vertically center it.

    @media only screen and (min-width: 48em) {
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    

    But of course, generally, it's also not always correct. Whether to use a vertically centered layout or not in the tablet also depends on the content. A longer content sometimes also doesn't always fit the height of the tablet display.

    While there are options in the tablet layouts, in mobile, it's better to choose the safest option.

    # Changing the Html font size

    You set the Html font size to be 14px on mobile, and then set it to the normal 16px in the tablet. Maybe you do this to make the fonts look visually better on mobile. But you should never do this.

    16px is the standard font size that is used to make the text readable. In web dev theory, the page that we created, should not only looks visually nice, but also accessible as well. That means we should never decrease the font size, as it will create issues for users with reduced eye sight.

    You can read these two resources from the experts regarding the font size, pixels and rem. Gracy Snow advises about what to do and not to do regarding the font size. And Josh explains in details of when we can use both pixels and rem in our project. I hope you can find it useful.

    • https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/.
    • https://fedmentor.dev/posts/rem-html-font-size-hack/.
    Marked as helpful
  • Ahmed Ali•650
    @qayoommunawar
    Submitted 5 months ago
    What specific areas of your project would you like help with?

    The last section of nutrition, what is the best way to make it more project like ? using table or what ?

    Responsive simple recipie page using CSS and Html

    2
    P
    finkusuma-dev•130
    @finkusuma-dev
    Posted 5 months ago

    Yup, it should be using table for nutrition list. Where calories, carbs, protein, and fat are the row headers. Use <th scope="row"> so the screen readers mark it as row headers. Here is the MDN th documentation with examples.

    # Other Suggestions

    ## Using the correct semantic

    You should put the solution inside an article element, because this post about the recipe can be indenpendently distributable. You can read more about this article element on MDN article documentation.

    Then put the article inside main element, as it indicates the primary content of the page.

    If you want to show the attribution you can put it inside footer element.

    <body>
      <main>
        <article class="container"></article>
      </main>
      <footer class="attribution"></footer>
    </body>
    

    ## Make the image expand through the container paddings

    On the mobile screen, the image should have no left, right, and top paddings. You can see this on the mobile-design.jpg on the design/ folder on the starter files provided.

    To achieve this you can use negative margin on the image element, and extend the width of the image by adding the left and right container padding values.

    .container {
      /* Use this value as a reference to extend the image width */
      padding: 32px;
    }
    
    @media (max-width: 480px) {
      .container {
        max-width: 100%;
        border-radius: 0;
    
        /* As you can see on the mobile design, the container doesn't have the top padding */
        padding-top: 0;
      }
    
      .container img {
        /* Extend the width by adding left & right container padding values*/
        width: calc(100% + (2 * 32px));
    
        /* Position the image to span across the left and right container padding */
        margin-left: -32px;
        margin-right: -32px;
    
        /* Remove border radius on the image*/
        border-radius: 0;
      }
    
      body {
        padding: 0;
      }
    }
    

    ## Use the heading elements correctly

    You've correctly set the h1 heading on the page title "Simple Omelette Recipe". But you must fix the other headings. These are the list of corrections I could find:

    • The page must only have one h1 element. So the others must be h2 or h3.

    • You shouldn't skip heading from h1 to h3. Headings are used to structure the page, so the headings must be in order, from h1, h2, h3. You shouldn't choose the h3 heading instead of h2 just because h3 has font size you wanted. Use CSS to style the h2 if you want to change how big the text is. You can read more about this on FEM mentor post on the heading order.

    • I saw you put h3 inside the list-item. You should never do this. Use the headings to title the sections. Don't use it for other purposes like to make some text looks big and bold. If you want to style some of the text inside list-item, you can use span element and style it using CSS.

    ## Use CSS custom properties

    To make setting the color easier you could use CSS custom properties to store the color values as described in the style-guide.md. Then use the custom properties using var() function.

    :root(
      --color-rose-800: hsl(332, 51%, 32%);
    )
    
    h2 {
      color: var(--color-rose-800);
    }
    

    ## Coloring the list-item markers

    You haven't set the color of the list-item markers. To do this you could use ::marker pseudo element.

    ::marker {
      color: var(--color-Rose-800);
    }
    
    Marked as helpful
  • P
    Coco•60
    @cocoelizabeth
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of how I integrated accessibility features into the design, particularly through the use of ARIA attributes (which I have not used in my previous designs) which make the website more navigable for users with disabilities. I also think my CSS is structured well and would be easy to update to a different theme.

    Next time, I would like to explore more advanced CSS techniques or perhaps incorporate a CSS framework like Tailwind CSS to streamline the development process further. I could also add my own information to this in the future.

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

    Applying the CSS for the hover, focus and active states of the social links

    Initially, I was having issues getting the color of the text in the <a> tags to change when I hovered over the <li> elements. I could get the background to change but the text (which was wrapped in an <a> tag inside the <li>) was only changing color if I directly hovered over the text, not if I hovered over the <li> outside of the text. To fix this, I adjusted the CSS so that the <a> tag inside the <li> filled the entire space of the <li>. This way, hovering anywhere over the <li> will trigger the hover effect defined for the <a> tag.\

    Here are the specific adjustments that I made to the css:

    1. Set the <a> tag to display:block in order to make the <a> tag fill the entire space of its parent <li> element.
    2. Moved the padding from the <li> to the <a> tag. Since the <a> tag is now a block element, it can handle padding, margins, and other box-model properties.
    3. Applied the :hover, :active, and :focus pseudo-classes directly to the <a> tags. This change guaranteed that both the background and text color changes would be visible when any part of the <li> was hovered over, not just the text.

    Here is the relevant html and CSS code:

    <li class="social-link-item m-t-200">
      <a
        class="social-link-item-text text-preset-2 bold"
        href="https://github.com/cocoelizabeth"
        target="_blank"
        aria-label="Visit my GitHub profile"
      >GitHub</a
      >
    </li>
    
    .social-link-item {
      width: 100%;
      list-style: none;
    }
    
    .social-link-item a {
      text-decoration: none;
      display: block;
      background-color: var(--color-grey-700);
      text-align: center;
      border-radius: 8px;
      padding: var(--spacing-150);
      transition: background-color 600ms ease-in, color 600ms ease-in;
    }
    
    .social-link-item a:hover,
    .social-link-item a:active,
    .social-link-item a:focus {
      background-color: var(--color-green);
      color: var(--color-grey-700);
      cursor: pointer;
      outline: none;
    }
    
    What specific areas of your project would you like help with?

    1) INSTAGRAM LINK ISSUE
    I had a really annoying issue with the Instagram link that I would help with. For some reason, when I used the link href="https://www.instagram.com/coco.elizabeth_/", the browser added inline styling (color and text-decoration) to the <a> tag for the instagram social link item. I couldn't find anything online about why this was happening but it happened to me in both Chrome and Safari, and it happen on my local server as well as when I published the project on GitHub Pages.

    Here is a screenshot of what was happening:
    (Notice the purple, underlined instagram link)

    This is the HTML I was getting when I inspected the code:
    (Notice the added style attribute, which was not added to any of the other links)

    <li class="social-link-item m-t-200">
       <a 
         class="social-link-item-text text-preset-2 bold" 
         href="https://www.instagram.com/coco.elizabeth_/" 
         target="_blank" 
         aria-label="Follow me on Instagram" 
         style="color: rgb(206, 167, 212); text-decoration: underline;">Instagram</a>
    </li>
    

    Things I tried to fix it:

    1. Setting a :visited CSS pseudo-class in the CSS - This did not work.
    2. Tested it in different browsers (Chrome and Safari). - It was happening in both browsers
    3. Pushing the site live to GitHub pages to see if maybe it was just an issue with my local server - This didn't fix the issue

    Ultimate solution/workaround:
    To fix the issue, I used a URL shortener and replaced the link with the shortened URL: href="https://tinyurl.com/coco-elizabeth-intsa".

    While this workaround fixed the issue, I am still confused about why it was happening. If anyone has any ideas of what would have caused this, please let me know!

    2) FIGMA ANIMATION/TRANSITION I found it difficult to get my hover effect to fade in and out exactly like the Figma prototype and I still don't think it's perfect. Does anyone have a good resource for CSS transitions/animations or how to export the animation properties from Figma to CSS without a developer plan? Is this even something you could do with a developer plan?

    Apart from these two things, any feedback of how I can improve is always welcome :)

    Responsive Social Links Profile Using CSS Flexbox

    2
    P
    finkusuma-dev•130
    @finkusuma-dev
    Posted 5 months ago

    Very nice, your screenshot solution looks similar to the actual solution. And you wrap the solution with main element and the attribution with footer element, which I think are the correct semantics to use.

    I haven't dweleve into the accessibility yet at this point, but finding info about aria-label and how to use it on the anchor link, I think you're solution is correct and you've done a great job to make the links accessible.

    You style the page and setup the CSS classes like utility classes used by Tailwind. Which I think looks cool and highly reusable. Maybe I should try this sometime 🙂.

    # Suggestions

    ## .social-link-item width

    You don't need to set the .social-link-item width to 100%. Because you already set its child a element display to block, it automatically fills the available horizontal space. And the li element also gets the intrinsic width from its child.

    .social-link-item {
      /* width: 100%; */
      list-style: none;
    }
    

    ## .user-photo object position

    I think for .user-photo you also don't need to specify object-position: center;. On object-position MDN doc mentions that the initial value of object-position is 50% 50%. And 50% 50% also equals to center.

    .user-photo {
      object-fit: cover;
      width: 100%;
      height: 100%;
      border-radius: 9999px;
      /* object-position: center; */
    }
    

    You can also remove the user-photo-container div, and apply the 88px width and height directly to the img class .

    <!-- <div class="user-photo-container"> -->
    <img
      class="user-photo"
      src="assets/images/avatar-jessica.jpeg"
      alt="User photo for Jessica Randall"
    />
    <!-- </div> -->
    
    .user-photo-container {
    }
    .user-photo {
      width: 88px;
      height: 88px;
      object-fit: cover;
      border-radius: 9999px;
      /* object-position: center; */
    }
    

    ## Instagram Link

    I tried to change the Instagram link back to "https://www.instagram.com/coco.elizabeth_" but it looks okay on my browser. And it doesn't show the strange purple underline style like yours.

    https://i.ibb.co.com/gbs5sNB4/instagram-link.jpg.

    If you can change it back the Instagram link on your github page, maybe I can try to debug with my browser to see the problem.

    ## Container's Width

    On mobile, you set social-links-card-container max-width to 327px but set the min-width to 100%. This prevent the max-width to ever taking effect. So it will be the same if you don't specify the max-width at all.

    While on the desktop, you set both max-width and min-width to 384px. I think this is not the correct way of implementing the design.

    You see on the figma, container's width on mobile design has length of 327px and the space between the container and the edge of the screen is 24px on both sides. That means the container's maximum width supposedly to be 327px, when the screen width is more than 327px + 2 * 24px. So, you can set max-width: 327px. You don't need to specify the min-width, but it's better to set it to min-content.

    .social-links-card-container {
      max-width: 327px;
      min-width: min-content;
    }
    

    This is I think the correct way. But because you use flex to center the container, it makes the container shrinks horizontally. To confirm this, try to disable the flex by commenting the display:flex on the main element, you will see that the container is in its maximum width of 327px. The question is, why the container shrinks when the flex is applied?

    From my trials on my solution, when applying flex, the flex child shrinks to fit-content width. fit-content width is width that depends on the most wide element of the flex children. The main flex child is the container. And the most wide child element of the container is the description: "Front-end developer and avid reader.". The description's size plus (2 * 24px container's padding) is less than 327px. So the container shrinks to that size.

    To confirm this, try to add 4 or more characters to the description, the container will extent to the maximum width as the description goes beyond 1 line.

    To solve this shrink problem, instead of using max-width, you can use width. So the width must be able to work like max-width. It should be able to scale along with the screen size but the maximum should be 327px. How can we make this functionality?

    You can use min() function for this. min() function accept values separated by comma and it will choose the minimum value from values we specify. So you can specify that the max-width should by 327px or 100% width, and choose between this two which is the minimum. Hence, the width and the min() function can be written as:

    .social-links-card-container {
      width: min(327px, 100%);
      min-width: min-content;
      padding: 24px;
    }
    

    You don't need to set the max-width because the min() function will ensure that the width will be 327px if the screen size is more than 327px + the main paddings.

    And on the dektop media query you can write:

    .social-links-card-container {
      @media only screen and (min-width: 481px) {
        card-width: min(384px, 100%);
        padding: 40px;
      }
    }
    

    ## FIGMA ANIMATION/TRANSITION

    I also haven't figure out the figma animation transition yet. You can share me your findings once you know how to do it 🙂.

    Marked as helpful
  • P
    Nazarii Sabadash•50
    @rr0x9
    Submitted 6 months ago

    blog-preview-card

    2
    P
    finkusuma-dev•130
    @finkusuma-dev
    Posted 6 months ago

    Hi, your solution looks really nice and it almost identical with the design, good job 👍🏻.

    You have main element wrapping the card and footer element wrapping the attribution, which I think these are the correct semantic to use.

    About the figure, I'm myself still not 100% sure of how to use it. My solution here, completely removed figure from the code. I thought that, as this is a component, it won't relate with the main content of the page when the component is inserted to, so I removed it. And I'm still waiting for more expert person to give feedback on this matter.

    Suggestions

    The interactive element is excellent, I can see the hover effect with a transition when I pointed my mouse over the heading. I think you're just missing a very little here. The challenge is also requires the interactive element to be able to receive focus. Which you can check by clicking the page on an empty area and then press tab. And this focus and hover actually can be done by adding an anchor element. You can add anchor inside the heading like this:

    <h1><a href="#">HTML & CSS foundations</a></h1>
    

    Then you can replace your CSS code .card h1 :hover with .card a:hover.

    For the heading, on my solution I use h2 (I know some other person prefers to use h3). The reason is, once again, it is only a card component. And it will be used on the page somewhere where there will be h1. Because there should be only one h1 element, that means we need choose something else.

    I also noticed that you haven't put the code on the GitHub. Or maybe your repository haven't made public. As when I clicked the view code, I got missing page error.

    That's it from me. You can also give me feedback on the same challenge if you want here. I would really appreciate it if you do. 🙂

  • Ayodeji Elegbede•40
    @Goodboy619
    Submitted 6 months ago

    QR code component solution using HTML and CSS

    1
    P
    finkusuma-dev•130
    @finkusuma-dev
    Posted 6 months ago

    Hey, your solution is good overall. But I noticed that you haven't setup the font as described on the challenge. It's actually pretty simple, you can just follow these steps:

    1. Go to the Google Font page: https://fonts.google.com/specimen/Outfit (You can get this link on the style-guide.md). Click "Get Font" on the top right. Then click "Get Embedded Code".
    2. You will see the instruction to embed code, copy the code and put it on html head like this:
    <head>
      ...
      <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="styles.css">
      <title>Frontend Mentor | QR code component</title>
    </head>
    

    On the styles.css you can just use the font, and don't forget to add the fallback font as well. Fallback font is font that will be used when the font that we specified is not available. Such as when we use the Google Online Font, there might be problem with the internet connection, so the font fail to be downloaded. sans-serif is the fallback font on the example code below.

    body {
      font-family: Outfit, sans-serif;
    }
    
    Marked as helpful
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