Web Design

Finishing the Blog

Finishing the Blog

Adding the scripts.js file

Time to add the scripts.js file so our HTML file can find our code. In the header, add the following:

    <script src="scripts.js"></script>
</head>

Now the index.html file can find this. Make sure you add it to the post.html file as well.

Our current home page

The current page should look like this for you:

<div class="container">
    <div style="margin-top: 10px;"></div>
    <ul class="nav justify-content-end">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
    </ul>
    <h1>My Blog</h1>
    <p class="lead">Welcome to my blog.</p>
    <div style="margin-top: 30px;"></div>
</div>

We need all our cards to generate after the margin top. This is very simple. All we need is to open script tags, put in our function, and watch the magic happen.

<div style="margin-top: 30px;"></div>
<script>getPosts();</script> 

If everything worked perfectly, you should see four cards popup when you see index.html on the web.

Finishing the Posts page

Open post.html. Make sure this is what your file looks like:

<div class="container">
    <div style="margin-top: 10px;"></div>
    <ul class="nav justify-content-end">
        <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://instagram.com">Instagram</a>
        </li>
    </ul>
</div>

Just like we needed to add the function to the last file, we need to add them here as well. Right after the close of the unordered list nav, let’s add the post function and give it a value of 0.

</ul>
<script>post(0);</script>      

Now, copy everything in this file, create a new file named post1.html and paste it. Do the same three more times, but change the 0 to 1,2,3,etc for the functions and post2,post3,post4. This way, the cards on our home page will link to their own post.

Completed!

And that’s it. We have finished our entire blog, made of HTML, CSS, and JS. We used Figma to design and plan out our website. The finished version is here: stempump.neocities.org. We added a bit more CSS than needed. If you want to see how we did it, Inspect Element or View-Source. If you have any questions or need help, contact us.

We would appreciate it if you would fill out the feedback form. This will allow us to get feedback on the resources we provide.

Along with that, feel free to sign up for our free bootcamps we host every month. If you want to learn anything specific, please let us know.

chevron_up