DEV Community: Khawaja Khurram (MAK)

Lesson 1.1: Building Your First Header

Khawaja Khurram (MAK) — Tue, 15 Sep 2026 14:08:09 +0000

📚 This article was originally published on MAK Studio. Check out the full interactive lesson with live demos and code examples.

Quest 1 • Lesson 1

Building Your First Header

Think of HTML as the skeleton of a house.
Before we paint the walls (CSS), we need to put up the structure.

"Every web page starts with a simple set of tags that tell the browser what is a header and what is a paragraph."

index.html

Hello World

This is my first web page.

🧠 Understanding the Tags

<h1> – Heading level 1 (the most important heading).
</h1> – Closing tag for the heading.
<p> – Paragraph tag.
</p> – Closing tag for the paragraph.

Most HTML elements have an opening tag <tag> and a closing tag </tag>. The content goes in between.

✨ Challenge: Create Your Own Header

Change the text inside the <h1> to your name, and the paragraph to a short introduction.

<h1>Your Name Here</h1>
<p>I'm learning HTML and this is my first page!</p>

📋 Copy Code

❤️ Support Free Education

This course is 100% free. If it helps you, consider buying me a coffee.

☕ Buy Me a Coffee

➡️ Ready for more?

Next lesson: Links & Navigation – connect pages together.

Continue to Lesson 1.2 →

(Coming soon – check back or buy Pro Pack for instant access)

🚀 Want more free lessons?

This is part of a free 30+ lesson curriculum on HTML, Python, AI, and JavaScript. No sign-up. No ads. Just code.

👉 Start learning for free

Python Lists vs Tuples

Khawaja Khurram (MAK) — Tue, 15 Sep 2026 13:57:16 +0000

📚 This article was originally published on MAK Studio. Check out the full interactive lesson with live demos and code examples.

Quest 1 • Lesson 3

📦 Lists & Tuples

Store, organise, and manipulate collections of data – understand when to use lists vs tuples.

A list is a collection of items that can be changed (mutable). A tuple is like a list but cannot be changed (immutable). Both are fundamental for storing groups of data.

"Lists are great for to‑do lists – you can add, remove, or modify tasks. Tuples are for fixed data, like days of the week."

lists.py

fruits = ["apple", "banana", "cherry"]
mixed = [10, "hello", True, 3.14]

print(fruits) # Output: ['apple', 'banana', 'cherry']
print(fruits[0]) # Output: apple

🧠 List Basics

Lists are created with [ ] (square brackets).
Items are indexed starting from 0 – first item is fruits[0].
You can store different data types in one list.
📚 Previously: You learned about variables and data types in Lesson 1.2.

🛠️ Useful List Methods

.append() – adds an item to the end.

fruits.append("orange") # fruits now has 4 items

.remove() – removes the first occurrence of an item.

fruits.remove("banana")

len() – returns the number of items.

print(len(fruits)) # Output: 3

.pop() – removes and returns the last item.

last = fruits.pop() # removes and returns 'cherry'

📌 Tuples – Immutable Lists

Tuples are created with ( ) (parentheses). They cannot be changed after creation.

days = ("Mon", "Tue", "Wed")
coordinates = (10, 20)

days.append("Thu") would cause an error – tuples are immutable!

Use tuples for data that should never change (e.g., weekdays, fixed settings).

⚠️ Common Mistakes

❌ Trying to change a tuple:

Tuples are immutable – you cannot add, remove, or change items after creation.

days = ("Mon", "Tue")
days[0] = "Sun" # ❌ TypeError: 'tuple' object does not support item assignment

❌ Forgetting that list indexing starts at 0:

The first item in a list or tuple is at index 0, not 1.

fruits = ["apple", "banana", "cherry"]
print(fruits[1]) # "banana" – index 1 is the second item

💡 Pro Tips

Use lists for data that changes – tuples for fixed data.

Use lists when you need to add, remove, or update items. Use tuples for fixed data like days of the week, coordinates, or configuration settings.

Use tuple unpacking for cleaner code.

