Skip to content

Coding Basics for Primo NDE

Jump to bottom
Jerry Yarnetsky edited this page Jun 2, 2026 · 1 revision

Why do I need to understand HTML, CSS, and Javascript?

These are the code types needed to create a functional and aesthetic webpage. The code may be on the same file or in linked files that communicate with each other. You don’t have to be an expert in any of them, but understanding the basics helps you implement web-based projects such as Primo.

Think of these coding languages as the three legs of a stool that comprise your website:

  • HTML — HyperText Markup Language — determines the structure of your webpage and defines the content type for each element on your page.
  • CSS — Cascading Style Sheets — describes how each element appears on the page and includes design aspects such as – fonts, colors, spacing, and page layout.
  • Javascript provides interactivity with your code. You use Javascript when you want an action to take place when you interact with a specific element on your page— such as clicking a button to display a chat with a librarian widget.

How do HTML, CSS, and Javascript talk to each other?

In most websites, you’ll see <link> elements connecting your CSS and Javascript files to your HTML page. These are frequently in the

element which holds metadata at the top of your HTML files.

In Primo NDE these needed pages are embedded in pre-coded templates. These templates frequently dictate the location and names of needed files. For example, the file needed to display content at the top of your Primo page must be named header.html. In turn, it needs to be located in header-footer folder that’s in the assets folder of your Customization Package. Once correctly located and named, it will automatically appear at the top of your Primo pages.

HTML

Elements

Elements are the building blocks of HTML and they are defined by their tags in angle brackets.

<p>Most elements, such as this paragraph, have opening and closing tags.</p>

A few elements, such as images, have a single tag. While image elements have a single tag, they require multiple attributes to define the image location and description.

<img src=”folder/image-location.jpg” alt=”description of the image” />

src=”” is the image location and file name

alt=”” is the alternative text for describing image content for people using screen readers or have their images turned off in their browser.

Learn more about adding images in HTML

Website file structure and linking

Several elements — such as web links <a></a> and images require web addresses for their destinations and sources to work.

If the image or link is on a different website, you’ll see the full web address. For example, here is a link going to the OhioLINK web site:

<a href=”https://www.ohiolink.edu/”>OhioLINK</a>

If the addresses are on the same server, you’ll only see their folders and file structure listed in the address. Each folder level is separated by a slash. For instance

<img src=”/assets/images/library-header-logo.png” alt=”library logo” />

This source address means the image named library-header-logo.png can be found in the images folder that is nested inside the assets folder.

Learn more about adding links in HTML

Cascading Style Sheets

Cascading Style Sheets (.css) define the HTML structure and appearance on a web page

CSS describes design aspects such as fonts, colors, spacing, and page layout.

In NDE, it is possible to set most appearance aspects without touching the custom.css file. However, if you need further customization, learning the basics of CSS helps.

As a starter, it helps to recognize CSS’s unique syntax.

Here is a single block of CSS describing a single element:

footer {
   background-color: maroon;
   padding: 2rem 1rem;
   color: white; }
  • Each block starts with a selector defining which element you are describing. Here we’re describing our page footer
  • Inside the curly brackets are declarations of how our footer element will appear. Each ends with a semicolon.
  • Each declaration is divided into its property and value separated by a colon.

In this example, the declarations state that our background color is maroon and the text color is white. It also defines the spacing within an element, which is called padding.

Learn more about CSS

See an example of CSS Link opens in new window CSS introduction video (90 seconds) Link opens in new window Introduction to CSS Link opens in new window

Javascript

Javascript provides interactivity with your code

You use Javascript when you want an action to take place when you interact with a specific element in your website.

A good example is embedding a LibChat widget into Primo. Clicking a button on the page brings up the chat window. To make this work this, you alter Javascrip to include your local Primo ID or local LibChat ID.

While Javascript can be complicated to work with as a new coder, the needed code is frequently made available as pre-written batches of code you can copy and paste into your customization folder. These code chunks will often include notes on how to alter the code for your local use.

Tips

Learn more about Javascript

Download a code editor if your institution doesn’t have one installed on your computer.

Here are two great options:

Looking for specific code snippets?

Right click (or on Mac control-click) an element in question and select Inspect to see the code. You can use Ctrl+F / CMD+F to find specific snippets!

How to Inspect Element in Chrome (video, 3 minutes)

Unless specified in the documentation, do not edit code in between the

tags on top of the HTML document

Syntax matters!

Most HTML tags need a corresponding closing tag. Closing tags have a forward slash.

<p>This is a properly formatted paragraph</p>

Make sure your CSS has all necessary semi-colons and curly brackets

Intros, Examples, and Tutorials

HTML

CSS

Javascript

Clone this wiki locally