DEV Community: Rachit Joshi

HTML Text Editors: A Beginner’s Guide to Writing and Running HTML Code

Rachit Joshi — Tue, 22 Sep 2026 13:53:45 +0000

INTRODUCTION

When you're learning HTML, one of the first things you need is a place to write your code. Fortunately, you don't need complicated software to get started.

HTML files are text files, so you can create them using a basic text editor. Beginners can start with simple tools such as Notepad on Windows or TextEdit on macOS. As your skills improve, dedicated code editors can make writing and managing HTML much easier.

Let's understand how HTML text editors work and how you can use one to create your first webpage.

What Is an HTML Text Editor?

An HTML text editor is a program that allows you to write and edit HTML code.

At the most basic level, an HTML file is simply a text file containing HTML markup. You can write that markup using a basic text editor and save the file with an .html or .htm extension.

For example:

<!DOCTYPE html>

<title>My First Webpage</title>

<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>

Once saved as an HTML file, you can open it in a web browser and see the rendered webpage.

Can You Write HTML in Notepad?

Yes.

If you're just beginning, Notepad is enough to learn the fundamentals of HTML. It doesn't provide advanced coding features, but that can actually be useful when you're learning how HTML tags and structure work.

Creating an HTML File With Notepad

The basic process is simple:

Open Notepad.
Write your HTML code.
Choose Save As.
Give the file an .html extension.
Open the saved file in a browser.

For example, save your file as:

index.html

Then double-click the file or open it with your preferred web browser.

The browser interprets the HTML markup and displays the resulting webpage.

What About TextEdit on Mac?

Mac users can use TextEdit for basic HTML editing.

However, TextEdit can work in rich-text mode, so when writing HTML, it is important to use plain-text mode. Otherwise, the editor may add formatting that you don't want in your HTML source.

Once your document contains plain HTML code, save it with an .html extension and open it in a browser.

Why Use a Dedicated Code Editor?

Basic text editors are useful for learning, but larger projects quickly become harder to manage without coding features.

Dedicated code editors can provide features such as:

Syntax highlighting
Auto-completion
Code navigation
Search and replace
Bracket matching
Code formatting
Extensions
Project management

These features can make writing and debugging HTML more convenient.

Sublime Text for HTML

Sublime Text is one example of a dedicated text editor that can be used for HTML development.

After installing it, you can create a new file, write your HTML code, save it with an .html extension, and open the file in a browser. TPointTech's HTML text-editor guide uses Notepad as a beginner option and Sublime Text as an option after learning the basics.

A simple HTML file might look like this:

<!DOCTYPE html>

<title>My Website</title>

<h1>Welcome to My Website</h1>

<p>
    I am learning HTML and building my first webpage.
</p>

Text Editor vs HTML Editor

The terms text editor and HTML editor are sometimes used interchangeably, but they can describe different levels of functionality.

A basic text editor primarily lets you enter and modify plain text.

An HTML-focused editor may add features specifically designed for web development, such as syntax highlighting, auto-completion, validation, and other coding assistance.

The important thing is that you don't need a specialized editor to understand HTML. The editor simply provides tools that can make development easier.

Text-Based Editors vs WYSIWYG Editors

HTML development tools can also be divided into text-based and visual approaches.

Text-Based Editors

With a text-based editor, you write HTML markup directly:

My Heading

My paragraph.

This approach is especially useful for learning because you can see exactly how HTML is structured.

WYSIWYG Editors

WYSIWYG means "What You See Is What You Get."

These editors provide a visual interface where you can work with webpage elements while seeing something closer to the resulting page.

They can be convenient for users who don't want to write every HTML tag manually.

However, understanding the underlying HTML is still valuable for anyone who wants to become comfortable with web development.

Which Editor Should a Beginner Use?

You don't need to start with the most advanced tool available.

If you're completely new to HTML, a basic text editor can help you understand the fundamentals without too many distractions.

Once you become comfortable with tags, attributes, elements, and document structure, you can move to a more feature-rich editor.

A simple progression could be:

Notepad/TextEdit → Dedicated Code Editor → Advanced Development Environment

The exact editor you choose is less important than actually practicing HTML.

How to Test Your HTML Code

One advantage of HTML is that you can test a basic webpage without a complicated setup.

Write your code in an editor, save it as an .html file, and open it in a browser.

For example:

<!DOCTYPE html>

<h1>My First Page</h1>
<p>Hello from HTML!</p>

Save it as:

first-page.html

Then open it in your browser.

Whenever you make changes, save the file and refresh the browser to see the updated result.

Why Choosing the Right Editor Matters

The editor itself doesn't determine whether your HTML is correct. The browser ultimately interprets the HTML markup.

However, a good editor can make your workflow easier.

Features such as syntax highlighting can help you distinguish tags and attributes, while auto-completion can reduce repetitive typing. Error detection and code navigation can become particularly useful as your projects grow.

Final Thoughts

You don't need expensive software to start learning HTML.

A basic text editor is enough to create an HTML file, write markup, save it, and open it in a browser. As your projects become larger, a dedicated code editor can provide useful features that make writing and managing code more efficient.

The most important thing isn't which editor you choose. It's learning how HTML works and practicing by building real webpages.

Start simple, understand the fundamentals, and upgrade your tools as your skills grow.

CSS Display Property: A Beginner-Friendly Guide

Rachit Joshi — Mon, 21 Sep 2026 14:49:38 +0000

INTRODUCTION

When building websites with HTML and CSS, controlling how elements appear on a page is essential. The CSS display property determines how an HTML element participates in the layout and how it is positioned relative to other elements.

Whether you are creating a simple webpage, navigation menu, card layout, or responsive interface, understanding the display property is an important part of learning CSS.

What Is the CSS Display Property?

The display property specifies how an element should be rendered and how it should behave within the page layout.

The basic syntax is:

selector {
display: value;
}

For example:

div {
display: block;
}

CSS provides several display values, including:

block
inline
inline-block
none
flex
inline-flex
grid
table

Each value changes the way an element interacts with the surrounding content.

1. display: block

A block-level element normally starts on a new line and takes up the available horizontal space.

Common block-level elements include

, and headings.

.box {
display: block;
}

Example:

First Box Second Box

The two elements will generally appear one below the other.

Block display is useful when you want elements to occupy their own rows in a layout.

2. display: inline

An inline element does not normally start on a new line. It takes only the space required by its content.

For example:

span {
display: inline;
}

HTML:

Hello
World

The content can appear on the same line.

Elements such as , , and commonly behave as inline elements by default.

3. display: inline-block

inline-block combines characteristics of both inline and block elements.

The element can appear alongside other elements on the same line, while still allowing you to control properties such as width and height.

