1.1: One small step

Lesson 1.1: One small step #

Let’s jump straight in, and get something up and running.

In this lesson, I’m going to just give you some code, and you run it. We will explain each line, one by one, in the next lesson. For now, the focus is on getting the code up and running, so you can see what you can do.

Here is the code:

<html>
    <head>
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    </head>

  <body>
    <h1>Getting Started with Learning PyScript</h1>
    <py-script>
        print("Hello from Python!")
    </py-script>
  </body>
</html>

To run this, take that code, and put it in a HTML file on your computer called small_step.html. A HTML file is just a text file, but with a .html extension - you can find more information on writing them in our extra resources page here.

Once that is done, launch a web server pointed at this directory. You can find some extra information about this at this page, but the short version is to run the following command in a terminal (CMD) from inside the directory you saved your small_step.html file:

python -m http.server

(If you are on Windows, that command won’t just work - check out the help page for more information.)

Once that is done, open your favourite web browser (anything released in the last year will do, Firefox, Chrome, Edge), and go to the URL your web server requires. If you ran the above code, that is likely http://0.0.0.0:8000/ and then open the file small_step.html, which should present as a link on the page.

That’s it!

The page should open with “Getting Started with Learning PyScript” visible on screen. After PyScript loads, you should be able to see the “Hello from Python” also shown on screen.

The first line (“Getting Started…”) comes from HTML - the language of web pages. The second line (“Hello from Python”) comes from PyScript - it was generated, by Python, running in your web browser.

As a sidenote, the websites we will be creating at first will look quite… basic. This is a deliberate decision to ensure we are focusing on the key aspects of each lesson. After the first section, we will add some styling and so forth. For now though, let’s keep it simple!

Take a shot now at these exercises, and then onto the next lesson!

Exercises #

Take your learning further with some exercises. The exercises here are design with the assumption you have some python knowledge. If not, I recommend googling “Python for loop example” to help you.

  1. Change the script to output the following (each on different lines): “Countdown”, “5”, “4”, “3”, “2”, “1”, “Blast off!”
  2. Using the time module, have a delay of one second between each print out from question 1.
  3. Create a second HTML file, and have PyScript print out “Hello Name”, replacing Name with your own name.
  4. Learn by breaking: Delete each line, by itself, and see what happens to the resulting page. Using this information, can you work out what each line is for? Note that not every line is needed! For example, deleting the line </body> won’t break anything (your web browser fixes this automatically).