Core Philosophy

The Post-Syntax Era

🎯 Learning Objectives

Understand the difference between Programming, Scripting, and Software Engineering
Explain why architectural thinking matters more than memorising syntax
Describe the InnoDI mastery model and how AI accelerates (but does not replace) learning

⏱ Instruction: 0.5h📝 Self-study & Reflection: 1h⏳ Total: 1.5h

Before writing a single line of code, you need to understand the paradigm shift that makes everything in this course possible.

Historically, building software meant mastering complex syntax — C++, Java, Python. At InnoDI, we start from a different premise: we are in the Post-Syntax Era, where the most powerful "programming language" is one you already speak.

The hottest new programming language is English. Natural language commands AI systems to build software for you. Your role is not to memorise syntax — it is to think architecturally, direct AI agents, and ship real products.

Important: AI is an accelerator, not a replacement. You still need to understand what the code does and why it's structured that way. Think of AI as a co-pilot — you set the destination, it helps you fly faster. This course teaches you both: the fundamentals and how to leverage AI to apply them at speed.

Three Levels of Craft

Programming — Write code to perform tasks
Scripting — Automate sequences of actions
Software Engineering — Systematically design software systems

The InnoDI Approach

You will learn to direct AI agents with precise, architectural prompts. You understand the system — the AI writes the syntax. This makes you 10× faster than a traditional developer who codes every line by hand.

🧠

Knowledge Check

Section 01 · 2 Questions

⭐ Mastered

Question 1 of 2

In the Post-Syntax Era, what does InnoDI call the "newest programming language"?

Python ✓English JavaScript C++

✓ Correct! English is the new programming language — natural language commands AI to build software.

✗ Not quite. Think about what language you already speak that can now direct AI systems.

Question 2 of 2

Scenario: You're asked to build a school management app. A Programmer would start writing login code immediately. What would a Software Engineer do first?

Write the login page as fast as possible Install the newest JavaScript framework ✓Design the system architecture — data models, user flows, and module structure Ask AI to build the entire app in one prompt

✓ Correct! Software Engineers think architecturally first — they design the system before touching code. This is the InnoDI mindset.

✗ Not quite. Software Engineering is about the big picture — planning how the whole system fits together before writing any single piece. Re-read the "Three Levels" card.

✦ Reflect

What does "thinking architecturally" mean to you?

In your own words, describe a situation where planning the structure of something (a project, a trip, a business) saved you time or avoided mistakes. How does that relate to Software Engineering?

✓ Reflection saved

Your Workspace

VS Code & GitHub Copilot

🎯 Learning Objectives

Install VS Code and identify its 5 main interface areas
Install the GitHub Copilot extension and understand its role as an AI assistant
Open a project folder and use the integrated terminal

⏱ Instruction: 0.5h📝 Setup & Configuration: 1.5h⏳ Total: 2h

An IDE is where your vision becomes reality. Master your workspace and you master your output.

An IDE (Integrated Development Environment) is a single application that combines your code editor, file explorer, terminal, debugger, and AI assistant. We use VS Code — free, open-source, used by 73% of professional developers worldwide.

Anatomy of VS Code

Activity Bar — Left-side navigation icons
Sidebar — File Explorer, Search, Git
Editor Groups — Your coding canvas
Panel — Integrated Terminal & Output
Status Bar — Real-time project health

Step 1: Install VS Code

Download from the official site. It is free and runs on Windows, Mac, and Linux.

↗ Download VS Code

Step 2: Install GitHub Copilot

What is Copilot?

An AI pair programmer built into VS Code. It reads your code and comments, then predicts and completes what you're about to write. It handles ~30% of standard production code today.

How to Install

Open VS Code → click the Extensions icon (puzzle piece) in the Activity Bar → search GitHub Copilot → click Install. Sign in with your GitHub account to activate.

🧠

Knowledge Check

Section 02 · 2 Questions

⭐ Mastered

Question 1 of 2

What does IDE stand for?

