Run your first project on your computer

Start with a practice you have tried

This guide brings together the HTML, CSS, and JavaScript you have already practiced. Start here after learning page structure, basic styling, and click events. You will use those skills to run a complete project on your computer.

You have been editing code inside Tuklas. A local project uses the same idea, but you keep the files on your own computer. You need a browser and a plain-text code editor. Use an editor that saves ordinary text files, not a word processor that adds document formatting. You do not need a framework, package manager, or hosting account for these small projects.

Open a practice and choose Download project (.zip). You can download at any point; you do not have to pass the checks first. The download contains your current edits, not the explained solution. In JavaScript practices, it also includes the supplied HTML and CSS. A ZIP is a package holding several files together.

Find the ZIP in your browser's downloads. Extract or unzip it into a folder you can find again, such as my-first-project. On Windows, use Extract All; on macOS, opening the ZIP usually extracts it. Work with the extracted files, rather than opening an HTML file from inside the ZIP viewer. Keep the files together so their paths still work.

my-first-project/
├── index.html
├── styles.css
├── script.js
└── README.txt

Most practices use this simple structure. The broken file paths practice keeps its pages, css, js, and images folders, so it matches the exercise's tree. Its incorrect paths stay incorrect until you fix them. Read README.txt for the opening steps and notes about the export.

See it happen: try a small change

<h1>My garden</h1>

Open the page and find its connections

Double-click index.html to open it in your browser. If that opens an editor instead, use your computer's Open with menu and choose a browser. The address begins with file: because the page is on your computer. It is not a public website, and other people cannot visit it through that address.

Now open the extracted folder in your code editor. index.html holds the page content, styles.css controls its appearance, and script.js holds behavior. The generated HTML already connects the files. Find these lines near the top of index.html:

<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>

Both paths start in the folder containing index.html. The browser loads styles.css as a stylesheet and script.js as an external script. defer makes this ordinary script wait until the HTML has been parsed, so its code can find the page's elements. You can also create these three files yourself and use the same connections.

An HTML or CSS practice does not need JavaScript to work. Its script.js contains a comment where you can add behavior later. The downloaded CSS includes the preview's basic text styling and box sizing before your own CSS. The preview's test runner and completion tracking are not part of the project. JavaScript runs directly in the browser instead of Tuklas's limited practice environment.

Make one small change at a time

Change a visible heading in index.html to a title of your own. Save the file in your editor, then switch to the browser and refresh the page. You should see the new heading. Saving changes the file; refreshing asks the browser to read it again. Merely typing in the editor does not update an already-open page.

Next, add the following rule at the end of styles.css, save, and refresh. If your practice already has a heading rule, placing this after it usually lets this equally specific rule win. The goal is to see the connection between the file you edit and the page you view.

h1 {
  color: #4338ca;
}

For a counter or greeting form, try the buttons after refreshing. Refreshing starts the script again, so an ordinary counter returns to its initial value. You can add the following line to script.js to confirm that it loads. Open the browser's developer tools and select Console to see the message; it does not appear as page text.

console.log("My local project is running.");

Make one change, save, refresh, and check the result before making another. This short loop makes it much easier to connect a result to the code that caused it. Your local edits do not sync back to Tuklas, and downloading does not mark a practice complete. Keep a backup of the folder before experimenting with large changes.

Check the small things first

• No change? Save the edited file, refresh, and check that the browser opened the same folder you are editing.
• No styling? Check the link's href, filename, and folder. Make sure styles.css is not really styles.css.txt.
• No button response? Check the script's src and read the first error in the Console. An unfinished script stays unfinished in the download.
• Missing image? Keep the image with the project and follow its path from the HTML file, or from the CSS file for a background image.

Use consistent capitalization and forward slashes in paths. A path that happens to work on one computer may fail on a case-sensitive web server. Do not rename or move a file without checking the references that point to it.

These examples use ordinary scripts and local files, so opening index.html directly is enough. Later, features such as JavaScript modules or requests for local data may need a local web server. At that point, an editor's local preview server can provide a localhost address. That is a later step; there is no need to set one up just to edit these practices.

Go to the source

• MDN: Dealing with files ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.