Introduction to JavaScript and CSS

Course Overview

This course introduces students to the core technologies used to build interactive web interfaces. Students learn how CSS controls presentation and layout, while JavaScript adds logic, interactivity, validation, events, and dynamic user experiences.

Target Learners

Module 1 — Introduction to Web Frontend Development

Learning Objectives

• Understand the role of HTML, CSS, and JavaScript.
• Explain how browsers render web pages.
• Understand client-side and server-side responsibilities.
• Prepare a development environment using Visual Studio Code or Visual Studio.

Topics

• What is frontend development?
• HTML for structure
• CSS for design
• JavaScript for interactivity
• Browser developer tools

Module 2 — HTML Refresher

Although the main focus is JavaScript and CSS, students must understand the HTML structure that both technologies work with.

<section class="property-card">
    <h2>Parcel NAIROBI/BLOCK 1/23</h2>
    <p>County: Nairobi</p>
    <button id="viewDetailsButton">View Details</button>
</section>

Exercise

Create a simple HTML page with a heading, paragraph, image, button, and form.

Module 3 — CSS Fundamentals

Topics

• Selectors
• Colors and backgrounds
• Fonts and text styling
• Margins, padding, and borders
• Classes and IDs
• The CSS box model

Example

.property-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.property-card h2 {
    color: #0f766e;
}

Module 4 — CSS Layouts: Flexbox and Grid

Flexbox Example

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

CSS Grid Example

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

Practical Exercise

Build a responsive dashboard showing parcels, counties, users, and map services as cards.

Module 5 — Responsive Web Design

Topics

• Mobile-first design
• Media queries
• Responsive images
• Adaptive layouts
• Accessibility basics

Example

@media (max-width: 768px) {
    .course-hero h1 {
        font-size: 30px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

Module 6 — JavaScript Fundamentals

Topics

• Variables
• Constants
• Data types
• Operators
• Conditionals
• Loops
• Functions

Example

const parcelNumber = "NAIROBI/BLOCK 1/23";
const county = "Nairobi";

function showParcel(parcelNo, countyName) {
    return `Parcel: ${parcelNo}, County: ${countyName}`;
}

console.log(showParcel(parcelNumber, county));

Module 7 — DOM Manipulation

The Document Object Model allows JavaScript to read and change page content dynamically.

Example

<h2 id="parcelTitle">Parcel Details</h2>
<button id="changeButton">Change Text</button>

<script>
    const button = document.getElementById("changeButton");
    const title = document.getElementById("parcelTitle");

    button.addEventListener("click", function () {
        title.textContent = "Updated Parcel Information";
    });
</script>

Module 8 — Events and Forms

Topics

• Click events
• Submit events
• Input validation
• Preventing default form behavior
• Displaying validation messages

Example

<form id="searchForm">
    <input id="parcelSearch" type="text" placeholder="Enter parcel number" />
    <button type="submit">Search</button>
</form>

<p id="message"></p>

<script>
    document.getElementById("searchForm").addEventListener("submit", function (event) {
        event.preventDefault();

        const value = document.getElementById("parcelSearch").value;
        const message = document.getElementById("message");

        if (value.trim() === "") {
            message.textContent = "Please enter a parcel number.";
        } else {
            message.textContent = "Searching for: " + value;
        }
    });
</script>

Module 9 — Arrays, Objects, and Functions

JavaScript Object Example

const parcel = {
    parcelNo: "NAIROBI/BLOCK 1/23",
    county: "Nairobi",
    areaHectares: 0.25
};

console.log(parcel.parcelNo);

Array Example

const parcels = [
    { parcelNo: "NAIROBI/BLOCK 1/23", county: "Nairobi" },
    { parcelNo: "KIAMBU/BLOCK 2/45", county: "Kiambu" }
];

parcels.forEach(function (parcel) {
    console.log(parcel.parcelNo);
});

Module 10 — Fetch API and JSON

Students learn how JavaScript communicates with backend services such as ASP.NET Web API endpoints.

Example

fetch("/api/parcels")
    .then(function (response) {
        return response.json();
    })
    .then(function (data) {
        console.log(data);
    })
    .catch(function (error) {
        console.error("Error loading parcels:", error);
    });

Practical Exercise

Create a page that loads parcel records from a Web API and displays them in a table.

Module 11 — Debugging with Browser Developer Tools

Topics

• Console tab
• Elements tab
• Network tab
• JavaScript breakpoints
• Checking CSS rules
• Inspecting API requests

Module 12 — Final Project

Students build a small interactive web interface that combines CSS styling, responsive layout, JavaScript validation, DOM updates, and API communication.

Suggested Project: Parcel Search Interface

• Create a responsive search page.
• Allow users to enter a parcel number.
• Validate input using JavaScript.
• Display search results dynamically.
• Dynamically interact with GIS data stored in database.
• Style results using CSS cards or tables.
• Connect to a sample ASP.NET Web API endpoint.

Recommended Tools

Assessment Strategy

Expected Learning Outcomes

• Write clean CSS for professional web pages.
• Create responsive layouts using Flexbox and Grid.
• Use JavaScript variables, functions, arrays, and objects.
• Manipulate HTML content through the DOM.
• Handle events and validate forms.
• Fetch JSON data from ASP.NET Web API endpoints.
• Debug frontend applications using browser developer tools.
• Build frontend interfaces suitable for Shambamap-style land-information applications.