Project file links

Introduction

In this guide, you will learn how to link HTML, CSS, and JavaScript files together in a project.

We will cover:

The roles and responsibilities of HTML, CSS, and JavaScript
Why separating files is important
How to link an external CSS file to an HTML document
How to link an external JavaScript file to an HTML document

HTML, CSS and JavaScript: roles and responsibilities

In a web project, HTML, CSS, and JavaScript each have different roles and responsibilities.

Look carefully at what these are below.

We could, in theory, throw everything into one huge HTML file. The problem with this approach is that it becomes difficult for coders to manage and maintain the code as it grows.

Instead, it is much better practice to separate your HTML, CSS, and JavaScript into different files, and then link them together using special HTML tags.

Linking an external CSS file

First, open your project folder in VS Code. Look for the index.html file and click to open this.

You should see the code below. Feel free to expand the snippet below to see the full code.

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Harmony | Sign Up</title>
5
  </head>
6
  <body>
40 collapsed lines
7
    <form class="form-wrapper">
8
      <div class="form-section">
9
        <div class="form-field">
10
          <label for="email" class="form-label">Email*</label>
11
          <input
12
            name="email"
13
            type="text"
14
            class="form-input"
15
            placeholder="Your email"
16
          />
17
        </div>
18
        <div class="form-field">
19
          <label for="level" class="form-label">Level*</label>
20
          <select name="level" class="form-input">
21
            <option value="basic">Basic</option>
22
            <option value="advanced">Advanced</option>
23
          </select>
24
        </div>
25
        <div class="form-field">
26
          <label for="hoursPerWeek" class="form-label">Hours per week*</label>
27
          <input
28
            name="hours-per-week"
29
            type="number"
30
            class="form-input"
31
            placeholder="How many?"
32
          />
33
        </div>
34

35
        <button type="submit" class="submit-btn">Sign up</button>
36
      </div>
37

38
      <div class="form-section">
39
        <img
40
          src="./assets/harmony-music-academy-logo.svg"
41
          alt="Harmony Music Academy logo"
42
        />
43
      </div>
44
    </form>
45
  </body>
46
</html>

To link an external CSS file to an HTML document, you need to use the <link> tag in the <head> section of your HTML document.

Just below the <title> tag, on line 5, add the following code:

<link rel="stylesheet" href="./index.css" />

Understanding the `<link>` tag

The rel attribute specifies the relationship between the current document and the linked document. In this case, it’s a stylesheet.
The href attribute specifies the hypertext reference of the linked document. In this case, it’s the path to the CSS file inside the project folder.

<link rel="stylesheet" href="./index.css" />

Your new code should look like this:

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Harmony | Sign Up</title>
5
    <link rel="stylesheet" href="./index.css" />
6
  </head>
7
  <body>
40 collapsed lines
8
    <form class="form-wrapper">
9
      <div class="form-section">
10
        <div class="form-field">
11
          <label for="email" class="form-label">Email*</label>
12
          <input
13
            name="email"
14
            type="text"
15
            class="form-input"
16
            placeholder="Your email"
17
          />
18
        </div>
19
        <div class="form-field">
20
          <label for="level" class="form-label">Level*</label>
21
          <select name="level" class="form-input">
22
            <option value="basic">Basic</option>
23
            <option value="advanced">Advanced</option>
24
          </select>
25
        </div>
26
        <div class="form-field">
27
          <label for="hoursPerWeek" class="form-label">Hours per week*</label>
28
          <input
29
            name="hours-per-week"
30
            type="number"
31
            class="form-input"
32
            placeholder="How many?"
33
          />
34
        </div>
35

36
        <button type="submit" class="submit-btn">Sign up</button>
37
      </div>
38

39
      <div class="form-section">
40
        <img
41
          src="./assets/harmony-music-academy-logo.svg"
42
          alt="Harmony Music Academy logo"
43
        />
44
      </div>
45
    </form>
46
  </body>
47
</html>

Save your changes, and look back at your browser. With the CSS file linked, you should see the styles applied to your HTML document:

Harmony Music Academy sign-up form with CSS styles applied

Linking an external JavaScript file

To link an external JavaScript file to an HTML document, you need to use the <script> tag at the end of your HTML document, just before the closing </body> tag.

The script tag we are about to insert will look like this:

<script type="module" src="./index.js"></script>

Understanding the `<script>` tag

Let’s break down the <script> tag:

The type attribute specifies the type of script. In this case, it’s a module script. This means that we will be able to import other modules (JavaScript files) into this main file of code.
The src attribute specifies the source of the script. In this case, it’s the path to the JavaScript file inside the project folder.

<script type="module" src="./index.js"></script>

Add the following code just before the closing </body> tag:

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Harmony | Sign Up</title>
5
    <link rel="stylesheet" href="./index.css" />
6
  </head>
7
  <body>
