code playground
Your first code in 5 minutes
Nothing to install. Write code on the left and see it run on the right. Seven tiny lessons - HTML, CSS and JavaScript.
lesson 1/7
Your first web page
Every web page is HTML. Change the text inside <h1> to your own name and watch the preview.
Hint
Only change the words between <h1> and </h1>.lesson 2/7
Make a list
Under the paragraph, add a <ul> list with three things you want to build (each in an <li>).
Hint
<ul> <li>A website</li> … </ul>lesson 3/7
Add colour with CSS
CSS decides how things look. Inside <style>, give the h1 a color (try orange or #FF7600) and the body a background.
Hint
h1 { color: orange; } body { background: #FFF6EE; }lesson 4/7
A button that talks
JavaScript makes a page do things. When the button is clicked, change the text of the paragraph #msg (use textContent).
Hint
msg.textContent = 'Hi! I am learning JavaScript';lesson 5/7
Variables and a greeting
A variable keeps a value. Make a variable name with your name, then show Hello, <your name>! in #out.
Hint
const name = 'Rafi'; out.textContent = 'Hello, ' + name + '!';lesson 6/7
A loop that counts
Loops repeat work. Use a for loop to add the numbers 1 to 10 to the list.
Hint
for (let i = 1; i <= 10; i++) { … }lesson 7/7
Your profile card
Put it together: a card with your name, a line about you and rounded corners. Give the .card a border-radius and a padding.
Hint
.card { padding: 24px; border-radius: 16px; }Enjoying it? Build real projects with a mentor in class.
See the courses