Where to place <script> tag in VS Code for CDN Test

1

Hello! I am trying to use VS Code instead of CodePen to complete my first project; however, I’ve encountered a problem when inserting the CDN script.

<body>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js">
        <div id="main">
            <div id="title">
                <h1>Dr. Norman Borlaug</h1>
                <h3>The man who saved a billion lives</h3>
                <div id="img-div">
                    <img id="image" src="C:\removed\for\forum" alt="GENERIC ALTERNATIVE TEXT" width="500" height="500"/>
                    <h6 id="img-caption">SOME TEXT</h6>
                </div>
            </div>
            <ul id="tribute-info">
                <h3>1.</h3>
                <h3>2.</h3>
                <h3>3.</h3>
                <h3>4.</h3>
            </ul>
        </div>
    </script>
</body>

The test shows up but the <body> contents no longer do.

With tag
With tag903×533 5.51 KB

Where should I place the script tag to make this work?

2

You can put the script either inside the <head> or at the bottom of the <body></body>.

On the other note your image link is not properly done. It will not show up. You have :

<img id=“image” src=“C:\removed\for\forum” alt=“GENERIC ALTERNATIVE TEXT” width=“500” height=“500”/>

Let’s say you are working in folder name removed in your VSCode. You might have like this:

<img id=“image” src=“for/forum/imagename.jpg” alt=“GENERIC ALTERNATIVE TEXT” width=“500” height=“500”/>

3

If edper’s Solution does not work for you, or if you need other questions to be answered:

Go ahead and share the CSS and Full HTML and I will create a TEMPORARY Codepen for it, so we can help you find the solution.

1 Like
4

Thank you @edper. I’m still not sure how the syntax would look like if I were to put it " either inside the <head> or at the bottom of the <body></body> ." Do you mind showing me how that would work?

5

You’ve put HTML markup inside the <script> tag. The browser has no idea what to do with that because it only understands that, inside the script tag, there should be some JavaScript code for it to read.

And if you supply the <script> tag with a src, then you are also saying “the JS code is coming from an external source, not from inside the tag”.

So (this will load before all the HTML on the page):

<head>
  <!-- some other stuff here -->
  <script src="https://link-to-script"></script>
<head>

Or (this will load after all the HTML on the page):

<body>
  <!-- some other stuff here -->
  <script src="https://link-to-script"></script>
</body>
1 Like
6

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