38 collapsed lines
8
    <form class="form-wrapper">
9
      <div class="form-section">
10
        <div class="form-field">
11
          <label for="email" class="form-label">Email*</label>
12
          <input
13
            name="email"
14
            type="text"
15
            class="form-input"
16
            placeholder="Your email"
17
          />
18
        </div>
19
        <div class="form-field">
20
          <label for="level" class="form-label">Level*</label>
21
          <select name="level" class="form-input">
22
            <option value="basic">Basic</option>
23
            <option value="advanced">Advanced</option>
24
          </select>
25
        </div>
26
        <div class="form-field">
27
          <label for="hoursPerWeek" class="form-label">Hours per week*</label>
28
          <input
29
            name="hours-per-week"
30
            type="number"
31
            class="form-input"
32
            placeholder="How many?"
33
          />
34
        </div>
35

36
        <button type="submit" class="submit-btn">Sign up</button>
37
      </div>
38

39
      <div class="form-section">
40
        <img
41
          src="./assets/harmony-music-academy-logo.svg"
42
          alt="Harmony Music Academy logo"
43
        />
44
      </div>
45
    </form>
46

47
    <script type="module" src="./index.js"></script>
48
  </body>
49
</html>

Save your changes, and look back at your browser. With the JavaScript file linked, you should see an alert has appeared on your page:

Harmony Music Academy sign-up form with JavaScript alert

Challenges: Exploring JavaScript

With this in place, have a go at the challenges below:

Can you work out where this JavaScript alert is coming from? There’s a clue in the message it gives you!
Change the alert message to something else. What happens when you refresh the page?
Replace the alert with a console.log message instead. What happens when you refresh the page now?
Can you find the console.log message in your browser’s developer tools? Use the internet to search for how to do this if you’re not sure!

🚀 EXTRA CREDIT - Advanced CSS!

Try narrowing the browser window to see how the form responds. What happens when you make the window very small?

Can you use CSS to make the side of the form with the logo in disappear when the window is below 640px wide?

TIP: You will need to research:

media queries in CSS to target different screen widths.
how to use the display property to hide the form section.

Useful resources

Solution - Hide the logo on small screens

First, we need to add a media query to target screens below 640px wide. Add the following CSS to the end of your index.css file:

@media screen and (max-width: 640px) {
  .mobile-hidden {
    display: none;
  }
}

This rule hides any element with the class mobile-hidden when the screen width is below 640px.

Next, we will need to add the mobile-hidden class to the form section containing the logo. Around line 39, update your index.html code to look like this:

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Harmony | Sign Up</title>
5
    <link rel="stylesheet" href="./index.css" />
6
  </head>
7
  <body>
30 collapsed lines
8
    <form class="form-wrapper">
9
      <div class="form-section">
10
        <div class="form-field">
11
          <label for="email" class="form-label">Email*</label>
12
          <input
13
            name="email"
14
            type="text"
15
            class="form-input"
16
            placeholder="Your email"
17
          />
18
        </div>
19
        <div class="form-field">
20
          <label for="level" class="form-label">Level*</label>
21
          <select name="level" class="form-input">
22
            <option value="basic">Basic</option>
23
            <option value="advanced">Advanced</option>
24
          </select>
25
        </div>
26
        <div class="form-field">
27
          <label for="hoursPerWeek" class="form-label">Hours per week*</label>
28
          <input
29
            name="hours-per-week"
30
            type="number"
31
            class="form-input"
32
            placeholder="How many?"
33
          />
34
        </div>
35

36
        <button type="submit" class="submit-btn">Sign up</button>
37
      </div>
38

39
      <div class="form-section mobile-hidden">
40
        <img
41
          src="./assets/harmony-music-academy-logo.svg"
42
          alt="Harmony Music Academy logo"
43
        />
44
      </div>
45
    </form>
46
  </body>
47

48
  <script type="module" src="./index.js"></script>
49
</html>

With this code in place, the logo will disappear when the window is below 640px wide.

Click to reveal

Can you make the Harmony Music Logo appear at the top of the form on mobile screens (i.e. when the window is below 640px wide), but hide it on desktop screens?

Solution - Move the logo on mobile screens

The effect of ‘moving’ the logo is actually an illusion. As we hide the logo on the right, we simultaneously show a second logo on the left that is hidden on larger screens.

First, add a second logo to the left side of the form that is hidden on desktops, but revealed on mobile.

Around line 10, update your index.html code to look like this:

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Harmony | Sign Up</title>
5
    <link rel="stylesheet" href="./index.css" />
6
  </head>
7
  <body>
8
    <form class="form-wrapper">
9
      <div class="form-section">
10
        <img
11
          class="mobile-display"
12
          src="./assets/harmony-music-academy-logo.svg"
13
          alt="Harmony Music Academy logo"
14
        />
15
        <div class="form-field">
16
          <label for="email" class="form-label">Email*</label>
