1
HTML — the content
HTML tells the browser what is on the page: headings, paragraphs, buttons, links, images and forms.
Try changing:
My Demo Website to your own heading.
Code Lab
See It. Edit It. Use It.
You do not need to be a programmer to have a go. These examples let you change small pieces of website code and immediately see what those changes do.
Start here
What are HTML, CSS and JavaScript?
Think of a website like a house: HTML provides the structure, CSS controls how it looks, and JavaScript makes things respond when someone interacts with the page.
2
CSS — the appearance
CSS controls colours, sizes, spacing, borders, shapes, fonts and the overall visual design.
Try changing:
#eef7ff to another background colour.3
JavaScript — the action
JavaScript can make a page react to clicks, validate information, show messages and change content without reloading.
Try changing: the message shown after the button is clicked.
How to use the example below:① Change something in one of the dark code boxes② Click Run Code③ Look at the Live Preview on the right④ If something goes wrong, click Reset
HTML — what is on the pageChange the heading or the words inside the paragraph. You can also change the button text.
CSS — what the page looks likeTry changing a colour, padding, border-radius or font size. CSS changes appearance, not the underlying content.
JavaScript — what happens when someone clicksTry changing the sentence between the quotation marks. JavaScript controls the action in this example.
Live PreviewWhat your visitor would see
Try this first: change
My Demo Website in the HTML box, change #eef7ff in the CSS box, then click Run Code. You will see both changes in the preview.Easy Edit AreaWant to experiment without scrolling back to the code boxes? Change the small examples below and click Update Preview.
Try changing the heading above. For example: My New Website
Try a colour such as #fff4e6 or #e8fff0
This is the message shown after the button is clicked.
How it works: these easy boxes change the matching code above for you. Your changes are only a demonstration — nothing is saved and no email is sent.
Interactive Contact Form Designer
Build Your Own Contact Form
Want a contact form that looks different from everyone else's? Use the controls below to design one. You can experiment with colours, borders, rounded corners, text size and the button — and the preview changes instantly.
What this tool does
It is a visual design playground. It changes the appearance of a contact form so you can decide what you like before a real form is built.
What it does not do
This preview does not send emails or save messages. A real working form needs server-side processing, validation and email or database handling.
Easy way to start
Pick a Style preset first. Then change one colour or slider at a time and watch the form on the right.
Live Preview● LIVE
Generated HTML
Generated CSS
More examples
Small features can become real website tools
Responsive Content
HTML provides structure for headings, paragraphs, images, links, forms, tables and page sections.
View example
<section class="feature"> <h2>A useful section</h2> <p>Clear information for your visitors.</p> <a href="/contact.php">Contact us</a> </section>
Interactive Behaviour
JavaScript can respond to clicks, validate fields, update content, open panels and filter information.
View example
const button = document.querySelector('#show');
button.addEventListener('click', () => {
document.querySelector('#message').textContent =
'The page has changed!';
});Server-Side Processing
PHP can receive form data, validate it, talk to a database and produce dynamic pages.
View example
<?php
$name = trim($_POST['name'] ?? '');
if ($name === '') {
echo 'Please enter your name.';
} else {
echo htmlspecialchars($name, ENT_QUOTES, 'UTF-8');
}
?>What this means for a real project
A production website can combine HTML/CSS for pages, JavaScript for interface behaviour, PHP for server-side functions, MySQL for structured data and APIs for external services.
Production code also needs appropriate validation, authentication, security controls, error handling, accessibility, testing and backups.