motodesginのロゴ

web design
and
frontend engineer

HTMLの要素関係を知ろう!-ブラウザアプリ

サポート
HTMLの要素関係を知ろう!-ブラウザアプリ

概要

プログラミング初期のお助けツール

主な使用技術

  • Next.js
  • v0
  • vercel
  • tailwindcss

担当範囲

デザイン/要件定義/コーディング

サイトに移動する

Requirements要件定義

制作目的

生徒の理解を助け、生徒の反応を見て視覚的な教材が理解に促されるのか検証するため。

ターゲット

現在所属しているプログラミングスクールの生徒たち

そのほか

生徒の中には親要素、子要素などの要素の関係性をうまく掴めない方もいるので視覚的にイメージできるように要素をクリックするとハイライトされるものを作成しました。

プロトタイプをv0で作成して、見た目の調整、修正できないエラーは自身で行いました。

motodesginのロゴ

web design
and
frontend engineer

©2024 motodesign