Skip to content
Submitted 7 months ago

Article Component (SCSS)

Bartosz Dudziak•680
@bartoszdudziak-dev
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 are you most proud of, and what would you do differently next time?

My solution looks quite similar to designed one. I created simple button click effect using event delegation but its not perfect.

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

The most demanding for me was image behavior. I'm still not sure about its position, size etc. in responsive way. I overcome it with some height changes in image wrapper combined with image properties.

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

Any opinions will be helpful 🫡

Community feedback

  • Bartosz Dudziak•680
    @bartoszdudziak-devPosted 6 months ago

    Thank you for the comment. I thought the defer attribute inside script tag solves this problem, doesn't it?

    0
  • Mirjax2000•680
    @Mirjax2000Posted 6 months ago

    I think its perfect. Only one think is wrong. Your script link should by last thing to load in the page. Complex JS script will not work. Here check this out. Page is loading its content from the top. When it reaches js file, everything stops, coz js has top priority. Then continue. Its mean that it slow then process loading the page. Then If you dont envelope your js script into function ducument ready techniques, your js will not work if you make some DOM adressing. Simply js script will start even before the page is loaded. And DOM is not ready yet. If you simulate your code with slowing your bandwith to very slow, your code wil not work. So put your script.js abvo last element body, or envelope your script into document ready function as is decribed in the article

    https://www.frontendmentor.io/learning-paths/javascript-fundamentals-oR7g6-mTZ-/steps/665596db9499fbaebe3dcbb0/article/read
    0

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