Welcome to CodeLearn
Select a programming language or technology from the topics above to start learning.
Our tutorials are completely free and don't require any sign-up.
Select a programming language or technology from the topics above to start learning.
Our tutorials are completely free and don't require any sign-up.
HTML (HyperText Markup Language) is the standard markup language for creating web pages.
It describes the structure of a web page and consists of a series of elements that tell the browser how to display the content.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>An HTML element is defined by a start tag, some content, and an end tag.
Example: <tagname>Content goes here...</tagname>
Some elements don't have content (like <img>) and are called empty elements.
Attributes provide additional information about elements. They are always specified in the start tag.
Example: <a href="https://www.example.com">Visit Example</a>
Common attributes include href, src, alt, style, etc.
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading, while <h6> defines the least important.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>The HTML <p> element defines a paragraph.
Example: <p>This is a paragraph.</p>
Browsers automatically add some margin before and after each paragraph.
CSS (Cascading Style Sheets) is used to style HTML elements.
It describes how elements should be displayed on screen, paper, or in other media.
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}CSS selectors are used to select the HTML elements you want to style.
Basic selectors include element selectors, id selectors, class selectors, and universal selector.
p {
color: red;
}
#header {
background: blue;
}
.center {
text-align: center;
}
* {
margin: 0;
padding: 0;
}All HTML elements can be considered as boxes. The CSS box model consists of margins, borders, padding, and the actual content.
Understanding the box model is crucial for layout design.
div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}JavaScript is a programming language that makes web pages interactive.
It can update and change both HTML and CSS, and can calculate, manipulate and validate data.
// This is a JavaScript comment
// Simple alert
alert('Hello, World!');
// Console log
console.log('This message appears in the console');JavaScript variables are containers for storing data values.
JavaScript has dynamic types: the same variable can hold different data types.
// Variables
let x = 5;
let y = 'Hello';
const PI = 3.14;
// Data types
let num = 5; // Number
let text = 'Hello'; // String
let bool = true; // Boolean
let obj = {name:'John', age:30}; // ObjectA JavaScript function is a block of code designed to perform a particular task.
A function is executed when it is invoked (called).
// Function definition
function greet(name) {
return 'Hello ' + name;
}
// Function call
let message = greet('Alice');
console.log(message); // Output: Hello Alice