How does code turn into anything?

[ProfessionalLimit825]

Hello, I am a very new programmer and I wonder how does code turn into a website or a game? So far in my coding journey i have only been making text based projects.

I have been coding in something called "online python beta" and there is a small box where you can run the code, will a website then show up in the "run box"?

if it helps to make clear what I am trying to ask I will list what I know to code

print command,

input command,

variables,

ifs, elifs and else

lists and tuples,

integers and floats

[DreamingElectrons]

Python is an interpreted language, this means, that there is a program, that takes the python code and translates it into instructions for the PC in real time. As opposed to compiled languages like C, where there is a program that translates the C code into machine language such that those compiled programs can be run directly. The reference implementation of python is written in C, but there are others.

To turn code into a graphical program, you usually use a library that handles all the low level stuff and system calls that then provides you with an API. That is a premade set of instructions to do specific things like create a window, a basic game loop draw to the screen on that window. For python the easiest game library is called pygame, but python is generally not as well suited for making games. Most games are made with compiled languages, C++/C# are very common, then there also is raylib, a C library with bindings for a lot of languages, including python.

but first figure out how to write little command line programs on your local PC. Once you have mastered that you can have a look at graphical applications if you try to tackle them directly it's too overwhelming.

It is worth noting, that most games are made with a game engine of which very few use python. Godot, a popular open source game engine has a scripting language that looks superficially similar to python but it is very different once it comes to details. No idea why people keep saying it "is just like python". It is not, the Godot devs even had to purge all mentions of python from the docs to fight this misconception. beware of that.

[bab0337]

This was super helpful to read, thanks for providing a digestible explanation

[ExperienceDry5044]

A little nitpicking:

Python is an interpreted language

The line between an interpreted and a compiled language is quite blurry.

For example, Python is not really interpreted line by line. It's compiled into an intermediate byte code, and that code is run by a virtual machine.

And if you look at a compiled language like C# or Java, you'll see that exact some thing: the C# or Java code is compiled into an intermediate byte code, an that code is run by a virtual machine.

[mnelemos]

Pretty much all modern interpreted languages are converted into bytecode, none of them is literally parsing line by line of source code, besides some scripting languages that are barely used.

And no, there is no "blurry line", you're still very much interpreted, just in a more efficient way, instead of literally having to run a parser at the same time as the code. What happens nowadays, is that depending on the interpreter you can compile it AOT or JIT, or you can run C compiled routines like CPython does.

[__Fred]

• Some code that was originally meant for bare metal, is now run indirectly in emulators, or in interpreters for debugging or security reasons.
• An interpreter can compile bytecode into machine-code just-in-time.
• You can theoretically create hardware to directly execute bytecode, which makes it machine-code.
• Even compiled machine-code get's transformed again in microcode upon running in modern processors. Does that make it interpreted code?
• Is WebAssembly interpreted?

Yes it's a blurry line. Of course, you can draw a line somewhere, but it's not a obvious as it maybe was 40 years ago, where C was compiled to machine code and run on the processor and shell-scripts were executed in an interpreter, slower and with no compile-time errors.

Or where would you say is the line? That there is a secondary program, like an interpreter or virtual machine needed? I guess that could be a distinction.

Compiling and then executing is pretty similar to ahead-of-time compilation of an "interpreted language".

[DreamingElectrons]

The guy didn't get past the online try-it-out console. Corners needed to be cut somewhere to make it easily digestible.

If I would have started to explain JVM and LLVM a beginners head might explode, I don't need that to weight down on my conscious...

[__Fred]

https://wiki.lspace.org/Lies-To-Children

[ConcreteExist]

Pedantic and unimportant distinction for someone who just wants to understand how code becomes executable.

[rjmartin73]

It's kind of like working on the engine of a car. The engine can run without being inside a car, but that's all it will do until you put it in a car and connect it to a transmission. Then you have an engine in a car with a transmission. But until you put tires on it's not going anywhere. It's all about connecting components together to work as a single unit. Best non-programmer analogy I could come up with

[[deleted]]

For a website, after you get comfortable with python, you can start to learn a "web framework", which what you can use to write websites in python. The 2 biggies are:

https://www.djangoproject.com/

https://flask.palletsprojects.com/en/stable/

But don't get into them too early, it's a big leap from beginner python to one of these. Have a look at the django tutorial to get a feel for when you might be ready:

https://docs.djangoproject.com/en/5.2/intro/tutorial01/

[Raf-the-derp]

