Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Article_preview_component_TypeScript_HTML_SCSS

P
Gilbertā€¢ 290

@juliengDev

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I really enjoyed the challenge presented by this project, which encouraged deep reflection on the behavior of the share component and how it adapts and positions itself in both desktop and mobile versions. For the desktop version, I used TypeScript to manage the display of the component with an event listener and a toggle class to show/hide the element, applying CSS properties tailored to this effect. For the mobile view, I used pure CSS to manage the component's behavior. This project allowed me to reinforce my HTML and CSS skills while also providing an opportunity to implement TypeScript in a practical context. The contrast between using TypeScript for interactive elements on desktop and relying on CSS for mobile layout adaptations was particularly instructive, showcasing different approaches to responsive design.

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

The main challenge I encountered was the initial planning phase. It took some time to reflect and devise an effective solution to the problem presented in this challenge. I had to carefully consider different approaches for both desktop and mobile versions, weighing the pros and cons of various techniques

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

I would greatly appreciate if the community could take a detailed look at my code and provide feedback on potential improvements or alternative solutions. I'm particularly interested in hearing about more efficient or elegant ways to handle the responsive behavior of the share component. Some specific areas I'd like input on include:

The efficiency of my TypeScript implementation for the desktop version. The CSS approach used for the mobile layout - are there better techniques I could have employed? Overall code structure and organization - how could it be improved for better maintainability?

I'm open to all constructive criticism and suggestions. Your insights could help me refine my skills and approach future projects more effectively. If you'd like to connect further or see more of my work, feel free to follow me on GitHub . I'm also active on LinkedIn, and I'm always eager to network with fellow developers and learn from their experiences. Thank you in advance for your time and expertise!

Community feedback

P
KMS56135ā€¢ 120

@KMS56135

Posted

good

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord