Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
12
P
Kristian Haug
@klhaug

All comments

  • P
    kindlypi8MCeN7•150
    @kindlypi8MCeN7
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?
    1. Managed to get quite close to the (static) model given.
    2. Next time? idk.
    What challenges did you encounter, and how did you overcome them?

    Responsivity, quite challenging with the whole page layout, starting with the first two images and text overflow-x: clip ftw.

    @a-2280 alias Calvin solution retrospective put me on the right trick for the responsiveness

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

    Any advice is welcome !

    Meet landing page (html/css with flexbox and grid)

    1
    P
    Kristian Haug•150
    @klhaug
    Posted 3 months ago

    This looks really good! And really close to the design.

    Something you could look into: Setting a max-width on your hero-images so that the scaling is correct.

    Keep up the good work!

  • jamurai77•180
    @jamurai77
    Submitted 4 months 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•150
    @klhaug
    Posted 4 months 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
  • P
    Harshitkumar Patel•160
    @harshitkumarpatel28
    Submitted 4 months ago

    Four card feature section using HTML, CSS - Flexbox and Grid Layout

    1
    P
    Kristian Haug•150
    @klhaug
    Posted 4 months 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.

  • P
    Kristian Haug•150
    @klhaug
    Submitted 4 months 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•150
    @klhaug
    Posted 4 months ago

    Thank you! Fixed it now!

  • Daniel Nwachukwu•130
    @Dannyx-huberf
    Submitted 4 months ago

    product-card-review usin responsive design technique

    1
    P
    Kristian Haug•150
    @klhaug
    Posted 4 months 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
  • ANAND BILLA•50
    @5eisenBerg
    Submitted 4 months ago

    Responsive Landing page using HTML and CSS

    1
    P
    Kristian Haug•150
    @klhaug
    Posted 4 months 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!

  • Svitlana•70
    @svetlanakachan
    Submitted 4 months ago

    Receipe Page

    1
    P
    Kristian Haug•150
    @klhaug
    Posted 4 months 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
  • Joseph Flores•30
    @jhMozzie
    Submitted 4 months ago

    Social Links Profile Main Css

    1
    P
    Kristian Haug•150
    @klhaug
    Posted 4 months 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!

  • P
    Kristian Haug•150
    @klhaug
    Submitted 4 months 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•150
    @klhaug
    Posted 4 months ago

    !Update

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

  • Ali-Owieda92•40
    @Ali-Owieda92
    Submitted 4 months 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•150
    @klhaug
    Posted 4 months 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!

  • R-nees•30
    @R-nees
    Submitted 5 months 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•150
    @klhaug
    Posted 5 months 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

  • P
    Kristian Haug•150
    @klhaug
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Taking the time to understand the assignment before just jumping in, making a plan, instead of making a mess.

    QR-Code Component with basic HTML and CSS / Used some variables

    2
    P
    Kristian Haug•150
    @klhaug
    Posted 5 months 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.

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