.card {
display: inline-block;
width: 200px;
height: 100px;
}

This can be useful for creating simple horizontal layouts, buttons, cards, and navigation components.

4. display: none

The none value removes an element from the page's layout.

.hidden {
display: none;
}

For example:

This paragraph is visible.

This paragraph is hidden.

The hidden paragraph does not occupy space in the layout.

display: none is commonly used for menus, expandable sections, modals, and content that needs to be shown or hidden dynamically.

5. display: flex

Flexbox is one of the most useful modern CSS layout techniques.

By applying:

.container {
display: flex;
}

An element becomes a flex container, and its child elements become flex items.

For example:

.container {
display: flex;
justify-content: space-between;
align-items: center;
}

Flexbox makes it easier to align and distribute elements horizontally or vertically.

6. display: grid

CSS Grid provides a powerful way to create two-dimensional layouts.

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

This can create a layout containing three equal columns.

Grid is particularly useful for dashboards, galleries, product cards, and other structured layouts.

7. Other Display Values

CSS also supports values such as:

inline-flex
inline-grid
table
table-row
table-cell
list-item

These values allow developers to control layouts for different design requirements.

Why Is the Display Property Important?

The display property is important because it directly affects how elements participate in a webpage's layout.

For example:

.navigation {
display: flex;
}

can turn a group of navigation items into a flexible horizontal layout.

Similarly:

.mobile-menu {
display: none;
}

can hide a menu until it needs to be displayed.

Understanding these values helps developers create cleaner, more responsive, and easier-to-maintain websites.

Conclusion

The CSS display property is a fundamental part of webpage layout. Values such as block, inline, and inline-block help control basic element behavior, while flex and grid provide more powerful modern layout options.

For beginners, understanding the difference between these display values is a great step toward creating well-structured and responsive web pages.
For more examples and a detailed explanation of CSS display values, you can explore the CSS Display tutorial on TPointTech.

How to Loop Through an Array in React JS Using map()

Rachit Joshi — Sat, 19 Sep 2026 14:16:43 +0000

INTRODUCTION

When developing React applications, you will often need to display multiple items from an array. For example, you might have a list of users, products, students, or menu items that need to be displayed dynamically.

React makes this straightforward by allowing us to use JavaScript array methods such as map() to generate JSX elements from array data.

In this article, we'll learn how to loop through arrays in React and display their values using practical examples.

Why Loop Through an Array in React?

Suppose you have the following array:

const names = ["Jack", "Mary", "John", "Krish", "Navin"];

Instead of manually writing HTML for every name, you can loop through the array and generate an element for each value.

This makes your React components:

Easier to maintain
More dynamic
Less repetitive
Better suited for data-driven interfaces

React's documentation recommends using JavaScript's map() method when rendering lists of components from arrays.

Using map() to Loop Through an Array

The map() method creates a new array by applying a function to every element of the original array.

Here's a simple React example:

import React from "react";

function App() {
const names = ["Jack", "Mary", "John", "Krish", "Navin"];

return (

React Array Loop Example

  <ul>
    {names.map((name, index) => (
      <li key={index}>{name}</li>
    ))}
  </ul>
</div>

);
}

export default App;

Here, map() goes through each item in the names array and creates an

element.

The resulting list will contain:

Jack
Mary
John
Krish
Navin
Looping Through an Array of Objects

In real-world applications, arrays commonly contain objects rather than simple strings.

For example:

const students = [
{
id: 1,
name: "Jack",
email: "jack@example.com"
},
{
id: 2,
name: "Mary",
email: "mary@example.com"
},
{
id: 3,
name: "John",
email: "john@example.com"
}
];

We can use map() to display this information in a table:

import React from "react";

function App() {
const students = [
{
id: 1,
name: "Jack",
email: "jack@example.com"
},
{
id: 2,
name: "Mary",
email: "mary@example.com"
},
{
id: 3,
name: "John",
email: "john@example.com"
}
];

return (

Student List

  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>

    <tbody>
      {students.map((student) => (
        <tr key={student.id}>
          <td>{student.id}</td>
          <td>{student.name}</td>
          <td>{student.email}</td>
        </tr>
      ))}
    </tbody>
  </table>
</div>

);
}

export default App;

In this example, map() receives each student object. We can then access its properties using:

student.id
student.name
student.email

Why Is the key Important?

When rendering a list, React expects each item to have a unique key.

For example:

{students.map((student) => (

{student.name} ))}

A database ID or another stable unique identifier is generally a good choice for the key. React uses keys to identify individual items when a list changes, such as when items are inserted, removed, or reordered.

Avoid generating keys dynamically with values such as:

key={Math.random()}

A stable identifier from your data is preferable.

map() vs forEach() in React

Both map() and forEach() can iterate over an array, but they behave differently.

map() creates and returns a new array:

const numbers = [1, 2, 3];

const doubled = numbers.map((number) => number * 2);

console.log(doubled);

Output:

[2, 4, 6]

forEach() is generally used when you want to act as each item rather than create a new array:

numbers.forEach((number) => {
console.log(number);
});

Since React can render arrays of JSX elements, map() fits naturally into list-rendering code.

Can We Use a for Loop in React?

Yes, JavaScript for loops can be used to process arrays. However, you generally cannot place a traditional for statement directly inside JSX.

For example, instead of trying to write:

return (

for (...) { ... } );

you can create the array of JSX elements before the return statement.

However, for straightforward list rendering, map() is usually cleaner:

const items = names.map((name) => (

{name}

));

Then render it:

{items}

Using map() with Conditional Rendering

You can also combine map() with conditional logic.

For example:

const products = [
{ id: 1, name: "Laptop", available: true },
{ id: 2, name: "Mouse", available: false },
{ id: 3, name: "Keyboard", available: true }
];

function App() {
return (

{products.map((product) => (

{product.name} - {product.available ? "Available" : "Out of Stock"}

))}

);
}

This allows React to generate dynamic content based on the data.

Conclusion

Looping through arrays is a common requirement when building React applications. Instead of manually creating individual JSX elements, you can use JavaScript's map() method to transform array data into React elements.

The main points to remember are:

Use map() to render items from an array.
Access object properties inside the map() callback.
Give rendered elements a stable and unique key.
Prefer stable IDs from your data for keys.
Use filter() together with map() when you need to display only specific items.

Once you understand array rendering with map(), you can use the same approach for product lists, user profiles, navigation menus, tables, comments, and many other React interfaces.

5 Common Mistakes Beginners Make While Learning to Code

Rachit Joshi — Fri, 18 Sep 2026 10:56:42 +0000

INTRODUCTION

