Patryk Besler

@beslerpatryk
325Points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest Solutions

  • Desktop design screenshot for the Time tracking dashboard coding challenge

    Time Tracking Dashboard

    • HTML
    • CSS
    • JS
    0
    Submitted

    Aloha! πŸ‘‹

    This is my " Time Tracking Dashboard" challenge solution using pure HTML/CSS/Java stack. At first, I was a bit nervous about .json file handling but it turned out to be way easier than I thought. Do you guys have any suggestions on how can one expand this project by using some API or time management software? Please share your ideas! 🧠

    As always if you see any issues with this project - let me know. Any criticism/comments can certainly help me learn and grow as an aspiring front-end developer. Keep in mind that I try my best to always return the favor, so if you want someone to come and take a look at your code you are more welcome to leave a comment below! πŸ‘‡

  • Desktop design screenshot for the Huddle landing page with a single introductory section coding challenge

    Huddle Landing Page with Pure HTML and CSS

    • HTML
    • CSS
    5
    Submitted

    Hello! πŸ‘‹

    This is my " Huddle Landing Page" challenge solution using pure HTML and CSS. I tried to follow semantic markup rules and make my code as clean and easy to read as possible. Do you know any good tips for creating social media buttons like those in this project? I spent too much time fighting with the alignment and size of this element and I am almost sure there is more elegant way to do it.

    As always if you see any issues with this project - let me know. Any criticism/comments can certainly help me learn and grow as an aspiring front-end developer. Keep in mind that I always try to return the favor 😏

  • Desktop design screenshot for the 3-column preview card component coding challenge

    🎴 3-Column Preview Card Component

    • HTML
    • CSS
    1
    Submitted

    Hello! πŸ‘‹

    This is my " 3-Column Preview Card Component" solution using pure HTML and CSS. I used mostly CSS grid for layout and flexbox for inside elements. I am very happy with the outcome. Should I use the <img> tag for those icons or maybe there is a better way of doing it? Please share your suggestions! 😊 I tried to follow semantic markup rules and make my code as clean and easy to read as possible.

    As always if you see any issues with this project - let me know. Any criticism/comments can certainly help me learn and grow as an aspiring front-end developer. Keep in mind that I always try to return the favor 😏

  • Desktop design screenshot for the Stats preview card component coding challenge

    πŸ“Š Stats Preview Card Component

    • HTML
    • CSS
    5
    Submitted

    Hello everyone πŸ‘‹

    This is my "Stats Preview Card Component" solution using pure HTML and CSS. I used mostly flexbox for layout but there is also some CSS grid there. I had a lot of issues with getting the proper hue of the image but in the end, I got a satisfying result. How do you guys usually approach the problem of positioning in small projects like these? At what elements do you use responsive units and on which you use definite values?

    As always if you see any issues with this project - let me know. Any criticism/comments can certainly help me learn and grow as a front-end developer. Thank you 😁

  • Desktop design screenshot for the Order summary component coding challenge

    Order Summary Component

    • HTML
    • CSS
    2
    Submitted

    Hello πŸ‘‹ This is my "Order Summary Component" solution using pure HTML and CSS. I used a CSS grid for the overall layout. If you see any issues with this project - let me know. Any criticism/comments can certainly help me learn and grow as a front-end developer. Thank you 😁

  • Desktop design screenshot for the Sunnyside agency landing page coding challenge

    Sunnyside Agency Landing Page | Pure CSS & JS

    • HTML
    • CSS
    • JS
    1
    Submitted

    Hello everyone πŸ‘‹ This is my "Sunnyside Agency Landing Page" solution using pure CSS and JS. If you see any issues with this project - let me know. Any criticism/comments can certainly help me learn and grow as a frontend developer. Thank you 😁

Latest Comments

    • HTML
    • CSS

    Huddle landing page

    3
    Patryk Besler325 | Posted 4 months agocommented on Alessandro's "Huddle landing page with a single introductory section" solution

    Hi there @Alessandro πŸ‘‹

    As @Teegamtee said background-repeat: no-repeat property should take care of your issue with repeating background. Other things that you can look into:

    • add proper cursor for the button
    • the color of the links in the footer is very similar to the background so it's very hard to read, try changing the color to something with better contrast
    • try to style the button on the hover state similar way to the one in active-state design
    • add hover states for icons just like in the brief for the project: See hover states for all interactive elements on the page

    Hope this will help you find things you should focus on. Keep up the good work and good luck with coding πŸ‘©β€πŸ’»

    0
    • HTML
    • CSS

    Chat App UI done with only CSS (no images included)

    4
    Patryk Besler325 | Posted 4 months agocommented on Dusan Lukic's "Chat app CSS illustration" solution

    Hello @Dusan Lukic πŸ‘‹

    Truly amazing job on this challenge! Your solution is spot on. I looked up a bit in your code and it looks very solid. I would however try to be more consistent with the naming of your classes. It looks like you try using BEM convention but I feel like that dashes are not always correctly used.

    Have a good one and good luck with your future projects!

    0
    • HTML
    • CSS

    Built with Flexbox

    3
    Patryk Besler325 | Posted 4 months agocommented on Kristiana12's "Huddle landing page with a single introductory section" solution

    Hey KristianaπŸ‘‹

    You did an amazing job, I could learn a thing or two from you! If you want to make your background on the desktop version look just like the one from the design files try setting the background-size property to contain instead of cover. The background position: center is also not necessary. After those adjustments, it's just a matter of positioning your content. πŸ˜‰ Pay attention to the width and margins of your container and I am sure you can get the desired outcome.

    Hope that some of it were helpful. Keep up the good work and good luck on your future projects!

    1
    • HTML
    • CSS

    3 column preview card component main

    2
    Patryk Besler325 | Posted 4 months agocommented on Hassan Elabadi's "3-column preview card component" solution

    Good stuff Hassan!

    I think you should check the classes in your <i> elements. It seems that some cars are in the wrong place. Also, I would recommend cleaning up unnecessary comments in the index file. Other than that your code looks good.

    Tip for the future: for form elements such as <button>, you can use font-family: inherit property so in case you need to change the font you won't have to change the font in each element.

    Have a good one and happy coding πŸ™Œ

    1