Frontend Mentor | marcel-schmidt-dev's profile

Latest comments

Charles•90
@Ghost-Writer-2Submitted 7 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-devPosted 7 months ago
Looks, good
0
Mai Starberries•80
@starberriesSubmitted 7 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-devPosted 7 months ago
Looks good
1
P
Gustavo Sanchez•100
@gusanchefullstackSubmitted 7 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-devPosted 7 months ago
Project Review: Frontend Mentor Blog Preview Card

Strengths

Semantic HTML:

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

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.

CSS Flexbox:

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

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

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.

Performance Optimization:

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

Error Handling:

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

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.
0
somasekharkasipogula133•10
@somasekharkasipogula133Submitted 7 months ago
qr-code-component
1
P
marcel-schmidt-dev•480
@marcel-schmidt-devPosted 7 months ago
look good, but preview dont work
0
P
Robert Crocker•410
@robcrockSubmitted 8 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-devPosted 7 months ago
Great Job, looks flawless
0
lariel•50
@lariellaSubmitted 8 months ago
NFT Preview Card (Solution #4)
1
P
marcel-schmidt-dev•480
@marcel-schmidt-devPosted 8 months ago
Nice work
0