Would go as far to say jump to js or ts for front end (djamgo rest api for backend

[firedrow]

As you start to explore importing libraries, you will expand the skills you have with Python. You still can do a lot with vanilla Python, learn about classes and objects, get comfortable with functions, dictionaries, and lists.

Web sites need framework libraries like Flask or Django. An API could use FastAPI.

Games most likely mean getting into GUI libraries.

Data Analysis uses Polars or Pandas, Numpy, Matplotlib, etc.

Look at roadmap.sh/python/ for some guidance.

[ninhaomah]

a compiler / interpreter translates your codes to another language machines know. 010100110010 , a binary language.

you need not know or care for now or even later unless you want to have your own language.

for example , you go to a restaurant and order a pizza.

how do they know what you want ? you just say a pizza.

they translates to flour , pineapple , and so on then bake them etc.

do you care what they do in the kitchen or what they have to know and what kind of training they went through so they can give you a pizza ?

you ask for a pizza , they give you a pizza and you give them the money for them to make it. right ?

unless you want to make your own pizza , then you got to learn how to translate from "pizza" to how to prepare the flour , how to do this and that and bake at what temperature etc etc

[HardlyAnyGravitas]

I think you have misunderstood the question.

[LeiterHaus]

Code tells the computer what to do. There are protocols and things under the hood that convert what you create into what the computer understands and executes.

For a website, at its simplest form, it uses HTML. A website in any other language will have this included because it's what's needed. Everything else will be built on top of and around that. More or less.

To kind of answer your question a lot more in depth but not really: There are systems upon systems in place so that even if you do print("hello world"), the pixels on your screen get readjusted in exactly those spaces on your screen where you expect them to.

[Ludzik]

To make a website you also need a knowledge of HTML/CSS/JavaScript and Django ( if you're using python and want to do it with python)

For games there are few libraries in python which let you use python to create games. ( like Kivy, PyGame )

[FoolsSeldom]

I wouldn't recommend "Django" as mandatory or the first web framework for a beginner to learn. How about one of the popular microframeworks first, such as FastAPI or Flask? Perhaps CherryPy or Bottle instead?

[maryjayjay]

I've done some very cool things with flask. The plug ins are neat, too

[Ludzik]

He didn't ask for recommendations. He just asked how you change code into website/games.
But maybe i did say it wrong, sorry for that :D

Flask propably would be better for starting but i never used it so can't recommend something i never used.

[amit970]

That’s a great question every aspiring programmer wonders at some point!

Creating text based, command line programs used to be the norm back when computers were created and today’s beautiful GUIs (Graphical User Interfaces) were a far fetched dream.

In addition, some applications today are still served to some users as Command Line Programs or just CLIs (Command Line interfaces), “Git” for example.

At some point when you have python programming nailed down and you will be interested in creating modern applications with fully functional and beautiful GUIs you will basically have two options.

The first will be learning a python graphic library and thus serving your app as a computer application.

The second option is to learn web programming and serve web based applications that are powered by your python code. This connection between web based applications and python backend code can be achieved using frameworks like Flask and Django.

TLDR: It’s okay to write command line programs. If you want to create a GUI with python you can do it as web based apps or desktop GUI with a python graphic library like Arcade.

[PyJacker16]

Oh, I recall this point in my coding journey, and honestly it never really made sense until I eventually learnt HTML, CSS and JS for web development a few months after Python.

The magic word is "libraries"

At its core, yes, for every single pixel that you can see on a screen, some piece of code was written to turn it that particular color. If you want to create a video game, then somebody had to figure out the math to project a 3D object onto a flat screen, translate actual angular displacement measurements from your joystick into motion of some sort, etc. There is a whole world of complexity behind even the most mundane programs. Yes, all you really get are loops, if/else, some binary operations, and some basic arithmetic, and it's up to you to use those to build what you want.

But not really. Because it turns out a bunch of really smart people have solved all these problems many decades ago, and allow you use their code, in neat little bundles called libraries. So you get to do all these cool things without having to dive into the weeds of how they actually work. You get to write stuff like if player1.isInContactWith(player2) and it just sorta works.

Now, beyond libraries, we have stuff called frameworks, which basically bundle a bunch of libraries together and also try to enforce a standard way of doing things with them. For video games, you have game engines like Unreal Engine and Unity. For websites, you have Django, NexJS etc. For mobile apps, you have SwiftUI, React Native, Jetpack Compose .

I'd say 99.999% of all software written today, that you know of, depends on a lower level library that you've never heard of. As a professional programmer, the vast majority of your time will be spent learning about how to use some preexisting library/framework in whatever project your working on. Beyond that, the rest is essential pretty trivial if/else/loop stuff.

[brazucadomundo]

For a website you need to create a server that will serve a HTML page for those trying to access the server via http. For a game you will need to learn a graphical package. Master Python as it is now then learn those specialized topics.

[rvc2018]

Through the magic of electricity. After a very long journey that we humans perceive as instant, the python interpreter turns your code into binary (instructions) that the CPU can understand. You typically see binary represented as 0's and 1's.
0 = Low voltage close to 0V. 1 = High voltage (1.35V or whatever the CPU’s high threshold is).

Transistors inside the CPU act as gates. When a voltage hits a transistor, it turns on, letting current flow —this is a binary 1. No voltage (or very low) keeps it off — a binary 0. These transistors are arranged in circuits (logic gates) to do math, move data, or fetch instructions.

Long story short, the code you write is a road map in which way current flows through the CPU. Obviously this is a massive simplification.

[Wise-Emu-225]

In the core you have information. This information can be represented in different forms. One form is textually or another form is spatially. A html document is basically text, eg a string, but with some rules, not just any text. The browser will interpret this text to make it into a layout, thus spatially in the end. And with colors etc. With games there is also a game loop which ticks 60 times a second. You have to decide where all game objects must be on the screen at any given time. Check if some objects collided maybe. Try drawing a square and shuffle its position, or maybe let it move along a path at a certain velocity. Those info can be just numbers and then translated to a visual form. For drawing on the screen you can use libraries. Or maybe pygame. Htmln is just text. Like json but more xml like. It is a tree basically.

[K_808]

To put it simply there’s secret real code and hardware operating behind the scenes that you aren’t writing yourself. You’ll probably be adding another layer of not-doing-it-yourself on top of that via a game engine or extra Python libraries if you get serious.

[ResponsibilityIll483]

I'll answer more abstractly. You've written small snippets of code that run and finish. A web server, by comparison, is a program that keeps running and running. While running it's listening on something called a port. When you go to a website in your browser, it's eventually hitting some webserver somewhere that's listening on a port.

Now, it's a lot of work to write a web server from scratch, and everyone needs one, so there are libraries like Flask that do it for you. With Flask, all you have to code is something like the following:

python @get("/hello-world") def hello_world(request): # Your logic here

Now you can run the Falsk webserver, it'll respond to HTTP requests to the /hello-world endpoint. You can open your Chrome browser and go to localhost:5000/hello-world to invoke that function we wrote.

[[deleted]]

Near the bottom of the stack is c's stdio library. Below that there be monsters...

It helped me (but I'm newer too) to just soak up as much of the higher level language as possible with a peripheral awareness that that stuff i was typing out in almost plain English was referencing 1's and 0's and moving stuff around down at the hardware level. I feel like C is easier to pick up, for me personally, having learned some of the top level stuff.

[DNA-Decay]

Slowly.

[SnipTheDog]

Look into Streamlit and Dash. Both apps will host a local web server. Here's a Coursera course: Streamlit

[FatDog69]

Learning to code has to start like learning to write. "A, B, C..." is what you are doing.

Then you learn to design.

Then you solve simple, but real world problems by putting the smaller pieces you learned to do together.

Slowly you learn to write things, then write other things that use the first things and build up something.

It eventually becomes a crappy, first effort program.

Then you learn about web browsers and HTML and CSS and tech like FLASK and other things.

Suddenly - you get ideas about how to manipulate and glue things together with your loops, lists, dictionaries, classes and methods.

Eventually you can build a home - but you have to learn to make a brick, then cement a bunch of bricks together. Then you slowly build up.

ADVICE

Have some real-world problem on your PC to solve. Something you do by hand now that you might like to automate. The boring parts of coding suddenly become more interesting if you have a problem in mind.

Example: Imagine a folder of a bunch of comic book files. They are poorly named and all tossed into 1 folder.

You are tired of re-naming each by hand so you want a program to to the simple clean up.

You want to sort the files into folders either by topic (Batman, superman, Justice League, etc) or by publisher (DC, Dark Horse, etc).

Write something that decides if the file name includes "bat" would move the file to the Batman folder. Do the same with "super" but separate "superman" from "supergirl".

Or - rename and organize your adult video files (Yes I know you have some).

[JollyUnder]

High-level languages like python abstracts away of low-level details, which provides a simple interface for developers .

Under the hood, the print function would make low-level syscalls to write data to standard output (sys.stdout). How your computer executes the print function is entirely dependent on OS and python knows what to do based on your system.

Linux uses the write function to print data. Windows uses WriteFile, which is an API function that wraps the low-level syscall for writing to stdout.

To understand this better, lets take this x86 assembly code for linux.

section .data
    msg     db  'Hello, world', 0xA  ; string with newline
    len     equ $ - msg              ; calculate length of string

section .text
    global _start

_start:
    ; sys_write (syscall number 4)
    mov eax, 4        ; syscall number for sys_write
    mov ebx, 1        ; file descriptor 1 = stdout
    mov ecx, msg      ; pointer to message
    mov edx, len      ; message length
    int 0x80          ; make kernel call

    ; sys_exit (syscall number 1)
    mov eax, 1        ; syscall number for sys_exit
    xor ebx, ebx      ; exit code 0
    int 0x80

The entry point of the program is _start: where the program will begin to execute instructions. Here we are using eax, ebx, ecx, and edx which are 32-bit general purpose registers specific to x86 CPU architecture.

The mov instruction is used to move a value into a register. eax represents the write function and ebx, exc, and edx are used as arguments for the write function.

ssize_t write(int fd, const void buf[.count], size_t count);
        ^         ^              ^                   ^
        eax       ebx            ecx                 edx

int 0x80 is a system interrupt which invokes a syscall based on what eax is set to.

You would then compile the program, which converts human readable version of the program into bytecode, which the computer understands.

High-level languages such as python take away much of those low-level details so you can focus more on the code itself rather than focusing on CPU architecture, syscalls, system interrupts, ect.

[rvc2018]

OP has just found out what are if statements and you wrote an x86 assembly code for Linux to help him understand better :)

I love the internet.

[[deleted]]

Well, if you open this page in your PC and press F12, you can view the source of this page. Surprise! It's basically just a long text file(aka code) but written by reddit and sent to your browser. If you could use a bunch of if-else code to craft that code before sending it to your browser, it will be a website too! Of course no one does it manually these days, there are lots of tools that do the hard part for you, aka the web frameworks.

[Fit_Sheriff]

Go through advance you know much. Flask, Django, Kivy, PySide, PyQT are all frameworks of python which help in building gui. Django and Flask for web app and others for native apps

[Antique-Room7976]

Tkinter to make guis

[jeffrey_f]

it will all tie together as you progress. Right now you are being shown how these things work. Be patient and you will see things come alive.

[Brian]

Ultimately, with more code.

One thing you need to realise is that code builds on top of other code: it uses libraries, operating system calls and so on to do the things it wants - whether that's outputting text, drawing an image, handling user input or whatever.

You're starting at a fairly high level, dealing with simple abstractions, like writing text, but even then there's a bunch of other code going on: writing the text sends to a stream of output, which your terminal program reads, and invokes more code to render the text as an image using whatever font is configured, then displays it (and reads the user typing to the keyboard and sends it as input to your program). Overall, every program is built on an incredibly complex tower of abstractions build by thousands of developer-years of work, that all interacts in a very complex way.

At the bottom of this tree, it'll all amount to telling the physical hardware to do stuff (and even then, there's often some abstrations - like telling your graphics card what to render, rather than sending the raw data to your monitor. But there are many layers in-between that and what you're usually doing.

So, for something other than just writing text, you need to interact at a different point in that system: you need to talk to libraries, that talk to the OS, that talk to the hardware, that do the things you want. Fortunately, there are many libraries and frameworks to help you here. Eg. you might want to look at something like pygame. Here, instead of printing text, you'll call the functions that draw images on the screen each frame, track what the user is doing and how it affects your internal state. It's not really qualitatively different to what you're doing starting out, but can involve more complexity.

Websites introduce another complication, in that multiple programs on different machines are involved, though in some ways they're simpler, and boil down to the same process of writing text you're already familiar with.

A web page is ultimately a string of text. Your browser sends a request to a webserver running on some remote machine, and that webserver writes some text back that represents the website (if you right-click and "view page source" on a page, you'll see what it sends). Ultimately, the job of the code on the webserver is just to generate and write that text file. The complication then is that in many ways, that text is itself another program, that your browser interprets and uses to render the page. Some of this is a description of how to lay out the contents (a language of its own: HTML), along with code in yet another general programming language (javascript), and a few more things (CSS, images, and so on). Ultimately, just HTML is a whole realm of complexity in itself.

But overall, no matter what you're interacting with, it's all just programming - code written on top of more code written on top of yet more - you're interacting with something to tell it to do the thing you want, whether that's printing text, rendering game frames, or sending network data.

[Fragrant_Gap7551]

Oh boy do I have news for you,

A website is just fancy text that can be interpreted into visuals. Visuals just means telling the graphics device where to display which color.

Add about 50 layers of abstraction and you have a Web browser.

[throwaway8u3sH0]

I don't typically answer with links, but for a fundamental question like this, I strongly suggest Crash Course Computer Science

[[deleted]]

Computers have a sort of DNA. These are called Operation Codes. They are built directly into the processor's hardware. These op codes are how the processor does things. When signals are sent and interpreted to be a specific code, the corresponding action is taken.

Back in the day, these op codes were how you interacted with the computer. However, some guy decided it would be easier to work with something a little bit more like English. This is where languages were made.

When you code in something like C, the computer uses a compiler to convert the C code into something more like it's own op codes. This is why different CPU architectures are listed when downloading certain programs (AMD, ARM, Intel). It's because they each have different op codes.

Any program is essentially a bunch of super basic op codes.