Using templates and code snippets -what are the rules?

Get Started
1

I know basic HTML and CSS but can’t say I’m able to build a modern website from scratch, so I’m looking into (Bootstrap) templates. The ones I’ve considered are free ones with MIT licenses.
As no template meets the exact design idea I have I’m wondering about the following:

  1. can I use a template as a starting point (i.e. to get a basic working structure), then copy/paste code snippets from other templates or online tutorials etc. as well as my own coding, or are templates meant to be used exactly as they are, just with your own personal content of course (text and images)?
    I’m considering something like this free “scrolling nav” bootstrap 5 template from startbootstrap.com
    My site will be a non-commercial one if that makes any difference. In the end it might become completely unrecognizable from the template I used, after having inserted all the parts and styling I want.

  2. what’s OK and not OK to do when using others’ code? I assume that looking at the HTML source/CSS of a random site you like, then copying i.e. its navbar or carousel because you like how it looks and works isn’t OK, while using the code of an online coding tutorial (i.e. "how to design a carousel) is probably OK, right? Or is this a gray area and a question of how much code from a particular website you use for your own?

2

If you start with Bootstrap instead of taking more time to learn HTML and CSS, then you won’t be able to understand why the code you added doesn’t work. This is because Bootstrap and other JavaScript frameworks are often a cohesive system. If you add code from another site, and find it not working, then you won’t be able to troubleshoot. The “fault,” as it were, may be in the Bootstrap code (HTML, CSS, or JS) that is contradicting or overriding the code you added.

For this reason, it is better to go slower and learn HTML, CSS, and JS without a framework. There are many sites with free videos and courses to lead you to greater proficiency. I can give you a list of them if you ask.

The problem with using other people’s code is multi-faceted. Some code is made for the past versions of HTML and CSS where more modern CSS simplifies things (like Flexbox and Grid).

Some code will be basic, made for example only, and will omit important steps like validation and security.

Some code will be made badly, out of spec, and be a poor example for you to use. These will be holes the hackers can take advantage of.

Some code will assume you have more proficiency than you have now (“It’s easy, just do this!”).

A typical problem is bloating your pages with poorly formatted code and images that slows the site to a crawl.

The problem with starting with a framework too soon is that it cheats you out of learning the nuts and bolts of the languages. Start with the basic HTML form and structure, and start adding on all the different scripts for carousels and other things to see how they work. Get an understanding of why they work the way they do. Write back here if there’s something you don’t understand or if there’s some feature you want added to the code and you can’t figure it out.

I think you’ll find out soon enough if you can use Bootstrap as a starting point when you start adding more stuff to it. When it doesn’t work, come back to this site and we’ll show you how to validate your problems. We’ll teach you how to use the browser’s developer’s tools to help spot the problem.

3 Likes
3

Thanks for your reply. You make some good points I hadn’t though of myself.

So starting with off with a template is a bad idea?
And I basically need to code from scratch and become fluent in HTML, CSS and JS in order to properly set up a website, or have I misunderstood?

On the official Bootstrap examples page there are several code snippets (header, footer, jumbotron, carousel, sidebar, hero etc.) so my understanding was that for people who know basic HTML, CSS and JS they could use those as “building blocks”, adding them one by one instead of coding from scratch.
I think it’ll take years for me to become proficient at this; after all it’s just for a personal site, doing it in my spare time :slightly_smiling_face:

I do have a few web-design apps (Mac platform), the best one IMHO being Pinegrow, but my version only does Boostrap version 3 or earlier (and I understand version 5 is the way to go now). Secondly I know that all web-design tools add some bloat to the code, and the “manual” way (a text editor) is the preferred and recommended way to go. But would a tool like this, using the built-in “blocks” to add to my page be better than manually copying/pasting code from say the Bootstrap snippets mentioned above?

As you can tell, I’m trying to find a way to build my site without it becoming too overwhelming :dizzy_face:

4

You want to use code snippets from Bootstrap? Bootstrap assumes you’ll use those code snippets within the Bootstrap framework.

Won’t hurt to try them on a plain vanilla HTML page to see, though.

5

You mean, to “keep it simple at first” with just the HTML for building the structure? Then, once that seems fine add CSS and JS to complete it?

6

I meant to keep the HTML simple and add the code snippets from Bootstrap to see if they’ll work. I don’t think they will. I think they will be backed by the Bootstrap js and css files.

7

Bootstrap is not intended as an easy site builder for those with limited knowledge of HTML/CSS. It is intended as a framework to make development of certain types of site quicker and easier. To use it effectively you would need to have a decent understanding of HTML, CSS and Bootstrap, so you’re adding in another layer of learning to try to make things easier. upsidedown

3 Likes
8

If on the off chance the pages do not render correctly try validating the source:

https://jigsaw.w3.org/css-validator/

1 Like
9

Hmmm… so unless you understand code and instead copy it from various sources you might end up with JS/CSS code working against each other or causing other incompatibilities? I see how that would complicate things, but probably still doable by following your suggestion (keep the HTML simple) and adding little bits at a time for easier troubleshooting.

Back to the original question though: what are the legal concerns surrounding MIT-licensed templates and using code snippets from here and there (or other free templates)? Are templates meant to be used as they are (only with the content itself added by the user), or can they also legaly be used as a starting point where they might end up unrecognizable from the original template?

10

Yes, I know.
But if I want to build a responsive site I understand this is the way to go. I’m just trying to find the easiest way to get there while still doing it properly.
Depending on what a “decent understanding” of HTML, CSS and Bootstrap is I think I can do it, as long as I don’t have to do the JS coding myself and I can use at least some code snippets from elsewhere.

11

It’s one way to go, but it certainly isn’t the only way to go. I’ve built responsive sites, but I’ve never used Bootstrap. smile

1 Like
12

Legally, you can be sued for anything. :slight_smile:

If by templates you mean free downloadable frameworks, they are meant to be self-contained, and yet the company fully expects the user to modify it with any code they wish, including database addition. Frameworks in general include a number of typical components ready to drop in.

You may not be able to drop in the components into your own HTML page without the framework because the framework’s JS and CSS files will do all the heavy lifting for you behind the scenes.

Frankly, you’ll be able to find a large number of code snippets outside of frameworks to add to your HTML page, including the JS files. w3schools.com will give you hundreds of snippets. As you read elsewhere, you’ll need to add Bootstrap on top of the other skill sets to learn.

13

Huh? That seems conflicting.
Or do you mean that the templates “are designed to work out of the box” but it’s also perfectly OK to modify them to your own liking, even if the end result will look nothing like the original template?
I see that with some free templates you’re asked to include a link in the footer to the original designer of the template, but there was no such claim here.
And I suppose the examples from the Bootstrap site itself (getbootstrap.com) can be freely used?

Thanks for reminding me about the CSS and JS dependencies (which I suppose may also mean that some of the templates or code snippets use modified versions of the same named CSS and JS files which further confuses things).
One of the reasons I’ve started working with a really simple starter template is to avoid all that troubleshooting, even though it’ll demand more time to figure out how to design the rest of the page.
Thanks for suggesting the W3 code snippets. They’ll come in handy once I get the basic page structure worked out.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.