Frontend Development Basics - DevLearnHub Website

This tutorial covers the absolute basics of frontend development. You will learn about HTML for structuring web pages, CSS for styling them beautifully, and JavaScript for adding interactivity. We will explore concepts like responsive design, DOM manipulation, and basic event handling.

Key topics include:

HTML structure and semantics
CSS selectors, properties, and flexbox/grid
JavaScript variables, functions, and control flow
Introduction to responsive web design

HTML Basics

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

CSS Styling

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

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

JavaScript Interactivity

JavaScript is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.

document.addEventListener('DOMContentLoaded', () => {
    const button = document.createElement('button');
    button.textContent = 'Click me!';
    document.body.appendChild(button);

    button.addEventListener('click', () => {
        alert('Button clicked!');
    });
});

Ready to start your frontend journey? Explore these concepts and build amazing user interfaces!