Skip to content
OverviewSolutions
70
Comments
14

Sebastian

@dnksebastianPoznań1,580 points

Practicing to become a professional web developer

I’m currently learning...

React & TypeScript

Latest solutions

View more solutions

Latest comments

  • Sebastian•1,580
    @dnksebastian

    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
    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

    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
    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

    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!

  • Sebastian•1,580
    @dnksebastian

    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!

  • Sebastian•1,580
    @dnksebastian

    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
  • Sebastian•1,580
    @dnksebastian

    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
View more comments