You can unpack a tuple into multiple variables in one line.

coordinates = (10, 20)
x, y = coordinates
print(x) # 10
print(y) # 20

✨ Challenge: Build a Shopping List

Create a list called shopping with 3 items. Then:

Append a fourth item.
Remove the second item.
Print the final list.

📋 Copy Solution

shopping = ["milk", "bread", "eggs"]
shopping.append("butter")
shopping.remove("bread")
print(shopping) # ['milk', 'eggs', 'butter']

📚 What's Next?

After mastering lists and tuples, you're ready to learn:

Lesson 1.4: Conditional Statements → – make decisions with if/elif/else.
Lesson 1.5: Loops → – repeat actions with for and while.
📘 Ultimate Python Guide → – the complete beginner's resource.

📤 Share This Lesson

Help others learn – share this lesson with your network!

📋 Copy Link

❤️ Support Free Education

This course is 100% free. If it helps you, consider buying me a coffee.

☕ Buy Me a Coffee

🚀 Want more free lessons?

This is part of a free 30+ lesson curriculum on HTML, Python, AI, and JavaScript. No sign-up. No ads. Just code.

👉 Start learning for free

I Built a Free Learning Platform with 30+ Lessons – Here's What I Learned

Khawaja Khurram (MAK) — Fri, 04 Sep 2026 16:00:45 +0000

The Idea

I started 2025 with a simple question: "What if I could help absolute beginners learn to code without any barriers – no sign‑up, no ads, no paywalls?"

I believe that everyone should have access to quality education, regardless of where they live or how much money they have. So I decided to build a free coding platform from scratch.

It took me months, a lot of late nights, and plenty of frustration. But the result is something I'm truly proud of.

*What I Built
*
I built MAK UI Studio – a free learning platform with:

📚 30+ Lessons Across 3 Courses

Course Lessons Topics
🌐 HTML & CSS 10 Lessons Headers, links, images, forms, CSS, Flexbox, Grid, Semantic HTML, Project

🐍 Python 10 Lessons Variables, lists, conditionals, loops, functions, dictionaries, error handling, Calculator Project

🤖 AI 10 Lessons ML, Neural Networks, Computer Vision, NLP, Transfer Learning, LLMs, Chatbot Project

Each lesson includes:

· Live code examples
· Copy‑paste code blocks
· Interactive demos (TensorFlow.js for AI)
· Challenges to reinforce learning

🧩 Free UI Snippets

I also built a growing library of free UI snippets:

· Animated Cards
· Dropdown Menu
· Password Generator
· Sentiment Analyser (AI)
· Image Classifier (AI)
· And more…

Developers can copy, paste, and customise them instantly.

📘 Ultimate Guides

I consolidated each course into a single, long‑form guide:

· Ultimate HTML Guide
· Ultimate Python Guide
· Ultimate AI Guide

These are perfect for learners who prefer a comprehensive reference.

📱 YouTube Shorts

I also started connecting my YouTube channel to the website:

· HTML Shorts
· Python Shorts
· AI Shorts

Short, 60‑second tutorials that complement the written lessons.

The Tech Stack

I kept it simple and accessible:

· Frontend: HTML, CSS, JavaScript
· Hosting: GitHub Pages
· AI: TensorFlow.js (in‑browser)
· Domain: Custom domain (makuistudio.com)

No backend, no databases, no complexity. Just pure static content that works for everyone.

What I Learned Along the Way

*1. Start Simple, Then Expand
*
I initially planned to include everything at once. That was a mistake. I started with HTML, then added Python, then AI. Each course informed the next.

*2. Interactive Demos Make a Difference
*
Static lessons are good. Interactive demos are better. Students learn more when they can see the code running in real‑time.

*3. Consistency Is Everything
*
I published one lesson per week. It kept me accountable and gave me a steady rhythm.

*4. Community Engagement Takes Time
*
Traffic doesn't come overnight. I'm still working on backlinks, social sharing, and building an audience. But the foundation is solid.

*5. Feedback Is a Gift
*
Every comment, email, and suggestion has helped me improve the platform.

*What's Next
*
I'm currently working on:

· Quest 2: Intermediate lessons for all three courses
· More Snippets: New UI components every month
· Project Showcase: A section where students can share their own projects

My goal is to make makuistudio.com the most beginner‑friendly place to learn HTML, Python, and AI – completely free.

Try It Yourself

If you're learning to code or looking for free resources, I'd love for you to check it out:

🔗 makuistudio.com

All lessons, snippets, and guides are completely free – no sign‑up required.

If you found this article helpful, consider sharing it with someone who's learning to code.

html #css #python #ai #webdev #beginners #freecourse

🤖 AI LESSON 1.1: What is Artificial Intelligence Really? 🧠🚀

Khawaja Khurram (MAK) — Fri, 04 Sep 2026 13:57:52 +0000

🤖 AI LESSON 1.1: What is Artificial Intelligence Really? 🧠🚀

We see the buzzword everywhere—from automated algorithms to generative systems. But as a software engineer or data analyst, how do you actually define Artificial Intelligence under the hood? It isn't magic; it's pure mathematics, classification parameters, and structural data optimization.

Let's challenge our community logic before we compile our next script! 🔍

👇 LOG YOUR ANSWER OR CLASSIFICATION IN THE COMMENTS SECTION:
1️⃣ What is the core engineering difference between standard static automation code (like an If/Else script) and a true Machine Learning model?
2️⃣ Why does modern Deep Learning rely so heavily on multi-layered Neural Networks rather than standard structural algorithms?

Stop drowning in shallow tech buzzwords. Our open-access curriculum breaks down the mathematical foundations, token structures, and core neural layers cleanly without hidden walls or credit card traps.

Grab your reference sheets and explore the launch module:
👉 makuistudio.com

Comment your answers below—let's unlock the mechanics of machine intelligence together! ⬇️

ArtificialIntelligence #DeepLearning #MachineLearning #100DaysOfCode #AIForBeginners #MakuiStudio

📦 PYTHON LESSON 1.3: Lists vs. Tuples — Mastering Sequences! 🐍🚀

Khawaja Khurram (MAK) — Wed, 02 Sep 2026 14:39:49 +0000

📦 PYTHON LESSON 1.3: Lists vs. Tuples — Mastering Sequences! 🐍🚀

When writing backend code or managing data arrays, you'll constantly need to store multiple items inside a single variable. In Python, your primary tools for this are Lists and Tuples. They look similar, but under the hood, they act completely differently.

Let's test our collective engineering logic! Take a close look at the graphic below: 🔍

👇 DROP YOUR CHOICE OR TECHNICAL GUESS IN THE COMMENTS:
1️⃣ Look at these two variables: my_data = [10, 20] vs. user_data = (10, 20). If your script needs to dynamically append, pop, or change values during execution, which variable structure must you use?
2️⃣ Why does Python process Tuples significantly faster in memory than standard Lists?

Stop relying on confusing, unorganized programming guides. Our 100% open-access 10-lesson Ultimate Python Guide breaks down data structures cleanly without hidden fees or signup walls.

Grab your production code blocks and start your training module:
👉 ://makuistudio.com

Comment your answers below—let's keep leveling up our backend engineering! ⬇️

PythonProgramming #LearnPython #DataStructures #100DaysOfCode #BackendDeveloper #MakuiStudio

📦 PYTHON LESSON 1.2: Mastering Variables & Data Types! 🐍🚀

Khawaja Khurram (MAK) — Tue, 01 Sep 2026 17:54:40 +0000

📦 PYTHON LESSON 1.2: Mastering Variables & Data Types! 🐍🚀

Computers don't just process commands—they need a structured way to store data in memory. In Python, variables act like labeled storage boxes where you keep your values, whether it's text, numbers, or true/false state variables.

Let's test our core logic parameters early! Take a look at the graphic below: 🔍

