Web開発を学ぶ

初心者から上級者まで、Frontendのウェブ開発を学べるアプリです。最初のレッスンからHTML、CSS、JavaScriptをあわせて学べます。

収録内容

• 41コース、163の短いレッスン：A1–C2

• ライブコードeditor：HTML、CSS、JavaScriptのペインを横並びに表示。スマートフォンで、その下にプレビューを即時表示

• HTML、React、Vue、Angular、Node、TypeScriptのプロジェクトテンプレート

• 手順に沿って進める20のプロジェクト：レシピページ、お問い合わせフォーム、カードグリッド、ナビゲーションバー、データテーブルなど

• 実際のバグに挑む15のデバッグミッション：375pxで崩れるレイアウト、LCPを悪化させる画像、Tabキーでの移動を妨げるフォーム、コンポーネントのメモリリーク、ローカルでは通るのにCIでは失敗するテスト

• 最終試験と修了証

• 22言語

初心者からシニアまで、ひとつの学習ルート

• Webの基礎、HTML、フォーム、セマンティックなマークアップ

• CSSの基礎、変数、トランジション、アニメーション、flexbox、grid

• あらゆる画面に対応するレスポンシブデザイン

• JavaScript、配列、オブジェクト、ES6+、DOM、ブラウザーAPI、非同期処理

• 開発者ツール、Git、チームのワークフロー、モジュール、ビルドツール

• TypeScriptの基礎から高度なパターンまで

• Reactの基礎、useEffect、データ取得、高度なフックとパターン

• Vue 3、Composition API、高度なパターン

• 状態管理、REST API、WebSockets、リアルタイムUI

• サーバーサイドレンダリング：Next.js、Nuxt 3、プログレッシブウェブアプリ（PWA）

• アクセシビリティ、テスト、パフォーマンス、セキュリティ

• CSS設計、デザインシステム、CI/CD、最新の開発ツール

身につく実践

• クイズと復習

• チートシート：構文とパターンを83項目収録

• Frontend developerやウェブ開発者向けの面接質問50問と回答

• 編集できるコードサンプル集

• コード、メモ、お気に入りのレッスンを保存

• コーディングチャレンジ：コードで友達を招待、またはランダムな相手と対戦

• 世界コーディングチャレンジ：JavaScript、Pythonなどの言語で、毎日3ラウンドの世界対戦

• 連続学習記録、XP、ランキング、毎日のリマインダー

AIメンター

• バグ、概念、エラー、レッスン、自分のコードについてAIに質問

• AIプレイグラウンド：作りたいページを説明してコードを生成

• 無料：AIへの質問は1日3回。Pro：無制限

対象となる方

• フロントエンドエンジニアを目指す初心者

• ウェブ開発の授業と並行して練習する学生

• 自分のデザインを実装するデザイナー

• JavaScript、TypeScript、フレームワークを学ぶHTML/CSS開発者

• 初めてのフロントエンドエンジニア職に向けて準備する転職希望者

使い方

1. 無料でスタート：「Frontend開発へようこそ」

2. ペインを編集して、プレビューの更新を確認

3. JavaScript、レスポンシブレイアウト、TypeScript、React、Vueを学習

4. ガイドに沿ってプロジェクトを制作し、実際のバグを修正

5. 最終試験に合格して修了証を取得

無料とPro

無料：最初のコース、最初のガイド付きプロジェクト、2つのデバッグミッション、コードeditor、AIメンターへの質問1日3回。広告が表示されます。Pro：すべてのコース、プロジェクト、ミッション、修了証取得試験、AIの無制限利用。広告が非表示になります。