Last updated: 28 August 2026 This practical project builds on Example 4 – Table on Playcode123.com. Use that page for the basic syntax; here you will turn a table into a weekly coding plan, add useful headings, and troubleshoot your…
Last updated: 28 August 2026 You have tried the image example on Playcode123.com. Now turn it into a small plant card on your own computer. This practical guide focuses on the part that often goes wrong: getting the browser to…
CSS border-radius codeUse border-radius when you want to make sharp corners round. <!DOCTYPE html> <html> <head> <title>CSS border-radius example</title> <style> div { width: 300px; padding: 20px; background-color: lightblue; border-radius: 20px; } </style> </head> <body> <h1>Box with round corners</h1> <div> This…
Last updated: 28 August 2026 After practising basic tags on Playcode123.com, you can make a useful help panel without writing JavaScript. This project puts two troubleshooting answers behind clear questions and highlights the file extension that a beginner needs to…
A function is a piece of code that you can reuse. This is useful because you do not have to write the same code again and again. Example <!DOCTYPE html> <html> <head> <title>JavaScript Functions</title> </head> <body> <h1>JavaScript Functions</h1> <p id=”output”></p>…
Create an Interactive Button with JavaScript With JavaScript, you can make something happen when someone clicks a button. This makes your website interactive. Example <!DOCTYPE html> <html> <head> <title>JavaScript Button</title> </head> <body> <h1>My First Button with JavaScript</h1> <p id=”text”>Click the…
JavaScript Variables: let and const Explained Simply JavaScript variables are used to store data. Think of a name, age, or score.With let, you create a variable that can be changed later. With const, you create a variable that stays the…
Last updated: 28 August 2026 Separate examples show what each HTML control looks like. This project shows how the controls work together. After reviewing the HTML examples on Playcode123.com, build a small activity selector that displays your choices locally. This…
Last updated: 28 August 2026 The main Playcode123.com HTML page introduces a page with a header, main area, and footer. This extra project shows how to choose meaningful sections when your page grows. You will organize a small notebook instead…
Move Files with Filezilla FileZilla is like a digital bridge between your computer and a web server. It helps you move files back and forth securely and efficiently. Here’s a simple breakdown of what you can do with it: General…
A .js file as an external file: What it is: A .js file is a JavaScript file—basically, it contains code that makes your webpage interactive (like buttons working, menus opening, etc.). Why use it externally? Instead of writing JavaScript…
What is a style.css File? A style.css file is a separate file that contains CSS (Cascading Style Sheets) code. CSS is used to control the look and feel of a webpage — things like colors, fonts, spacing, and layout. How…