体験：実行してみよう
コードはすでに入っています。そのまま「実行」ボタンを押して、プレビューに「Hello World」と表示されることを確認してください。演習の流れを体験する問題です。
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.
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.
画像を表示
https://placehold.co/200x100 の画像を表示してください。altは「サンプル画像」にします。
Click error to highlight line. ✕=error ⚠=warning ›=log.
見出しの階層
好きなテーマで、h1、h2、h3の3つの見出しを階層順に作ってください。（例：私のページ、好きな映画の紹介など）
Click error to highlight line. ✕=error ⚠=warning ›=log.
番号付きリスト
好きな手順やランキングをolとliで3ステップ書いてください。（例：料理の手順、好きなものランキングなど）
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
セマンティックHTML
header, main, footer を使った基本構造を作ってください。mainの中身は自由です。
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.
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.
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.
labelとinputの紐づけ
「メール」というラベルと、id="email"のinputをforとidで紐づけてください。
Click error to highlight line. ✕=error ⚠=warning ›=log.
articleとsection
articleタグ内にsectionを2つ作ってください。各sectionの内容は自由です。
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.
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.
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.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
配列の先頭
fruitsの最初の要素をconsole.logで出力してください。fruitsは['りんご','みかん','ぶどう']。
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
配列のmap
numbersの各要素を2倍した新しい配列を作り、console.logで出力してください。numbersは[1,2,3]。
Click error to highlight line. ✕=error ⚠=warning ›=log.
三項演算子
scoreが60以上なら「合格」、未満なら「不合格」を変数resultに代入し、console.logで出力。scoreは70。
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.
querySelector
idが「list」のul内の最初のliを取得し、そのtextContentをconsole.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.
イベントデリゲーション
idが「list」の要素のクリックイベントをリッスンし、クリックされたliのtextContentをconsole.logで出力してください。
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
fetchで取得
https://jsonplaceholder.typicode.com/posts/1 からデータをfetchし、titleをconsole.logで出力してください。
Click error to highlight line. ✕=error ⚠=warning ›=log.
エラーハンドリング
fetchで取得し、res.okがfalseなら「エラー」とconsole.log、trueならデータのtitleを出力してください。
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
配列データの表示
https://jsonplaceholder.typicode.com/posts から取得し、先頭3件のtitleをconsole.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.
ローカルストレージ保存
key「name」でvalue「太郎」をlocalStorageに保存し、読み取ってconsole.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.
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