Skip to content
Submitted about 4 years ago

HTML, SCSS, JS

SuzuMantan•370
@agusthas
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This is my solution to the challenge. There's some problem I encountered while finishing this challenge (mostly CSS 😢).

  • My approach on the share button tooltip was to create one HTML element and change to whom it absolutely position based on the screen size. I was thinking it will create a cleaner HTML but in CSS it create a whole new mess since i must know which parent and which child is it 🤕 . Is it better to just create two different tooltip (even though the content is nearly the same)? One for mobile and one for desktop?

Any advice on that or other things is much appreciated 🙏. Keep on coding! 🤟

Code

Please log in to post a comment

Log in

Community feedback

  • Isaay•25
    @jakubserwin

    Hi, you've done really good job. I took a look at your code and could learn some cool stuff too. Keep it up :D

    You could think about using different scss files for your variables, mixins and global styles like the 7-1 Sass pattern but in more simplified version.

    In JS if you have only 1 line of code after if/else statement you can remove brackets.

    And maybe use HTML Semantic Elements instead of divs with classes like footer and header.

  • P
    Patrick•14,265
    @palgramming

    🌟🌟🌟🌟🌟 your solution looks really good

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