Skip to content
OverviewSolutions
7
Comments
11
P
Kristian Haug
@klhaug

All comments

  • jamurai77•180
    @jamurai77Submitted 2 days ago
    What are you most proud of, and what would you do differently next time?

    I'm very happy with how the page layout transitions. I think it looks fairly smooth and the page looks good on all different screen sizes. I can't think of anything I would do differently.

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

    This was my first project using grid that wasn't a follow-along tutorial type thing. It threw me for a loop when I defined grid-areas on my media query and when I went back to the mobile view they had all stacked on top of each other. Kinda panicked because I didn't know where all my cards had gone. Eventually figured out that defining grid areas before mapping their positions caused them to stack in the z axis. Other than that hiccup everything felt good.

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

    I think I did pretty well, but would always welcome constructive criticism. I feel like I could always be more efficient with my code.

    Responsive testimonial page using CSS Grid

    1
    P
    Kristian Haug•140
    @klhaugPosted 2 days ago

    Looks really good!

    Maybe use something different than <span> for the names? I dunno, maybe someone else can comment on that. I used heading-tags for the name... But I don't know either if that's the most semantic way.

    Your code looks good and organized. Keep up the good work!

    Marked as helpful
    0
  • P
    Kristian Haug•140
    @klhaugPosted 6 days ago

    Hey!

    Looks great.

    Take a look at the colored top border. If you look closely you'll see that in the design the bottom of the colored line is without curves.

    See if you can figure out a solution to that.

    Hint: Look into adding an extra element instead of using top-border.

    1
  • P
    Kristian Haug•140
    @klhaugSubmitted 13 days ago
    What are you most proud of, and what would you do differently next time?

    Thinking through the entire structure before I even wrote a single line of code. And also keeping the code pretty clean, not using unnecessary class-names and id's.

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

    Not having the proper images delivered. I solved it with using the proper one, and then cropping and scaling it with a container and transform.

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

    How could I make this card even more accessible?

    Product Preview Card // HTML & CSS

    3
    P
    Kristian Haug•140
    @klhaugPosted 8 days ago

    Thank you! Fixed it now!

    0
  • P
    Kristian Haug•140
    @klhaugPosted 8 days ago

    Hey! You're well on your way here.

    Some things you could check out to improve your solution:

    1. Making the img and the text-section 50% each of their container width, so that the "line" separating them is in the center
    2. Set the background-color on the text-section to white, and the body {background-color} to the one you now have on your text section
    3. Put a fixed height on your button

    Keep up the great work!

    Marked as helpful
    0
  • P
    Kristian Haug•140
    @klhaugPosted 14 days ago

    Hi!

    Looks great!

    To make it look more alike the design, take a look into display:flex. You can then adjust the gap between the items to make the spacing more even.

    Good luck, and keep up the great work!

    0
  • P
    Kristian Haug•140
    @klhaugPosted 15 days ago

    Looks great!

    Seems like you have the same issue as me, that the numbers in the Outfit font on the ordered list doesn't look like in the design file...

    Great job!

    Marked as helpful
    0
  • P
    Kristian Haug•140
    @klhaugPosted 20 days ago

    Looks good!

    Tip: Take a look at your padding to make the content breathe a bit more inside the card.

    Keep up the good work!

    0
  • P
    Kristian Haug•140
    @klhaugSubmitted 23 days ago
    What are you most proud of, and what would you do differently next time?

    Making it look really good. Hopefully.

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

    Proper scaling when wievport shrunk. Had to use calc().

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

    Properly understanding then hierarchy of priorities within CSS, and properties affect eachother, especially when it comes to sizing.

    Blog Preview Card // Vanilla HTML & CSS

    1
    P
    Kristian Haug•140
    @klhaugPosted 23 days ago

    !Update

    Looked into using box-shadow as the border instead to get the the sizing totally accurate

    0
  • Ali-Owieda92•30
    @Ali-Owieda92Submitted 23 days ago
    What are you most proud of, and what would you do differently next time?

    I will make a quick review on media query in css because it takes me time more than deserve

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

    just media query in css because i used to use libraries like bootstrap or tailwind

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

    Media query

    Responsive page with media-Queries

    1
    P
    Kristian Haug•140
    @klhaugPosted 23 days ago

    Looks good!

    Yeah, media queries can be tiresome...

    Tip: Look into padding to make the content have some breathing-room inside the card.

    Keep up the good work!

    0
  • R-nees•30
    @R-neesSubmitted 28 days ago
    What are you most proud of, and what would you do differently next time?

    finishing the project, search different ways of solving the problem and chose one that fits best

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

    i mistakenly deleted my first solution while trying to upload, i had to rewrite the whole code again

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

    uploading the project via vs code terminal

    My QR Code Card – Frontend Mentor Challenge

    4
    P
    Kristian Haug•140
    @klhaugPosted 28 days ago

    Hi!

    Looks great.

    Seems like your text-padding is a bit heavy-handed. Might look into that and let there be fewer lines of text.

    Besides that, great job! Keep it up

    1
  • P
    Kristian Haug•140
    @klhaugPosted 28 days ago

    Don't know how to solve the "Page should contain a level one heading". I added an <h1> to the main component, but it didn't solve it...

    The solution is completely the same as the design.

    I found out there is a difference between padding a div with two text elements vs padding the elements separately when it came to how the container behaved within the card, and how the sizing of the card-itself differed.

    0