👇 DROP YOUR CHOICE OR ANSWER IN THE COMMENTS SECTION:
1️⃣ Look at this statement: user_rank = "1". Is this variable interpreted as an Integer (number) or a String (text data)? Why do those quotation marks change everything?
2️⃣ Unlike other languages, why does Python NOT force you to declare a specific data keyword (like 'int' or 'string') before initializing a variable?

Stop following messy, scattered programming tutorials. Our completely free 10-lesson Ultimate Python Guide breaks down software development architecture without any signup paywalls or credit card traps.

Grab your production code blocks and start your training module:
👉 ://makuistudio.com

Comment your answers below—let's master clean backend engineering together! ⬇️

PythonProgramming #LearnPython #CodingBasics #100DaysOfCode #BackendDeveloper #MakuiStudio

🐍 PYTHON LESSON 1.1: Writing Your Very First Line of Code! 🚀

Khawaja Khurram (MAK) — Tue, 01 Sep 2026 17:28:13 +0000

🐍 PYTHON LESSON 1.1: Writing Your Very First Line of Code! 🚀

If you want to enter software development, build automation scripts, or dive into AI logic, Python is your ultimate starting point. Unlike other languages that require 5+ lines of boilerplate just to load, Python strips away the clutter.

Let's look at the absolute foundation syntax in the graphic below! 🔍

👇 DROP YOUR INTERACTIVE GUESS OR REASON IN THE COMMENTS:
1️⃣ Why does Python use simple quotation marks inside the print() function instead of requiring complex structural brackets or structural layout tags?
2️⃣ What happens to your code if you spell print with a capital "P" (Print)?

Stop overcomplicating your entry into programming. In our 10-lesson Ultimate Python Guide, we skip the expensive bootcamp traps and teach you pure logic structures from the ground up completely free.

Grab your boilerplate code scripts and test your first script live:
👉 makuistudio.com

Comment your answers below—let's unlock backend logic together! ⬇|

PythonProgramming #LearnPython #100DaysOfCode #BackendDeveloper #CodingBeginners #MakuiStudio

Free Lesson Courses for HTML, Python, AI and more

Khawaja Khurram (MAK) — Mon, 31 Aug 2026 15:17:28 +0000

Lesson 1.2 HTML Coding

Khawaja Khurram (MAK) — Mon, 31 Aug 2026 15:16:23 +0000

Lesson 1.1 HTML Coding

Khawaja Khurram (MAK) — Mon, 31 Aug 2026 15:15:20 +0000

A complete beginner friendly course hub

Khawaja Khurram (MAK) — Wed, 03 Jun 2026 16:10:56 +0000

Free resource: A complete beginner friendly course hub for web development and Python

How to Add Dark Mode to Any Website in 5 Minutes (with localStorage)

Khawaja Khurram (MAK) — Sat, 30 May 2026 08:39:01 +0000

# How to Add Dark Mode to Any Website in 5 Minutes (with localStorage)

Dark mode isn't just a trend anymore – it's an expected feature. Users want it for better readability and less eye strain.

The good news? You can add it to any existing website in about 5 minutes with pure CSS and a few lines of JavaScript.

No frameworks. No dependencies. Just copy, paste, and customize.

What You'll Build

A complete dark mode toggle that:

✅ Saves user preference in localStorage (persists across visits)
✅ Detects system theme automatically
✅ Lets users override system preference
✅ Works on any existing website

Step 1: CSS Variables (The Foundation)

CSS variables make theme switching effortless. Define your light theme as default, then override for dark mode.

/* Light theme (default) */
:root {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --border: #e2e8f0;
  --accent: #3b82f6;
}

/* Dark theme override */
[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --border: #334155;
  --accent: #60a5fa;
}

/* Apply variables to your elements */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background 0.3s, color 0.3s;
}

The transition property creates a smooth fade effect when switching themes.

Step 2: The Toggle Switch HTML

Add this toggle switch anywhere on your page. I put mine in the header.

And the CSS to make it look good:

.theme-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--accent);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

Step 3: The JavaScript (3 Simple Functions)

Here's the code logic. It's only 20 lines.

