Skip to content
OverviewSolutions
10
Comments
5

wxyzz22

@wxyzz22240 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

View more solutions

Latest comments

  • Matilda•190
    @Til-da
    What are you most proud of, and what would you do differently next time?

    The javascript code

    what would you do differently next time? -learn more javascript programming language

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

    What challenges did you encounter?

    • The mobile share button wasn't bringing out the social media handles

    how did you overcome them? -Realised i called the wrong function(Query)

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

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

    • Anywhere everywhere

    Built with HTML, CSS, JS, Flexbox, fonts, toggles, and media queries.

    1
    wxyzz22•240
    @wxyzz22

    Good job on implementing the mobile popover! One suggestion is that your content is overflowing when screensize becomes smaller, try to not directly set height on the outer wrapper.

    Marked as helpful
  • wxyzz22•240
    @wxyzz22

    Great overall! One quick suggestion is that there could be less usage of <div> and <span> for styling purpose: some of the styling could be moved to one layer up and then only style the parts that are different from the common parent, e.g.

    <ul class="list-disc pl-6 pt-2 leading-8 text-[#7b284f] text-raspberry">
   <li class="text-wenge-brown pl-4"><span class="font-bold">Total:</span> Approximately 10 minutes
   </li>
</ul>
  • ariff•50
    @rffkive
    What are you most proud of, and what would you do differently next time?

    the design overall and nothing. i did well

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

    making the picture circle-shaped and fit, remove the underline in the link when i changed the semantic. use google and ai as well.

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

    the design. lack of figma somehow makes it hard to predict the size of the font and the gap or margin bottom.

    Social LInk Profile

    2
    wxyzz22•240
    @wxyzz22

    You did pretty well without the figma design! You probably already find out the solution to the picture circle-shaped (use border-radius: 100%)

  • Codecblvck•20
    @Codecblvck
    What are you most proud of, and what would you do differently next time? 🎉 What I'm Most Proud Of

    I'm most proud of how I was able to bring everything together—from semantic HTML and responsive CSS, to integrating a custom local font (Figtree) using @font-face. It was satisfying to see the design match the original layout across different screen sizes. I also learned how to use Git and GitHub effectively, which helped me track my progress and publish a live version using GitHub Pages!

    🔁 What I'd Do Differently Next Time

    Next time, I would:

    • ✅ Use CSS Custom Properties
      To maintain consistency and make it easier to update colors, spacing, and fonts across the entire stylesheet.

    • 📱 Improve Responsiveness Further
      Start with a mobile-first approach and refine layout breakpoints for better control between 320px and 1440px screens.

    • 🌐 Focus More on Accessibility
      Use better contrast, semantic HTML elements, and ensure the design works well for screen readers and keyboard navigation.

    • 🔍 Write a Clearer README
      Include instructions for setup, font usage, screenshots, and live preview links to make the project more shareable and professional.

    • 🛠️ Experiment With New Tools
      Try out Tailwind CSS, SASS, or even a basic JavaScript enhancement to add interactivity.

    What challenges did you encounter, and how did you overcome them? 🧠 Challenges I Faced & How I Overcame Them

    • Responsive Layout Issues
      Challenge: The layout was not consistently looking good across different screen sizes, especially on mobile (320px).
      How I Overcame It: I adopted a mobile-first approach by using flexbox for layout control, adjusted the widths to percentages, and fine-tuned my breakpoints with media queries to ensure the layout adapts smoothly to different devices.

    • Font Integration Using Local Files
      Challenge: I was unfamiliar with integrating local fonts (like Figtree) into my project, and encountered issues with linking .ttf font files.
      How I Overcame It: I learned how to use @font-face in CSS to integrate custom fonts. After verifying the correct path and ensuring I specified the right font weights, I successfully applied the Figtree font across my project.

    • Too Much Space Between Elements
      Challenge: There was excessive space between elements like .info and the footer, which disrupted the layout.
      How I Overcame It: I used Chrome DevTools to inspect the layout and discovered the issue was related to unnecessary padding and margin values in the inner containers. After adjusting these values, everything aligned as intended.

    What specific areas of your project would you like help with? ❓ Areas Where I’d Like Help

    • Responsive Design Tweaks
      While the layout is mostly working on mobile and desktop, I'm still struggling with some of the fine-tuning for medium screen sizes (e.g., tablets). I would appreciate advice on better handling media queries and improving the responsiveness across all devices.

    • Font Loading & Performance
      I used a custom local font (Figtree), but I’m concerned about performance. I’m not sure if using @font-face is the most efficient way to load fonts. Any suggestions on better practices for font loading (like font-display or using preload) would be really helpful.

    • CSS Performance Optimization
      I’m looking for tips on improving the performance of my CSS, especially as my styles grow. Are there any performance issues I should be aware of with my current setup, or best practices for writing efficient and fast CSS?

    Responsive Blog Card using FlexBox

    2
    wxyzz22•240
    @wxyzz22

    Good job! And super well summarized!

  • Emmanuel Ajibola•10
    @Emiderex
    What are you most proud of, and what would you do differently next time?

    I am proud of how I was able to use the display flex layout for the purpose of centralizing the card instead of manually using Margin attribute to centralize

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

    Having to import the font from Google and the using the right CSS attribute to center the card

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

    I was able to sort. Thank you

    Responsive layout (Media queries), Google fonts, Flex layout

    2
    wxyzz22•240
    @wxyzz22

    Good work! One thing to improve to match the design more is to consider the margin between the words and the boundary.

    Marked as helpful