Skip to content
OverviewSolutions
70
Comments
14
Sebastian
@dnksebastian

All comments

  • Sebastian•1,580
    @dnksebastianPosted 2 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
    1
  • simgeduru•50
    @simgeduruSubmitted 4 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
    @dnksebastianPosted 4 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!

    0
  • Ryan O'Hanlon•140
    @Ryan-OHanlonSubmitted 4 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
    @dnksebastianPosted 4 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!

    1
  • Daniel•70
    @RadiantReversalSubmitted 9 months ago

    I really didn't need Sass. :) What's the best approach to make this challenge? what can I improve in my code?

    A Simple Recipe Page with Sass

    1
    Sebastian•1,580
    @dnksebastianPosted 9 months 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!

    1
  • Rob Meijer•100
    @robmeijerSubmitted 10 months ago

    A relatively straight-forward challenge, but still had some interesting problems, like making sure the button elements are displayed at full-width.

    Also tried a new approach to get as much fine-grained control over the clamp() function as possible.

    Social links profile

    1
    Sebastian•1,580
    @dnksebastianPosted 10 months 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
    1
  • Anna P. M.•390
    @annapmarinSubmitted over 1 year ago

    This is my solution for this challenge 💫👩🏻‍💻

    Built with:

    • React
    • SCSS

    Any suggestions on how I can improve and/or reduce unnecessary code are welcome!

    Age Calculator built with React

    1
    Sebastian•1,580
    @dnksebastianPosted over 1 year 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
    0
  • Sebastian•1,580
    @dnksebastianPosted almost 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
    1
  • Bazthos•430
    @BazthosSubmitted over 2 years ago

    Hello Everyone !

    This is my solution for the challenge : Four card feature section

    Any advices is welcome!

    Thank for your time and happy coding :)

    Four card feature section

    1
    Sebastian•1,580
    @dnksebastianPosted over 2 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
    1
  • Sebastian•1,580
    @dnksebastianPosted over 2 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
    0
  • Sebastian•1,580
    @dnksebastianPosted over 2 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
    0
  • Sebastian•1,580
    @dnksebastianPosted over 2 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
    1
  • Paulina•20
    @paulinahsSubmitted over 2 years ago

    Constructive feedback please :)

    I am aware I put the text at the bottom of the page, which might not have been needed.

    Profile Card

    2
    Sebastian•1,580
    @dnksebastianPosted over 2 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!

    0