Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
70
Comments
14
Sebastian
@dnksebastian

All comments

  • Bobaya•40
    @bobaSohaib
    Submitted 10 months ago

    Social links profile

    1
    Sebastian•1,580
    @dnksebastian
    Posted 10 months ago

    Hi @bobaSohaib,

    congrats on completing the project, it looks good! One small thing which you might want to add is some simple animations on the link elements to make it more smooth. Another thing to consider is wrapping the links in <a> elements.

    Cheers!

    Marked as helpful
  • simgeduru•50
    @simgeduru
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy with my current progress, but there are places where I'm not sure at some points. I think I will move forward better after I am sure about them

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

    i had to make calculations when setting the padding values in mobile and dextop view, this forced me

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

    How can I achieve proportional values on mobile and desktop without using media queries? I also don't find using % logical. I used media queries both to adjust the size of the div and the padding values. Is this logical? Also, I'm struggling with writing media queries, and you might find them illogical upon inspection.

    Responsive page with grid flex media-query

    2
    Sebastian•1,580
    @dnksebastian
    Posted 11 months ago

    Hi @simgeduru,

    good job on finishing your project! As for your question about media queries and responsiveness, I recommend learning more about the minimum and maximum value approach, using various css functions, such as min(), max() and clamp() in combination with relative units. You can read more about it on css-tricks.com, for example in this article:

    https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/

    I also recommend watching Kevin Powell's materials on YouTube :)

    Another thing which I can suggest to you is using proper semantic HTML elements, for example instead of using the <div>'s for your social media links, you can wrap them in a list of anchor (<a>) elements.

    Hope that helps, keep it up!

  • Ryan O'Hanlon•140
    @Ryan-OHanlon
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    What I'm most proud of for this challenge is being able to apply CSS Flexbox as a solution to this challenge. I now have a better understanding how Flexbox works and that it should be used on container elements and will affect only the child elements directly inside that parent element. Any elements that are grandchildren will not be affected by Flexbox.

    What I would do differently next time would be to design the HTML framework and CSS naming schema to be more efficient and understandable. Developing an effective HTML framework to design CSS rules around is a lot more important when I had to start creating container elements just to be able to position images on top of each other.

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

    The main challenge I had with this project was applying the :hover effect over the NFT image and having both images and the background color stay inside the container.

    I was able to overcome this by creating two div elements. The first div element to serve as a container for both images and a div container. I was able to use the position attribute to place both images and the div container classified as overlay to be inside the parent div classified as container.

    Then I set the opacity of the overlay to 0 and the display attribute of the hover-img to none to make them invisible. Then using the :hover rule, I set the display of the hover-img to block to be visible and the opacity of the overlay to .5 to make the cyan color appear.

    .container {
        position: relative;
        width: 100%;
        max-width: 320px;
    }
    
    .container:hover .hover-img {
        display: block; 
    }
    
    .hover-img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
    }
    
    .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .3s ease;
        background-color: hsla(178, 100%, 50%);
        border-radius: 1em;
    }
    
    .container:hover .overlay {
        opacity: .5;
      }
    
    What specific areas of your project would you like help with?

    If there is help I would like with this project it would be to have a better understanding of the position attributes and if there is a better solution to achieve the same effect of creating the overlay over the NFT image because surrounding an entire div element with an element does not seem like the best solution.

    NFT preview card component using CSS Flexbox and :hover

    1
    Sebastian•1,580
    @dnksebastian
    Posted 11 months ago

    Hey Ryan, good job on finishing your project! If you're looking for a nifty solution for making various overlays, I recommend experimenting with css ::before and ::after pseudoelements. Using them can help you reduce the number of HTML elements. You can see a few examples and read more about this method here:

    https://bryanlrobinson.com/blog/how-to-css-after-elements-for-background-overlays/

    Hope that helps, keep it up!

  • Daniel•70
    @RadiantReversal
    Submitted over 1 year ago

    A Simple Recipe Page with Sass

    #sass/scss
    1
    Sebastian•1,580
    @dnksebastian
    Posted over 1 year ago

    Hi Daniel,

    congrats on finishing the project! Here's a couple of things I've noticed after looking into your code:

    1. there are a few noticeable differences between the design and solution, most importantly you can improve paddings and 'preparation time' section which should have a different background color than the whole recipe card,
    2. you can improve the structure of your code by using more semantic tags, such as <article>, <section> and <table>,
    3. it's recommended to use more descriptive alt attributes for accesibility, currently the 'image' information is redundant because it can be inferred from the <img> tag,
    4. it's possible to make the solution more responsive, for example check the resolutions between 480px and 800px.

    Hope that helps, keep it up!

  • Rob Meijer•100
    @robmeijer
    Submitted over 1 year ago

    Social links profile

    1
    Sebastian•1,580
    @dnksebastian
    Posted over 1 year ago

    Hi Rob,

    good job on finishing the project! One minor thing which I've noticed is that instead of using a div which wraps the buttons, you might want to change it into an unordered list with anchor tags to make the code more semantic. Using <a> instead of <button> in this case sounds like a better choice because we can assume that social media links have their href attributes, buttons on the other hand should generally be used for JS interactivity :)

    Here's a condensed article covering the issue: https://css-tricks.com/a-complete-guide-to-links-and-buttons/

    Hope that helps!

    Marked as helpful
  • Anna P. M.•390
    @annapmarin
    Submitted over 2 years ago

    Age Calculator built with React

    #react#sass/scss
    1
    Sebastian•1,580
    @dnksebastian
    Posted over 2 years ago

    Hi Anna,

    Good job on finishing the project! One small thing which you might want to add is another validation check for future dates within current year :) You can also add labels for input fields and a meaningful name/label for the submit button in accordance with accessibility rules. Apart from that, everything looks good!

    Hope that helps, keep it up!

    Marked as helpful
  • Maciek Klimowicz•30
    @manonthemon
    Submitted over 2 years ago

    Non responsive qr element - first attempt at design without tutorials

    3
    Sebastian•1,580
    @dnksebastian
    Posted over 2 years ago

    Hi Maciek!

    Good job on your project! You can center elements in their parent containers in a number of ways. For example, in this case you can use min-height: 100vh; display: flex; align-items: center; justify-content: center; on the body element and eliminate the margins you used on <main>. Keep it up :)

    Cheers!

    Marked as helpful
  • Bazthos•430
    @Bazthos
    Submitted over 3 years ago

    Four card feature section

    1
    Sebastian•1,580
    @dnksebastian
    Posted over 3 years ago

    Hi @Bazthos,

    the solution looks good and your code is clean! The only thing which you might want to tweak up is adjusting the media queries, so that your project is fully responsive - for example, check your desktop view between 980px - 1300px. Apart from that, everything looks fine to me - keep it up!

    Marked as helpful
  • Timic Ivey•300
    @Lwmeek
    Submitted over 3 years ago

    I used flex for mobile mode and a grid for 1440px screen size.

    3
    Sebastian•1,580
    @dnksebastian
    Posted over 3 years ago

    Hi,

    in order to easily center your card with flexbox, use 'justify-content: center' on your 'body' element and remove the 'position' and 'left' properties from 'card_container'.

    Hope this helps!

    Marked as helpful
  • Elysson Tanaka•90
    @elyssontanaka
    Submitted over 3 years ago

    Huddle landing page using Flexbox

    1
    Sebastian•1,580
    @dnksebastian
    Posted over 3 years ago

    Hi @elyssontanaka

    Your solution looks clean and it's very well done! One small thing you might want to consider is using 'transition' CSS property on your hoverable elements, just to make the color changes smooth. You can also use 'background-size: cover' on your body element in order to make it work on all resolutions.

    Keep it up!

    Marked as helpful
  • Devesh•120
    @devesht21
    Submitted over 3 years ago

    NFT Preview Card Design Using HTML CSS

    #itcss
    1
    Sebastian•1,580
    @dnksebastian
    Posted over 3 years ago

    Hi @devesht21

    I've looked into your project. Overall you did well! Here's a couple of minor things you might want to implement:

    • in order to improve the UX, you can use cursor: pointer on the elements that are supposed to be clickable,
    • you can make your code more readable and ready for future modifications by using CSS custom properties,
    • you can improve your HTML structure by using proper semantic tags, such as <main>, <section> or <footer> instead of plain divs,
    • you can clean up your repo by getting rid of the unnecessary files, such as readme template

    Hope that helps, keep it up!

    Marked as helpful
  • Paulina•20
    @paulinahs
    Submitted over 3 years ago

    Profile Card

    2
    Sebastian•1,580
    @dnksebastian
    Posted over 3 years ago

    Hi Paulina,

    overall you did well! There's only a couple of small things which you might want to tweak up:

    • it's generally a good practice to name your classes or ID's in a way that explains what the given element does; for example you could use 'user-location' here: <p class="london">,
    • you could easily get rid of the accessibility issues by using semantic elements, such as <section> or <footer> instead of plain <div>'s,
    • it's recommended to avoid using HTML when it comes to the visual aspect of your site - that's why if you want to keep the line break in your footer, you can use CSS or just wrap your sentences in a block element, instead of using the <br> tag. Anyway, these are really minor points :)

    Hope that helps, keep it up!

  • Hope_15•20
    @P15taank
    Submitted over 3 years ago

    nft-preview-card-component Using HTML and CSS

    #accessibility
    2
    Sebastian•1,580
    @dnksebastian
    Posted over 3 years ago

    Hello,

    1. you can position the footer by using 'position: fixed' or 'position: absolute' on your '.attribution' element, and then moving it as you like with 'bottom' and 'right/left' values. As for the footer, you can also get rid of the nested div and use the '.attribution' class directly on your <footer> tag, which would tidy up your code a little.

    2. As for the units - it all depends on what you need really. However, relative units such as rem or % are more common because typically you want your project to be responsive. I recommend Kevin Powell's video - 'Are you using the right CSS units?' which explains this topic in detail.

    Hope this helps!

    Marked as helpful
  • Mariem Bchir•100
    @Mabchir
    Submitted over 3 years ago

    responsive nft card using CSS and flexbox

    4
    Sebastian•1,580
    @dnksebastian
    Posted over 3 years ago

    You can easily get rid of the shaky hover effect:

    • delete the 'visibility' rules both from the '.rect' and '.main-img:hover + .rect' selectors,
    • set 'opacity: 0' rule in the '.rect' element,
    • change your last selector ('.main-img:hover + .rect') into: '.rect:hover' and there set 'opacity: 0.5'.
    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

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