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

Responsive Article Component using SASS

P

@bartoszdudziak-dev

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?

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

P

@bartoszdudziak-dev

Posted

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

0
Mirjax2000 680

@Mirjax2000

Posted

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
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