Internet Design Engine ✓Integrated Development Environment Intelligent Data Editor Interactive Display Engine

✓ Correct! An Integrated Development Environment combines editor, terminal, debugger, and tools in one app.

✗ Not quite. The "D" stands for Development. Think about everything VS Code bundles together.

Question 2 of 2

Scenario: You need to run git init to start version control on your project. Where in VS Code would you type this command?

The Activity Bar (left icons) The Sidebar File Explorer The Editor (code canvas) ✓The Panel (integrated terminal)

✓ Correct! The Panel at the bottom of VS Code contains the integrated terminal where you run shell commands like git init.

✗ Not quite. Shell commands need a terminal. In VS Code, the terminal lives in the bottom section called the Panel. Open it with Ctrl+`.

✦ Action Item

Set Up Your Workspace

Install VS Code and the GitHub Copilot extension. Confirm both are ready below.

VS Code is installed and GitHub Copilot is active

✓ Workspace ready. Let's build.

Fundamentals

HTML: The Skeleton

🎯 Learning Objectives

Understand HTML as a markup language that gives content structure and meaning
Use essential tags (<h1>, <p>, <a>, <img>) and semantic elements (<header>, <nav>, <main>, <footer>)
Create a valid HTML document with proper structure and the index.html convention

⏱ Instruction: 0.5h📝 Hands-on Practice: 2.5h⏳ Total: 3h

HTML gives your content structure and meaning. Every website on the internet starts here.

HTML (HyperText Markup Language) is not a programming language — it is a markup language that describes the structure of web content. It tells the browser: "this is a heading," "this is a paragraph," "this is a link."

Essential Tags

<h1>–<h6> — Headings (hierarchy)
<p> — Paragraph text
<a href=""> — Hyperlink
<img src=""> — Image
<div> — Generic container
<ul> <li> — Unordered list

Document Structure

<!DOCTYPE html> — Declares HTML5
<html> — Root element
<head> — Metadata, title, CSS links
<body> — All visible content

Semantic HTML: Meaning Over Appearance

Why Semantic Tags?

Instead of wrapping everything in generic <div> tags, use semantic elements that describe their purpose. This helps search engines, screen readers, and future developers understand your page.

Key Semantic Elements

<header> — Page or section header
<nav> — Navigation links
<main> — Primary page content
<section> — Thematic content group
<footer> — Page or section footer

The index.html Convention

Why index.html?

When a browser visits a folder (like yoursite.com/about/), it automatically looks for and loads a file named index.html. This is the universal web server convention.

Clean URL Structure

Create /about/index.html → URL becomes yoursite.com/about/
Create /projects/index.html → URL becomes yoursite.com/projects/

my-portfolio/
  index.html          ← yoursite.com/
  about/index.html    ← yoursite.com/about/
  projects/index.html ← yoursite.com/projects/
  assets/style.css
  assets/main.js

🧠

Knowledge Check

Section 03 · 2 Questions

⭐ Mastered

Question 1 of 2

What does HTML stand for?

High-Tech Markup Language HyperText Modern Language ✓HyperText Markup Language HyperType Markup Language

✓ Correct! HyperText Markup Language — it uses "hyper" links to connect documents across the web.

✗ Not quite. Think about what "HT" stands for — hint: it relates to links between web pages.

Question 2 of 2

Why is naming a file index.html special on the web?

It only works on Windows servers ✓Browsers load it automatically when visiting a folder URL It always loads last on the page It can only contain images

✓ Correct! Web servers look for index.html by default — this is how clean folder-based URLs work.

✗ Not quite. Think about what happens when a browser visits a URL like yoursite.com/about/ — what file does it look for?

✦ Action Item

Create Your First HTML File

In VS Code, create a new folder called my-portfolio, open it, and create index.html. Type ! and press Tab — VS Code will generate the HTML5 boilerplate for you. Then add a <h1> with your name and a <p> with a short intro.

Your VS Code should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="...">
  <title>My Portfolio</title>
</head>
<body>
  <header>
    <h1>Your Name</h1>
    <nav><a href="#">About</a></nav>
  </header>
  <main>
    <p>Welcome to my portfolio.</p>
  </main>
  <footer><p>© 2026</p></footer>
</body>
</html>

Notice the semantic tags: <header>, <nav>, <main>, <footer> instead of generic <div> tags.

I've created index.html and can see it in VS Code

✓ The skeleton exists. Now let's give it style.

Styling

CSS: The Design Layer

🎯 Learning Objectives

Write CSS rules using selectors, properties, and values
Understand the Box Model (Content → Padding → Border → Margin)
Use Flexbox to create responsive layouts with display: flex
Link an external .css file to your HTML document

⏱ Instruction: 0.5h📝 Styling & Playground: 3h⏳ Total: 3.5h

CSS transforms raw HTML structure into visual experience — color, typography, spacing, and layout are all here.

CSS (Cascading Style Sheets) controls every visual property of your HTML elements. You write rules that select HTML elements and apply styles to them. CSS is where your design vision becomes real.

Anatomy of a CSS Rule

h1 {
  color: #ffffff;
  font-size: 2rem;
  font-weight: 900;
}

The Box Model

Every HTML element is a box with four layers — from inside out:

Content → Padding → Border → Margin

Mastering spacing between these layers is the foundation of clean layout.

Flexbox: Your Layout Superpower

What is Flexbox?

A CSS layout model that arranges items in a row or column and distributes space between them automatically. Use display: flex on any container to activate it.

Key Properties

flex-direction: row or column
justify-content: horizontal alignment
align-items: vertical alignment
gap: space between items

        colorfont-familyfont-sizepaddingmarginborder-radiusbackgrounddisplay:flexgapborder
      

⚡ Try it Live — Flexbox Playground

Adjust the controls below and watch the layout change in real time. This is exactly how Flexbox works in your CSS.

flex-direction

justify-content

align-items

gap 12px

border-radius 8px

A

B

C

The CSS for this preview: display: flex; flex-direction: row; justify-content: flex-start; gap: 12px;

🧠

Knowledge Check

Section 04 · 2 Questions

⭐ Mastered

Question 1 of 2

What does CSS stand for?

Computer Styling System Creative Styling Standard ✓Cascading Style Sheets Code Styling Syntax

✓ Correct! Cascading Style Sheets — "cascading" means styles flow from parent to child elements.

✗ Not quite. Think about what "cascade" means — styles flowing down from parent elements.

Question 2 of 2

Scenario: Your button text is touching the button's border. You want to add space between the text and the border, without pushing the button away from other elements. Which CSS property do you use?

✓padding margin gap border-spacing

✓ Correct! Padding creates space inside the element, between content and border. Margin would push the element away from other elements.

✗ Not quite. Think about the box model layers: Content → Padding → Border → Margin. You need the layer between content and border.

✦ Action Item

Style Your index.html

Create a style.css file in your assets/ folder and link it to your HTML with <link rel="stylesheet" href="assets/style.css"> inside the <head>. Add a dark background, custom font, and Flexbox layout.

Your assets/style.css should contain:

body {
  background: #030303;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 48px;
}

main {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 24px;
}

Notice: external CSS (separate file) is the professional approach. Inline styles are only for quick experiments.

I've added CSS and my page has visual style

✓ The skeleton now has skin. On to the brain.

Interactivity

JavaScript: The Brain

🎯 Learning Objectives

Understand JavaScript's role as the behavior layer (alongside HTML structure and CSS style)
Declare variables, write functions, and use addEventListener for interactivity
Select HTML elements with document.getElementById() and modify their content

⏱ Instruction: 0.5h📝 Coding & Interactivity: 3h⏳ Total: 3.5h

HTML is structure. CSS is style. JavaScript is behavior — it makes your pages alive and responsive to user actions.

JavaScript (JS) is a full programming language that runs in the browser. It can read and modify HTML elements, react to user actions (clicks, keypresses), fetch data from APIs, and animate elements — all in real time, without reloading the page.

Core Concepts

Variables — const name = "InnoDI"
Functions — Reusable blocks of logic
DOM — The live HTML tree JS can modify
Events — React to user actions

Your First Interaction

const btn = document.
getElementById('myBtn');

btn.addEventListener('click', () => {
btn.textContent = 'Clicked!';
});

The Three Languages Working Together

HTML

Structure

The skeleton

CSS

Style

The design

JavaScript

Behavior

The brain

🧠

Knowledge Check

Section 05 · 2 Questions

⭐ Mastered

Question 1 of 2

What is JavaScript's primary role in front-end web development?

Structuring content with tags ✓Adding interactivity and dynamic behavior Controlling visual appearance Storing images and fonts

✓ Correct! JS adds the dynamic layer — responding to clicks, updating content, and animating elements.

✗ Not quite. HTML handles structure, CSS handles style. What's left for JavaScript?

Question 2 of 2

Scenario: You have a button with id="darkToggle". When clicked, it should change the page background to black. Which code achieves this?

HTML.darkToggle.click = "black" css.background('black') ✓document.getElementById('darkToggle').addEventListener('click', () => { document.body.style.background = 'black'; }) page.setColor('black')

✓ Correct! You select the element with getElementById, attach a 'click' event listener, and modify the DOM inside the callback. This is the core JavaScript interaction pattern.

✗ Not quite. JavaScript DOM manipulation follows three steps: (1) select the element, (2) add an event listener, (3) modify the DOM inside the callback function. Look at the code example card above.

✦ Action Item

Add One Interactive Element

Create assets/main.js and link it to your HTML with <script src="assets/main.js"></script> before the closing </body> tag. Then make one element respond to a click.

Starter code for assets/main.js:

// Example: Toggle dark/light mode on button click
const btn = document.getElementById('myBtn');

btn.addEventListener('click', () => {
  document.body.classList.toggle('light-mode');
  btn.textContent =
    document.body.classList.contains('light-mode')
    ? 'Switch to Dark' : 'Switch to Light';
});

Ideas: dark mode toggle, a "Read More" expander, a nav menu that shows/hides, or a greeting that changes when clicked.

My page has a working JavaScript interaction

✓ Your page is now alive. Time to make it beautiful.

UX / Design

Design Thinking & Wireframing

🎯 Learning Objectives

Understand wireframing as a planning tool — low-fidelity layout before code
Identify what makes award-winning web design effective (typography, whitespace, color, motion)
Sketch a wireframe for your portfolio homepage

⏱ Instruction: 0.5h📝 Wireframing & Analysis: 2.5h⏳ Total: 3h

Great developers are also great designers. Before writing CSS, you plan. Before planning, you look at the best work in the world.

Wireframing is the practice of sketching the layout and structure of a page before touching code. It is low-fidelity — boxes, lines, placeholder text — focused entirely on where things go, not how they look. It saves enormous time.

What to Wireframe

Navigation placement and links
Hero section layout (headline, image, CTA)
Content sections and their order
Footer content and links
Mobile vs. desktop differences

Wireframing Tools

Paper & Pen — Fastest, zero friction
Figma — Industry standard (free tier)
Whimsical — Clean, fast, web-based
Excalidraw — Open-source, hand-drawn style

Find Your Inspiration: Website Award Sites

Where to Look

Before designing anything, spend 30 minutes on award sites. Notice what makes sites feel premium: the typography, the use of white space, the scroll behavior, the color palette.

↗ Awwwards ↗ CSS Design Awards ↗ Mindsparkle Mag

What to Notice

Typography — Font choices, sizes, weight contrast

White Space — Breathing room between elements

Color — Limited palettes (2-3 colors)

Motion — Subtle scroll animations that reveal content

🧠

Knowledge Check

Section 06 · 2 Questions

⭐ Mastered

Question 1 of 2

What is the primary purpose of wireframing?

✓To plan layout and structure before writing any code To write CSS styles quickly To test site performance To create the final pixel-perfect design

✓ Correct! Wireframes are low-fidelity layout plans made before touching code — they save huge amounts of time.

✗ Not quite. Wireframes are not about final visuals or code. Think about what problem they solve in the design process.

Question 2 of 2

Which website is widely used by designers to discover award-winning, cutting-edge web design?

Stack Overflow ✓Awwwards W3Schools MDN Web Docs

✓ Correct! Awwwards curates the world's best web design and is the go-to inspiration source for front-end designers.

✗ Not quite. Stack Overflow and MDN are reference tools. Which site in the lesson above awards design excellence?

✦ Action Item

Wireframe Your Portfolio

Browse Awwwards for 20 minutes. Then sketch a wireframe of your portfolio homepage — on paper or in Figma. Plan where your name, photo, project cards, and navigation will live.

I've looked at award sites and sketched my wireframe

✓ You have a vision. Now let's build the infrastructure.

✦ Design Reflection

What design choice will you borrow?

Identify one specific design element from an award-winning site that you want to apply to your own portfolio. What is it, and why does it work?

✓ Reflection saved

Version Control

Git & GitHub

🎯 Learning Objectives

Understand why version control exists — safety, history, and collaboration
Use the core Git commands: init, add, commit, push
Create a GitHub account and understand the Working Dir → Staging → Repository workflow

⏱ Instruction: 0.5h📝 Repository Setup: 2h⏳ Total: 2.5h

Every transformation you make deserves a permanent record. Git is that record — and GitHub is your professional identity on the global stage.

Why Version Control?

Time Machine — Rewind to any previous version of your code instantly
Fearless Experimentation — Try new ideas without risking your working code
Collaboration — Multiple people can work on the same project without overwriting each other
Professional Standard — Every employer expects you to use Git

Git vs. GitHub

Git — The tool that runs on your machine and tracks changes locally
GitHub — A cloud platform that hosts your Git repositories online, making them shareable and serving as your portfolio

Think: Git = your personal diary. GitHub = the published book.

Git is a distributed version control system that takes a "snapshot" of your project every time you commit. GitHub hosts these snapshots in the cloud — and doubles as your global professional portfolio.

$ git config --global user.name "Your Name"
$ git config --global user.email "you@example.com"
$ git init              # initialize a new repo
$ git add .             # stage all changes
$ git commit -m "Launch" # create a snapshot
$ git push              # publish to GitHub

Step 01

Working Dir

Edit your files

Step 02

Staging Area

git add .

Step 03

Repository

git commit

Pro Tip: The .gitignore File

Not everything should be tracked. Create a .gitignore file in your project root to tell Git which files to ignore — system files, secrets, and temporary folders. For a portfolio site, add:

.DS_Store
Thumbs.db
node_modules/
.env

🧠

Knowledge Check

Section 07 · 2 Questions

⭐ Mastered

Question 1 of 2

What does the command git config --global user.name "..." do?

Creates a new GitHub repository Sets your GitHub profile display name ✓Sets your identity for all Git commits globally on this machine Initializes a new project folder

✓ Correct! This globally sets the author name that will appear on every commit you make on this machine.

✗ Not quite. The --global flag means it applies everywhere on your computer, not just one project.

Question 2 of 2

What is the correct order of the Git workflow?

Repository → Staging Area → Working Dir ✓Working Dir → Staging Area → Repository Staging Area → Working Dir → Repository Repository → Working Dir → Staging Area

✓ Correct! Edit in Working Dir → stage with git add → commit to Repository. This is the fundamental cycle.

✗ Not quite. Look at the three-step flow diagram above. What do you do first with your files?

✦ Action Item

Create Your GitHub Account

Go to github.com and create a free account. Your username will become part of your live portfolio URL. Enter it below.

✓ Your GitHub identity is set. The ledger is open.

Project Build

Building Your Portfolio

🎯 Learning Objectives

Build a 3-page portfolio site with proper folder structure and shared assets
Apply responsive design using the viewport meta tag and CSS media queries
Use AI prompts effectively to accelerate (not replace) your development

⏱ Instruction: 0.5h📝 Portfolio Build: 2.5h⏳ Total: 3h

Now you apply everything. Plan your structure, use AI to accelerate, and build a 3-page portfolio site that represents you to the world.

Your portfolio is not just a school project — it is your professional identity. Every recruiter, collaborator, and institution will look at it. Build it like it matters, because it does.

Your 3-Page Structure

index.html — Home / About Me
projects/index.html — Portfolio Work
cv/index.html — Your CV
assets/style.css — Shared styles
assets/main.js — Shared scripts

Your AI Architect Prompts

"Build a luxury dark-mode portfolio homepage with a hero section"
"Create a projects grid with hover cards"
"Design a clean CV layout with skills and experience sections"
"Make the navigation sticky and add smooth scroll"

Responsive Design Basics

The Viewport Meta Tag

Always include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your <head>. Without it, your site will not scale properly on mobile.

Media Queries

Use CSS media queries to change layout at different screen sizes:
@media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }

🧠

Knowledge Check

Section 08 · 2 Questions

⭐ Mastered

Question 1 of 2

What is the standard HTML filename for a website's default homepage?

home.html main.html default.html ✓index.html

✓ Correct! index.html is the universal default — every web server looks for it first when visiting a folder.

✗ Not quite. Remember Section 03 — which filename does a browser look for automatically in any folder?

Question 2 of 2

To create a clean URL like yoursite.com/projects/, what file do you create?

/projects.html in the root folder ✓/projects/index.html /projects/main.html /pages/projects.html

✓ Correct! Create a projects/ subfolder with its own index.html — the server serves it at the clean /projects/ URL.

✗ Not quite. Combine what you learned about subfolders and the index.html convention. A folder needs its own index file.

✦ Action Item

Build Your 3-Page Structure

Create the folder structure above in VS Code. Use GitHub Copilot to generate HTML for each page. Add your real name, a short bio, and at least 2 project cards (even if placeholder for now).

Your VS Code Explorer should look like this:

my-portfolio/
├── index.html           ← Home / About Me
├── projects/
│   └── index.html      ← Portfolio Work
├── cv/
│   └── index.html      ← Your CV
├── assets/
│   ├── style.css       ← Shared styles
│   └── main.js        ← Shared scripts
└── .gitignore

Quality Checklist:

✓ Your real name appears on all 3 pages
✓ Navigation links between all pages work
✓ Homepage has a hero section with your headline
✓ Projects page has at least 2 project cards
✓ CV page has education, skills, and contact info
✓ style.css is shared across all pages via <link>
✓ Site looks clean on both desktop and mobile

AI Tip: When using Copilot, be specific: "Create a project card component with a title, description, screenshot placeholder, and a link to the live project" gives better results than "make a projects page."

I've built my 3-page portfolio structure with real content

✓ The portfolio exists. Time to put it on the world stage.

Deployment

Deploy with GitHub Pages

🎯 Learning Objectives

Deploy your portfolio to a live URL using GitHub Pages
Understand the username.github.io naming convention
Execute the full deployment cycle: git add → commit → push

⏱ Instruction: 0.5h📝 Deployment & Testing: 1.5h⏳ Total: 2h

In minutes, your local project becomes a live URL accessible from anywhere on earth — for free.

GitHub Pages is a free hosting service built into GitHub. Push your code to a specially-named repository and GitHub automatically serves it as a live website at username.github.io.

On GitHub, create a repository named exactly username.github.io (replace "username" with your actual GitHub username)
In VS Code terminal, run git remote add origin https://github.com/username/username.github.io.git
Push your portfolio: git add . → git commit -m "Launch portfolio" → git push -u origin main
Visit https://username.github.io in your browser — your site is live

↗ Create Repository on GitHub

🧠

Knowledge Check

Section 09 · 2 Questions

⭐ Mastered

Question 1 of 2

What repository name does GitHub Pages require for a personal site?

my-portfolio ✓username.github.io portfolio.username.io github.com/username/web

✓ Correct! The repo must be named username.github.io exactly — this is what triggers GitHub Pages.

✗ Not quite. GitHub Pages uses a specific naming convention. Check the steps above.

Question 2 of 2

What is the correct Git sequence to publish your code live?

git pull → git merge → git push ✓git add → git commit → git push git clone → git fork → git deploy git init → git start → git upload

✓ Correct! Add (stage) → Commit (snapshot) → Push (publish). This is the deployment cycle you will use every day.

✗ Not quite. Recall the Git workflow from Section 07. What are the three steps from edit to publish?

✦ Action Item

Share Your Live URL

Once deployed, paste your GitHub Pages URL below. This is your first live website.

✓ You are live on the internet. One section left.

Capstone

Final Submission

🎯 Learning Objectives

Complete your CV and Projects pages to professional standards
Self-evaluate your portfolio against the quality rubric
Submit your work and understand the InnoDI admissions pathway

⏱ Instruction: 0.5h📝 Polish & Submit: 3.5h⏳ Total: 4h

Polish your portfolio, add your CV, and submit it to InnoDI. This is your first professional milestone.

Your final deliverable is a live portfolio website with two essential pages: a CV page that documents your skills, education, and experience — and a Projects page that showcases your work. This is what you will submit to apply to the full InnoDI program.

Your CV Page Should Include

Full name and professional headline
Education history with dates
Technical skills (HTML, CSS, JS, Git)
Work experience or relevant projects
Contact information and GitHub link

Your Projects Page Should Include

This portfolio site itself (meta!)
Any prior work, designs, or experiments
Screenshots or live links for each project
A short description of your role
Technologies used per project

Ready to Apply to InnoDI?

If you complete this course and want to go further — accelerated MSc degrees, AI-powered mastery learning, mentorship from Dr. Sounny — submit your portfolio below. Our admissions team will review your work.

🧠

Final Knowledge Check

Section 10 · 2 Questions

⭐ Mastered

Question 1 of 2

What should a professional CV page on your portfolio include?

✓Education, skills, experience, and contact information Only your school grades Only your phone number Only your profile photo

✓ Correct! A strong CV combines education, skills, experience, and clear contact information.

✗ Not quite. A CV is a comprehensive professional document. Look at the list above for what it should include.

Question 2 of 2

When you submit your portfolio to InnoDI, what does it demonstrate?

That you can copy code from the internet That you have expensive hardware ✓Your ability to design, build, and deploy real software Your age and location

✓ Correct! Your portfolio is proof of capability — it shows you can take an idea from concept to deployed product.

✗ Not quite. Think about what a live, designed, deployed website actually proves about a developer.

🏆 Hall of Fame — Student Portfolios

These are real portfolios built by students who completed this exact course. See the standard, get inspired, then submit your own.

Ilyas Q.

ilyasquedraoui.github.io

youssef-portfolio.github.io

10/10 Mastered

Fatima Z.

fatima-architect.github.io

8/10 Mastered

Your portfolio will appear here after successful review by our admissions team.

✦ Final Submission

Submit Your Portfolio to InnoDI

Paste your final portfolio URL below. Make sure your CV and Projects pages are live and complete. Our team will review your work within 5 business days.

✓ Submitted. You are now an InnoDI candidate. Watch your inbox.

✦ Final Reflection

What did you learn about yourself as a builder?

You just built and deployed a real website from scratch. What surprised you? What was harder than expected? What would you do differently if you started over? This reflection helps solidify your learning.

✓ Reflection saved

🏆

Transformation Complete.

You crossed the threshold from technology consumer to front-end architect. In two weeks you built real software and deployed it to the world. The InnoDI journey has begun.

Apply to the Full Program →

10

Sections

0

Mastered

28h

Study Load

1

ECTS Credit

1 ECTS = 28 hours of total study load (instruction, hands-on practice, self-study, and assessment) per the European Credit Transfer System.