CET138 Assignment 1

Full Stack Development

I created this more simple explained but the knowledge best and way of pronounce and exlpore my portfolio site

Explore the portfolio See learning outcomes
HTML5 CSS3 Bootstrap 5 JS (ES6+)

Architecture and data flow

What is Full Stack Development?

Full-stack development connects the interface a person sees with the server-side logic and data that make an application useful.

Front end

The browser-facing layer uses HTML for structure, CSS for presentation and JavaScript for behaviour. It receives user input and displays application data.

Back end

The server validates requests, applies business rules, handles authentication and exposes endpoints through an API.

Database

A database stores persistent information such as accounts, products and tasks. Server-side code reads or changes that information safely.

How the layers work together

Full-stack development means understanding the complete path through a web application. The client is normally a browser. When a user performs an action, front-end JavaScript may send an HTTP request to an API. The back end receives that request, checks its data and permissions, runs application logic, and may query a database. It then returns a response—often JSON—which the browser converts into a visible interface update.

This separation gives each layer a clear responsibility. The front end should not connect directly to a private database, and the server should not rely on browser validation alone. A full-stack developer needs to understand these boundaries so that data remains reliable, secure and maintainable.

Working demonstration · simulated architecture

Request and Response Journey

This static demonstration visualises a typical data request. It does not connect to a real server or database.

Ready: select “Send request” to begin the simulation.
1

Browser / Client

The user asks to load a profile.

2

Front End

JavaScript creates an HTTP request.

3

API / Server

The server validates and processes it.

4

Database

The matching record is retrieved.

No response yet The returned profile will appear here.
Live explanation What is happening?
Action
The demonstration is ready.
What changed?
No layer is active yet.
How was it implemented?
JavaScript will add and remove state classes in sequence.
Concept demonstrated
The client-server request and response cycle.
JavaScript
const stages = ["client", "frontend", "server", "database"];

for (const stage of stages) {
  activateJourneyNode(stage);
  await wait(700);
}

What I learned

This example helped me understand that a visible page update may depend on several separate layers, each with its own responsibility and possible failure points.

Structure and meaning

HTML

HTML describes the content and meaning of a page so that browsers, search engines and assistive technologies can understand it.

Building a meaningful document

HTML stands for HyperText Markup Language. A page is built from elements, normally written with opening and closing tags. Attributes add information such as a link destination, input type or accessible name. Correct nesting produces a logical document tree that the browser exposes as the DOM.

Semantic elements such as <header>, <nav>, <main>, <article> and <footer> describe a region’s purpose. Headings create an outline; paragraphs, lists and tables organise information; links connect resources; images need meaningful alternative text; and form labels connect instructions to controls. HTML should describe the content before CSS changes its appearance or JavaScript adds behaviour.

Working demonstration · semantic structure

Semantic HTML Explorer

Select an element to highlight its position, purpose, syntax and accessibility value.

header Developer Journal
main
article

Learning semantic HTML

section

A grouped part of the article.

form
footer Portfolio footer
Selected element<header>
Purpose

Introduces a page or section and can contain a heading, logo or introductory content.

Example syntax<header>...</header>
Semantic benefit

It identifies introductory content more clearly than a generic div.

Accessibility benefit

A page-level header may be exposed as a banner landmark.

Live explanationWhat did the explorer do?
Action
The header element is selected.
What changed?
The corresponding header region is outlined and labelled.
How was it implemented?
JavaScript matched the button’s data attribute to the example region.
Concept demonstrated
Semantic HTML gives structural meaning to content.

Accessible form example

Contact form

Labels, input types, required attributes and helpful messages make the form easier to understand and validate.

Enter at least 10 characters. This demonstration does not send data to a server.

HTML
<article>
  <h2>Semantic HTML</h2>
  <section aria-labelledby="benefits-title">
    <h3 id="benefits-title">Benefits</h3>
    <p>Meaningful elements improve structure.</p>
  </section>
</article>

What I learned

I learned that HTML is not only a collection of containers. Choosing the right element communicates the purpose of content before visual styling is applied.

Presentation and responsive layout

CSS

CSS controls visual presentation while keeping design rules separate from the page’s semantic structure.

From selectors to responsive systems

CSS stands for Cascading Style Sheets. A selector targets elements, and declarations pair properties with values. Classes create reusable patterns, while IDs should normally identify one unique element. When rules conflict, the cascade considers origin, importance, specificity and source order. Some values, such as text colour and font family, can be inherited by descendants.

The box model treats every element as content surrounded by padding, border and margin. Flexbox is useful for arranging items in one main direction, while Grid controls rows and columns. Media queries adapt those layouts at different viewport widths. Transitions can communicate state changes, but they should remain subtle and respect a user’s reduced-motion preference.

Working demonstration · Box Model

Interactive Box Model Visualizer

