
HTML5 を使って画像クロッピングツールを作成する
このプロジェクトでは、簡単な画像クロッピングツールを作成する手順を案内します。最後までたどることで、ユーザーが画像をアップロード、表示、クロッピングできるインタラクティブなアプリケーションを手に入れることができます。
JavaScript

リアルタイムプレビュー付きマークダウンエディタを開発する
このプロジェクトでは、入力しながらリアルタイムの HTML プレビューを提供するシンプルなウェブベースのマークダウンエディタを作成します。Ace Editor、marked、highlight.js などのライブラリを使用して、マークダウンでの記述だけでなく、ブラウザセッション間でデータを保存し、プレビューでコードスニペットをハイライトする直感的なエディタを開発します。
JavaScript

jQuery を使った 2048 ウェブゲーム
2048 は世界を席巻した、非常に人気のある簡単なゲームです。まだ遊んでいない場合は、携帯電話でダウンロードして試してみることができます。このプロジェクトでは、HTML、CSS、JavaScript、および jQuery を使って 2048 ゲームのウェブ版を作成する方法を案内します。
JavaScript

HTML、CSS、JavaScript を使った果物積みゲーム
このプロジェクトでは、HTML、CSS、JavaScript を使って簡単な果物積みゲームを作成する方法を学びます。目標は、ページ上部の落下する果物アイテムを下部のボックスに積み上げることです。ボックスに同じ果物が 3 つある場合、それらは自動的に削除されます。
JavaScript

インタラクティブな映画コレクション Web アプリ
このプロジェクトでは、HTML、CSS、および JavaScript(jQuery)を使用して、インタラクティブな映画コレクションを持つ Web アプリケーションを作成する方法を学びます。このアプリケーションは、ユーザーがお気に入りの映画をマークできるようにし、お気に入りの映画のコレクションが作成されると、成功メッセージが表示されます。
JavaScript

現代的な費用分担 Web アプリの構築
この手順に従ったプロジェクトでは、HTML、CSS、JavaScript を使って、現代的で視覚的に魅力的な費用分担 Web アプリケーションを作成します。このアプリケーションを使えば、グループ内の人々の間で費用を分担し、誰が誰に何を借金しているかを計算できます。まっさらな状態から始め、プロジェクトを段階的に構築する各ステップを網羅します。
JavaScript

セマンティック HTML における<time>タグの使用方法
HTML5 の<time>タグを使って日付と時刻にセマンティックな意味を追加し、ウェブページの構造とアクセシビリティを向上させる方法を学びます。
CSSHTMLJavaScript

ウェブブロック回避ゲームの作成
このプロジェクトでは、HTML、CSS、JavaScript を使って面白く簡単なブロック回避ゲームを作成します。このゲームでは、ブロックが動き、プレイヤーは黒いブロックをクリックしてポイントを獲得し、白いブロックをクリックしないようにします。一歩ずつ作成していきましょう!
JavaScript

応答性のあるアコーディオンインターフェイスの構築
このプロジェクトでは、HTML、CSS、JavaScript を使って簡単な折りたたみ式のアコーディオンを作成する方法を学びます。折りたたみ式のアコーディオンは、ユーザーがコンテンツのセクションを展開および折りたためる一般的な UI 要素であり、コンパクトかつ整理された形で情報を表示するのに便利な機能です。
JavaScript

React を使ったドラッグアンドドロップパズルゲームの作成
このプロジェクトでは、React を使ってドラッグアンドドロップのパズルゲームを作成します。これは、React コンポーネント、状態管理、およびユーザーインタラクションの処理を学ぶ初心者にとって素晴らしいプロジェクトです。このプロジェクトが終了すると、機能しるパズルゲームが完成します。
JavaScript

ChatGPT を使って VSCode 拡張機能を作成する
このプロジェクトでは、ユーザーが選択した Markdown テキストの見出しレベルを調整できる VSCode 拡張機能を作成します。
JavaScript

JavaScript を使ってスライドパズルゲームを作成する
JavaScript を使って簡単なスライドパズルゲームを作成するこのプロジェクトへようこそ。このガイドが終わるまでに、ブラウザで遊べる機能付きの 3x3 のスライドパズルゲームを手に入れます。このゲームには、数字が付いたタイル、タイマー、ゲームの開始、一時停止、リセット用のコントロールが備えられています。
JavaScript

ドローイングボードのウェブアプリを作成する
このプロジェクトでは、簡単なウェブベースのドローイングボードアプリケーションを段階的に作成します。各ステップは前のステップをベースに構築され、アプリケーションに機能を徐々に追加できるようになっています。このプロジェクトが終了すると、ユーザーが描き、ブラシの色を変更し、ブラシサイズを調整し、キャンバスをクリアできる完全に機能するドローイングボードが完成します。
JavaScript

簡単な抽選アプリケーション
このプロジェクトでは、JavaScript と jQuery を使って簡単な抽選アプリケーションを作成する方法を学びます。このアプリケーションは、賞品のリストを回転させ、回転が止まったときに当選賞品を表示することで抽選をシミュレートします。
JavaScript

Echarts を使ったリアルタイム販売ダッシュボード
このプロジェクトでは、Echarts ライブラリを使ってリアルタイム販売ダッシュボードを作成する方法を学びます。ダッシュボードは、視覚的に魅力的で理解しやすい形式で販売と数量データを表示します。
JavaScript

jQuery フリップパズルゲーム
この「jQuery フリップパズルゲーム」プロジェクトは、JavaScript、jQuery、および Bootstrap に焦点を当てたウェブ開発の実践的な経験を提供します。JavaScript におけるオブジェクト指向プログラミングを含み、ウェブ開発のコンテキストにおける「this」バインディングの一般的な問題に対処します。ゲームは、ユーザーインターフェイスに jQuery と Bootstrap 3 を使用して実装されています。Bootstrap に慣れていると役立ちますが、プロジェクトのコアロジックは jQuery と JavaScript で構築されています。
JavaScript

投票アプリケーションの構築
このプロジェクトでは、ユーザーが投票オプションを作成・管理し、必要に応じてオプションを削除できる投票アプリケーションを構築する方法を学びます。また、アプリケーションには、複数選択のサポートや公開投票結果の機能も備えています。
JavaScript

HTML、CSS、JavaScript を使った果物マッチングゲーム
このプロジェクトでは、HTML、CSS、JavaScript を使って簡単な「Fruit for Fun」ゲームを作成する方法を学びます。このゲームでは、ゲーム盤の四角をクリックすることで果物の画像のペアをマッチングします。
JavaScript