I am wanting to add code to my website that has been built and offered on codepen.
The problem is when I add any cool object to my website it throws off the code of my website and never works. I have tried re-naming the code at times but that often does not work.
Do I need to somehow link the HTML elements to its own CSS? Add another CSS and link it to say the page I want to add the elements to? I am no coding expert but I really want to improve my website. Knowing how to add code from codepen to my website without conflicts would be amazing!
HTML and CSS is not a “copy and paste”, “plug and play”, “plug-in friendly” medium. There can be a number of different ways of accomplishing the same thing… and even more ways of almost accomplishing it.
Have you tried taking (to completion) a class in HTML and CSS?
Have you tried lurking here and privately trying to solve other’s issues for your own learning experience?
Learning takes time, study and experience, but the rewards are indeed amazing.
CSS and specificity is important.
Short recommendation? Start again and integrate the CSS properly.
Oh, I read a LOT. Sometimes I feel like I read too much. I work on a test store we have set up. Its coded like our current website so I can tinker around and not mess up our main website.
I just didn’t know if there was something I could easily correct that I was doing wrong.
Is there a guide on here or online that lays out the steps on adding code to a website without conflicts?
Years ago I did the W3 schools HTML tutorial. I have never did the course on CSS.
I don’t know how codepen fits into this, but I can relate to the pain of dealing with conflicts.
My approach is to keep things as minimal as possible to reduce the chances of there being any conflicts. It can be a struggle to restrain myself at times. eg. it would be nice if I could “I want that, and that, and that, and that …” and have all possible bells and whistles. Instead I decide what I “must have” and limit the number of “nice to haves”.
At times conflicts can be somewhat resolved by changing the order in which they’re called. But many times I need to “hack” source code so that there are unique names. For example, if the “blue widgets” plugin is causing problems I can open the files and change names by prepending “bw_” to them. Problem being that because it isn’t my code I will need to hack the source files every time the code is updated. Hence my “keep things minimal” approach. But if you’re willing to do the work when it needs to be done, you could take on more maintenance cost.
Yes, this question is too vague and open-ended to give any definitive answer.
When it comes to html & css there is a virtually infinite number of ways to get it wrong. No one can say: do x, y & Z and it will be fixed; without seeing your specific case.
To create code without conflicts, the process is to just code it well, which is something that comes with practice and experience. And what should be considered coding well is just as open-ended and top a great degree down to opinion.
There are various systems/guidelines/best-practices/protocols/frameworks that people use for consistent, maintainable coding style, though it’s fine to develop your own coding style, if it works.
