Bartłomiej

Latest comments

• 

  P

  tasosbeast•80

  @tasosbeastSubmitted 10 days ago

  What are you most proud of, and what would you do differently next time?

  What I'm Proud Of

  I'm particularly proud of my growing ability to research and implement solutions independently. Throughout this project, I noticed that my problem-solving skills have improved significantly - from finding the right resources about the <picture> element to implementing complex animations. The process of searching for solutions has become more intuitive and efficient with practice.

  What I Would Do Differently

  For future projects, I would approach certain aspects differently:

  1. Responsive Design Planning

     • Start with a more structured breakpoint strategy
     • Consider implementing fluid typography from the start
     • Plan the layout transitions more thoroughly

  2. Code Organization

     • Better structure my CSS with more modular components
     • Implement a more consistent naming convention
     • Create a proper documentation system from the beginning

  These insights will help me create more scalable and maintainable projects in the future.

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

  Image Responsiveness Challenge

  One of the main challenges I faced was implementing responsive images without relying on JavaScript or CSS background images. I discovered the <picture> element, which provided an elegant solution:

  <picture>
    <source
      srcset="./images/image-product-desktop.jpg"
      media="(min-width: 600px)"
    />
    <img src="./images/image-product-mobile.jpg" alt="Product image" />
  </picture>
  

  This solution not only simplified the code but also improved performance by loading only the necessary image based on viewport size.

  Breakpoint Management

  Determining the right breakpoint for the layout transition required careful consideration. After testing various screen sizes, I settled on 600px as the main breakpoint:

  @media (min-width: 600px) {
    .card-component {
      grid-template-columns: 1fr 1fr;
    }
  }
  

  This breakpoint works well because:

  • It provides a comfortable reading experience on both mobile and desktop
  • The layout transitions smoothly between views
  • The content remains readable without awkward text wrapping
  • The images maintain their aspect ratio and quality

  Through these challenges, I learned the importance of using semantic HTML elements and how proper breakpoint selection can significantly impact the user experience.

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

  1. Responsive Design

     • Is the breakpoint at 600px appropriate for this component?
     • Could the layout be improved for tablets or larger mobile devices?

  2. Accessibility

     • Is the semantic structure of the HTML appropriate?
     • Could the keyboard navigation be improved?

  3. CSS Structure

     • Is my use of CSS custom properties efficient?
     • Are the utility classes well-organized and reusable?
     • Could the animations be optimized for better performance?

  4. Best Practices

     • Is the mobile-first approach implemented correctly?
     • Are there any modern CSS features I could have used?
     • How could I make the component more maintainable?

  Your insights will help me improve this solution and my future projects. Feel free to suggest any alternatives or improvements!

  

  Product Preview Card Component: Modern CSS & Responsive Design

  1

  30
  

  Bartłomiej•90

  @KeBartekPosted 9 days ago

  really well done page, you can see you put a lot of effort into it, keep it up. Good luck with your future projects!

  Marked as helpful

  0
• 

  Khudatbegov Muhammad•10

  @KhudatbegowSubmitted 12 days ago

  What are you most proud of, and what would you do differently next time?

  I'm proud that I was able to create a fully responsive design that displays correctly on all devices. I'm also happy that I successfully used CSS Flexbox in development. Additionally, I managed to optimize the fonts, which significantly improved the site's performance.

  Next time, I would try using SASS for more convenient styling. I would also pay more attention to testing on different browsers and devices to avoid bugs.

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

  I didn't encounter any major challenges during this project, as the design was relatively straightforward. However, I did spend some time ensuring that the layout was fully responsive and that the fonts were optimized for performance. To achieve this, I used media queries and tested the site on multiple devices to ensure consistency.

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

  I would appreciate feedback on the responsiveness of the design. While I tested the site on multiple devices, I would like to know if there are any improvements I can make to ensure a better user experience across all screen sizes. Additionally, any tips on optimizing CSS for performance would be helpful.

  

  Semantic HTML, Responsive Design, Local Fonts, Pure CSS.

  1

  00
  

  Bartłomiej•90

  @KeBartekPosted 10 days ago

  Great project I checked how the site scales for mobile devices and I have to admit it looks perfect. Good luck with your future projects!

  Marked as helpful

  1
• 

  P

  shawna-donnelly•50

  @shawna-donnellySubmitted 12 days ago

  

  Social Links

  1

  00
  

  Bartłomiej•90

  @KeBartekPosted 12 days ago

  You did great, the dimensions match almost perfectly, nice!

  0
• 

  P

  Angie P•120

  @angie-createSubmitted 13 days ago

  What are you most proud of, and what would you do differently next time?

  I’m proud of how efficiently I completed this project using Builder.io, which allowed me to generate clean, structured code quickly and move on to other projects faster. Next time, I’d like to focus more on optimizing the CSS and ensuring that the generated code follows best practices in maintainability and accessibility.

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

  One challenge was ensuring that the exported code from Builder.io was clean and not overly bloated. I overcame this by reviewing the generated code and making small manual adjustments where needed. Additionally, I had to ensure that responsiveness and layout consistency were maintained across different screen sizes.

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

  I’d love feedback on how to improve the readability and maintainability of the generated code. Also, any suggestions on best practices for using Builder.io effectively while keeping performance and accessibility in mind would be helpful.

  

  Blog Preview Card - First time using Builder.io

  1

  20
  

  Bartłomiej•90

  @KeBartekPosted 13 days ago

  I haven't had the pleasure of using builder.io, the site looks good except you forgot to add a picture of Greg Hooper. Good luck with your future projects!

  0
• 

  d2038-dev•20

  @d2038-devSubmitted 20 days ago

  What are you most proud of, and what would you do differently next time?

  I'm most proud of my better understanding of flexbox, margin collapse, and Chrome DevTools.

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

  The challenge was using the vertical space in the body and pushing the attribution to the bottom. I solved this using flexbox, making the wrapper grow.

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

  I may be relying too much on flexbox, and some margins may be enough in certain cases.

  

  Mobile-first solution using Flexbox

  1

  00
  

  Bartłomiej•90

  @KeBartekPosted 19 days ago

  Well done! You did a great job! Wish you luck in the future project!

  1