Beginner Web Apps - elenikik.g

What You'll Learn

HTML Structure

Learn to create the foundation of your web app with semantic HTML elements.

Styling with CSS

Create beautiful layouts using modern CSS techniques and responsive design.

JavaScript Basics

Add interactivity and logic to your web app with fundamental JavaScript concepts.

Putting It All Together

Combine HTML, CSS, and JavaScript to create a complete working web app.

Your First Web App Project

Let's create a simple to-do list application. This project will teach you the basics of building a functional web application.

What You'll Need:

Text editor (VSCode recommended)
Basic knowledge of HTML/CSS/JS
Web browser for testing

We'll be using plain HTML/CSS/JavaScript so no frameworks are required. Let's start by setting up our project directory:


todo-app/
├── index.html
├── style.css
└── script.js

index.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>To-Do List</title>
</head>
<body>
    <div class="container">
        <h1>My To-Do List</h1>
        <form id="todo-form">
            <input type="text" id="todo-input" placeholder="Add a new task..." required>
            <button type="submit">Add</button>
        </form>
        <ul id="todo-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Styling Our App

Let's add some modern styling to our to-do list to make it visually appealing and functional.

Key CSS Concepts

Flexbox layout for responsive design
Hover effects for user interaction
Responsive breakpoints for mobile use

Add this CSS to your style.css file to style your to-do list:

style.css


body {
    font-family: 'Segoe UI', sans-serif;
    background: linear-gradient(to right bottom, #fffde7, #fff9c4);
    padding: 2rem;
}

.container {
    max-width: 500px;
    margin: 0 auto;
}

h1 {
    text-align: center;
    color: #5d4037;
    margin-bottom: 2rem;
}

#todo-form {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

#todo-input {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid #fff9c4;
    border-radius: 0.5rem;
    font-size: 1rem;
}

button {
    padding: 0.75rem 1.5rem;
    background: #fbc02d;
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#todo-list {
    list-style: none;
    padding: 0;
}

.todo-item {
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.todo-item:hover {
    background: #fff8b3;
}

.remove-btn {
    background: none;
    border: none;
    color: #e64a19;
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 1rem;
}

Adding Interactivity

Now let's add JavaScript functionality to handle task creation, storage, and deletion.

JavaScript Features

Event listeners for form submission
Dynamic DOM manipulation
Item deletion functionality

Add this script to your script.js file to make the to-do list work:

script.js


document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('todo-form');
    const input = document.getElementById('todo-input');
    const list = document.getElementById('todo-list');

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const taskText = input.value.trim();
        
        if (taskText) {
            const li = document.createElement('li');
            li.className = 'todo-item';
            
            li.innerHTML = `
                <span>${taskText}</span>
                <button class="remove-btn" aria-label="Remove item">&times;</button>
            `;
            
            list.appendChild(li);
            input.value = '';
            
            li.querySelector('.remove-btn').addEventListener('click', () => {
                li.remove();
            });
        }
    });
});

Your Challenge

Try adding these features to your to-do list to practice your skills:

✅ Add local storage persistence

🎯 Add task completion checkbox

📊 Add task counter

📱 Make it mobile responsive

Next: Intermediate Concepts

Beginner's Guide to Web Apps