Introduction to Computer Programming: The Basics

10/2/2025

Computer Programming

Beginners

cssjsGetting started in web developmentunderstanding the fundamentals of htmlLearning about frameworks in frontendlearning about backends in backendhostinghow to build your own website using html css and jshow to build websites using pythonpython flask framework - getting startedDjango - getting startedHTML crash courseCSS crash coursephpnodejsexpressjswordpress

Introduction: Why Computer Programming Is Foundational

Computer programming is the art and science of instructing computers to solve problems. In our technology-driven world, everything from banking to social media runs thanks to code. This blog focuses on teaching actual programming concepts, not just surface-level advice. Whether your goal is getting started in web development, how to build your own website using HTML CSS and JS, or learning about backends in backend, understanding the basics is critical.

What is Computer Programming?

A computer program is a sequence of instructions that tell a computer what to do. These instructions are written in a programming language—a special way for humans to communicate with machines. Programming is the process of writing and organizing these instructions to perform a particular task, such as calculating a sum, displaying a webpage, or automating repetitive tasks.

Key Terms Explained

Source Code: The human-readable instructions written by a programmer.
Compiler: A program that translates source code into machine code (code computers understand directly).
Interpreter: A program that reads and executes source code line by line.
Language Syntax: The set of rules for writing correct instructions in a language.

Understanding the Fundamentals of HTML, CSS, JS: The Building Blocks of the Web

To build a website or web application, you must grasp three core technologies: HTML, CSS, and JavaScript. Let’s break down each one step by step.

HTML Crash Course: What is HTML?

HTML stands for HyperText Markup Language. It provides the structure of web pages. Think of HTML as the bones of your site. Each element—like headings, paragraphs, or links—is defined by an HTML tag.


<!DOCTYPE html>
<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <h1>Welcome to Programming!</h1>
    <p>HTML structures the web.</p>
  </body>
</html>

Real-world use: Every website starts with HTML. If you open your browser’s developer tools, you’ll see HTML elements structuring the page. This is the first step for how to build your own website using html css and js.

CSS Crash Course: What is CSS?

CSS stands for Cascading Style Sheets. It controls the presentation and layout of web pages. Where HTML is the bones, CSS is the skin and clothes—the design.


/* styles.css */
body {
  background-color: #f5f5fa;
  color: #262626;
}
h1 {
  font-size: 2em;
  color: #0057b7;
}

Real-world use: E-commerce sites use CSS to create visually attractive product pages. CSS is essential for responsive design, meaning your site looks great on all devices.

JavaScript Basics: What is JavaScript?

JavaScript (JS) is a programming language that makes web pages interactive and dynamic. Unlike HTML and CSS, JavaScript can respond to user actions, manipulate content, and make network requests.


// script.js
document.querySelector('h1').addEventListener('click', function() {
  alert('Hello, World!');
});

Real-world use: Social networks use JavaScript to load new content when you scroll or to show/hide menus when you click buttons.

How To Build Your Own Website Using HTML, CSS and JS: Step-by-Step Walkthrough

Let’s walk through creating a basic website from scratch using these three technologies. For this, you'll just need a text editor and a browser.

Create an HTML File:


<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello, World!</h1>
    <button id="btn">Click Me!</button>
    <script src="script.js"></script>
  </body>
</html>

Add CSS (styles.css):


body {
  background: #e3f2fd;
  color: #262626;
  font-family: Arial, sans-serif;
}
button {
  padding: 10px 20px;
  background: #0288d1;
  color: #fff;
  border: none;
  border-radius: 4px;
}

Add JavaScript (script.js):


document.getElementById('btn').onclick = function() {
  alert('Button clicked!');
}

When you open index.html in your browser, you’ll see styled text and a button. Clicking the button displays a message—your first interactive website!

Learning About Frameworks in Frontend: What Are Frameworks?

A framework is a set of pre-written code libraries that help you build applications faster. Think of it as a skeleton or blueprint for websites. For frontend development (code that runs in the browser), popular frameworks include React, Vue, and Angular.

Use case: Complex sites like Facebook use the React framework to manage user interfaces that change frequently and have many interactive pieces.

How a Framework Works: A Conceptual Diagram in Words

Imagine a car factory: The framework is the assembly line. You just provide parts (your code), and the factory (the framework) ensures everything is assembled correctly and efficiently with all features like doors that open (UI events), screens (pages), and wheels (navigation).

Learning About Backends in Backend: What is Backend Programming?

The backend (“server-side”) is everything that happens behind the scenes, such as storing data, managing users, and serving content to the frontend (the user’s browser). Backend code runs on a server (a powerful computer), not in your browser.

Popular backend languages: Python, PHP, JavaScript (Node.js), Ruby, and Java.

Practical Example: Simple API with NodeJS and ExpressJS

Node.js allows you to run JavaScript code on the server. ExpressJS is a framework for simplifying backend code in Node.js. Here’s a simple backend that responds to web requests:


// app.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello from the Backend!');
});

app.listen(3000, () => console.log('Server running on port 3000'));

This code creates a simple server: If you visit http://localhost:3000, you’ll see the greeting. This is a core part of learning about backends in backend.

Other Backends: PHP and WordPress

PHP is a classic server-side scripting language popular for building web applications. WordPress—the world’s most used content management system—is built with PHP.


<?php
echo "Hello from PHP!";
?>

Case study: Blogs, small business sites, or portfolios often use WordPress for ease of setup and flexibility.

How to Build Websites Using Python: Powerful Backends with Flask and Django

Python Flask Framework - Getting Started

Flask is a lightweight Python framework for web applications. It gives you fine-grained control to build everything from scratch.


# app.py
from flask import Flask
app = Flask(__name__)

@app.route("/")
def home():
    return "Hello, Flask!"

if __name__ == "__main__":
    app.run(port=5000)

Run this and visit http://localhost:5000 in your browser. Congratulations! You’ve launched your first Flask app.

Django - Getting Started

Django is a “batteries-included” Python web framework for rapid development. It provides an admin panel, database support, user authentication, and more—with almost zero setup.


# Install Django and create a project (in terminal)
pip install django
django-admin startproject mysite
cd mysite
python manage.py runserver

Visit the auto-generated admin panel at http://localhost:8000/admin.
Django is perfect for fast, secure database-driven websites like e-commerce sites or blogs.

Hosting: How Do You Put Your Website Online?

Hosting means making your website available to the world. When your website's files (HTML, CSS, JS, images) are on a web server, anyone can access them using the internet.

Static hosting: Platforms like Netlify, GitHub Pages, or Vercel for HTML/CSS/JS sites.
Backend hosting: Use services like Heroku, DigitalOcean, or AWS to host Python Flask, Django, PHP, or NodeJS/ExpressJS servers.

For example, to host a simple site with Netlify:

Sign up at netlify.com.
Drag-and-drop your site folder (containing index.html) onto the interface.
Your site will have a public URL instantly.

Putting it Together: Practical Example & Real-world Case Study

Let’s imagine a mini-startup launches a web app:

The frontend (HTML, CSS, JS) is developed as an interactive landing page.
The backend (NodeJS/Express or Python/Flask) collects user signups and stores them in a database.
Hosting is managed via Heroku or Vercel for backend, Netlify or GitHub Pages for frontend.

This separation of frontend/backend allows rapid updates and reliable scaling as more users arrive, just as in professional software products.

Conclusion: Next Steps in Your Programming Journey

In this tutorial, you learned:

The true meaning of programming and key terms like language, source code, compiler, and interpreter.
The concrete differences between HTML, CSS, and JavaScript—and how to use them to build your own website.
How frameworks in frontend, like React or Vue, help you scale faster projects.
The essentials of backend programming with real examples in Python (Flask and Django), NodeJS/Express, and PHP, including how to build websites using Python.
How to put your work online with hosting services.

The next step is to experiment with the code presented, build your own small projects, and gradually learn more about topics like databases, APIs, and security. Each concept you master will help you become a more capable programmer—ready to build anything from a simple website to the next big online service.