Enigma Code Masterclass

UNIT 1: HTML5 - THE ARCHITECTURE ▼

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. Think of it as the Skeleton of a building. It defines where the walls (headings), windows (images), and doors (links) go.

Essential Tags Explained

<!DOCTYPE html>: Tells the browser this is a modern HTML5 document.
<html>: The root element that wraps all content.
<head>: Contains meta-information (data about data) like the title and character set. It doesn't show on the page.
<body>: This is where the magic happens. Everything here is visible to the user.

Pro Tip: Always close your tags! If you open a <p>, you must close it with </p>.

Practical Example:

<h1>Welcome to My School</h1>
<p>Learning coding with Teacher Enigma is fun!</p>
<button>Click Me</button>

UNIT 2: CSS3 - THE ARTISTRY ▼

What is CSS?

CSS (Cascading Style Sheets) describes how HTML elements are to be displayed on screen. If HTML is the skeleton, CSS is the Skin, Clothes, and Paint. It makes things look professional.

The Three Ways to Style:

Inline: Directly inside the HTML tag.
Internal: Inside a <style> tag in the head.
External: Using a separate .css file (Best Practice).

Core Concepts: Box Model

Every element is a box. You can control its Padding (space inside the border), Border, and Margin (space outside the border).

.student-card {
  background-color: #white;
  border: 2px solid blue;
  padding: 20px;
  border-radius: 10px;
}

UNIT 3: JAVASCRIPT - THE ENGINE ▼

The Power of JavaScript

JavaScript is a programming language that allows you to implement complex features on web pagesâ€”displaying timely content updates, interactive maps, animated 2D/3D graphics, etc. It is the Muscle that moves the body.

Key Fundamentals:

Variables: Containers for storing data (let, const, var).
Functions: Blocks of code designed to perform a particular task.
Events: Things that happen to HTML elements (like a click or a hover).

// Example: Making a button work
function greetStudent() {
alert("Keep studying, you are doing great!");
}
// This function runs when the user clicks.

🚀 HOW TO PRACTICE (START CODING)

Follow these steps to write and run your own code using your smartphone:

STEP 1: Download an Editor
Go to Play Store and download "Acode - powerful code editor" or search for "Enigma Code Studio" in our resources.

STEP 2: Create a New File
Open the app and create a new file. Save it as index.html. The .html extension is very important!

STEP 3: Copy & Paste
Copy any code block from the lessons above and paste it into your new file in Acode.

STEP 4: Run the Code
Click the "Play" or "Preview" icon inside the Acode app. You will see your code come to life as a real website!

"The best way to learn coding is by doing it every day." - Teacher Enigma