How to copy design from other (much more complicated) websites?

1

Hi - it has become apparent to me that the best way for me to get my site to look more professional is to copy the design of other sites that look professional.

I know that I can “View page source” to see the JS code. But most of the time it’s completely illegible. I even tried pasting the source code into a VS Code JS file but that was not helpful (probably b/c there was more than just JS code in source code?? Not sure).

This is the site from which I want to copy some of the design elements. See the Life Expectancy graph here: https://ourworldindata.org/health-meta#life-expectancy

Is there a better way than viewing page source to understand how they developed their page?

As an FYI, this is the website I am building: https://sabahatpk.github.io/

Thank you in advance.

2

Are you trying to copy their design or their code? If you’re just trying to get a more polished design, there is no need to inspect elements. Learn more about CSS by finding a way to implement the same design.

1 Like
3

I think @ArielLeslie is right. I found the lessons here and at w3schools infinitely more useful than other folks’ source. Yea, back in 1999 I could “view page source,” and now there’s “inspect” on browsers with a right click which is more readable than “view source,” but any given site might be … how old? so I’m … trying to learn how to do things that I can understand.