Skip to content
Submitted 7 months ago

Article Preview Component (Vanillia CSS)

Michael•380
@Mlchaell
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Originally I did have a lot of problems building the two different share menus for the different views and positioning them correctly. That was mostly because of me doing the HTML incorrectly and way over complicating everything though I rewrote it all and eventually got it to work

(and thanks @grace-snow for all the help)

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

If anyone has any ideas/tips on how I can do anything better, let me know - it would be appreciated!

I think my main problem is not spending enough time before thinking about how to layout the project and then way over complicating things while I work on it. how do y'all usually layout/breakdown projects before you begin to work on them?

Thank you!

Community feedback

  • Bernardo Poggioni•5,280
    @R3ygoskiPosted 7 months ago

    Hello Michael, congrats for conclude your project.

    Honestly I don't breakdown projects, I just let the design side-by-side with my VSCode, and see what I'll need to do. A tip that may be helpful, is, first look to the project in mobile and desktop, create html structure, then see the active state and see if it'll be needed to create more elements or not. This is something you acquire over time, don't worry.

    Now another tip, but focused in HTML, I highly recommend to use Semantic HTML, because it's verey good for accessibility. An example in your code is those fragment: <div class="article"> it could be an <article> tag instead of <div>, or <div class="content__footer-container"> could be a footer instead of <div>, and so on.

    And well, good job, keep practicing, and again, congrats, if something I said was unclear, please, comment below and I will try to help.

    Marked as helpful
    1
    Michael•380
    @MlchaellPosted 6 months ago

    @R3ygoski Thank you! I'll make sure to use the semantic tags more instead of just divs

    1

Please log in to post a comment

Log in with GitHub

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