DEV Community: Israel Gabice

Web Development Intro: HTML, CSS, JavaScript

Israel Gabice — Mon, 09 Jun 2025 09:22:51 +0000

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>

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>

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;

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; }

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
};

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

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

Requirements

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>

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>

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;
    }
}

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'));
    }
});

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();
    }
});

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:

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

Git & GitHub: The Complete Guide

Israel Gabice — Fri, 30 May 2025 09:43:54 +0000

Git & GitHub: The Complete Guide

Git and GitHub together form the foundation of modern software development, used by everyone from solo developers to Fortune 500 companies. The platform continues to evolve with new features like Copilot X (AI-assisted development) and enhanced security tools.

What is Git?
Git is a distributed version control system created by Linus Torvalds in 2005. It allows developers to:

Track every change in their codebase
Collaborate without overwriting each other's work
Revert to previous versions if something breaks
Maintain a complete history of all modifications

Key Features of Git:

Distributed Architecture: Every developer has a full copy of the repository with complete history
Branching & Merging: Isolate new features or bug fixes in branches before merging
Staging Area: Lets you choose exactly which changes get committed
Speed & Efficiency: Optimized for performance even with large codebases

What is GitHub?
GitHub is a cloud-based hosting service for Git repositories with added collaboration features. Acquired by Microsoft in 2018, it offers:

** GitHub's Core Features:**

Repository Hosting: Cloud storage for Git projects
Pull Requests: Code review system for team collaboration
Issues: Bug tracking and project management
Actions: CI/CD automation pipelines
Pages: Free static website hosting
Community: 100M+ developers and open-source projects

Common Workflows

Individual Developer Flow
git init - Initialize new repo
git add - Stage changes
git commit - Save changes locally
git push - Upload to GitHub

-Team Collaboration Flow

git clone - existing repo
git checkout -b feature-branch - Create new branch
Make changes and commit
git push origin feature-branch
Create Pull Request on GitHub
Teammates review and merge

A Detailed Walkthrough of Every Concept and Command

🎯 Lesson 1: Setting Up Git & GitHub

Installing Git What's Happening: Git is a distributed version control system that tracks changes to your code. Installing it gives you access to all Git commands in your terminal. Windows: The installer sets up Git Bash (a Unix-like terminal) and adds Git to your PATH. Mac/Linux: Git integrates directly with the terminal. Verify Installation:

git --version  # Output: git version 2.34.1 (or similar)

Configuring Git

Why This Matters: Git needs to know who you are to attribute commits correctly.

git config --global user.name "Your Name"       # Sets author name for all commits
git config --global user.email "your@email.com" # Sets author email
git config --global init.defaultBranch main     # Changes default branch from 'master' to 'main'

Behind the Scenes: These settings are saved in ~/.gitconfig (home directory).

Creating a GitHub Account You can create a github account by visiting the url: github.com Key Points: GitHub hosts your repositories in the cloud. Verified emails are required to create repositories.

📂 Lesson 2: Creating Your First Repository

Initializing a Local Repo Step-by-Step:

mkdir my-project      # Creates a directory
cd my-project         # Navigates into it
git init              # Initializes Git in this folder

What Happens:
A hidden .git folder is created (stores all version control data).
Your directory is now a Git repository.

Making Your First Commit

echo "# My Project" > README.md  # Creates a README file
git add README.md                # Stages the file
git commit -m "Initial commit"   # Saves the changes

Key Concepts:
git add: Stages changes (prepares them for commit).
git commit: Takes a snapshot of staged files.

Connecting to GitHub Process: Create a new empty repository on GitHub (don’t initialize README). Link your local repo:

git remote add origin https://github.com/yourusername/my-project.git
git push -u origin main  # Pushes to GitHub and sets 'main' as 
upstream branch

What This Does:
remote add origin: Links your local repo to GitHub.
push -u origin main: Uploads commits and sets tracking.

🌟 Lesson 3: Crafting Your GitHub Profile

The Profile Repository Why It Works: GitHub displays the README.md from yourusername/yourusername at the top of your profile. Steps: Create a repo exactly matching your username. GitHub automatically recognizes it as your profile README.
Writing a Dynamic README Example with Badges:

# 👋 Hi, I'm Jane Doe  

## 🛠️ Tech Stack  
![Python](https://img.shields.io/badge/Python-3776AB?logo=python&logoColor=white)  
![Git](https://img.shields.io/badge/Git-F05032?logo=git&logoColor=white)  

## 📈 Stats  
![GitHub Stats](https://github-readme-stats.vercel.app/api?username=yourusername&show_icons=true)

Key Tools:
Shields.io: Creates badges.
GitHub Readme Stats: Live stats.

Updating Your Profile

git add README.md
git commit -m "Update profile"
git push

🌿 Lesson 4: Branching & Merging

Creating a Branch Why Branch? Isolates new work (e.g., features, bug fixes) from the main codebase.

git checkout -b add-feature  # Creates and switches to a new branch

What Happens:
Git creates a pointer (add-feature) to the current commit.

Making Changes in a Branch

echo "function hello() { return 'Hi!'; }" > script.js
git add script.js
git commit -m "Add hello function"

Merging to Main

git checkout main      # Switch back to main
git merge add-feature  # Brings changes from 'add-feature' into 'main'

Merge Types:
Fast-forward: If no diverging changes.
3-way merge: If branches diverged (creates a new commit).

🤝 Lesson 5: Collaboration Workflows

Forking a Repository Purpose: Creates your copy of someone else’s project (to propose changes via Pull Requests). Steps: Click "Fork" on any GitHub repo (e.g., Spoon-Knife). Clone your fork:


git clone https://github.com/yourusername/Spoon-Knife.git

Syncing with Upstream

git remote add upstream https://github.com/original/Spoon-Knife.git  # Links original repo
git pull upstream main  # Fetches latest changes

Why This Matters:
Keeps your fork updated with the original project.

This is not a comprehensive tutorial on github but it helps you get started using git in your project. Git tracks changes via commits and branches while gitHub hosts repos and enables collaboration. After a couple of projects you'll realise the most used git commands are commit, push and pull. I hope this tutorial helps you to get started.