GDG dev Academy

GDG on Campus Osaka の Web 学習サービス

つくりながら、
身につける

GDG dev Academy は、スライドで学んで・ブラウザでそのまま書いて・その場で判定される、 HTML / CSS / JavaScript をゼロから応用まで学べる学習サービスです。書いたコードがすぐ動くから、続きます。

  • 環境構築は不要
  • 全157レッスン
  • ブラウザだけでOK

学び方はワンループ

1レッスンは5〜8分。この4つをくり返すだけです。

  1. 1

    スライドで理解する

    紙芝居形式のスライドを、自分のペースでめくりながら学びます。

  2. 2

    エディタで書く

    環境構築なし。ブラウザのエディタで書けば、隣にすぐ結果が映ります。

  3. 3

    「できた!」で判定

    提出した瞬間に自動判定。直すべき場所を日本語で1つずつ示します。

  4. 4

    クリアして次へ

    合格したら次のレッスンへ。連続学習の記録とバッジが積み上がります。

基礎から応用まで、全16コース

HTML → CSS → JavaScript の順で、ゼロから積み上げます。

受講にはログインが必要です

基礎編3コース

HTML入門

Webページの骨組みをつくるHTML。見出し・リンク・画像・リストなどの基本タグを、手を動かしながらゼロから学びます。

全 10 レッスン

CSS入門

ページに色・形・レイアウトを与えるCSS。セレクタの書き方からボックスモデル、Flexboxまで、飾りながら学びます。

全 10 レッスン

JavaScript入門

プログラミングの基礎をJavaScriptで。変数・条件分岐・ループ・関数から、ページを動かすDOM操作まで一歩ずつ学びます。

全 12 レッスン

中級編6コース

HTML中級

文書を設計する HTML へ。セクション分け・図版・構造化された表・フォーム部品と入力チェック・アクセシビリティを学びます。

全 10 レッスン

CSS中級

レイアウトを自在に。セレクタ応用・詳細度・単位の使い分け・position・Flexbox 応用・Grid・transition・transform を学びます。

全 10 レッスン

JavaScript中級

データを操り、画面を動かす。配列メソッド・分割代入・文字列加工から、DOM 生成・イベント応用・タイマーまでを学びます。

全 12 レッスン

TypeScript入門

JavaScript に「型」という安全装置を。型注釈の書き方から、関数・オブジェクトの型付けまで、TypeScript の基本を一歩ずつ学びます。

全 10 レッスン

React入門

画面を「部品」で組み立てる React の考え方を。最初のコンポーネントから JSX・props・状態管理まで、UI づくりの定番を学びます。

全 10 レッスン

ライブラリ入門

先人の書いたコードを借りて、速く・正確に作る。script タグでのライブラリ導入から、dayjs・lodash・zod の使いどころまでを学びます。

全 8 レッスン

上級編6コース

HTML上級

HTML の表現力を最大まで。details / dialog / template / data-* 属性・メタ情報・レスポンシブ画像・ランドマークを学びます。

全 10 レッスン

CSS上級

設計できる CSS へ。カスタムプロパティ・calc・メディアクエリ・擬似要素・@keyframes・sticky・z-index・Grid 上級を学びます。

全 10 レッスン

JavaScript上級

本格的なプログラミングへ。クラス・クロージャ・Promise / async・エラー処理・Map / Set・正規表現・状態駆動の UI を学びます。

全 12 レッスン

TypeScript中級

入門で身につけた型注釈の先へ。判別可能なユニオン型・ジェネリクスの制約・ユーティリティ型など、実践で型を設計するための道具を一歩ずつ学びます。

全 10 レッスン

React中級

React入門の次の一歩。副作用(useEffect)・オブジェクトや配列の state・コンポーネント間での関数の受け渡し・useRef / useReducer まで、動く UI を組み立てる実戦的なパターンを学びます。

全 10 レッスン

ライブラリ活用

入門で触れた dayjs・lodash・zod を一歩踏み込んで使いこなす。並べ替え・データ変換・ネストしたスキーマ・カスタム検証から、複数ライブラリを組み合わせた集計までを学びます。

全 8 レッスン

応用編1コース

応用編: つくってみよう

HTML・CSS・JavaScript を全部使って、ゼロから自分の作品を組み上げる制作課題。判定は核となる要件だけ — デザインも実装も自由です。

全 5 レッスン

さっそく、最初のレッスンへ。

Google アカウントでログインすると、進捗・連続学習・バッジが記録されます。