17
          <input
18
            name="email"
19
            type="text"
20
            class="form-input"
21
            placeholder="Your email"
22
          />
23
        </div>
27 collapsed lines
24
        <div class="form-field">
25
          <label for="level" class="form-label">Level*</label>
26
          <select name="level" class="form-input">
27
            <option value="basic">Basic</option>
28
            <option value="advanced">Advanced</option>
29
          </select>
30
        </div>
31
        <div class="form-field">
32
          <label for="hoursPerWeek" class="form-label">Hours per week*</label>
33
          <input
34
            name="hours-per-week"
35
            type="number"
36
            class="form-input"
37
            placeholder="How many?"
38
          />
39
        </div>
40

41
        <button type="submit" class="submit-btn">Sign up</button>
42
      </div>
43

44
      <div class="form-section mobile-hidden">
45
        <img
46
          src="./assets/harmony-music-academy-logo.svg"
47
          alt="Harmony Music Academy logo"
48
        />
49
      </div>
50
    </form>
51
  </body>
52

53
  <script type="module" src="./index.js"></script>
54
</html>

Next, add a CSS rule to show the new logo on mobile screens and hide it on desktop screens.

Update your index.css code to look like this:


62 collapsed lines
1
:root {
2
  --black: rgb(22, 22, 22);
3
  --white: rgb(255, 255, 255);
4
  --grey-50: rgb(250, 250, 250);
5
  --grey-300: rgb(192, 198, 201);
6
  --grey-500: rgb(88, 104, 112);
7
  --brand-light: rgb(255, 90, 58);
8
  --brand-dark: rgb(172, 62, 41);
9
  --sky-500: rgb(14 165 233);
10
  --box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
11
    0 4px 6px -4px rgb(0 0 0 / 0.1);
12
}
13
* {
14
  color: var(--grey-500);
15
  box-sizing: border-box;
16
  font-family: Arial, Helvetica, sans-serif;
17
  margin: 0;
18
}
19
button {
20
  cursor: pointer;
21
}
22
.form-wrapper {
23
  display: flex;
24
  background-color: var(--grey-50);
25
  min-height: 100vh;
26
}
27
.form-section {
28
  width: calc(50% - 1px);
29
  display: flex;
30
  flex-grow: 1;
31
  flex-direction: column;
32
  justify-content: center;
33
  align-items: flex-start;
34
  gap: 2rem;
35
  padding: 2rem 4rem;
36
}
37
.form-section:first-of-type {
38
  border-right: 1px solid var(--grey-300);
39
}
40
.form-field {
41
  display: flex;
42
  flex-direction: column;
43
  gap: 0.5rem;
44
  align-items: flex-start;
45
  width: 100%;
46
}
47
.form-label {
48
  font-size: 1.25rem;
49
}
50
.form-input {
51
  background-color: var(--white);
52
  border-radius: 999px;
53
  border: 1px solid var(--grey-300);
54
  font-size: 1.5rem;
55
  padding: 0.75rem 1.5rem;
56
  font-weight: 300;
57
  color: var(--black);
58
  width: 100%;
59
}
60
.form-input::placeholder {
61
  color: var(--grey-300);
62
}
63
.form-input:focus {
64
  outline: none;
65
  outline: 2px solid var(--sky-500);
66
  box-shadow: var(--box-shadow-lg);
67
}
68
.mobile-display {
69
  display: none;
70
}
22 collapsed lines
71
.submit-btn {
72
  border-radius: 1.75rem;
73
  margin: 0 auto;
74
  text-align: center;
75
  color: var(--white);
76
  border: 0;
77
  padding: 0.75rem 2rem;
78
  font-size: 1.5rem;
79
  background: linear-gradient(
80
    180deg,
81
    var(--brand-light) 0%,
82
    var(--brand-dark) 100%
83
  );
84
  transition: all 0.3s ease;
85
  outline: none;
86
  box-shadow: none;
87
}
88
.submit-btn:hover {
89
  outline: 1px solid var(--brand-dark);
90
  box-shadow: var(--box-shadow-lg);
91
  transition: all 0.3s ease;
92
}
93

94
@media screen and (max-width: 640px) {
95
  .mobile-hidden {
96
    display: none;
97
  }
98
  .mobile-display {
99
    display: block;
100
  }
101
}

If you notice, we have added a new class called mobile-display to the new logo, but this class has two separate rules defined for it.

This class is explicitly hidden on desktop screens, but it is shown on mobile screens.

With this code in place, the logo will seem to move from the right side of the form to the top when the window is below 640px wide.

Click to reveal

Summary

In this guide, you have learned how to link HTML, CSS, and JavaScript files together in a project.

You have:

Linked an external CSS file to an HTML document using the <link> tag
Linked an external JavaScript file to an HTML document using the <script> tag

Next steps

In the next guide, you will learn how to create a comment plan for your project.