IDCamp 2023/Fullstack/course

TentangMalaka

TentangMalaka is promoted from recovered remote evidence only: the local archive is empty, while the remote README and static source tree still document the submission clearly.

project links
Domain
Fullstack
Role
Frontend Engineer
Output
Web App
Category
Dicoding Belajar Dasar Pemrograman Web Submission
Project Framing

A source-backed case study built for recruiter review

This reading path makes the problem choice, evidence quality, user framing, execution decisions, and proof trail visible without overstating what the sources support.

Project Type
course

Static article-site submission about Tan Malaka built with semantic HTML, CSS layout work, and small JavaScript navigation behavior.

Orientation
Tech

Provides a source-backed coursework artefact for reviewing semantic HTML structure, static layout composition, and front-end content organization without claiming production usage or audience outcomes.

Core Stack
HTML · CSS · JavaScript · Semantic HTML

Single-page static site served from `index.html`, styled through `assets/css/style.css`, supported by image assets, and enhanced by `assets/js/script.js` for responsive navigation and smooth scrolling between page sections.

Why This Problem Mattered

Problem framing before execution

The case-study layer starts with why this problem was selected and how the context justified investment.

Problem Framing Map

Issue

A static article site still needs clear semantic structure, layout discipline, and reviewer-visible criteria to stand out as a credible coursework artefact.

Context

TentangMalaka is reconstructed from recovered remote evidence, so every public claim must stay tightly constrained to what the README, source tree, HTML, CSS, and JS files explicitly prove.

Why Selected

It is worth upgrading because it adds a conservative recovered-source case that demonstrates evidence discipline and foundational frontend structure without inventing unsupported outcomes.

Problem statement

The Dicoding basic web-programming submission required a static website that used semantic HTML sections, appropriate content placement, a profile aside, and layout composition with float or flexbox.

Solution thesis

Built a static article website about Tan Malaka with header navigation, main article sections, a quote section, contact/profile aside content, footer structure, responsive styling, and JavaScript-assisted navigation interactions.

Research and Evidence

What supports the narrative

Evidence is surfaced with its source type and credibility note so the recruiter can quickly see what is directly backed versus intentionally constrained.

Recovered source tree
public

The project record is backed by explicit README, HTML, CSS, and JS source references from the remote repository.

Credibility: The documented project evidence list directly preserves the recovered files used for factual mapping.
Open supporting public source
Submission criteria fit
public

The README documents a basic web-programming submission centered on semantic sections and layout structure.

Credibility: Supported by the README plus source-tree evidence rather than inferred product claims.
Open supporting public source

Credibility Notes

  • Because the local archive is empty, this case stays bounded to recovered remote evidence only.
  • No readership, engagement, or production-usage claim is made for this project.
Who The User Was

User framing stays explicit

When formal research artefacts are not available, the page still explains who the work served and why that user framing is justified by the existing sources.

Primary user
Course reviewers checking whether the site satisfies semantic HTML and structured layout expectations.

Its strongest verified value comes from submission criteria and source-tree structure.

Secondary reader
Readers consuming a static article-style page with basic navigation and content sections.

The implementation proves content organization and semantic composition, even without live audience evidence.

Decision Flow

How design thinking translated into decisions

The goal is to show the trace from research and insight to concrete product or system decisions, then to the outcomes those decisions supported.

Design Thinking Flow

Each step keeps the movement from evidence to action explicit before the rationale expands it.

  1. Step 1
    Criteria framing

    Used coursework submission requirements as the baseline definition of success.

    Signal: Semantic HTML and layout structure became the central proof points.
  2. Step 2
    Content structure

    Organized article content into explicit sections and supporting static assets.

    Signal: The recovered source tree stays readable as a small but complete frontend artefact.
  3. Step 3
    Conservative portfolio mapping

    Promoted the project only after remote evidence was explicit enough for factual recovery.

    Signal: The portfolio framing prioritizes trust over narrative exaggeration.

Decision Rationale

Each decision keeps the path from insight to execution visible before ending on the outcome signal.

Recovered-source discipline
Insight

A weakly archived project becomes misleading if portfolio copy extends beyond what recovered files support.

Decision

Kept every public claim anchored to the remote README and source tree only.

Outcome

The project becomes portfolio-safe without overstating its documentation depth.

Semantic structure first
Insight

For a basic web-programming submission, structural correctness matters more than decorative complexity.

Decision

Framed the project around semantic sections, layout composition, and small JavaScript behavior.

Outcome

The artefact reads as solid foundational frontend work.

Solution and System Execution

Execution choices and delivery details

This section preserves the technical and operational substance: architecture, responsibilities, trade-offs, and implementation quality signals.

System Design

Single-page static site served from `index.html`, styled through `assets/css/style.css`, supported by image assets, and enhanced by `assets/js/script.js` for responsive navigation and smooth scrolling between page sections.

Source-backed Impact

Provides a source-backed coursework artefact for reviewing semantic HTML structure, static layout composition, and front-end content organization without claiming production usage or audience outcomes.

Responsibilities

  • Structured the page with semantic HTML sections for course review
  • Implemented static article, quote, contact, and profile-oriented sections
  • Styled the layout and responsive navigation behavior with CSS
  • Added JavaScript navigation toggling and smooth section scrolling

Stack Decisions

  • Used plain HTML, CSS, and JavaScript to match the basic web-programming submission scope
  • Used semantic elements to satisfy the documented course criteria
  • Used flexbox-backed layout patterns visible in the stylesheet
  • Kept the implementation as a static source tree without adding a framework or package-managed build step

Trade-offs

  • Kept portfolio wording limited to README and source-tree facts because the local archive contains no files
  • Avoided treating on-page article and reader counters as verified metrics because no source proves production readership

Challenges

  • Organizing article-themed content into semantic sections that remain clear for a course reviewer
  • Keeping the navigation and responsive layout understandable in a framework-free static site
Outcomes and Proof

What was delivered and what can be verified

Outcome claims remain conservative and source-backed, while proof records and recruiter-safe links surface the strongest verification trail available.

Validation Signals

  • Recovered README, HTML, CSS, and JS references are preserved in the project sources.
  • README documents fulfilled semantic HTML and layout submission criteria.

Source-backed Outcomes

  • README identifies the project as a Dicoding Belajar Dasar Pemrograman Web submission
  • README lists required header, footer, main, article, and aside elements
  • README lists the requirement to arrange layout with float or flexbox
  • Remote repository tree includes `index.html`, `assets/css/style.css`, `assets/js/script.js`, and image assets
Retrospective and Limits

What the project proves, and what it does not

Strong case studies show both what was learned and where the current evidence stops.

Retrospective

Next iteration should rebuild a complete local archive, replace placeholder article titles with fully sourced content, and add setup notes before claiming stronger documentation or deployment readiness.

Evidence Limits

  • The local archive remains empty, so this project depends on recovered remote evidence.
  • Current sources do not support usage metrics, deployment proof, or broader product-outcome claims.

Lessons

  • Basic static sites become more reviewable when semantic structure and course criteria are documented together
  • Recovered README evidence can make a small coursework artefact portfolio-safe when claims stay source-bounded