Develop

Skill
Develop

Building web interfaces from scratch: integration, programming, and hosting — turning ideas into fully functional, hand-coded websites.

← Back to Portfolio MMI
Screenshot of Parodiapédia

My Approach

My Journey with Web

From WordPress to hand-coded HTML/CSS, I build on my NSI high school foundation to design fully functional websites.

The Project: "The Social Network" Static Site

I built a complete static website for the film 'The Social Network' using HTML5 & CSS3, implementing responsive design with Flexbox.

Technical Skills

  • HTML5
  • CSS3 / Flexbox
  • PHP (in progress)
  • Systems (Windows / Linux / macOS)

HTML: Page structuring, semantics, class management and creation.
CSS: Layout, design, Flexbox model.
PHP: (In progress) Data management, simple and indexed arrays, index searching.
Systems: Hardware assembly, OS installation and configuration (Windows, Linux distributions).

Systems & Hardware

I am comfortable with Windows, Linux, and macOS. I also assisted with assembling and configuring mini-PCs for classrooms.

Latest Website Project

Parodiapédia

My latest hand-coded website is a parody recreation of a Wikipedia-style interface called 'Parodiapédia'. It features sections like Sommaire, Enfance et études, Vie quotidienne, Expériences et projets. The text is partially censored to protect personal information.

Built entirely with HTML5 & CSS3, demonstrating page structure, semantics, and design layout skills.

Screenshot of the Parodiapédia website

SAÉ 203 Focus — Proving I can develop

1 · Project overview

Fictional wedding florist website in Blois

As part of SAÉ 203 (Integration), I built a fictional website for a wedding florist in Blois, working in a pair with a classmate. The brief: turn a mockup into a fully functional site coded entirely in HTML, CSS and JavaScript, with no framework.

The site is built around two main pages: a home page (intro, showcase, newsletter, location) and a detailed product sheet (a bouquet with an add-to-cart action).

Screenshot of the fictional florist website in Blois
2 · Targeted skill

The "Develop" competency

This project directly targets the Develop competency: designing and producing a web application or site. It mobilises web integration resources (HTML/CSS), programming (JavaScript) and SAÉ 203 "Integration".

  • Learning outcome: integrate content into a structured, semantic web interface.
  • Learning outcome: master layout (Flexbox, Grid) and positioning.
  • Learning outcome: add client-side interactivity with JavaScript.
3 · Work process

From need to working site

We first analysed the need (a florist who wants to showcase bouquets and collect contacts), then made our technical choices: plain HTML/CSS/JS to stay close to the languages, with no external dependency.

  1. Semantic structuring of both pages in HTML5.
  2. Responsive layout with Flexbox and CSS Grid.
  3. Adding JavaScript interactions (newsletter, cart).
  4. Manual testing in the browser and fixes.

Tools: VS Code, browser (dev tools), Git.

4 · Concrete technical evidence

What I coded myself

  • Sticky header
    Navigation stays visible on scroll via CSS position.
  • Product grid (Grid / Flexbox)
    Bouquets laid out in a grid that reflows with the width.
  • Hero with overlay
    Home image with a gradient layer for text legibility.
  • Google Maps address overlay
    Embedded map with the shop address layered on top.
  • Newsletter in JavaScript
    Email field wired with addEventListener to react to sign-up.
  • "Add to cart" button
    The button changes colour and state on click to confirm the action.
5 · Critical analysis

What works

  • Both pages are functional and hand-coded.
  • The layout holds thanks to Flexbox and Grid.
  • The key interactions (newsletter, cart) respond to clicks.

Limits and areas to improve

  • The site is not yet fully responsive on mobile.
  • Some expected features are missing (cookie panel, etc.).
  • The JavaScript stays simple and fragile in places.
  • To improve: responsiveness, field validation, accessibility, JS structure.
6 · Conclusion

Why this work proves I can develop

Beyond the visual result, this project shows I can start from a need, make technical choices and produce a working site in HTML, CSS and JavaScript. I can also look critically at my own work: spotting what works, what is still fragile, and what I need to improve. It is this approach — build, analyse, improve — that shows I am acquiring the Develop competency.