JavaScript conditional statements let a webpage respond differently to different situations. A quiz is a useful way to practise: an unanswered question needs a prompt, a correct answer deserves confirmation, and an incorrect answer needs an explanation. In this tutorial,…
A navigation bar helps visitors move between the main pages of a website. In this beginner project, you will use CSS Flexbox to place several links in a row and make them wrap neatly on a narrow screen. What you…
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 can turn a plain block of content into a clear, friendly card. In this practical example, you will combine border-radius and box-shadow, test the result, and learn what each value controls. If you are new to CSS, first read…
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 groups instructions under a name so you can run the same task whenever you need it. In this example, you will create a reusable function that calculates coding progress and returns a message. Start with the JavaScript explanation…
An interactive button is a small project that shows how HTML and JavaScript work together. HTML creates the button and message area; JavaScript listens for a click and changes the page. Review the JavaScript explanation on Playcode123.com, then use the…
Variables give names to values so your JavaScript can remember and reuse them. In this practical example, you will store a learner’s name, completed lessons, and weekly goal, then show a progress message on the page. For the core concepts,…
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…
A separate .js file keeps JavaScript out of your HTML and makes it easier to reuse and debug. This practical tutorial connects index.html to script.js and checks that the path works. For the core language concepts, read the JavaScript explanation…
A separate CSS file keeps the structure of a webpage in HTML and its design rules in CSS. This practical tutorial shows you how to connect the two files, check that the link works, and solve the most common file-path…