Website Development FundamentalsMISSION 1

Introduction to Website Development

⏱ 2 Hours📘 Beginner

Welcome to Mission 1 🚀

MISSION 1

Welcome, Future Digital Creator! 👋

Today, you're taking your first step into the world of Website Development.

Quick question:

When you visit a website, what do you normally think about?

(function () {
    const root = document.currentScript
        ? document.currentScript.closest('.e2a-welcome')
        : document.querySelector('.e2a-welcome');

const welcome = root || document.querySelector('.e2a-welcome');

if (!welcome) return;

const buttons = welcome.querySelectorAll('[data-answer]');
    const response = welcome.querySelector('.e2a-response');
    const next = welcome.querySelector('.e2a-next');

const messages = {
        use: "That's how most people experience websites — as users. In this bootcamp, you'll begin thinking like a creator.",
        design: "Great observation! Design matters, but you'll soon discover what happens behind the design too.",
        build: "You're already thinking like a developer! Now we'll begin discovering how websites are actually created."
    };

buttons.forEach(function (button) {
        button.addEventListener('click', function () {

buttons.forEach(function (btn) {
                btn.classList.remove('selected');
            });

button.classList.add('selected');

const answer = button.getAttribute('data-answer');

if (response) {
                response.textContent = messages[answer] || '';
                response.hidden = false;
            }

if (next) {
                next.hidden = false;
            }
        });
    });
})();

Learning Objectives 🚀

MISSION 1 OBJECTIVES

Unlock What You’re About to Learn 🎯

Explore each objective before moving forward. By the time you unlock all five, you’ll know exactly what this mission expects you to understand and do.

0 / 5 objectives explored

const cards = block.querySelectorAll('.e2a-objective-card');
const countText = block.querySelector('[data-objective-count]');
const progressFill = block.querySelector('[data-objective-progress]');
const progressBar = block.querySelector('.e2a-progress-track');
const completeBox = block.querySelector('.e2a-objectives-complete');

const discovered = new Set();

function updateProgress() {
    const count = discovered.size;
    const total = cards.length;
    const percent = total ? (count / total) * 100 : 0;

if (countText) {
        countText.textContent = count + ' / ' + total;
    }

if (progressFill) {
        progressFill.style.width = percent + '%';
    }

if (progressBar) {
        progressBar.setAttribute(
            'aria-valuenow',
            String(count)
        );
    }

if (completeBox && count === total) {
        completeBox.hidden = false;
    }
}

cards.forEach(function(card) {
    card.addEventListener('click', function() {
        const detail = card.querySelector('.e2a-card-detail');
        const status = card.querySelector('.e2a-card-status');

const isOpen = card.classList.contains('is-open');

if (isOpen) {
            card.classList.remove('is-open');
            card.setAttribute('aria-expanded', 'false');

if (detail) {
                detail.hidden = true;
            }

if (status) {
                status.textContent = '✓';
            }

return;
        }

card.classList.add('is-open');
        card.classList.add('is-discovered');
        card.setAttribute('aria-expanded', 'true');

if (detail) {
            detail.hidden = false;
        }

if (status) {
            status.textContent = '✓';
        }

const objective = card.getAttribute('data-objective');

if (objective) {
            discovered.add(objective);
        }

updateProgress();
    });
});

updateProgress();

Introduction to Website Development

Introduction to Website Development

Welcome to Mission 1 🚀

Welcome, Future Digital Creator! 👋

Learning Objectives 🚀

Unlock What You’re About to Learn 🎯

Call Us:

Head Office:

Working Hour:

Welcome to Mission 1 🚀

Welcome, Future Digital Creator! 👋

Learning Objectives 🚀

Unlock What You’re About to Learn 🎯

You may also like

What Is Digital Marketing? A Beginner’s Guide for Nigerians and Africans

Email Marketing

WordPress Security and Maintenance

Call Us:

Head Office:

Working Hour:

Login with your site account

Register a new account