Experience: Run the code
Code is already provided. Just press the "Run" button and confirm that "Hello World" appears in the preview. This exercise gets you used to the exercise flow.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Exercises
Write code and see the result immediately. Hints and answers included.
How to proceed: ① Read the guide → ② Do the exercise. Skipping guides leads to getting stuck. Read each step's guide before doing that category's exercises.
📋 Cheat Sheet (HTML / CSS / JS reference)
HTML
- <h1> 〜 <h6>
- Headings.
- <p>
- Paragraphs.
Your first HTML
Write HTML that displays "Hello World". Use the h1 tag you just learned.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Add a paragraph
Add a paragraph that says "This is my first web page." below the heading. Wrap it in a p tag.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Create a list
Create a list of your three favorite fruits using ul and li. Replace the ___ placeholders in the template below.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Add a link
Create a link to https://google.com with the display text "Google".
Click error to highlight line. ✕=error ⚠=warning ›=log.
Display an image
Display the image from https://placehold.co/200x100. Set alt to "Sample image".
Click error to highlight line. ✕=error ⚠=warning ›=log.
Heading hierarchy
Pick a theme and create h1, h2, and h3 headings in hierarchical order (e.g., My Page, About Me, Hobbies).
Click error to highlight line. ✕=error ⚠=warning ›=log.
Numbered list
Write 3 steps or a ranking using ol and li (e.g., cooking steps or a top-3 list).
Click error to highlight line. ✕=error ⚠=warning ›=log.
strong and em
Wrap "important" in strong and "emphasized" in em.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Semantic HTML
Create a basic structure using header, main, and footer. The content inside main is up to you.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Navigation
Create 3 links (Home, About, Contact) inside a nav tag.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Group with div
Wrap two elements in separate divs. The content is up to you (cards, blocks, etc.).
Click error to highlight line. ✕=error ⚠=warning ›=log.
Decorate with span
Wrap only the phrase "red text" in a span.
Click error to highlight line. ✕=error ⚠=warning ›=log.
HTML table
Create a 2-row, 2-column table. Cell content is up to you (e.g., A, B, C, D or Name, Age).
Click error to highlight line. ✕=error ⚠=warning ›=log.
Line break
Break between "Line 1" and "Line 2" using a br tag.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Open in a new tab
Make the link open in a new tab using target="_blank".
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Output to the console
Use console.log to output "Hello".
Click error to highlight line. ✕=error ⚠=warning ›=log.
Declare a variable
Assign any value to a variable named name and output it with console.log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Define a function
Define a function called greet that returns "Hello".
Click error to highlight line. ✕=error ⚠=warning ›=log.
Create an array
Create a fruits array with 3 elements of your choice and output it with console.log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Create an object
Create a user object with name and age and output it with console.log. Values are up to you.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Form basics
Create a form with a name input and a submit button. Set the input's name attribute to "name".
Click error to highlight line. ✕=error ⚠=warning ›=log.
Link label and input
Link a label saying "Email" to an input with id="email" using for and id.
Click error to highlight line. ✕=error ⚠=warning ›=log.
article and section
Create 2 sections inside an article tag. Each section's content is up to you.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Data attributes
Add data-id="123" and data-name="test" to the div.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Style with a class
Create a .highlight class with a yellow background and apply it to the p tag.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Hover effect
Make the link turn red when the mouse hovers over it.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Center with Flexbox
Center the div both horizontally and vertically using Flexbox.
Click error to highlight line. ✕=error ⚠=warning ›=log.
3-column grid
Turn the parent div into a Grid with 3 columns for its children.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Responsive design
Make a 2-column layout at 768px and above, and a 1-column layout below.
Click error to highlight line. ✕=error ⚠=warning ›=log.
flex-wrap
Make Flexbox children wrap onto the next line when they overflow.
Click error to highlight line. ✕=error ⚠=warning ›=log.
space-between
Use Flexbox to push children to opposite ends (equal space between).
Click error to highlight line. ✕=error ⚠=warning ›=log.
Card layout
Arrange 3 cards in a row with Grid, and add padding and a border to each card.
Click error to highlight line. ✕=error ⚠=warning ›=log.
if statement
Output "adult" with console.log if age is 18 or more, and "minor" otherwise. age is 20.
Click error to highlight line. ✕=error ⚠=warning ›=log.
for loop
Output the numbers 1 through 5 with console.log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Template literals
Use the name variable ("Taro") to output "Hello, Taro!" with console.log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Array length
Output the number of elements in arr with console.log. arr is [1,2,3,4,5].
Click error to highlight line. ✕=error ⚠=warning ›=log.
First element of an array
Output the first element of fruits with console.log. fruits is ['apple', 'banana', 'grape'].
Click error to highlight line. ✕=error ⚠=warning ›=log.
Arrow function
Define an arrow function called double that returns its argument doubled. Passing 5 should output 10.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Object properties
Output the user object's name with console.log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Array map
Create a new array where each element of numbers is doubled, and output it with console.log. numbers is [1,2,3].
Click error to highlight line. ✕=error ⚠=warning ›=log.
Ternary operator
Assign "Pass" to result if score is 60 or more, and "Fail" otherwise, then output it with console.log. score is 70.
Click error to highlight line. ✕=error ⚠=warning ›=log.
String concatenation
Concatenate firstName and lastName and output "Yamada Taro" with console.log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Get an element
Get the element with id "msg" and change its textContent to "Hello".
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click event
When the button with id "btn" is clicked, output "Click!" with console.log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Create a new element
Create a p tag with the text "New" and append it to the element with id "container".
Click error to highlight line. ✕=error ⚠=warning ›=log.
querySelector
Get the first li inside the ul with id "list" and output its textContent with console.log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Get all elements
Get all li elements inside the ul with id "list" and output each textContent with console.log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Get input value
Output the value of the input with id "name" using console.log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Remove an element
Remove the element with id "remove-me" from the DOM.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Event delegation
Listen for clicks on the element with id "list" and output the textContent of the clicked li with console.log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Change styles
Set the background color of the element with id "box" to "lightblue".
Click error to highlight line. ✕=error ⚠=warning ›=log.
Fetch data
Fetch data from https://jsonplaceholder.typicode.com/posts/1 and output the title with console.log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Error handling
Fetch data; if res.ok is false output "Error" with console.log, otherwise output the title.
Click error to highlight line. ✕=error ⚠=warning ›=log.
try-catch
Wrap fetch in try-catch and output the error message with console.log when an error occurs.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Display array data
Fetch from https://jsonplaceholder.typicode.com/posts and output the titles of the first 3 items with console.log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Loading state
Output "Loading..." before fetch and "Done" after success, using console.log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Add a TODO
Write code that adds an li to the ul when the input has a value and the button is clicked.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Local storage
Save value "Taro" under the key "name" in localStorage, then read it back and output it with console.log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Counter
Increment a count on each button click and display it in the element with id "count".
Click error to highlight line. ✕=error ⚠=warning ›=log.
Filter
Extract only numbers 3 and above from the array [1,2,3,4,5] using filter, and output it with console.log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Category guide
Environment
Start in the browser, then understand how local web development works.
Skills in this track
- Hello World
- Editor workflow
- Preview checks
Exercises: 6
HTML basics
Practice headings, paragraphs, lists, links, and images—the skeleton of every web page.
Skills in this track
- h1-h6
- p / ul / ol
- a / img
- Semantic HTML
Exercises: 10
CSS basics
Color, spacing, typography, and selectors to style pages professionally.
Skills in this track
- color / background
- margin / padding
- class selector
- font-size
Exercises: 10
JavaScript basics
Variables, functions, arrays, and control flow—the core of web logic.
Skills in this track
- const / let
- function
- array methods
- if / for
Exercises: 15
HTML advanced
Forms, labels, inputs, and tables—foundation for user input and data display.
Skills in this track
- form
- label + input
- table
- Accessibility
Exercises: 5
CSS layout
Flexbox and Grid for cards, nav bars, and centered layouts used in production.
Skills in this track
- display:flex
- justify / align
- CSS Grid
- gap / responsive
Exercises: 8
DOM APIs
Select elements, handle events, and mutate the page dynamically.
Skills in this track
- getElementById
- addEventListener
- createElement
- textContent
Exercises: 10
API integration
Use fetch and JSON to load external data into the UI.
Skills in this track
- fetch
- JSON.parse
- error handling
- CORS awareness
Exercises: 5
Capstone projects
Build todo, counter, and timer apps—portfolio-ready mini products.
Skills in this track
- state
- localStorage
- UI events
- end-to-end flow
Exercises: 5