Your hobby page already has text and pictures. What if you want visitors to watch a short demonstration or listen to an explanation? HTML has built-in audio and video players. You can add playback controls without writing JavaScript—and provide captions…
You made a button that works when you click it. Can someone reach it with Tab, see where they are, and activate it without a mouse? That small test can change how you build every interaction after it. A visible…
Your first website looks good on your computer. Then you open it on a phone: the text is tiny, the cards feel cramped, or you have to scroll sideways. How do you fix it? Start with a flexible layout. In…
An approximately 20-minute practice session for beginners who have tried HTML, CSS, and a JavaScript button. You copy an example. It works. You change something—and suddenly the button does nothing. This is a normal part of learning to code. The…
You set a card to width: 280px, but it takes up more space than expected. Adding padding makes it wider again. What is happening? The answer is the CSS box model. This lesson builds on our rounded card tutorial. You…
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: 3 October 2026 Build a small plant card with an image, a caption, and a short description. You can try the complete example in the Playcode123 sandbox, then practise arranging files on your own computer. What you will…
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…
