Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
30
Comments
12
P

marcel-schmidt-dev

@marcel-schmidt-devGermany480 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

  • Quiz App

    #angular

    P
    marcel-schmidt-dev•480
    Submitted 9 months ago

    0 comments
  • Meet Landing Page

    #vite#sass/scss

    P
    marcel-schmidt-dev•480
    Submitted 9 months ago

    0 comments
  • Expenses Chart Component

    #vite#sass/scss

    P
    marcel-schmidt-dev•480
    Submitted 9 months ago

    0 comments
  • Age-Calculator-App


    P
    marcel-schmidt-dev•480
    Submitted 11 months ago

    1 comment
  • todo-app

    #motion#react#tailwind-css

    P
    marcel-schmidt-dev•480
    Submitted 11 months ago

    0 comments
  • rest-countrys-api

    #react#vite#tailwind-css

    P
    marcel-schmidt-dev•480
    Submitted 12 months ago

    1 comment
View more solutions

Latest comments

  • Charles•90
    @Ghost-Writer-2
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I practiced a bit more on responsive layouts and I got to finally understand how to use the :nth-child and :nth-last-child Just discovered I don't properly use Semantic HTML elements so in my next project that's what I'll do differently

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

    I got frustrated trying to change the color of the numbers in an ordered list but I managed to google out a few tricks

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

    Making responsive layouts

    Responsive Recipe Page with Vanilla CSS

    3
    P
    marcel-schmidt-dev•480
    @marcel-schmidt-dev
    Posted 11 months ago

    Looks, good

  • Mai Starberries•80
    @starberries
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    This was one where I definitely had to go back and adjust my classes and HTML tags a few times as I ended up realizing better ways to accomplish what I was trying to do partway through, especially with styling button-like anchors, but I feel like that helped me get a better grasp on how better to handle them from the start in the future. I also learned some nifty ways of making elements easier to resize during development and for responsiveness.

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

    I had to reconsider how implement button-styled anchors if I wanted the text to be styled on its own colored background, especially since I wanted a way to make it easier to adjust if the size of the buttons were to change, so I ended up with the following:

    :root {
        --button-height: 2.2rem;
    }
    
    .socials-main ul li a {
        height: var(--button-height);
        padding: calc(((var(--button-height) - 1em) / 2) - 0.125rem) 0;
    }
    
    What specific areas of your project would you like help with?

    I'm pretty happy with how this turned out, but I had to do a good bit of improvising and adjusting as I implemented my styling, so if there's any areas where I could have done better with keeping the code clean/avoiding redundancies or anything else of that sort, I'd be happy to hear it!

    Customized Social Links Profile

    1
    P
    marcel-schmidt-dev•480
    @marcel-schmidt-dev
    Posted 11 months ago

    Looks good

  • P
    Gustavo Sanchez•110
    @gusanchefullstack
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    Use of web components and media queries

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

    Positioning card for match with preview

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

    SVG stroke inside.

    Blog preview card solution

    1
    P
    marcel-schmidt-dev•480
    @marcel-schmidt-dev
    Posted 11 months ago

    Project Review: Frontend Mentor Blog Preview Card

    Strengths

    1. Semantic HTML:

      • The project makes good use of semantic HTML5 tags like <article>, <section>, and <footer>, which helps structure the content properly.
    2. Responsive Design:

      • The design is mobile-first, ensuring that the page looks good on smaller devices and scales up for larger screens using media queries.
    3. CSS Flexbox:

      • Flexbox is used to create a flexible layout that adjusts nicely to different screen sizes and keeps content centered and aligned.
    4. Web Components:

      • The use of Web Components (HTMLElement and shadow DOM) is modern, modular, and keeps the styling and functionality encapsulated. This is a great practice for reusable and maintainable components.

    Areas for Improvement

    1. Accessibility:

      • Consider improving accessibility by adding ARIA attributes where necessary. For example, ensure that icons and interactive elements have descriptive labels for screen readers.
      • Alt text for images is crucial for users with visual impairments. Ensure that all images have appropriate alt descriptions.
    2. Performance Optimization:

      • Consider inlining critical CSS for faster initial rendering. This can help reduce render-blocking resources, improving performance, especially on mobile networks.
    3. Error Handling:

      • In case of using external assets (e.g., fonts, images, or CSS), implement fallback mechanisms for loading failures.
    4. Browser Compatibility:

      • While using Web Components is a great practice, ensure that appropriate polyfills are included for older browsers that may not support shadow DOM or custom elements.

    General Suggestions

    • Code Structure: The project code is clean and well-structured, but consider adding comments in critical sections, especially for future collaborators.
    • Documentation: Ensure that the README provides instructions for installing dependencies (if any) and running the project locally, even if it’s a simple static site.
    • Cross-browser Testing: Verify that the component behaves consistently across different browsers and devices, especially given the use of newer technologies like shadow DOM.

    Conclusion

    This project is a well-executed solution with modern front-end practices like Web Components and Flexbox. With minor improvements in accessibility and performance, it can be a top-notch implementation.

  • somasekharkasipogula133•10
    @somasekharkasipogula133
    Submitted 11 months ago

    qr-code-component

    1
    P
    marcel-schmidt-dev•480
    @marcel-schmidt-dev
    Posted 11 months ago

    look good, but preview dont work

  • P
    Robert Crocker•410
    @robcrock
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    The process I developed and followed to complete this challenge was very intuitive. I never felt lost. I alway knew exactly what to work on and test next.

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

    I overcame some tricky CSS problems with the Tailwind group utility and improved the state management in the app with the useReducer hook.

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

    The app could be a little more modular. I could have also added tests. I didn't do the responsive part of this challenge since the rest of it was so involved.

    Password Generator

    #next#react#tailwind-css
    1
    P
    marcel-schmidt-dev•480
    @marcel-schmidt-dev
    Posted 11 months ago

    Great Job, looks flawless

  • lariel•50
    @lariella
    Submitted 12 months ago

    NFT Preview Card (Solution #4)

    1
    P
    marcel-schmidt-dev•480
    @marcel-schmidt-dev
    Posted 12 months ago

    Nice work

View more comments
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

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