Free opening class: meet the Product Engineer, AI at work, and set up your coding tools
Get to know the Product Engineer role and how AI is used at work, then set up the tools you need.
A feature used to be built by many people. A product manager wrote what was needed. A designer drew how it looks. An engineer built it. An analyst read the data. Now AI does small tasks at every stage. So more and more teams ask one person to own a feature from start to finish. That person is called a Product Engineer, and this class is your first step there.
This opening class is free and open to anyone. Never written code before? That is fine, we start from zero.
First, you meet the Product Engineer: an engineer who owns one feature from start to finish. You also see why AI is merging several roles in product teams. Then we talk about why you still need to master the coding basics yourself, even though AI is smart.
After that, you get to know Mentory Circle: the learning path, how levelling up works, and how to use the dashboard. In the last part, your mentor helps you install VS Code and open your first web page in the browser.
By the end of Level 1 (Web Foundations), you have a portfolio landing page, a page that introduces you, live on the internet. It looks good on phones and is easy for people to find on Google.
What You Learn
- Explain what a Product Engineer is, and how it differs from a fullstack developer
- Name the benefits and risks of AI for someone just learning to code
- Explain the Mentory Circle path: 3 stages, 10 levels, and an assessment (a level-up test) at the end of each level
- Create an account, log in to the dashboard and find the opening class
- Install VS Code, then create your first
index.htmland open it in the browser
What you produce
VS Code ready to use and your first page
Step by Step
Orientation
- 1
Step 1
Why one person can now hold several roles
Picture one feature built by four people, each waiting for their turn. Now AI can help write draft code, make mockups (rough sketches of how an app looks), and summarise data. Small tasks in every role get faster. As a result, many teams start asking one person to hold two roles at once.
Three merges show up most often. A software engineer who also thinks like a product manager is called a Product Engineer. A designer who can also build web interfaces (a frontend developer) is called a Design Engineer. A software engineer who also understands machine learning is called an AI Engineer. This trend of merged roles is also showing up at leading tech companies like OpenAI, Anthropic and Apple. They have started opening Product Engineer positions: people who are not only good at coding, but also understand AI and can build a product from start to ready-to-use (an end-to-end product). That runs from understanding the user’s problem and needs, to finding the right solution, to building a product people can actually use.
That is why, at Mentory Circle, we focus on the first one, Product Engineer.
Try it live · Merging roles Coding is always on. Pick one more skill the same person holds.
Codingalways onCodingCore roleSoftware Engineer
Builds and maintains code to requirements someone else wrote.
This is the core of every merged role. Pick a second skill and see which role appears.
What you still have to master yourself: coding basics, breaking problems down, and judging the work AI hands you.const me = { skills: ["code"], role: "Software Engineer", };Try it now: In the demo, pick Product sense, then switch to Design. Which role appears?
- 2
Step 2
So, who is a Product Engineer?
A Product Engineer owns one feature from start to finish. They find out the user’s problem, build the solution, ship it, then read the data to improve it. This is different from a "product engineer" in a factory, who designs physical goods.
So how is that different from a fullstack developer? Fullstack developer describes the code you write: frontend (the part users see) and backend (the part that runs on the server). Product Engineer describes what you are responsible for: whether the feature actually solves the problem. Product Engineers are usually fullstack too. The difference is that they are judged by results, not just by code that runs.
Try it now: Think of an app you use every day. What problem does one of its features solve? What data could show that the feature works?
- 3
Step 3
Let AI help, as long as you still understand
AI has real strengths. Repetitive work gets faster. AI can explain concepts any time, and it can help when you are stuck.
But the data shows the risks too. In the Stack Overflow 2025 survey, 84% of developers use AI, but only 33% trust its output. That means AI is used a lot, but rarely trusted as is. In a 2026 Anthropic study, beginners who handed code writing to AI scored lowest, especially on debugging: finding and fixing mistakes in code. That means if you hand everything to AI, your own skills do not grow.
So here is the rule at Mentory Circle. In Stage 1 you learn without AI. In Stage 2 AI is allowed. In Stage 3 AI is required. With strong basics, you can judge an AI answer instead of just copying it.
- 4
Step 4
How learning at Mentory Circle works
Mentory Circle has 3 stages and 10 levels. The Initiate stage builds web and JavaScript foundations. The Builder stage builds whole products, from databases to Next.js. The Product Architect stage trains product thinking, product engineering and using AI inside products. So the path ends at the role you just met.
Every level ends with an assessment, a test to move up a level. You move up because you pass, not because you showed up. If you do not pass yet, you repeat that level. You may also step back one level free of charge (terms apply).
- 5
Step 5
What Level 1 gives you: a portfolio people can find on Google
In Level 1 (Web Foundations), you start from a Figma design file and finish with a live portfolio landing page. You learn HTML, CSS, and how to make layouts that look good on phones.
Its last part is SEO (search engine optimisation): making a page easy for Google to read. On day 9 you write three things: the title (the page name), the meta description (a short summary of the page), and the og:image (a preview picture). As a result, your page looks right in Google results, and also when its link is shared on WhatsApp.
Try it live · Meta tags and link previews Google resultyourname.dev
Your Name · Frontend Developer
Frontend developer portfolio: landing pages and web apps that are fast, tidy and usable by everyone. See the latest projects and get in touch.
Link shared on WhatsAppog:image 1200×630Your Name · Frontend Developer
Frontend developer portfolio: landing pages and web apps that are fast, tidy and usable by everyone. See the latest projects and get in touch.
yourname.dev
https://yourname.dev
title: 30/60 characters, fine, shown in full.
description: 142/155 characters, fine.
og:image is set, so WhatsApp shows a large card with a picture.<head> <title>Your Name · Frontend Developer</title> <meta name="description" content="Frontend developer portfolio: landing pages and web apps that are fast, tidy and usable by everyone. See the latest projects and get in touch."> <meta property="og:title" content="Your Name · Frontend Developer"> <meta property="og:description" content="Frontend developer portfolio: landing pages and web apps that are fast, tidy and usable by everyone. See the latest projects and get in touch."> <meta property="og:image" content="https://yourname.dev/og.png"> </head>
Try it now: Clear the title in the demo and look at the Google result. Then write a title for your own portfolio.
- 6
Step 6
Create an account and log in to the dashboard
The dashboard is where your lessons, live class links, recordings and progress live. Here is how to log in the first time:
1. Open mentorycircle.com, click Join Now, then fill in your name, email and WhatsApp number.
2. Click Log In and type the same email.
3. Open your email and find the 6-digit code. If it is not there, check your Spam folder.
4. Enter the code, create a password, then click Save & Log In.
5. On the Overview page, the opening class and its Join Meeting button are already there.
Try it live · Getting into the dashboard Click each step, or use Next. The amber box on the right shows what you click.
mentorycircle.com/enMentory CircleLog InJoin NowNameYour NameEmailyou@example.comWhatsApp number0812xxxxxxx1/6 On the home page, click Join Now. Fill in your name, email and WhatsApp number. Your account is created right away.
You know it worked when: a registration success message appears.Try it now: Follow the five steps above now, until you see the opening class on the Overview page.
- 7
Step 7
Install VS Code, then open your first page
VS Code is the app where you write code. Download it free from code.visualstudio.com and install it like any other app.
1. Make a new folder called
portfolio. Open it from the File menu, then Open Folder.2. Create a new file called
index.html, then copy the example code below.3. Save with Ctrl + S (Cmd + S on Mac).
4. Right-click
index.htmlin File Explorer, choose Open with, then pick Chrome or Edge.Try it now: Replace the text inside
<h1>with your name, save, then refresh the browser. Does the heading change?
Full Example
Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hi, I am Your Name</title>
</head>
<body>
<h1>Hi, I am Your Name</h1>
<p>I am learning to build for the web from zero.</p>
</body>
</html>Today's Challenge
Today's Challenge
Three tiers: a quick check, a code challenge, then a boss challenge. Do them in order.
You are viewing open material. You can try the quiz, but your progress is not saved. Sign up to save it.
01
Quick Check
Cases from everyday work. Being wrong is fine: read why, then try again.
Question 1 of 5
Job post
Wanted: someone who talks to users to find problems, builds the feature through to release, then reads usage data to improve it.
Which role fits this job post best?
02
Boss Challenge
Optional, no hints
Finish the previous tier first.
Bug Hunt
Common Mistakes
The mistakes we see most. Guess why each one is wrong, then open the card.
Login is refused with "This email isn't registered yet"Show the cause
- Why
- The email you typed is different from the one you signed up with. Maybe one letter is off, or you used another address.
- How to fix it
- Type exactly the same email you signed up with. If it still fails, ask the admin on WhatsApp.
Code from AI runs, but you cannot explain what it doesShow the cause
- Why
- Code that runs once is not necessarily correct. If you do not understand it, you cannot fix it when it breaks either.
- How to fix it
- In Stage 1, write the code yourself. Later, when AI is allowed, read every line. Then test it with odd input, like an empty field, before you use it.
The browser shows the HTML code instead of the pageShow the cause
- Why
- The file was saved as
index.html.txt. Windows often hides file extensions, the ending of a file name like.txt. So the name looks right. - How to fix it
- Save it again from VS Code as
index.html. Then turn on "File name extensions" in File Explorer, so file endings are always visible.
You changed the code, but the page in the browser does not changeShow the cause
- Why
- The change is not saved yet, or the browser is still showing the old version.
- How to fix it
- Save first with Ctrl + S (Cmd + S on Mac). A white dot on the VS Code tab means the file is not saved. Then refresh the browser.
Double-clicking index.html opens it in VS Code or NotepadShow the cause
- Why
- Your laptop is set to open
.htmlfiles with a text app, not with a browser. - How to fix it
- Right-click the file, choose Open with, then pick Chrome or Edge. You can also drag the file into a browser window.
Up Next
Up Next
Ready for Day 2? Check first
- Device: a laptop or PC running Windows or macOS. A phone or tablet is not enough for coding yet.
- Device: the latest Chrome or Edge. On day 2 we use the Accessibility panel in DevTools, the page inspector built into the browser.
- Device: VS Code is installed, and your first
index.htmlopens in the browser. - Account: a free Vercel account (vercel.com) is set up. From day 3, you hand in work with Vercel Drop.
- Prep: you know how to turn on a screen reader, an app that reads the screen aloud. On Windows it is Narrator (Ctrl + Win + Enter). On Mac it is VoiceOver (Cmd + F5).
- Payment: if you decide to continue, pay for Level 1 on the Overview page (Transfer, Upload Proof, We Check). Day 2 opens once your payment is checked.
- Live classes: the Zoom app is installed. From day 2, the Zoom link is in the dashboard (Join Meeting button), not in your email.
- Live classes: earphones and a stable internet connection.
Questions About the Free Class
Is the Mentory Circle opening class really free?
Yes. The opening class of every level is free, with no commitment. You only pay if you decide to continue: from Rp300.000 per level, plus a one-time Rp500.000 commitment fee.
Do I need to know how to code first?
No. This class is built for people starting from zero. All you need is a laptop, an internet connection and an email address you use.
Where and when is the class?
Online on Zoom. After you sign up, the schedule is in your welcome email, and we email you the Zoom link the day before the class starts.
Take This Class With a Mentor
You have seen the material. In the live class, a mentor is with you from your first question to your first web page opening in the browser.
Free, no commitment. See it first, then decide.
Join the Free Class