Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
7

ValenBytes

@valen-webdGermany180 points

Some random who found interest in building websites~

I’m currently learning...

HTML, CSS and JavaScript 🤔️

Latest solutions

  • Fylo Landing Page Solution


    ValenBytes•180
    Submitted 3 months ago

    I'm not sure if I should use media queries like that. I practically segmented my code like the sections on the site / in the html document. I think this makes it more readable, but I also re-use a lot of media queries this way. Would it be better to put everything in the same media query?


    0 comments
  • Testimonials Grid Section Solution


    ValenBytes•180
    Submitted 4 months ago

    I'm pretty happy with how this turned out! But if you notice anything that could be improved, feel free to let me know!

    Maybe I could write some parts of my code cleaner? 🤔️


    1 comment
  • Four Card Feature Section Solution


    ValenBytes•180
    Submitted 4 months ago

    The spacing of the cards looks weird on bigger, higher resolution desktops. Does anyone know how to make the cards stay together, like on the 1440 px wide desktop?


    1 comment
  • Product Preview Card Solution


    ValenBytes•180
    Submitted 4 months ago

    If anyone knows if there is a better way to horizontally center icon and text in the <button> element, please let me know!

    I used display: flex; with align-items: center;. It works, but it feels unnecessary to change the display property to align the items?


    2 comments
  • Recipe Page Solution


    ValenBytes•180
    Submitted 4 months ago

    My solution still differs a bit from the original design.

    On mobile, unordered list items that span multiple columns should be vertically centered. But I haven't found a way to do that yet.

    The "Nutrition" table seems to be made differently, too. I can't really remove the last bottom border and there's also a small gap between the table data borders.

    If anyone has suggestions on how to fix these issues, I'd really appreciate the help!


    1 comment
  • Social Links Profile Solution


    ValenBytes•180
    Submitted 4 months ago

    Should the social links be in a <nav> element or is <div> fine/correct?


    2 comments
View more solutions

Latest comments

  • Zi•150
    @code269
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    This challenge really challenged and taught me how to use grid. I was proud how quickly I was able to pick up how to use it. For a long time I've just been using flexbox to cut corners but I feel pretty good about using grid now.

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

    I completed everything on the mobile-first side then used Kevin Powell's CSS Grid video as a resource. It turned out to be the same as this challenge. While I did get a lot of help and inspiration from the video, I tried my best not to re-do what I already had and instead tried to go as far away from copying the video as possible.

    I did however, come out of it with points of how he named his CSS classes, how not to over-use CSS classes, and a strong foundation in understanding grid layouts.

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

    There were a lot of points in the design where I had to eyeball and I tried my best on getting the coloring and shadows accurate.

    I wasn't 100% satisfied with how the cards look under certain viewpoints, for example if the window was too small but just enough to hit breakpoint, some desktop view cards would be extremely elongated vertically. There are also other times where the cards have a lot of whitespace for the smaller ones.

    I also noted that the style guide said to use 500/600 font weight, but I don't think the design actually used 500/600, some of the text had lesser weight to it.

    Any suggestions on how to fix any of these issues and if there are any structural, refactoring, or standard practices that I should apply to my HTML/CSS would be greatly welcomed!

    Testimonial grids section solution

    2
    ValenBytes•180
    @valen-webd
    Posted 4 months ago

    Your solution looks amazing! Great attention to detail. 😊️

    The only thing I could point out as being different from the design is the box shadow - it looks slightly longer in the design. Something like box-shadow: 15px 35px 35px (line 52) could make it even closer to the design. But this is just a small tweak, your solution is already fantastic!

    Marked as helpful
  • Prezz World•80
    @Prezzworld
    Submitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    Setting some properties and values for responsiveness

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

    Any area is acceptable and appreciated

    Responsive four card feature section using HTML and CSS

    2
    ValenBytes•180
    @valen-webd
    Posted 4 months ago

    Great job! Your solution looks really close to the original design, and the responsiveness works well across different screen sizes. 😊

    Now this is personal preference, but I'd prefer to not be able to scroll on desktop. If you remove the height: 120vh; at line 31 and instead use margin or padding to center the cards, everything is on screen without needing to scroll.

    This would make it look weird on mobile though, because of the larger margin-top at line 143 and 149. If you adjust those, it should look better on mobile.

    Other than that, your solution looks really nice!

    Marked as helpful
  • Mohit Bhatia•210
    @mohit5543
    Submitted 4 months ago

    Responsive product preview card using css

    2
    ValenBytes•180
    @valen-webd
    Posted 4 months ago

    Hey there! On desktop, your solution looks good - awesome effort! :)

    For mobile, I think it would help if you switch the layout sooner. Changing the Media Query to 600px, for example, would accommodate larger phones. Also, the text gets cut off. If you remove width: 100%; on line 150, it wraps more naturally.

    Keep it up! 😊️

  • ChinweGlory•160
    @ChinweGlory
    Submitted 4 months ago

    Recipe page

    3
    ValenBytes•180
    @valen-webd
    Posted 4 months ago

    Hi there! I like the way you organized your code, it's very easy to read :)

    I would play around a little with padding and margin, your solution looks a bit more compact than the original design. If you give the elements more breathing room it should look closer to the template.

    Other than that, great job :D

    Marked as helpful
  • Jhanpiere Montes•50
    @inkarrime
    Submitted 4 months ago

    Social Links Profile

    2
    ValenBytes•180
    @valen-webd
    Posted 4 months ago

    Looks really clean! Well done :)

  • Lucas Silva•260
    @lucasfs022
    Submitted 4 months ago

    Blog Preview Card Solution

    1
    ValenBytes•180
    @valen-webd
    Posted 4 months ago

    This looks really good, nice job! The code is clean too. I would add a slim border around the card. But overall, this is really well done!

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