Skip to content
OverviewSolutions
2
Comments
8
P

Tempper

@Tempper160 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
    Tempper•160
    @TempperPosted about 1 month ago

    well done, that is a nice clean result. Understanding how to convert from a figma file to a webpage that is reactive is a challenge within itself.

    1
  • P
    Tempper•160
    @TempperPosted about 1 month ago

    well done good solution

    0
  • Valentin Gropsan•220
    @vgropsanSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I don’t really need help, but feel free to contribute and showcase your genius. Every approved pull request grants +10 charisma (non-stackable with other buffs).

    May your commits be clean and your bugs flee in terror! 🚀

    Four Card Feature

    1
    P
    Tempper•160
    @TempperPosted about 1 month ago

    interesting that you used 3 css styles, I am not sure why there would be a need for this. but well done

    0
  • Vincent Dao•100
    @Squ1ntySubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of my problem solving skills, as I was able to format the image after a good hour or two of debugging. Next time I would probably spend more time planning out what to do first and how I would go about doing it before jumping straight into the code.

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

    I encountered many challenges, first of which was formatting the image which proved extremely difficult as it was my first time having to work with 2 different images for different screen sizes. Another was definitely formatting the textContainer to fit properly. In the end the textContainer was not formatted properly.

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

    I would love to hear some tips regarding making a fluid/responsive img as well as a textContainer. Although, for the textContainer I believe the formatting issue had something to do with the button component at the bottom.

    Responsive Product Preview Card with vanilla CSS and HTML.

    1
    P
    Tempper•160
    @TempperPosted about 1 month ago

    Well done on your attempt, as you explore more and more html semantics you will find there as many cool solutions. A way that you could have handled the image is with a <picture> tag, i will show an example below.

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


as you can see within a picture tag you are able to set breakpoints (screen sizes) at which the image source will change. I encourage you to explore this.

As for your text container, I think your biggest issue is accidentaly over complicating it with too many divs. An example of this is 
```<div class="itemPriceContainer">
          <div class="discountedPriceContainer">
            <p class="discountedPrice">$149.99</p>
          </div>
          <div class="originalPriceContainer">
            <p class="originalPrice">$169.99</p>
          </div>
        </div> ```
you could have just gotten away with item price container with the 2 x <p> .

Also remember buttons don't always have to be buttons, you could also use `<span> <img src="./images/icon-cart.svg" alt="Cart Icon"> <a href="#"> Add to Cart</a></span>`
    Marked as helpful
    0
  • P
    Tempper•160
    @TempperPosted about 1 month ago

    Your code is overall well structured and easy to follow. The HTML elements are used appropriately, and the comments help clarify your intent. One important improvement is to include an alt attribute for your image element to support accessibility. The meta tags are useful, but adding a meta description could further improve SEO.

    The inline CSS is clear, although for larger projects it might be better to use an external stylesheet. Using fixed dimensions (like the container’s width and height) works for this challenge, but it might cause issues on different screen sizes; consider using responsive units or media queries in the future.

    In your CSS, you use the gap property on the “.box” class, but since this element isn’t set to display as flex or grid, the gap won’t have any effect. You may want to set “display: flex;” or “display: grid;” on that container if you intend to use gap for spacing.

    There is also a minor markup issue—the attribution div isn’t closed properly, which could lead to unexpected rendering or validation errors. Ensuring that all your elements are properly closed will help maintain consistent behavior across browsers.

    0
  • P
    hongleir2•110
    @hongleir2Submitted about 1 month 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
    Tempper•160
    @TempperPosted about 1 month ago

    Both Flexbox and CSS Grid have their strengths. While Flexbox is excellent for one-dimensional layouts, CSS Grid shines in creating two-dimensional layouts and can provide more granular control over both rows and columns. If your profile card’s layout becomes more complex, experimenting with CSS Grid might offer you additional flexibility. To improve responsiveness without over-relying on media queries, consider using fluid layouts with CSS functions like clamp(), min(), and max(). This can help you create a more dynamic design that adjusts smoothly across various screen sizes. Overall, you’ve done a fantastic job with both the design and the technical challenges. The fact that you're already considering further improvements shows a great commitment to refining your skills. Keep up the excellent work!

    0
View more comments