DEV Community

Israel Gabice
Israel Gabice

Posted on

Web Development Intro: HTML, CSS, JavaScript

Introduction to HTML
HTML (HyperText Markup Language) is the foundation of web pages. It provides structure and content using elements called tags.
Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Essential HTML Elements

Headings: <h1> to <h6>
Paragraphs: <p>
Links: <a href="url">Link text</a>
Images: <img src="image.jpg" alt="description">
Forms: <form>, <input>, <button>
Containers: <div>, <section>, <header>, <main>, <footer>

Form Elements (Important for Login)

<form>
    <input type="text" placeholder="Username" required>
    <input type="password" placeholder="Password" required>
    <input type="email" placeholder="Email">
    <button type="submit">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Introduction to CSS
CSS (Cascading Style Sheets) controls the visual appearance of HTML elements.
How to Include CSS

Inline: <div style="color: blue;">
Internal: <style> tag in <head>
External: <link rel="stylesheet" href="styles.css">

CSS Syntax

selector {
    property: value;
    property: value;
}
Common CSS Properties
css/* Colors and Backgrounds */
color: #333;
background-color: #f0f0f0;
background-image: url('image.jpg');

/* Typography */
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;

/* Box Model */
width: 100px;
height: 50px;
padding: 10px;
margin: 20px;
border: 1px solid #ccc;

/* Layout */
display: flex;
justify-content: center;
align-items: center;
position: relative;
Enter fullscreen mode Exit fullscreen mode

CSS Selectors

/* Element selector */
p { color: blue; }

/* Class selector */
.my-class { font-size: 18px; }

/* ID selector */
#my-id { background: yellow; }

/* Attribute selector */
input[type="password"] { border: 2px solid red; }
Enter fullscreen mode Exit fullscreen mode

Introduction to JavaScript
JavaScript adds interactivity and dynamic behavior to web pages.
Including JavaScript

html<!-- Internal JavaScript -->
<script>
    // JavaScript code here
</script>

<!-- External JavaScript -->
<script src="script.js"></script>
JavaScript Basics
javascript// Variables
let username = "john";
const maxAttempts = 3;
var isLoggedIn = false;

// Functions
function greetUser(name) {
    return "Hello, " + name + "!";
}

// Arrow functions
const calculateAge = (birthYear) => 2024 - birthYear;

// Conditionals
if (username === "admin") {
    console.log("Admin user detected");
} else {
    console.log("Regular user");
}

// Arrays and Objects
const users = ["john", "jane", "bob"];
const user = {
    name: "John Doe",
    email: "john@example.com",
    age: 25
};
Enter fullscreen mode Exit fullscreen mode

DOM Manipulation

// Selecting elements
const loginForm = document.getElementById("loginForm");
const usernameInput = document.querySelector(".username");
const allButtons = document.querySelectorAll("button");

// Changing content
document.getElementById("welcome").textContent = "Welcome, John!";
document.querySelector(".profile-image").src = "new-image.jpg";

// Adding event listeners
loginForm.addEventListener("submit", function(event) {
    event.preventDefault(); // Prevent form submission
    // Handle login logic here
});

// Changing styles
document.getElementById("errorMessage").style.display = "block";
document.querySelector(".container").classList.add("hidden");
Local Storage (Data Persistence)
javascript// Save data
localStorage.setItem("username", "john");
localStorage.setItem("userProfile", JSON.stringify(userObject));

// Retrieve data
const savedUsername = localStorage.getItem("username");
const userProfile = JSON.parse(localStorage.getItem("userProfile"));

// Remove data
localStorage.removeItem("username");
localStorage.clear(); // Remove all
Enter fullscreen mode Exit fullscreen mode

Assignment: Building a Login System
Project Overview
Create a simple login system with two pages:

Login Page: Username/password form with validation
Profile Page: Display user information and profile image

Requirements

Login Page:

Username and password input fields
Form validation (check for empty fields)
Hardcoded credentials for testing (username: "intern", password: "welcome123")
Error message display for invalid credentials
Redirect to profile page on successful login

Profile Page:

Display user profile information
Show profile image
Display welcome message with username
Logout button that returns to login page
Should only be accessible after login

Technical Requirements:

Use semantic HTML elements
Responsive design with CSS
Form validation with JavaScript
Use localStorage to persist login state
Clean, professional styling

Step-by-Step Implementation
Step 1: Create the HTML Structure
Create two HTML files: login.html and profile.html

insert the code below into login.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Web Dev Tutorial</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="login-form">
            <h1>Welcome Back</h1>
            <form id="loginForm">
                <div class="form-group">
                    <input type="text" id="username" placeholder="Username" required>
                </div>
                <div class="form-group">
                    <input type="password" id="password" placeholder="Password" required>
                </div>
                <button type="submit">Sign In</button>
                <div id="errorMessage" class="error-message"></div>
            </form>
            <div class="demo-credentials">
                <p><strong>Demo Credentials:</strong></p>
                <p>Username: intern</p>
                <p>Password: welcome123</p>
            </div>
        </div>
    </div>
    <script src="login.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

next profile.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile - Web Dev Tutorial</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="profile-container">
            <header class="profile-header">
                <h1 id="welcomeMessage">Welcome!</h1>
                <button id="logoutBtn" class="logout-btn">Logout</button>
            </header>

            <div class="profile-content">
                <div class="profile-image-container">
                    <img id="profileImage" src="https://via.placeholder.com/150" alt="Profile Picture" class="profile-image">
                </div>

                <div class="profile-info">
                    <h2>Profile Information</h2>
                    <div class="info-item">
                        <strong>Username:</strong> <span id="profileUsername">-</span>
                    </div>
                    <div class="info-item">
                        <strong>Email:</strong> <span id="profileEmail">-</span>
                    </div>
                    <div class="info-item">
                        <strong>Role:</strong> <span id="profileRole">-</span>
                    </div>
                    <div class="info-item">
                        <strong>Last Login:</strong> <span id="lastLogin">-</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="profile.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 2: Adding Style with CSS

styles.css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

/* Login Form Styles */
.login-form {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.login-form h1 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #333;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.form-group input:focus {
    outline: none;
    border-color: #667eea;
}

button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s;
}

button:hover {
    transform: translateY(-2px);
}

.error-message {
    color: #e74c3c;
    text-align: center;
    margin-top: 1rem;
    display: none;
}

.demo-credentials {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
}

/* Profile Page Styles */
.profile-container {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
}

.profile-header h1 {
    color: #333;
}

.logout-btn {
    width: auto;
    padding: 8px 16px;
    background: #e74c3c;
    font-size: 14px;
}

.logout-btn:hover {
    background: #c0392b;
}

.profile-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.profile-image-container {
    text-align: center;
}

.profile-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #667eea;
}

.profile-info {
    width: 100%;
}

.profile-info h2 {
    margin-bottom: 1rem;
    color: #333;
    text-align: center;
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
    border-bottom: none;
}

/* Responsive Design */
@media (max-width: 480px) {
    .container {
        padding: 10px;
    }

    .profile-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .profile-content {
        gap: 1.5rem;
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Add JavaScript Functionality
login.js:

// Check if user is already logged in
document.addEventListener('DOMContentLoaded', function() {
    const isLoggedIn = localStorage.getItem('isLoggedIn');
    if (isLoggedIn === 'true') {
        window.location.href = 'profile.html';
    }
});

// Handle login form submission
document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault();

    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const errorMessage = document.getElementById('errorMessage');

    // Clear previous error messages
    errorMessage.style.display = 'none';
    errorMessage.textContent = '';

    // Validate inputs
    if (!username || !password) {
        showError('Please fill in all fields');
        return;
    }

    // Check credentials (hardcoded for demo)
    if (username === 'intern' && password === 'welcome123') {
        // Successful login
        const userData = {
            username: username,
            email: 'intern@company.com',
            role: 'Web Development Intern',
            lastLogin: new Date().toLocaleString()
        };

        // Save login state and user data
        localStorage.setItem('isLoggedIn', 'true');
        localStorage.setItem('userData', JSON.stringify(userData));

        // Redirect to profile page
        window.location.href = 'profile.html';
    } else {
        showError('Invalid username or password');

        // Clear password field for security
        document.getElementById('password').value = '';
    }
});

function showError(message) {
    const errorMessage = document.getElementById('errorMessage');
    errorMessage.textContent = message;
    errorMessage.style.display = 'block';
}

// Handle Enter key press
document.addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
        document.getElementById('loginForm').dispatchEvent(new Event('submit'));
    }
});
Enter fullscreen mode Exit fullscreen mode

profile.js:

// Check if user is logged in
document.addEventListener('DOMContentLoaded', function() {
    const isLoggedIn = localStorage.getItem('isLoggedIn');
    const userData = localStorage.getItem('userData');

    if (isLoggedIn !== 'true' || !userData) {
        // Redirect to login if not logged in
        window.location.href = 'login.html';
        return;
    }

    // Parse user data and populate profile
    const user = JSON.parse(userData);
    populateProfile(user);
});

function populateProfile(user) {
    // Update welcome message
    document.getElementById('welcomeMessage').textContent = `Welcome, ${user.username}!`;

    // Update profile information
    document.getElementById('profileUsername').textContent = user.username;
    document.getElementById('profileEmail').textContent = user.email;
    document.getElementById('profileRole').textContent = user.role;
    document.getElementById('lastLogin').textContent = user.lastLogin;

    // Set profile image (you can customize this)
    const profileImage = document.getElementById('profileImage');
    profileImage.src = `https://ui-avatars.com/api/?name=${user.username}&background=667eea&color=fff&size=150`;
}

// Handle logout
document.getElementById('logoutBtn').addEventListener('click', function() {
    // Clear login state
    localStorage.removeItem('isLoggedIn');
    localStorage.removeItem('userData');

    // Redirect to login page
    window.location.href = 'login.html';
});

// Prevent back button after logout
window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        window.location.reload();
    }
});
Enter fullscreen mode Exit fullscreen mode

Step 4: Testing Your Application

Open login.html in your browser
Try logging in with incorrect credentials (should show error)
Log in with correct credentials (username: "intern", password: "welcome123")
Verify redirection to profile page
Check that profile information displays correctly
Test the logout functionality
Try accessing profile.html directly (should redirect to login)

Challenges
Once you've completed the basic assignment, try these enhancements:

  1. Form Validation: Add more detailed validation (minimum password length, email format)
  2. Loading States: Show loading spinner during login process
  3. Remember Me: Add checkbox to keep user logged in longer
  4. Password Visibility: Add toggle to show/hide password

Top comments (0)