Learning to code can feel overwhelming at first. There are hundreds of programming languages, frameworks, tutorials, and tools available, and beginners often try to learn everything at once.

The good news is that you don't need to know everything to become a good programmer. You need a clear learning path, consistent practice, and the ability to learn from mistakes.

Here are five common mistakes beginners make while learning to code—and how to avoid them.

1. Trying to Learn Too Many Languages at Once

One of the most common mistakes is jumping between programming languages.

A beginner might start with Python, then move to JavaScript, then try Java or C++, without becoming comfortable with any of them.

Instead, choose one language and spend enough time understanding its fundamentals.

For example, if you choose Python, focus on:

Variables and data types
Conditional statements
Loops
Functions
Lists, tuples, and dictionaries
Object-oriented programming
Exception handling
Modules and packages

Once you understand programming fundamentals, learning another language becomes much easier because many concepts are transferable.

2. Watching Tutorials Without Writing Code

Watching programming tutorials can make you feel like you're learning, but watching alone isn't enough.

Programming is a practical skill. You need to write code, make mistakes, debug it, and try again.

For example, after learning Python functions, don't just watch another tutorial. Write a small program yourself:

def calculate_area(length, width):
return length * width

area = calculate_area(10, 5)
print("Area:", area)

Then modify it. Add validation. Try different inputs. Break the code intentionally and figure out why it doesn't work.

That's where real learning happens.

3. Copying Code Without Understanding It

Using examples from tutorials, documentation, or search results is completely normal.

The problem starts when you copy code without understanding what it does.

Instead of simply copying:

const result = numbers.filter(num => num > 10);

ask yourself:

What does filter() do?
What is num?
Why is => being used?
What happens if the condition changes?
What does the resulting array contain?

Understanding the code is more valuable than simply making the program work.

4. Avoiding Errors Instead of Learning From Them

Errors are a normal part of programming.

Beginners sometimes see an error message and immediately assume they have done something completely wrong. In reality, error messages often provide useful clues about what needs to be fixed.

For example:

NameError: name 'username' is not defined

This tells you that Python cannot find a variable called username.

Instead of being frustrated by the error, read it carefully and investigate:

What type of error is it?
Which line caused it?
What does the error message mean?
Did I misspell something?
Is the variable defined before I use it?

Learning to debug is one of the most important skills a programmer can develop.

5. Building Only Tutorials and Never Creating Your Own Projects

Following tutorials is useful when you're starting, but eventually you need to build something without following every step.

Start with small projects.

For Python, you could build:

A calculator
A number guessing game
A to-do list
A simple quiz
A file organizer

For JavaScript, you could build:

A digital clock
A calculator
A to-do application
A weather interface
A simple quiz application

Projects force you to combine multiple concepts and solve problems independently.

You will probably get stuck—and that's actually a valuable part of the learning process.

A Better Way to Learn Programming

Instead of trying to learn everything, use a simple cycle:

Learn → Practice → Build → Debug → Repeat

For example:

Learn: Understand JavaScript functions.

↓

Practice: Write several small functions.

↓

Build: Create a small calculator.

↓

Debug: Fix problems you encounter.

↓

Repeat: Learn the next concept and improve the project.

This approach helps turn theoretical knowledge into practical programming skills.

Final Thoughts

Learning to code isn't about memorizing hundreds of commands or completing as many tutorials as possible.

It's about understanding concepts and becoming comfortable solving problems with code.

Avoiding these five mistakes can make the learning process much smoother:

Don't jump between too many programming languages.
Don't rely only on tutorials.
Don't copy code without understanding it.
Don't be afraid of errors.
Build your own projects.

Most importantly, be consistent. Even a small amount of coding practice every day can help you make steady progress.

If you're learning programming, resources covering languages such as Python, Java, JavaScript, C++, SQL, HTML, and CSS can help you strengthen your fundamentals and gradually move toward more advanced development topics.

Spring Boot Auto-Configuration: How It Works with Examples

Rachit Joshi — Thu, 17 Sep 2026 07:14:20 +0000

INTRODUCTION

Spring Boot is popular because it reduces the amount of configuration developers need to write. One of its most useful features is auto-configuration, which automatically configures your application based on the dependencies available in the project.

In this article, we’ll understand what Spring Boot auto-configuration is, how it works, and how to customize it when needed.

What Is Spring Boot Auto-Configuration?

Spring Boot auto-configuration automatically configures a Spring application based on the JAR dependencies added to the project.

For example, when you add the H2 database dependency and have not manually configured a database connection, Spring Boot can automatically configure an in-memory database.

This lets developers focus on application logic and spend less time writing repetitive configuration.

How Does Auto-Configuration Work?

Spring Boot checks the dependencies available in the classpath and applies configuration when certain conditions are satisfied.

The process can be understood as:

1. Add dependencies

You add a starter such as spring-boot-starter-web or spring-boot-starter-data-jpa.

2. Spring Boot checks conditions

It checks whether relevant classes, properties, and existing beans are available.

3. Configuration is applied

Spring Boot creates the required beans and applies suitable default settings.

4. Your application starts

You can use the configured features without writing every configuration class manually.

Enabling Auto-Configuration

Auto-configuration is enabled through the @EnableAutoConfiguration annotation. In most Spring Boot applications, you do not need to add it separately because it is already included in @SpringBootApplication.

The @SpringBootApplication annotation combines:

@Configuration
@EnableAutoConfiguration
@ComponentScan

Therefore, a typical Spring Boot application can simply use:

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

public static void main(String[] args) {
    SpringApplication.run(DemoApplication.class, args);
}

}

Here, @SpringBootApplication enables configuration, component scanning, and auto-configuration together.

Example: Spring Boot Web Application

Suppose you create a project using Spring Initializr and add the Spring Web dependency.

Without Spring Boot auto-configuration, you would need to configure several web-related components manually.

With auto-configuration, Spring Boot can configure the web infrastructure automatically.

For example:

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

@GetMapping("/")
public String home() {
    return "Hello, Spring Boot!";
}

}

After starting the application, Spring Boot handles the required web setup, allowing the controller to respond to requests.

Example: Database Auto-Configuration

Suppose you add the H2 database dependency to your project.

If no custom database configuration is provided, Spring Boot can configure an in-memory database automatically.

A typical Maven dependency looks like this:

com.h2database
h2
runtime

You can then configure application properties if needed:

spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.username=sa
spring.datasource.password=
spring.h2.console.enabled=true

Spring Boot uses these properties and the available dependencies to configure the database connection.

What Is spring-boot-autoconfigure.jar?

The auto-configuration logic provided by Spring Boot is contained in the spring-boot-autoconfigure module.

It includes many auto-configuration classes that configure features such as:

Web applications

Databases

JPA and Hibernate

Security

Messaging

Caching

Validation

These configurations are applied conditionally, depending on the application environment.

Conditional Auto-Configuration

Spring Boot does not blindly configure every feature. It uses conditions to decide whether a configuration should be applied.

Common conditional annotations include:

@ConditionalOnClass

Applies configuration when a particular class is available on the classpath.

@ConditionalOnClass(SomeLibrary.class)
@ConditionalOnMissingBean

Applies configuration when a specific bean has not already been defined.

@bean
@ConditionalOnMissingBean
public SomeService someService() {
return new SomeService();
}

This allows developers to replace default behavior with their own implementation.

@ConditionalOnProperty

Applies configuration when a particular application property matches the required condition.

@ConditionalOnProperty(
name = "feature.enabled",
havingValue = "true"
)

These conditions make auto-configuration flexible and non-invasive.

How to Disable Auto-Configuration

Sometimes, you may not want Spring Boot to configure a particular feature.

You can exclude a specific auto-configuration class using the exclude attribute.

For example:

import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;

@SpringBootApplication(
exclude = {DataSourceAutoConfiguration.class}
)
public class DemoApplication {

public static void main(String[] args) {
    org.springframework.boot.SpringApplication.run(
        DemoApplication.class, args
    );
}

}

You can also exclude auto-configuration using the application properties file:

spring.autoconfigure.exclude=\
org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration

Note: The exact auto-configuration class name can vary between Spring Boot versions. Always check the documentation for the version you are using.

How to See Which Auto-Configurations Are Applied

If you want to understand what Spring Boot is configuring, you can start the application with the --debug option.

java -jar your-application.jar --debug

Spring Boot then displays a conditions evaluation report, which helps you see:

Which auto-configurations matched

Which configurations did not match

Why a particular configuration was applied or skipped

This is especially useful when troubleshooting startup issues.

Advantages of Auto-Configuration

1. Less Boilerplate

You do not need to manually configure every common component.

2. Faster Development

Spring Boot provides sensible defaults, helping you create applications quickly.

3. Easy Customization

You can override default beans or exclude specific auto-configurations when necessary.

4. Dependency-Based Configuration

The features available in your application are influenced by the dependencies you add.

5. Better Productivity

Developers can focus on business logic instead of repetitive infrastructure setup.

Conclusion

Spring Boot auto-configuration is one of the main features that makes Spring Boot easier to use. It automatically configures application components based on the dependencies and conditions available in the project.

By understanding how auto-configuration works, developers can build applications faster while still having the flexibility to customize or disable default behavior when required.

How to Use AI Tools While Learning to Code Without Becoming Dependent

Rachit Joshi — Wed, 16 Sep 2026 11:29:01 +0000

AI Coding tools have changed the way beginners learn programming. They can explain difficult concepts, find bugs, generate examples, and help us understand error messages in seconds.

But there is a question worth asking:

Are we using AI to learn how to code, or are we using it to avoid learning how to code?

The difference matters. AI can be a useful learning partner, but if it writes every line and solves every problem, we may finish a project without understanding how it works.

Here are some practical ways to use AI while still building your own coding skills.

1. Try to Understand the Problem First

Before asking AI for code, spend a few minutes understanding the problem yourself.

For example, instead of immediately asking:

"Write a Python program to find the largest number in a list."

Try to answer:

How will I compare the numbers?
Should I use a loop or a built-in function?
What should happen if the list is empty?
Can I explain the solution in simple words?

Even if your first approach is incomplete, that thinking is part of learning.

2.Ask for Hints Before Asking for a Complete Solution

**One of the most useful ways to learn with AI is to control how much help you receive.

Instead of:

"Solve this entire problem."

Try:

"Give me one hint at a time. Don't provide the complete code unless I ask."

This keeps you involved in the problem-solving process.

You can also ask AI to explain the next step without revealing the final answer.

3.Use AI to Explain Code You Have Already Written

Suppose you write a Python program and don't understand one part of it. Ask AI to explain that specific section.

For example:

"Explain this loop line by line. What changes in each iteration? Please use a small example."

This is often more useful than asking AI to generate an entirely new program.

The goal is not just to get code that works. The goal is to understand why it works.

4.Debug Your Own Code Before Asking for Help

When your program produces an error, try a few things first:

Read the error message.
Identify the line where the problem occurs.
Check the values of important variables.
Try a small test case.
Search your notes or documentation.

Then ask AI something like:

"Here is my code and the error message. What should I investigate first? Please explain the cause rather than only giving me the corrected code."

This helps you develop debugging habits instead of depending on automatic fixes.

5.Ask AI to Review Your Approach, Not Replace It

AI can be useful as a code reviewer.

You can ask:

"I solved this problem using a loop. Review my approach, point out any logical issues, and suggest improvements. Don't rewrite the entire solution."

This encourages you to think about:

Logic
Readability
Edge cases
Time complexity
Code organization

You can then decide which suggestions make sense and why.

6.Verify Every Important Answer

AI can produce incorrect code or explanations that look convincing.

Before trusting an answer:

Run the code yourself.
Test normal and unusual inputs.
Check the documentation.
Compare the explanation with what you observe.
Ask follow-up questions if something seems unclear.

For example, if AI says a Python function always returns a particular value, test it with different inputs.

Running code is not the same as understanding code. Try to do both.

7.Build Small Projects Without Asking AI to Do Everything

A good learning exercise is to divide a project into parts.

For a simple Python to-do list:

Decide what features you need.
Design the data structure.
Write the basic menu yourself.
Ask AI for a hint when stuck.
Add one feature at a time.
Test and improve the project.

You can use AI for guidance, but keep ownership of the decisions.

8.Use AI as a Tutor, Not Just a Code Generator

Here are some useful prompts for learning:

For concepts:

"Explain recursion using a simple example. Then ask me two questions to check my understanding."

For practice:

"Give me a beginner Python problem. Don't show the solution until I submit my attempt."

For debugging:

"Help me identify the bug in this code. Give me hints one at a time."

For revision:

"Quiz me on JavaScript arrays. Ask one question at a time and explain my mistakes."

For code review:

"Review my code for readability and edge cases. Explain each suggestion."

These prompts make AI more interactive and encourage active learning.

9.Learn from Reliable Tutorials and Documentation

AI explanations are useful, but they should not be your only learning source.

Structured tutorials, official documentation, and hands-on practice help you build a stronger foundation.

If you are learning programming, resources such as TPointTech can help you explore topics systematically, including Python, Java, JavaScript, HTML, CSS, SQL, and more.

Use AI to clarify a concept, then return to the tutorial or documentation to study it properly.

10.Know When to Stop Asking AI

Sometimes the best next step is to struggle with a problem for a little longer.

If you can:

Explain the problem in your own words
Describe your approach
Identify where you are stuck
Understand the final solution

then AI is helping you learn.

But if you repeatedly copy code without understanding it, you may be completing tasks without building the underlying skill.

The goal is not to avoid AI. The goal is to become capable of solving problems with or without it.

Final Thoughts

AI tools can make learning to code more accessible, but they work best when we remain active participants.

Use AI to ask questions, get hints, review your approach, explain errors, and practice concepts. Write code yourself, test it, and make sure you understand the result.

A useful rule is:

Think first. Ask for help second. Verify the answer. Practice again.

What about you?

How do you use AI while learning to code, and what habits help you avoid becoming dependent on it?

C++ goto Statement: Syntax, Examples, and Best Practices

Rachit Joshi — Tue, 15 Sep 2026 11:12:32 +0000

Introduction

C++ provides several control flow statements that allow developers to change the order in which code executes. Most programs use structures such as if, for, while, and switch to control execution.

Another statement available in C++ is goto. It allows a program to jump directly to a labeled statement within the same function.

Although goto can be useful in a few situations, it should be used carefully because excessive jumps can make code difficult to understand and maintain.

In this article, we’ll explore the syntax of the C++ goto statement, see practical examples, and discuss when it should—or should not—be used.

What Is the goto Statement in C++?

The goto statement transfers program control to a labeled statement within the same function.

A label is an identifier followed by a colon (:). When the program encounters a goto statement, execution jumps to that label.

Basic Syntax
goto label;

// Other statements

label:
// Statements executed after the jump

Here, label is the destination of the jump.

Important: A goto statement can jump only to a label within the same function. It cannot directly jump into another function.

Simple Example of goto

include

using namespace std;

int main() {
cout << "Before goto" << endl;

goto skip;

cout << "This statement will not execute." << endl;

skip:
cout << "After goto" << endl;

return 0;

}
Output
Before goto
After goto

How It Works

The program prints Before goto.
The goto skip; statement transfers control to the skip label.
The statement between goto and the label is skipped.
The program prints After goto.

Using goto with a Condition

A goto statement can be placed inside an if statement to perform a jump only when a condition is true.

include

using namespace std;

int main() {
int number;

cout << "Enter a number: ";
cin >> number;

if (number < 0) {
    goto negative;
}

cout << "The number is non-negative." << endl;
return 0;

negative:
cout << "The number is negative." << endl;

return 0;

}
Example Output
Enter a number: -5
The number is negative.

This example shows how goto can redirect execution based on a condition.

Using goto to Repeat a Task

A goto statement can also create a simple loop by jumping back to an earlier label.

include

using namespace std;

int main() {
int count = 1;

start:
cout << count << " ";

count++;

if (count <= 5) {
    goto start;
}

return 0;

}
Output
1 2 3 4 5

The program jumps back to start until the condition becomes false.

However, a for or while loop is usually clearer for this kind of repetition.

Using goto in a Menu Program

Here is another example where goto returns execution to a menu.

include

using namespace std;

int main() {
int choice;

menu:
cout << "\n1. Say Hello";
cout << "\n2. Exit";
cout << "\nEnter your choice: ";
cin >> choice;

if (choice == 1) {
    cout << "Hello, C++ learner!" << endl;
    goto menu;
}

if (choice == 2) {
    cout << "Exiting program..." << endl;
}

return 0;

}

This demonstrates how a jump can return the program to an earlier section. In real applications, a loop is generally a better choice for implementing menus.

Example: Prefer a Loop

Instead of:

int i = 1;

start:
cout << i << " ";
i++;

if (i <= 5) {
goto start;
}

Use:

for (int i = 1; i <= 5; i++) {
cout << i << " ";
}

The loop communicates the intention more clearly.

Advantages of the goto Statement

Although goto is often discouraged in everyday code, it has a few potential uses:

1. Simple Direct Jumps

It can transfer control directly to a labeled section within the same function.

2. Certain Cleanup Patterns

In some low-level C or C++ code, a carefully controlled jump can simplify cleanup when several operations may fail. However, modern C++ often provides safer alternatives such as RAII and smart resource-management techniques.

Understanding Legacy Code

Many older programs use goto. Learning how it works helps developers read and maintain existing code.

Disadvantages of goto

1. Reduces Readability

Too many jumps can make it difficult to understand the program’s execution order.

2. Creates Spaghetti Code

When labels and jumps are scattered throughout a function, the code can become confusing and difficult to maintain.

3. Makes Debugging Harder

Following unexpected jumps can make debugging more complicated.

4. Structured Alternatives Are Usually Better

Loops, functions, conditional statements, and exception handling often provide clearer ways to express the same logic.

Best Practices for Using goto

If you use goto, keep these guidelines in mind:

Use it only when it genuinely simplifies the control flow.
Keep labels close to the code they control.
Avoid creating long chains of jumps.
Do not use it as a replacement for ordinary loops.
Prefer structured programming constructs when they express the logic clearly.
Make sure the jump does not bypass necessary initialization or create confusing control flow.

Conclusion

The C++ goto statement allows a program to jump to a labeled statement within the same function. It can be useful in limited situations, but excessive use often makes code harder to understand and maintain.

For most everyday programming tasks, structured control flow—such as loops, conditions, and functions—is the better choice.

Understanding goto is still valuable because it helps you read existing C++ code and recognize different approaches to program control.

Python def Function: A Complete Guide with Examples

Rachit Joshi — Mon, 14 Sep 2026 14:51:34 +0000

Functions are one of the most important building blocks in Python. They help developers organize code, avoid repetition, and create reusable solutions.

Python provides the def keyword to define a function. Whether you are building a small script or a large application, understanding functions is essential for writing clean and maintainable code.

In this article, we will learn what the def function is, its syntax, how to pass arguments, return values, and use default and keyword arguments with practical examples.

What Is a def Function in Python?

The def keyword is used to define a function in Python. A function is a reusable block of code that performs a specific task.

Instead of writing the same code multiple times, you can define it once and call it whenever needed.

Basic Syntax

def function_name(parameters):
# Function body
statements
Explanation
def: Keyword used to define a function.
function_name: Name of the function.
parameters: Optional inputs passed to the function.
Function body: The block of code executed when the function is called.

How to Define and Call a Function

Let's create a simple function that displays a welcome message.

def welcome():
print("Welcome to Python!")

welcome()

Output:

Welcome to Python!

In this example, welcome() defines the function, and the second welcome() statement calls it.

Function with Parameters

Parameters allow a function to receive input values. This makes functions more flexible and reusable.

def greet(name):
print("Hello,", name)

greet("Rachit")
greet("Aman")

Output:

Hello, Rachit
Hello, Aman

Here, name is a parameter, while "Rachit" and "Aman" are arguments passed to the function.

Function with Multiple Parameters

A function can accept multiple parameters separated by commas.

def add_numbers(a, b):
print("Sum:", a + b)

add_numbers(10, 20)

Output:

Sum: 30

The function receives two values and adds them together.

Returning a Value from a Function

The return statement sends a result back to the place where the function was called.

def multiply(a, b):
return a * b

result = multiply(5, 4)
print("Result:", result)

Output:

Result: 20

Unlike print(), the return statement allows the returned value to be stored in a variable or used in another expression.

Function with Default Arguments

A default argument is a value used when no argument is provided during the function call.

def greet(name="Guest"):
print("Hello,", name)

greet()
greet("Rachit")

Output:

Hello, Guest
Hello, Rachit

The default value "Guest" is used when the function is called without an argument.

Keyword Arguments

Keyword arguments allow you to pass values using parameter names. This makes function calls easier to understand.

def student_info(name, age):
print("Name:", name)
print("Age:", age)

student_info(age=22, name="Rachit")

Output:

Name: Rachit
Age: 22

The order of keyword arguments does not need to match the order of parameters.

Function with Arbitrary Arguments

Sometimes, you may not know how many arguments a function will receive. Python provides *args and **kwargs for such situations.

Using *args

The *args syntax allows a function to accept multiple positional arguments.

def total(*numbers):
return sum(numbers)

print(total(10, 20, 30))

Output:

Here, numbers stores the arguments as a tuple.

Using **kwargs

The **kwargs syntax allows a function to accept multiple keyword arguments.

def display_info(**details):
for key, value in details.items():
print(key, ":", value)

display_info(name="Rachit", city="Noida")

Output:

name : Rachit
city : Noida

The details variable stores the keyword arguments as a dictionary.

Function with a Docstring

A docstring is a string used to describe what a function does. It is written immediately after the function definition.

def square(number):
"""Return the square of a number."""
return number ** 2

print(square(6))

Output:

You can access the docstring using the doc attribute.

print(square.doc)
Nested Functions

Python allows you to define a function inside another function. Such functions are called nested or inner functions.

def outer_function():
def inner_function():
print("This is the inner function.")

inner_function()

outer_function()

Output:

This is the inner function.

The inner function is available within the scope of the outer function.

Recursive Functions

A recursive function is a function that calls itself. Recursion is useful for solving problems that can be divided into smaller versions of the same problem.

Example: Factorial
def factorial(n):
if n == 0 or n == 1:
return 1
return n * factorial(n - 1)

print(factorial(5))

Output:

120

The function repeatedly calls itself until it reaches the base condition.

Example
def square(x):
return x ** 2

square_lambda = lambda x: x ** 2

print(square(5))
print(square_lambda(5))

Output:

25
25

For larger or reusable logic, a regular def function is generally easier to read and maintain.

Advantages of Using Functions in Python

Functions provide several benefits:

Code reusability: Write code once and use it multiple times.
Modularity: Divide a large program into smaller, manageable parts.
Readability: Give meaningful names to specific tasks.
Easy debugging: Test individual functions separately.
Reduced repetition: Avoid writing the same code again and again.

Better maintenance: Update logic in one place instead of changing it throughout the program.

Best Practices for Defining Functions

Use meaningful and descriptive function names.
Keep functions focused on one specific task.
Use return when a result needs to be reused.
Add docstrings to explain important functions.
Avoid unnecessarily long functions.
Follow Python naming conventions, such as calculate_total().
Use default arguments when they make the function easier to use.

Conclusion

The Python def keyword is used to create reusable functions that make programs more organized, readable, and efficient.

By learning parameters, return values, default arguments, keyword arguments, and recursion, you can write more flexible Python programs.

Functions are a fundamental concept for anyone learning Python, and mastering them provides a strong foundation for advanced programming topics.

If you want to explore more Python tutorials, examples, and programming concepts, visit TPointTech for additional learning resources.

Nested Interface in Java: Complete Guide with Examples

Rachit Joshi — Sat, 12 Sep 2026 11:20:03 +0000

Java allows an interface to be declared inside another class or interface. Such an interface is called a nested interface. It is useful for grouping related functionality and improving code organization.

A nested interface can be declared inside:

A class
An interface

It helps keep closely related interfaces together and provides better encapsulation.

What Is a Nested Interface?

A nested interface is an interface declared within another class or interface.

Basic Syntax
class OuterClass {

interface InnerInterface {
    void display();
}

}

In this example, InnerInterface is declared inside OuterClass.

Example of a Nested Interface
class Vehicle {

interface Engine {
    void start();
}

}

class Car implements Vehicle.Engine {

public void start() {
    System.out.println("Car engine starts");
}

}

public class Main {
public static void main(String[] args) {
Car car = new Car();
car.start();
}
}
Output
Car engine starts

Here, the Car class implements the nested interface using the syntax Vehicle.Engine.

Nested Interface Inside Another Interface

An interface can also contain another interface.

interface Animal {

void sound();

interface Pet {
    void play();
}

}

class Dog implements Animal, Animal.Pet {

public void sound() {
    System.out.println("Dog makes a sound");
}

public void play() {
    System.out.println("Dog plays with its owner");
}

}

public class Main {
public static void main(String[] args) {
Dog dog = new Dog();

    dog.sound();
    dog.play();
}

}

A nested interface declared inside another interface is implicitly public and static.

Advantages of Nested Interfaces

Nested interfaces provide several benefits:

Better organization: Related interfaces can be grouped.

Improved readability: The relationship between classes and interfaces becomes clearer.

Encapsulation: Implementation details can remain within the enclosing class.

Namespace management: Nested interfaces help avoid naming conflicts.

Logical grouping: They are useful when an interface is meaningful only in the context of another class or interface.

Important Points

A nested interface can be declared inside a class or another interface.
It can be implemented using the enclosing class name.

Interfaces declared inside interfaces are implicitly public and static.
A nested interface helps organize related functionality.

It can contain abstract methods, default methods, and static methods according to Java interface rules.

Conclusion

A nested interface in Java is a useful feature for grouping related contracts and maintaining clean code structure. It improves readability, supports encapsulation, and makes large applications easier to organize

HTML Charset Explained: Fix UTF-8 Encoding Issues in Your Webpages

Rachit Joshi — Fri, 11 Sep 2026 07:09:05 +0000

INTRODUCTION

Have you ever opened a webpage and seen something like â‚¹ instead of ₹, or strange symbols where normal text should appear?

This usually happens when the browser and the webpage disagree about character encoding.

The good news is that the fix is often simple: use the correct charset, save your file with the matching encoding, and make sure your server sends the right information.

In this guide, we’ll understand HTML charset through practical examples and learn how to avoid common encoding problems.

What Is HTML Charset?

HTML charset specifies the character encoding an HTML document uses.

Computers store text as bytes. Character encoding tells the browser how to convert those bytes into readable characters.

For example, a webpage might contain:

The browser needs to interpret the underlying bytes correctly to display this text as intended.

Think of encoding as a language agreement between your HTML file and the browser. If both use the same encoding, the text displays correctly.

Why Is UTF-8 So Important?

UTF-8 is the recommended character encoding for modern HTML documents.

It can represent characters from many writing systems, including:

English
Hindi
Arabic
Japanese
Chinese
Mathematical symbols
Currency symbols
Emojis

For example:

English: Hello
Hindi: नमस्ते
Japanese: こんにちは
Arabic: مرحبا
Symbols: ₹ © ∑

This makes UTF-8 a practical choice for websites that support multiple languages or special characters.

How to Set UTF-8 in HTML

Add the following element inside the section:

Here is a complete example:

<!DOCTYPE html>

<meta charset="UTF-8">
<title>UTF-8 Character Encoding</title>

<h1>Welcome to My Website 🌐</h1>

<p>English: Hello World!</p>
<p>Hindi: नमस्ते दुनिया!</p>
<p>French: Bonjour, ça va?</p>
<p>Currency: ₹999</p>
<p>Emoji: 😀 🚀 ❤️</p>

The browser uses this declaration to understand how the document’s characters should be interpreted.

Best practice: Place the charset declaration near the beginning of the so the browser can identify the encoding early.

A Real-World Example: When Text Breaks

Suppose you want to display the Indian rupee symbol:

Product price: ₹999

If the file is saved using one encoding but the browser interprets it using another, the symbol may appear incorrectly.

For example, you might see:

Product price: â‚¹999

The exact result depends on the encoding mismatch, but the underlying problem is the same: the bytes are being interpreted incorrectly.

How to Fix It

Add to the HTML document.
Save the file using UTF-8 encoding.
Ensure the server sends a matching charset.
Refresh the page and test the characters again.

HTML Charset vs. HTTP Charset

There are two common places where character encoding can be declared.

1. HTML Meta Tag

This declaration is written inside the HTML document.

2. HTTP Response Header

A web server can also send the encoding through an HTTP response header:

Content-Type: text/html; charset=UTF-8

The header tells the browser how to interpret the response.

Important: The HTML file’s actual encoding and the server’s declared encoding should match. If they do not, the browser may display unexpected characters.

Common Character Encoding Types

ASCII

ASCII is an older character encoding standard that supports basic English letters, numbers, punctuation, and control characters.

Example:

A B C 1 2 3 ! @ #

It is useful for basic English text but cannot represent most international characters.

ISO-8859-1

ISO-8859-1, also called Latin-1, supports many Western European characters.

However, it does not cover the full range of characters needed for modern multilingual websites.

UTF-8

UTF-8 supports a very wide range of characters and is the standard choice for most modern HTML documents.

For new HTML projects, UTF-8 is generally the best option.

How to Check Encoding in Visual Studio Code

If your webpage displays strange characters, check how the file is saved.

In Visual Studio Code:

Open your HTML file.
Look at the encoding indicator in the bottom-right corner.
Click it.
Choose Save with Encoding.
Select UTF-8.
Save the file and reload the webpage.

This helps ensure that the file’s actual encoding matches the charset declaration.

Common HTML Charset Mistakes

Mistake 1: Forgetting the Charset Declaration

<title>My Webpage</title>

Better:

<meta charset="UTF-8">
<title>My Webpage</title>

Mistake 2: Saving the File in a Different Encoding

Declaring UTF-8 does not automatically convert a file that was saved using another encoding.

Fix: Save the HTML file as UTF-8.

Mistake 3: Incorrect Server Header

Your HTML may contain:

But the server could send:

Content-Type: text/html; charset=ISO-8859-1

This mismatch can cause encoding problems.

Fix: Configure the server to send the correct charset.

Mistake 4: Assuming Every Symbol Needs an HTML Entity

UTF-8 allows you to write many characters directly:

Price: ₹999

You can also use HTML character references when appropriate:

Price: ₹999

Both can represent the rupee symbol, but UTF-8 makes writing multilingual text directly much easier.

A Practical Multilingual HTML Example

<!DOCTYPE html>

<meta charset="UTF-8">
<title>Multilingual Webpage</title>

<h1>Welcome to My Website</h1>

<p>English: Hello!</p>
<p>Hindi: नमस्ते!</p>
<p>Japanese: こんにちは!</p>
<p>Arabic: مرحبا!</p>
<p>Currency: ₹ € ¥</p>

This example demonstrates how one HTML document can contain text from several languages.

HTML Charset Best Practices

Use UTF-8 for modern HTML documents.

Declare the charset near the beginning of the .

Save your HTML files using UTF-8.
Keep the server’s Content-Type charset consistent with the file.
Test special characters and multilingual text.
Avoid relying on automatic encoding detection.
Use a text editor that clearly shows the file encoding.

Frequently Asked Questions

What is the default charset in HTML?

Modern HTML documents should explicitly declare their encoding rather than relying on a default or browser guess. UTF-8 is the recommended choice.

Is UTF-8 the same as Unicode?

No. Unicode is a character standard that assigns characters and code points, while UTF-8 is an encoding used to represent those characters as bytes.

Where should I put the charset tag?

Place it inside the section, preferably near the beginning:

Can UTF-8 display emojis?

Yes. UTF-8 supports emojis and many other modern characters.

Why are Hindi or other language characters appearing incorrectly?

This can happen when the file encoding, HTML charset, or server response encoding does not match. Check all three.

Conclusion

HTML charset is a small but essential part of web development. It tells the browser how to interpret the characters in your webpage and helps prevent broken text.

For most modern websites, UTF-8 is the recommended encoding because it supports a wide range of languages, symbols, and special characters.

By declaring UTF-8 correctly, saving files with the matching encoding, and configuring your server properly, you can avoid many common character-display problems.

For more examples and related HTML concepts, explore the HTML Charset tutorial on TPointTech.

HTML URL Encoding: A Complete Guide for Beginners

Rachit Joshi — Thu, 10 Sep 2026 15:44:58 +0000

When working with websites, you often need to pass information through URLs. But URLs cannot safely contain every character in its original form. Spaces, special characters, and non-ASCII characters may need to be represented using URL encoding, also called percent-encoding.

In this guide, we'll understand what URL encoding is, why it is important, common encoded characters, and how to use it with HTML and JavaScript.

What Is URL Encoding?

URL encoding converts characters into a format that can be safely transmitted inside a URL.

For example:

Hello World

can be represented as:

Hello%20World

Here, %20 represents a space.

URL encoding is useful when:

Passing user input through URLs
Creating search URLs
Building API requests
Handling query-string parameters
Working with spaces and special characters
Supporting non-ASCII characters
URL Encoding in HTML

HTML links can contain encoded URLs using the href attribute:

Search HTML and CSS

The browser can interpret the encoded characters and request the appropriate URL.

URL Encoding in JavaScript

JavaScript provides built-in functions for URL encoding.

encodeURIComponent()

encodeURIComponent() is commonly used when encoding an individual query parameter or piece of URL data.

const keyword = "HTML & CSS";

const encoded = encodeURIComponent(keyword);

console.log(encoded);

Output:

HTML%20%26%20CSS

This is useful because characters such as & should not accidentally become part of the URL's structure.

encodeURI()

encodeURI() is generally used when working with an entire URL while preserving URL structure such as /, ?, and &.

For example:

const url = "https://example.com/search?q=hello world";

console.log(encodeURI(url));

The distinction between encodeURI() and encodeURIComponent() is important: the first preserves structural URL characters, while the second is designed for encoding individual components.

URL Decoding

URL encoding can also be reversed.

JavaScript provides:

decodeURIComponent()

For example:

const encoded = "HTML%20%26%20CSS";

const decoded = decodeURIComponent(encoded);

console.log(decoded);

Output:

HTML & CSS
URL Encoding vs HTML Encoding

URL encoding and HTML encoding are different concepts.

URL encoding uses percent notation:

& → %26
< → %3C

→ %3E

HTML encoding uses HTML entities:

& → &
< → <

→ >

They solve different problems, so choosing the appropriate encoding method is important when developing web applications.

A Common URL Encoding Mistake

One common mistake is double encoding.

For example, if %20 is encoded again, the % character can become %25, producing:

%2520

Instead of:

%20

Therefore, avoid encoding data repeatedly unless the application specifically requires another encoding layer.

Conclusion

URL encoding is an important concept for HTML and web development. It ensures that spaces, special characters, and other data can be safely represented within URLs.

If you're learning HTML and want to explore URL encoding along with other HTML concepts, TPointTech's HTML tutorial provides additional learning material and examples.

Pure.CSS Grids: A Complete Guide with Examples

Rachit Joshi — Wed, 09 Sep 2026 12:42:50 +0000

Creating a responsive page layout can become much easier when you use a grid system. Pure.CSS provides a lightweight grid system that helps developers arrange content into flexible columns without writing a large amount of custom CSS.

In this guide, we'll explore how Pure.CSS grids work, understand its grid classes, and create simple examples using fractional column widths.

What Is a Pure.CSS Grid?

Pure.CSS includes a grid system for creating responsive layouts. It mainly uses two types of classes:

pure-g — defines the grid container.
pure-u-* — defines the width of a grid unit.

A grid container holds the individual grid units, and the unit classes determine how much horizontal space each element occupies.

Understanding pure-g

The pure-g class is applied to the parent element that contains your grid columns.

For example:

The elements inside this container should use Pure.CSS unit classes so that the layout can be calculated correctly.

Understanding pure-u-*

The pure-u-* classes determine the width of individual grid elements.

Pure.CSS uses fractions to represent widths. For example:

pure-u-1-2 = 50%
pure-u-1-3 = approximately 33.33%
pure-u-1-4 = 25%
pure-u-1-5 = 20%
pure-u-1 = 100%

This makes it possible to divide a page into proportional sections without manually calculating percentages.

Basic Pure.CSS Grid Example

First, include Pure.CSS in your HTML page:

rel="stylesheet"
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">

Then create a simple two-column layout:

Left Column Right Column

Here, each column takes half of the available width.

Creating a Three-Column Layout

You can also divide the available space into three equal sections:

Column One Column Two Column Three

Each grid unit occupies approximately one-third of the container.

Creating Unequal Columns

Grid units don't have to be equal.

For example:

Sidebar Main Content

The first section occupies 25% of the available width, while the second occupies 75%.

This type of layout is useful for websites with a sidebar and main content area.

24-Based Grid Units

Pure.CSS also supports a more granular 24-unit grid system.

This allows developers to create smaller fractional widths.

For example:

1/24 23/24

The 24-based approach provides more flexibility when designing complex layouts. The TPointTech tutorial describes these units using the pure-u-x-24 concept, where the numerator can range from 1 through 24.

Complete Example

Here is a simple responsive grid example:

<!DOCTYPE html>

Pure.CSS Grid Example

<meta
    name="viewport"
    content="width=device-width, initial-scale=1">

<link
    rel="stylesheet"
    href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">

<style>
    .box {
        padding: 30px;
        text-align: center;
        border: 1px solid #ddd;
        box-sizing: border-box;
    }
</style>

<div class="pure-g">

    <div class="pure-u-1-2">
        <div class="box">Column 1</div>
    </div>

    <div class="pure-u-1-2">
        <div class="box">Column 2</div>
    </div>

</div>

This creates two grid sections, each occupying half of the available space.

Important Rules for Pure.CSS Grids

When working with Pure.CSS grids, keep these points in mind:

Use pure-g for the Container

The parent element should use:

class="pure-g"
Use Grid Unit Classes for Children

Elements inside the grid should use classes such as:

pure-u-1-2
pure-u-1-3
pure-u-1-4
Keep Content Inside Grid Units

For predictable rendering, content should be placed inside a grid-unit element rather than directly inside the pure-g container.

Benefits of Pure.CSS Grids

Pure.CSS grids offer several advantages:

Lightweight layout system
Simple class-based structure
Fractional column sizing
Responsive-friendly design
Less custom CSS required
Easy creation of multi-column layouts
Pure.CSS Grid vs Traditional CSS

With traditional CSS, you might manually define widths such as:

.column {
width: 50%;
}

With Pure.CSS, the same concept can be expressed through:

This makes the intended layout ratio immediately visible in the HTML.

Conclusion

Pure.CSS Grids provide a straightforward way to create flexible, proportional layouts. The pure-g class establishes the grid container, while pure-u-* classes define the width of individual units.

The framework supports both 5-based and 24-based fractional units, allowing developers to create anything from simple two-column layouts to more detailed page structures.

If you're learning responsive web design, Pure.CSS grids are a useful example of how a lightweight CSS framework can simplify layout development.