実際にコードを書きながら学べるハンズオンチュートリアル集です。環境構築からデプロイまで、実務で使える技術を手を動かして身につけられます。
コードを実行する前に結果を説明する練習
変数の値、条件分岐、繰り返し、戻り値を紙やコメントで追い、実行結果を予測してからConsoleやテストで答え合わせします。
AIと学習設計CSS入門 #1 - 色・文字・余白を変える
HTMLにCSSを読み込み、color、background-color、font-size、margin、paddingで基本的な見た目を調整します。
CSS入門CSS入門 #2 - classとidでスタイルを当てる
class、id、要素セレクタの違いを確認し、特定の見出し、ボタン、カードだけにCSSを当てる練習をします。
CSS入門CSS入門 #3 - Flexboxで横並びレイアウトを作る
display: flex、gap、justify-content、align-itemsを使い、ナビゲーションとカードを横並びにする練習をします。
CSS入門CSS入門 #4 - Gridでカード一覧を作る
CSS Gridのdisplay: grid、grid-template-columns、gapを使い、カード一覧をきれいに並べる方法を練習します。
CSS入門CSS入門 #5 - スマホ対応のレスポンシブデザイン
viewport、max-width、media queryを使い、PCでもスマホでも読みやすい自己紹介ページに調整します。
CSS入門HTML入門 #1 - Webページの基本構造
HTMLファイルを作成し、doctype、html、head、body、titleの役割を確認しながら、最小のWebページを表示します。
HTML入門HTML入門 #2 - 見出し・段落・リンク・画像
見出し、段落、リンク、画像の基本タグを使い、自己紹介ページに必要な情報をHTMLで表現します。
HTML入門HTML入門 #3 - リスト・表・フォームの基本
ul、ol、table、form、input、buttonを使い、情報の一覧表示と簡単な入力フォームを作ります。
HTML入門HTML入門 #4 - セマンティックHTMLを使う
header、main、section、article、nav、footerを使い、検索エンジンや支援技術にも伝わりやすいHTML構造を作ります。
HTML入門JavaScript入門 #1 - 開発環境と実行方法
JavaScript学習を始めるために、ブラウザ、Node.js、VS Codeを準備し、どこでコードを実行するのかを確認します。
JavaScriptJavaScript入門 #2 - Hello Worldとconsole.log
JavaScriptで最初のプログラムを書き、console.log、コメント、実行順序、セミコロンの基本を確認します。
JavaScriptJavaScript入門 #3 - 変数letとconst
JavaScriptの変数宣言を、let、const、再代入、命名ルール、varを避ける理由から学びます。
JavaScriptJavaScript入門 #4 - データ型とtypeof
JavaScriptの基本データ型として、string、number、boolean、null、undefinedを確認し、typeofで型を調べます。
JavaScriptJavaScript入門 #5 - 演算子と比較
JavaScriptの算術演算子、代入演算子、比較演算子、===と==の違いを実行しながら確認します。
JavaScriptJavaScript入門 #6 - 文字列とテンプレートリテラル
JavaScriptの文字列操作として、連結、テンプレートリテラル、length、includes、trim、replaceを確認します。
JavaScriptJavaScript入門 #7 - if文と条件分岐
JavaScriptのif、else if、else、論理演算子、switchの基本を、ログイン判定や点数判定で確認します。
JavaScriptJavaScript入門 #8 - for文とwhile文
JavaScriptの繰り返し処理として、for、while、break、continueを使い、配列処理前の基本を確認します。
JavaScriptJavaScript入門 #9 - 配列の基本
JavaScriptの配列について、作成、インデックス、length、追加、削除、for...ofによる繰り返しを確認します。
JavaScriptJavaScript入門 #10 - 配列メソッドmap/filter/find
JavaScriptの配列メソッドとして、forEach、map、filter、find、some、everyの使い分けを確認します。
JavaScript
