Skip to content
OverviewSolutions
18
Comments
16
P
Matthew
@MattJM1007

All comments

  • Melbita•100
    @Melbita
    What specific areas of your project would you like help with?

    The overlay I'm using in the hover state, for some reason is covering a couple more of pixels than the image, Can anyone spot the issue?

    NFT card challenge

    1
    P
    Matthew•360
    @MattJM1007

    Hi Melbita! I've come across this in my own projects. I'm not sure the exact reason this happens, I think it has something to do with there being a space for text under the image. But adding a line-height: 0; to your .card_image class gets rid of that extra space below the image when the overlay is on.

    Hope this helps :)

  • tommy flinch•130
    @tflinch
    What are you most proud of, and what would you do differently next time?

    I am proud i was able to closely mirror the challenge

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

    Biggest challenge was learning grid. I went to my trusty cheat sheet to learn how to align child elements.

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

    I need help learning grid. I wasnt sure to align my first and third card.

    .card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        background: white;
        border-radius: 10px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        width: 250px;
        min-height: 200px;
        border-top: 4px solid transparent;

        img {
            align-self: self-end;
        }
    }
 .card:nth-child(1) {
        grid-column: 2 / 3;
        grid-row: 1;
        align-self: center;
    }


    .card:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .card:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    four-card-feature-section-master

    #pure-css
    2
    P
    Matthew•360
    @MattJM1007

    Hi Tommy! Great job working through this project! I'd like to help with your grid question.

    In regards to placing the items in the same way as the design, I would make the grid to be 4 rows, instead of 2. This way you can position the items in a staggered way as in the design. I edited your code to add more rows and adjust where each card starts:

    .hero {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 20px;
        justify-content: center;
        align-items: center;
        padding: 40px;
        padding-inline-start: 150px;

        @media(width < 760px) {
            display: flex;
            flex-direction: column;
        }

.card:nth-child(1) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        align-self: center;
    }


    .card:nth-child(2) {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .card:nth-child(3) {
        grid-column: 2;
        grid-row: 1 / 4;
    }

    .card:nth-child(4) {
        grid-column: 3;
        grid-row: 1 / 3;
    }

    Hope this helps!

  • P
    Matthew•360
    @MattJM1007

    Overall great job! I like it. One note is that your error icons when submitting an answer is not working

  • P
    Matthew•360
    @MattJM1007

    Really great job! I wasn't sure how to add the JS logic to account for how long the password is to determine strength. But I see you did it. Well done!

  • P
    Matthew•360
    @MattJM1007

    wow really great job! looks like you really nailed this one!

  • P
    Matthew•360
    @MattJM1007

    Really great job! I like that your javascript is very short and simple. My one suggestion would maybe to have the data load when the page loads, as right now it is just empty. Otherwise fantastic work!

  • P
    Matthew•360
    @MattJM1007

    Great job! I like that your javascript looks very simple and straightforward. It looks like the min height on your main container is making the desktop site too big. I think if you remove that you could let the content dictate the size instead of setting that height.

    Marked as helpful
  • P
    Richard•410
    @Richard1876
    What are you most proud of, and what would you do differently next time?

    i didn't put the social links in a link tag ill do that next time

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

    to add the point down edge in the social like section was new to me but i improvise

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

    Feedback is welcome.

    Article preview component

    1
    P
    Matthew•360
    @MattJM1007

    Hi Richard! Overall it looks good. The layout is good and noticed you added the social buttons! Great job. Only thing I would improve is maybe brightening up the colors to match closer to the design. Could also be worth considering semantic html for accessibility if that's something you want to learn.

  • P
    Matthew•360
    @MattJM1007

    Great job! I would just thinking about decreasing the size of some of the headings to match the design. Otherwise looks great!

  • Bakhtiar•380
    @b4khtiar
    What are you most proud of, and what would you do differently next time?

    _

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

    _

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

    _

    HTML/CSS only Testimonial grid section

    1
    P
    Matthew•360
    @MattJM1007

    Really great job here. Everything looks well done and impressive!

  • Anuar06•80
    @Anuar06
    What are you most proud of, and what would you do differently next time?

    0

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

    0

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

    0

    Responsive Four Card Feature

    1
    P
    Matthew•360
    @MattJM1007

    The layout looks great and it likes you did that with just flexbox. I didn't know that was possible! Great job!

    Only thing that seems to missing is some of the text isn't styled quite right. I think that would really elevate the design. But overall, great work!

    Marked as helpful
  • rafi b•260
    @raficode2303
    What are you most proud of, and what would you do differently next time?
    • learnd about , tags.
    • how to use srcset attribute images for different devices
    • to use @media in `` tag
    • it took me more hours than what i was expected
    What challenges did you encounter, and how did you overcome them?

    it was a challenge to ensure correlation between the @media break to change image, and the grid break from 1 column to 2 columns. to overcome it i used the browser DevTools to check the result and tune it in the browser

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

    none

    responsive page using grid, flex, @media and tag

    1
    P
    Matthew•360
    @MattJM1007

    Hi Rafi. Overall this looks great! amazing job and layout looks good. One thing I noticed in your html code is that you used an h1 then an h4. I believe it is not good to skip values like this. It would better to use an h2 instead of an h4, since it won't affect the font size, but it is better for accessibility.

    Marked as helpful
  • Miarinaly•80
    @Mys1337
    What are you most proud of, and what would you do differently next time?

    The project didn't take a long time to finish and I'm becoming more faster since my first project.

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

    Nothing was really challenging. Just had to do some review for the html table

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

    I don't have any specific questions of feedback. But I would like to have your opinion about my code (quality, reusability, readability,...)

    Recipe Page With HTML & CSS

    3
    P
    Matthew•360
    @MattJM1007

    Hi Miarinaly!

    Great job completing this project! I like the way the table format came out in your solution. I struggled with that a bit on mine. As for as feedback on your code, I am a beginner myself but from what I can tell it looks good!

  • P
    Nate Valline•420
    @nvalline
    What are you most proud of, and what would you do differently next time?

    I am happy that the speed in which I completed this has improved. It was a good challenge to continue to build upon my base knowledge.

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

    I don't feel like I encountered many problems with this one.

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

    I used a switch statement to handle the button clicks. Is there a better way?

    Social Links Profile w/ "Working" Links

    2
    P
    Matthew•360
    @MattJM1007

    Hi Nate!

    First off, amazing job with this project, I can see it is nearly identical to the design. Really well done. looks amazing!

    As far as the button clicks, I am not sure myself what a switch statement is, but here is how I achieved the result in my css:

    button:hover{ background-color: hsl(75, 94%, 57%); color: hsl(0, 0%, 8%); cursor: pointer; }

    This is a hover state property where you can change the look of the element your are hovering over. Hope this helps!

    Marked as helpful
  • P
    Matthew•360
    @MattJM1007

    Great work on completing this! The layout of everything looks great.

    A couple small details, the title of the blog should be black and the hover state is yellow, it looks like you just have it set to the yellow color.

    For the description text, it should be the light gray. I also found out that you can adjust the line height of this to better match the design. I used line-height: 1.5; in my solution.

    I'll also pass on feedback I received about html, which is to use more specific tags, like <main>, <article>, <footer>, etc. This helps with accessibility from my understanding. So for example you could replace the '<div class="card">' with '<main>' in your code.

    Great job!!

  • P
    Matthew•360
    @MattJM1007

    Great job completing the work! looks like some of the fonts and body color text is off. I would double check that. Also the spacing is off between the two texts, I would check the margins

    Marked as helpful