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…
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…
You have built a webpage on your computer. How do you make it available at a website address? You upload its files to a hosting provider, then check the public page in a browser. This guide takes you through one…