Select a layer to inspect its dimensions, color representation, and active styling properties.

Content: the text, image or other material inside the element.

Margin
Border
Padding
Content
Live explanationWhat is highlighted?
Action
The content layer is selected.
What changed?
The inner content region of the diagram is active and scaled.
How was it implemented?
JavaScript updates data-active-layer which changes matching CSS rules.
Concept demonstrated
Concentric layout boxes: Content, Padding, Border, Margin.
CSS
/* Box Model: Content layer */
.box-content {
  width: 100%;
  min-height: 5.5rem;
  padding: 1.25rem;
  border-style: solid;
  background: rgba(0, 247, 255, 0.2); /* Hex: #00F7FF */
  border-radius: 4px;
}

What I learned

I learned to treat CSS as a reusable system rather than a list of isolated declarations. The box model coordinates spacing, borders, and margins to build clean, predictable layouts.

Frameworks and reusable components

Bootstrap Framework

Bootstrap provides a tested responsive grid, utility classes and interactive components that can speed up interface development.

Using a framework deliberately

Bootstrap is a front-end framework containing ready-made CSS classes and JavaScript components. Its grid uses containers, rows and columns. Breakpoint prefixes such as md and lg apply rules only from a specified viewport width. Utility classes provide focused changes for spacing, display, alignment and other common needs.

Components such as navbars, alerts, accordions and modals include established structure and behaviour. Bootstrap’s JavaScript bundle controls interactions such as collapsing and opening. The framework improves speed and consistency, but it does not replace semantic HTML, accessibility testing or design judgement. A site can look generic if the defaults are not customised, and unused framework code may add more CSS than a small project needs.

Working demonstration · Bootstrap 5

Bootstrap Component Showcase

The controls below use genuine Bootstrap grid, utility and JavaScript component classes.

Interact with Bootstrap modals, alert dialogs, and native forms.
Visible from the md breakpoint Bootstrap form controls are ready.
Cards are arranged using Bootstrap's responsive grid columns.
HTML

Semantic structure

Native elements create a meaningful foundation for every Bootstrap component.

Grid

Responsive columns

Breakpoint classes change the number of columns without a separate custom media query.

Utilities

Focused class rules

Classes such as p-4, g-4 and h-100 apply predictable single-purpose styles.

Standard Bootstrap collapse accordion panel.

col-12 fills the row on all screen sizes. col-md-6 uses half of the row from the medium breakpoint, and col-lg-4 uses one third from the large breakpoint.

A utility is a small class with a focused purpose. For example, mt-4 adds top margin and d-none changes display.

Without deliberate custom styling, many Bootstrap projects can look similar. This portfolio overrides visual details without changing the library files.
Live explanationWhat did Bootstrap do?
Action
The component showcase is ready.
What changed?
Cards are arranged by Bootstrap’s responsive grid.
How was it implemented?
The row contains col-12, col-md-6 and col-lg-4 columns.
Concept demonstrated
Framework classes create reusable responsive behaviour.
Bootstrap
<div class="row g-4">
  <div class="col-12 col-md-6 col-lg-4">
    <article class="card h-100">...</article>
  </div>
</div>

What I learned

I learned that Bootstrap is most useful when I understand the HTML and CSS underneath it. I can use the framework for predictable behaviour while retaining control of the project’s identity.

Logic, events and DOM updates

JavaScript

JavaScript turns a static document into an application that can react to input, manage state and update the page.

Adding behaviour to the interface

JavaScript stores values in variables using const when a binding should not be reassigned and let when it must change. Values have data types, including strings, numbers, booleans, arrays and objects. Functions group reusable logic, parameters receive values, and return statements send results back. Conditions choose between paths, while loops and array methods process collections.

In a browser, JavaScript can select elements from the DOM and listen for events such as submit or click. It can validate input, update text, create elements and change classes. The task manager below keeps its application data in an array of objects, filters that array to decide what to display, and stores a JSON version in localStorage so tasks survive a refresh.

Working demonstration · vanilla JavaScript

Task Manager

Add, complete, filter and delete tasks. The list is saved in this browser using localStorage.

0 tasks remaining

    No tasks to display

    Add a task or choose another filter.

    Storage ready
    What JavaScript just didApplication activity
    Action
    The task manager loaded.
    What changed?
    Stored tasks were read and the list was rendered.
    How was it implemented?
    JSON.parse ran inside try/catch, then renderTasks created safe DOM nodes.
    Concept demonstrated
    Application state, persistence and DOM rendering.
    JavaScript
    const task = {
  id: crypto.randomUUID(),
  text: taskInput.value.trim(),
  category: categoryInput.value,
  completed: false
};

tasks = [...tasks, task];
saveTasks();
renderTasks();

    What I learned

    This application showed me why data and interface rendering should be separated. Changing the array first makes filtering, persistence and DOM updates more predictable.