Skip to content
OverviewSolutions
5
Comments
6
P

Roberto

@r0b3rtcode02070 points

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

Latest comments

  • P
    Roberto•70
    @r0b3rtcode020Posted 25 days ago

    Very good solution, congrats! You only need to check some details like padding, line-height and icon size. I like how you used picture tag for responsive images

    Marked as helpful
    1
  • P
    Roberto•70
    @r0b3rtcode020Posted about 2 months ago

    Awesome! Looks great!

    0
  • P
    Roberto•70
    @r0b3rtcode020Posted about 2 months ago

    Congratulations on your solution. Just a small tip that could help you understand how to layout better and thus have better grouping and separation of elements is: in 'paint' you can take the image and with rectangles you can group elements and measure approximate spacings. This could help you improve in layout design and have greater precision when grouping and separating elements.

    0
  • P
    hongleir2•110
    @hongleir2Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of successfully implementing the social links profile with a clean and structured design that closely matches the original challenge. The use of CSS variables for colors improves maintainability, and the flexbox layout ensures proper alignment and spacing. Additionally, the responsive design adapts well to different screen sizes.

    If I were to improve this project, I would:

    • Enhance accessibility by ensuring correct role attributes and using <nav> for social links instead of a <div>.
    • Use semantic HTML elements, such as replacing <div class="bio-txt"> with <p> for better readability.
    • Explore alternative layout techniques, such as CSS Grid, to see if it provides additional flexibility.
    What challenges did you encounter, and how did you overcome them? 1️⃣ CSS Variable Integration
    • Challenge: Managing colors dynamically using CSS variables.
    • Solution: Declared color variables in :root for reusability and easy updates.
    2️⃣ Responsive Design Adjustments
    • Challenge: Ensuring the profile card scaled well on smaller screens.
    • Solution: Used media queries (max-width: 375px) to adjust width and padding for mobile users.
    3️⃣ Button Styling and Layout
    • Challenge: Keeping button styles consistent and ensuring they looked balanced within the profile card.
    • Solution: Applied uniform padding, border-radius, and spacing for consistency.
    What specific areas of your project would you like help with?

    I would appreciate feedback on the following areas:

    1. CSS Best Practices:

      • Are there better ways to structure my CSS for scalability and maintainability?
      • Should I consider using rem or em instead of fixed pixel values?

    2. Accessibility Improvements:

      • Are my role attributes correctly assigned, or should I use more semantic elements?
      • Would adding ARIA attributes improve accessibility for screen readers?

    3. Alternative Layout Strategies:

      • Would CSS Grid be a better approach for structuring the profile card?
      • How can I improve responsiveness without relying too much on media queries?

    I appreciate any suggestions or feedback to refine this project further! 🚀🎨

    Social links profile

    2
    P
    Roberto•70
    @r0b3rtcode020Posted about 2 months ago

    Your solution is very good, congratulations. Just a small tip for your media queries: instead of using (max-width: 375px) for example, you could use (width <= 375) which I consider easier to read and understand. I’m referring to the structure because, for instance, if you had the following: @media(min-width: 376px) and (max-width: 767px) {...}, you could instead use: @media(375px < width < 768px) {...}

    0
  • P
    Roberto•70
    @r0b3rtcode020Posted 2 months ago

    Your solution is good, but you missed making it responsive for small screens. Here's a tip to make the typography responsive without using media queries: you can use the clamp() property. It needs three values to work: clamp(minimum value, preferred value, maximum value).

    0
  • P
    Roberto•70
    @r0b3rtcode020Posted 2 months ago

    You should start using a more semantic HTML structure to familiarize yourself with semantic tags. You could also separate the CSS from the HTML into different files, mainly to get used to working that way. You could use a design tool or even "paint" to try to get the dimensions of the components and negative spaces to make them look more like the original design. Anyway, all I mentioned is achieved with practice, a couple of projects and you will get used to working that way. Good luck mate.

    1