// Apply theme to the page
function setTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);

  // Update toggle checkbox
  const toggle = document.getElementById('darkModeToggle');
  if (toggle) toggle.checked = (theme === 'dark');
}

// Detect system preference
function getSystemTheme() {
  return window.matchMedia('(prefers-color-scheme: dark)').matches
    ? 'dark'
    : 'light';
}

// Initialize on page load
const savedTheme = localStorage.getItem('theme');
setTheme(savedTheme || getSystemTheme());

// Listen to toggle clicks
document.getElementById('darkModeToggle').addEventListener('change', (e) => {
  setTheme(e.target.checked ? 'dark' : 'light');
});

Step 4: Put It All Together

Here's complete working example you can copy into any HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dark Mode Demo</title>
  <style>
    /* Light mode (default) */
    :root {
      --bg-primary: #f8fafc;
      --text-primary: #0f172a;
      --border: #e2e8f0;
    }

    /* Dark mode */
    [data-theme="dark"] {
      --bg-primary: #0f172a;
      --text-primary: #f1f5f9;
      --border: #334155;
    }

    body {
      background: var(--bg-primary);
      color: var(--text-primary);
      transition: background 0.3s, color 0.3s;
      font-family: system-ui, sans-serif;
      padding: 2rem;
    }

    /* Toggle switch CSS here (from Step 2) */
  </style>
</head>
<body>

<h1>Dark Mode Demo</h1>
<p>Click the toggle below. Your preference is saved automatically.</p>

<label class="theme-switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider"></span>
</label>

<script>
  // JavaScript from Step 3 here
</script>
</body>
</html>

How It Works (The 30-Second Explanantion)

CSS Variables store all your colors in one place.
[data-theme="dark"] overrides those variables when active.
localStorage remembers the user's choice between visits.
matchMedia detects if their OS is already in dark mode.
One event listener toggles everything when clicked.

Pro Tips
Tip 1: Add more than colors
Dark mode can also adjust shadows, borders and even images.

[date-theme="dark"] img {
opacity: 0.8;
filter: brightness(0.8);
}

Tip 2: Listen for system changes
This updates the page if the user changes their OS theme while your site is open:

window.matchMedia('(prefers-color-scheme: dark).addEventListener('change', (e) => {
!localStorage.getItem('theme')) {
tTheme(e.matches ? 'dark' : 'light');
}
});

Tip 3: Use semantic HTML
The data-theme attribute is semantic and accessible. Screen readers understand it.

Live Demo
See the complete working example here:
👉 Live Dark Mode Demo with 3 Implementations

The live demo includes:

Toggle switch with smooth animation
"Match System" button to reset to OS preference
localStorage persistence

Want More UI Components?

I'm building a free library of copy-paste UI snippets. Here's what's available:

Responsive navbar with mobile hamburger menu
4 CSS loaders (spinner, pulse dots, skeleton, progress bar)
Login/ Signup forms with validation and password toggle
Dark mode toggle (the one you just learned)

👉 All frees snippets here: UI Studio

Need Advanced Components?

I also offer a Pro Pack with 15 premium snippets:

5 navbar variations (mega menu, sticky, transparent, etc.)
5 advanced loaders (skeleton tables, infinite scroll, SVG)
5 form components (multi-step, OTP input, file upload)

👉 [Get the Pro Pack - $7 one-time] (https://mykhurram068-mak.github.io/ui-learning-platform/pro-pack.html)

Step What You Did Time
1 Added CSS variables 1 min
2 Added dark mode overrides 1 min
3 Added toggle HTML/CSS 2 min
4 Added JavaScript 1 min
Total Dark mode complete 5 minutes

Dark mode is one of those features that users notice and appreciate. It shows attention to detail and improves accessibility.

Now go add dark mode to your projects!

Found this helpful? Consider buying me a coffee to support more free tutorials.
☕ Buy me a Coffee

Want the full code + 3 implementation methods?
🔗 Live Demo & Code (https://mykhurram068-mak.github.io/ui-learning-platform)