WDD0 WebStorm Setup | Higher Computing Science

01

Connect WebStorm or switch to a text editor

Follow the steps directly in WebStorm. If it doesn't activate before we need to move on, switch to a plain text editor with your browser instead — HTML, CSS and JavaScript files run in any browser with no licence required.

Open WebStorm.

Go to Help → Register… or Help → Manage Subscriptions….

In Server address, paste this License Vault URL exactly:

https://jghs.fls.jetbrains.com

Do not enter oauth.fls.jetbrains.com. That address opens automatically later.

Optional: click “Test Connection”. If reachable, it should show “Connection successful”.

Click Activate.

Your browser should open automatically to a sign-in page.

Sign in using your school email address ending in @ea.edin.sch.uk.

Return to WebStorm and check that it now shows as licensed or activated.

Tick your route before Part 2

Connected to WebStorm
I can open the editor. Switched to a text editor
WebStorm didn't activate in time.

02

Getting to know WebStorm — guided challenges

Use whichever tool you selected. Items marked WebStorm only show off something a plain text editor can't do — if you switched to a text editor, skip those and move to the next one. Every item is complete when you can see the stated result yourself.

Open the project panelAny tool. Show the file tree on the left (WebStorm) or your folder in Explorer/Finder (text editor). Locate index.html inside it. Preview the page liveAny tool. Click the browser icon in the gutter next to <html> (WebStorm) or double-click the file (text editor). Edit a word of text, save, and refresh the browser tab to see it change. Try an Emmet shortcutWebStorm only. On a new line inside <body>, type ul>li*3 and press Tab. WebStorm expands it into a complete three-item list instantly. Watch code completion suggest a propertyWebStorm only. In style.css, start typing back inside the existing rule. Accept the suggested background-color with Tab or Enter. Break a tag, then read the warningWebStorm only. Delete the closing </p> tag. Notice the red underline and gutter marker, then undo (Ctrl/Cmd+Z) to restore it. Rename a class everywhere at onceWebStorm only. Add class="intro" to the <p> tag, place your cursor on intro and press Shift+F6. Type a new name — WebStorm updates every place it's used. Find the built-in terminalWebStorm only. Open View → Tool Windows → Terminal. You don't need to type anything today — just confirm you can open and close it. Change the editor theme or fontAny tool. Choose one visible cosmetic change, then return to the editor.

Provided file · index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Higher Computing Science</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello from Higher Computing Science!</h1>
<p>Your WebStorm tool is ready.</p>
</body>
</html>

Download both files into the same folder and open index.html. You do not need to type or change these yet.

Provided file · style.css

body {
  font-family: sans-serif;
  background-color: #f8f8fc;
  color: #1a1a2e;
}

This file must sit in the same folder as index.html — the link between them is the <link> tag in the HTML.

03

Challenge ladder

Build on the provided page and take it as far as you can. Use the HTML and CSS you already know — and if you're on WebStorm, reuse Emmet, code completion or rename refactor from Part 2 wherever they save you time. Complete a tier when your own preview shows its checkpoint.

Bronze

Make it personal

Edit the heading and paragraph text in index.html so the page is about you.

Self-check: save the file and refresh the browser tab. The page now shows your own text.

Edit the text between the opening and closing tags — for example between <h1> and </h1> — and leave the tags themselves alone. Save before you refresh.

Silver

Add some style

In style.css, change one property so the page's appearance visibly changes — for example its colour, background colour or font.

Self-check: refresh the browser tab without touching the HTML file. The visual change still appears.

Change the value on the right of an existing declaration, such as color: #185FA5; or background-color: #E6F1FB;, then save style.css and refresh the browser.

Gold

Add a new element

Add one new HTML element — a second paragraph, an image, or a list — and give it its own CSS rule using a class or id selector.

Self-check: the new element appears in the browser and is visibly styled differently from the rest of the page.

Add class="highlight" to your new element in the HTML, then target it in the CSS with .highlight { }. Any property inside that rule only affects elements with that class. On WebStorm, an Emmet abbreviation like p.highlight + Tab writes the opening tag with the class already attached.

Zero-entry option · a valid route

Run and customise a ready-made profile card

If Bronze feels like a cold start today, download this pair of files, open them, and make two surface changes—for example, change the name shown and one colour. Seeing your edited version render counts as useful progress.

Provided file · profile.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Profile card</title>
<link rel="stylesheet" href="profile.css">
</head>
<body>
<div class="card">
<h2>Your name here</h2>
<p>Favourite subject: Computing Science</p>
</div>
</body>
</html>

Provided file · profile.css

.card {
  border: 2px solid #185FA5;
  border-radius: 10px;
  padding: 16px;
  font-family: sans-serif;
  max-width: 280px;
}

04

Wrap-up

My session record

Tick one tool and the highest route you completed. Screenshot this card, print the page, or show it on screen before the end of the lesson.

WDD0 · WebStorm setup

Set up. Find your way around. Start building.