A showcase of my HTML, CSS and Java Skills

What is HTML and Examples

HTML, or HyperText Markup Language, is the standard language used to create web pages. It provides the structure and content of a web page using a system of "tags." These tags tell web browsers how to display text, images, links, and other elements, essentially acting as the blueprint for what you see on a website. It's how you organize and present your information. 


<!DOCTYPE html>
 <html>
    <head>
     <title>My Awesome Page</title>
    </head>
<body>
    <h1>Welcome to My Website!</h1>
    <p>This is a paragraph of text. Isn't it just... *amazing*?</p>
 </body>
 </html>

What is CSS and Examples

CSS, or Cascading Style Sheets, is like the fashion designer for your website. While HTML gives your web page its bones and structure, CSS is what makes it look good – defining the colors, fonts, spacing, layout, and overall visual presentation. It allows you to separate the content (HTML) from the design (CSS), making your website easier to maintain and giving you precise control over how elements are displayed across different devices and screen sizes. 


 body {
     font-family: 'Arial', sans-serif;
     background-color: #f0f8ff;
     color: #333;
 }
 
 h1 {
     color: #007bff;
     text-align: center;
 }

What is Java and Examples

JavaScript (often shortened to JS) is the programming language that brings your website to life, making it dynamic and interactive. While HTML provides the structure and CSS adds the style, JavaScript handles the "behavior" – things like responding to user clicks, validating forms, updating content without reloading the page, animating elements, and much more. It allows you to create engaging user experiences, turning a static page into a lively and responsive application.


// This is a comment in JavaScript, just like in other languages!

function greetUser() {
    let userName = prompt("What's your name, baka?"); // Asks the user for their name
    if (userName) { // Check if the user entered something
        alert("Hmph. Nice to meet you, " + userName + "! Don't think I'm excited or anything!");
    } else {
        alert("Fine, don't tell me! See if I care!");
    }
}

// Call the function when the page loads or when a button is clicked, for example
// greetUser(); // Uncomment this line to run it automatically on page load

// Or, you could link it to a button:
//

Live Retro Playground

Type below to test your skills instantly.

Result: