Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
3

webthingz

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

  • Social Links Profile


    webthingz•70
    Submitted 7 months ago

    2 comments
  • Blog Preview Card - with html css


    webthingz•70
    Submitted 7 months ago

    1 comment
  • QR Code Component - introduction


    webthingz•70
    Submitted 8 months ago

    1 comment

Latest comments

  • Dias•140
    @adambeckercodes
    Submitted 7 months ago
    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 the overall design and accessibility of my project. The use of CSS variables for consistent spacing, colors, and font sizes made the styling process more manageable and reusable. I also ensured that the project is responsive and accessible, with features like ARIA labels, focus-visible styles, and hover effects.

    Another highlight is the modern and polished look of the card component, with smooth transitions and a visually pleasing box shadow effect that enhances its appeal. I’m also happy with how the links adapt to hover and focus states, ensuring both usability and interactivity.


    What I Would Do Differently Next Time

    Next time, I would focus more on:

    1. Improving Responsiveness: The project is currently optimized for small screens and tablets, but I’d like to add more breakpoints for larger screens to ensure it scales seamlessly across all devices.
    2. Animations: Adding subtle animations for hover and focus interactions could enhance the user experience further.
    3. Content Dynamism: Incorporating JavaScript to dynamically update or fetch content for the card would make the project more functional and versatile.
    4. Testing Accessibility: While I’ve added ARIA labels and focus styles, testing with screen readers and other assistive technologies would ensure better accessibility for all users.
    What challenges did you encounter, and how did you overcome them? Challenges I Encountered

    1️⃣ Positioning and Responsiveness

    One of the biggest challenges I faced was ensuring the layout remained responsive across various screen sizes. It was tricky to adjust the spacing, alignments, and scaling while keeping the design consistent.

    2️⃣ Hover and Focus Interactions

    Creating hover and focus effects for the links while ensuring the entire parent element (``) responded correctly took some trial and error. Using pseudo-elements effectively without breaking the structure was particularly challenging.

    3️⃣ Accessibility

    Ensuring the project met accessibility standards, like adding appropriate ARIA labels and focus-visible styles, required additional research and testing to get it right.


    How I Overcame Them

    Positioning and Responsiveness

    To address the responsiveness issue, I implemented a mobile-first approach with well-defined breakpoints using media queries. I tested the design on different device sizes and adjusted the layout dynamically for each screen width.

    Hover and Focus Interactions

    I solved the hover and focus challenge by using ::before pseudo-elements on the tags and ensuring their dimensions matched the parent elements. Setting the `` to position: relative and extending the clickable area with the pseudo-element made the interactions seamless.

    Accessibility

    I referred to MDN Web Docs and accessibility guidelines to understand how to use ARIA attributes effectively. Testing the project with keyboard navigation also helped me refine the focus-visible styles for better usability.

    What specific areas of your project would you like help with? What Specific Areas of My Project Would I Like Help With?

    1️⃣ Hover and Focus Effects
    I’m happy with the current hover and focus effects, but I’d love ideas for making them more dynamic or visually engaging. Are there any subtle animations or transitions I could add without overwhelming the user experience?

    2️⃣ Accessibility Enhancements
    Although I’ve added ARIA labels and focus-visible styles, I’m always open to feedback on improving accessibility. Are there any best practices or tools I should use to ensure my project is fully accessible?

    3️⃣ Content Dynamism
    I’m considering adding JavaScript to make the card content dynamic (e.g., fetching data or updating content on the fly). I’d appreciate guidance on the best approach to implement this while keeping the project scalable.

    Your feedback on any of these areas would be incredibly valuable. Thank you in advance! 😊

    Social Links Profile using HTML & CSS Flex

    1
    webthingz•70
    @webthingz
    Posted 7 months ago

    Wow very nice Job! Inspiration for my next challenge! I would like to know how the size is prefectly matching the example. i could not find the size of the box in the assigment.

  • HasanSIVAZ•50
    @HasanSIVAZ
    Submitted 7 months ago

    blog-preview-card-main

    1
    webthingz•70
    @webthingz
    Posted 7 months ago

    Hi, the preview site looks better the the image.. maybe because of the rendering. Do you know how to import fonts from google font? Some litle details could be perfected, like the border radius, but for the rest it looks good. Regards, Ziggy

    Marked as helpful
  • Dias•140
    @adambeckercodes
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time? What I'm Most Proud Of

    I’m proud of creating clean, semantic, and accessible HTML, especially with elements like , , and ARIA labels. The skip link and responsive design make the project user-friendly, and I love how the pulse animation adds a modern touch. Organizing CSS with variables also made my styles reusable and professional.

    What I Would Do Differently

    Next time, I’d focus more on optimizing the design for larger screens and testing accessibility with screen readers. I’d also experiment with more interactivity, like hover effects or JavaScript, and simplify my CSS for even better maintainability.

    What challenges did you encounter, and how did you overcome them? Challenges I Encountered

    One of the challenges I faced was positioning the card in the exact center of the screen.

    I solved this by using Flexbox on the `` element, setting display: flex, justify-content: center, and align-items: center. This allowed me to align the card both vertically and horizontally with minimal code. Additionally, I added min-height: 100vh to ensure the body always covered the full viewport height, making the centering consistent across different devices.

    This approach was simple and effective, and I’ll definitely use it again in future projects!

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

    I’d really appreciate more feedback on accessibility, especially regarding how I can improve the user experience for those using screen readers or navigating with a keyboard. I’ve added ARIA labels, focus styles, and a skip link, but I’d like to know if there’s anything else I could refine or add.

    Additionally, I’d love advice on my code structuring. While I tried to keep my CSS organized with variables and meaningful class names, I’m open to suggestions on how to make the code cleaner, more reusable, or easier to maintain.

    Any insights would be super helpful—thank you! 😊

    QR Code Component using CSS Flex

    2
    webthingz•70
    @webthingz
    Posted 8 months ago

    Nice Job with aliging and sizes. Good structure Only I should not use h1 for this heading

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub