Building TypeMaster Pro: What I Learned From My First Typing Speed Test Project

FAREED AHMED — Thu, 27 Aug 2026 14:35:40 +0000

TypeMaster Pro: My Journey of Building a Typing Speed Test Website
Recently, I worked on one of my web development projects called TypeMaster Pro, a typing speed test website.

The idea was simple: create a website where users can test their typing speed and see their performance. But while building it, I realized that even a simple-looking project can involve quite a lot of logic and debugging.

What is TypeMaster Pro?
TypeMaster Pro is a web-based typing speed test that allows users to type a given paragraph within a set amount of time and then see their results.

The project tracks things like:

Typing speed (WPM)
Accuracy
Mistakes
Number of characters typed
Time taken After completing the test, the user is taken to a result page where the performance is displayed.

Technologies I Used
I built the project using:

HTML – for the structure of the pages
CSS – for the design and layout
JavaScript – for the typing test logic and calculations
LocalStorage – for saving the test results between pages I also used VS Code during development and GitHub to store and publish the project.

Some of the Challenges
The project wasn't just about writing the code and finishing it.

I faced several problems while developing it. At one point, my JavaScript wasn't loading correctly, and I also had issues with elements not being found by JavaScript.

Another part that took some time was getting the WPM and accuracy calculations to work correctly.

I also had to figure out how to pass the test results from the typing page to the result page. That's where I learned how useful browser localStorage can be for small web projects.

Debugging these problems was probably one of the most useful parts of the project because I wasn't just writing code—I was learning how to find out why something wasn't working.

What I Learned
This project helped me understand JavaScript much better.

I got more familiar with things like:

DOM manipulation
Event listeners
JavaScript functions
Timers
Calculating WPM and accuracy
Changing HTML elements using JavaScript
Using localStorage
Debugging errors using browser developer tools I also learned that understanding the logic behind the code is more important than simply getting the final output.

From VS Code to GitHub
After completing the project, I uploaded it to GitHub and worked on publishing it using GitHub Pages.

This gave me some experience with another important part of development: actually putting a project online instead of keeping it only on my laptop.

Final Thoughts
TypeMaster Pro started as a relatively simple project, but it gave me a good opportunity to practice the basics of front-end development.

There are still things I would like to improve in the future, such as adding more typing tests, difficulty levels, better history tracking, and improving the overall user experience.

For me, the biggest takeaway from this project is that building a project and debugging it teaches much more than just reading about programming concepts.

I'm looking forward to building more projects and improving my development skills step by step.

Project: TypeMaster Pro

GitHub: [https://github.com/FareedAhmed-2009/TypeMaster-Pro]

Live Demo: [https://fareedahmed-2009.github.io/TypeMaster-Pro/]

WebDevelopment #JavaScript #HTML #CSS #GitHub #FrontendDevelopment #StudentDeveloper

From Mesopotamia to the Moon: Exploring the History via History Explorer

FAREED AHMED — Thu, 27 Aug 2026 14:30:57 +0000

➤ History Explorer — Exploring the World Through History
I've always been interested in history, especially the stories behind the civilizations, people, wars, discoveries, and events that shaped the world we live in today.

So when I started working on History Explorer, I didn't want to make just another website with a few paragraphs about historical topics.

I wanted to create something where someone could actually explore history.

And as I kept working on it, the project became much bigger than I originally imagined.

➤ Starting With the Timeline
The first thing I wanted was a way to look at history as a continuous journey.

That's why History Explorer has a Timeline section.

Instead of seeing historical events as separate pieces, the timeline helps connect different periods and gives an idea of how the world changed from one era to another.

From the ancient world to the modern age, it gives visitors a way to travel through different periods of history.

➤ Exploring Civilizations
Then comes one of the biggest parts of the website — Civilizations.

Here, I included civilizations such as Ancient Egypt, Mesopotamia, the Indus Valley Civilization, Ancient Greece, the Roman Empire, Ancient China, the Maya Civilization, and Achaemenid Persia.

I wanted this section to show that every civilization had its own culture, achievements, ideas, systems, and legacy.

These civilizations were not just names in history books. They were societies that built cities, developed knowledge, created art, traded with distant regions, and influenced generations that came after them.

➤ Meeting the People Behind History
After civilizations, I wanted to focus on the people who played important roles in shaping history.

That's where the Figures section comes in.

It includes philosophers like Socrates ,Thiruvalluvar, Plato, Aristotle, Confucius, and Thales of Miletus.

It also includes scholars and scientists such as Al-Khwarizmi, Ibn al-Haytham, Ibn Sina, Ibn Khaldun, and Isaac Newton.

Then there are rulers, commanders, and leaders such as Alexander the Great ,Karikala Chola, Cyrus the Great, Raja Raja Chola , Julius Caesar, Mehmed II, Khalid ibn al-Walid, Salahuddin Ayyubi, Subutai, and Belisarius.

And I also wanted to include the great explorers — Ibn Battuta, Zheng He, Marco Polo, Christopher Columbus, and Ferdinand Magellan.

Each of these people represents a different part of the human story.

➤ Events That Changed the World
Of course, history isn't only about people.

There are moments when everything changes.

So I created an Events section covering some major events and turning points.

It includes the Battle of Marathon, Battle of Gaugamela, Assassination of Julius Caesar, Eruption of Mount Vesuvius, Battle of Yarmouk, Fall of Constantinople, Battle of Manzikert, Norman Conquest of England, Columbus's Atlantic Voyage, Scientific Revolution, French Revolution, Industrial Revolution, World War I, World War II, and the Apollo 11 Moon Landing.

I wanted this section to move through completely different periods and show how events in different parts of the world changed the course of history.

➤ Wars and Conflicts
I also created a separate Wars section because conflicts have played a huge role in shaping civilizations and changing borders.

The purpose is not simply to look at who won or lost a war, but to understand the bigger historical context behind these conflicts and why they mattered.

➤Exploring Religions
Another section I wanted to include was Religion.

History and religion are deeply connected, so I created dedicated pages for Hinduism, Christianity, and Islam.

The Hinduism section also explores Shaivism and Vaishnavism sects.

The Christianity section also explores Catholicism , Eastern Orthodoxy and Protestenism sects.

The Islam section also explores Sunni and Shia sects.

My goal here was to present these traditions from an educational and historical perspective and give visitors a place to learn about their development and influence.

➤ Exploring India's Golden Ages
Being especially interested in history, I also wanted History Explorer to have a section dedicated to India's Golden Ages.

This section looks at India's historical achievements through architecture, literature, science, and trade.

I also included important South Indian history, including the Cheras, Cholas, and Pandyas, along with the wider cultural and intellectual contributions of India.

This section is important to me because India's history is incredibly vast, and there is so much more to explore beyond the commonly known events and rulers.

✦Literature, ✦Science, ✦ Trade & ✦ Architecture
I didn't want History Explorer to focus only on kings and wars.

That's why I also added sections for Literature, Science, Trade, and Architecture.

Literature shows how people expressed their ideas and preserved knowledge.

Science shows how human understanding developed over time.

Trade shows how different civilizations were connected and how goods, ideas, cultures, and knowledge travelled between regions.

Architecture shows what civilizations left behind in the form of monuments, structures, temples, cities, and other remarkable achievements.

Together, these sections show another side of history — the side beyond battles and rulers.

➤ The Crusades
The Crusades also have their own section.

This is one of the most complex periods of medieval history, involving religion, politics, military campaigns, kingdoms, territories, and different societies.

I wanted visitors to be able to explore this period as part of the larger story of medieval history rather than seeing it as an isolated event.

➤ From the Ancient World to the Moon
And this is probably what I like most about History Explorer.

The website doesn't stop at ancient civilizations.

You can start with Mesopotamia, explore Egypt, Greece, Rome, India, China, and other civilizations, meet philosophers, scholars, rulers, commanders, and explorers, move through medieval conflicts, explore revolutions and world wars, and eventually reach Apollo 11 and humanity's first landing on the Moon.

That's a massive journey.

Thousands of years of human history, all connected through one project.

➤ Why I Created It
While building History Explorer, I kept getting more ideas.

One page became another.

One section led to another.

And slowly, the project became something much larger than the original idea.

I wanted people to be able to open the website and simply think:

“What should I explore next?”

That's the experience I wanted to create.

History Explorer is not meant to replace books, historians, or academic research. It is simply my attempt to make exploring history more interesting, visual, and accessible.

This project allowed me to bring together something I genuinely enjoy — history — with something I'm learning — web development.

And after creating all these sections and pages, seeing the entire project finally come together has been one of the most satisfying parts of my learning journey.

➜ History Explorer — Explore the Past. Understand the Present. Imagine the Future.

Built under Learnova.

• Live Website: [https://fareedahmed-2009.github.io/History-Explorer/]

•GitHub Repository: [https://github.com/FareedAhmed-2009/History-Explorer.git]

•Netlify Application: [https://learnova-historyexplorer.netlify.app]

➤ Disclaimer
History Explorer is an educational project created as part of my learning journey. The information presented is intended for general educational purposes, and some historical details or interpretations may vary between sources.
For deeper study and verification, readers are encouraged to consult reliable academic and primary historical sources.

DEV Community: FAREED AHMED

Building TypeMaster Pro: What I Learned From My First Typing Speed Test Project

WebDevelopment #JavaScript #HTML #CSS #GitHub #FrontendDevelopment #StudentDeveloper

From Mesopotamia to the Moon: Exploring the History via History Explorer