Congratulations!

Congratulations, Starlight Cinema has its new look, and you've finished the third phase of the Web Development path!

Think back to where the cinema started: two pages of HTML, a stylesheet, three film cards and two tables. Since then, the site has gone online at an address of its own. Its showtimes load from a data file, visitors choose seats and book them with a form that checks what they typed, and the page remembers their tickets. And now it has a modern look that works on a phone as well as on a computer.

You built all of it yourself, and you can do it again for any website: write its pages in HTML, style them with CSS or Tailwind for every screen, bring them to life with JavaScript, load data, check forms, remember things in the browser and put the site online. That's how the web is made.

The new version online. Upload it as in the lesson Putting It Online, with one extra step first. Browsers don't understand @import "tailwindcss";: at every Run, Start Coder turns your style.css into ordinary CSS. For your website, the Tailwind CLI does that on your computer, as you saw at the end of the Tailwind course. It needs Node.js. Your Tailwind stylesheet stays on your computer, and the website gets the finished CSS:

1. Create a folder cinema and move your website's folder, starlight-cinema, into it. From the editor, save index.html, showtimes.html, script.js and showtimes.json into starlight-cinema, in place of the old files, and style.css into cinema.
2. Open the terminal in the folder cinema and run:

   npm install tailwindcss @tailwindcss/cli
   npx @tailwindcss/cli -i style.css -o starlight-cinema/style.css --minify

   The second command reads your Tailwind stylesheet, finds the classes in the website's files, script.js included, and writes the finished CSS into starlight-cinema/style.css. --minify leaves out spaces and line breaks, so the file is smaller and downloads faster. Run the command again whenever you change your classes.
3. Open starlight-cinema/index.html in your browser and check the look (the showtimes themselves load only from a server, as you know from the showtimes project). Then, on Netlify, drag the folder starlight-cinema onto your project's Deploys page, as before. What npm installed stays in cinema: the website doesn't need it.

Then open your website on your phone. This time, it's made for it.

What's next. The path's last phase is React, a JavaScript library for building whole apps out of components, pieces of a page that you write once and use again and again. After the React course, the cinema comes back one last time: you'll rebuild it as a React app. And if you'd like to keep working on this version first, you know everything a dark mode needs: the variant dark: and the switch from the lesson Dark Mode, and with localStorage, the switch can even remember the visitor's choice.

Before you go, sign your website, as you signed your very first page at the start of the path.