デイトラ コーディング 中級編 ToDoリスト

デイトラ コーディング 中級編のTo Do（やること）を
整理した一覧リストです

※Webコーダーとして成長する上で
特に重要だと思われるリスト項目は大文字にしています

JavaScript・jQuery学習編

Day1

★JavaScriptの基本文法を学ぼう①（動画学習）
★文字列を表示してみよう！（動画学習）
★数字の計算をしよう！（動画学習）
★変数と定数（動画学習）
★関数（function）（動画学習）
★条件分岐（動画学習）

Day2

★JavaScriptの基本文法を学ぼう②
★配列（Array）（動画学習）
★オブジェクト（Object）（動画学習）
★繰り返し（動画学習）

Day3

★Web制作初心者のためのjs基礎講座（DOM操作）
★そもそもDOMって何？（動画学習）
★DOMの基本的な概念（動画学習）
★HTML要素の追加（動画学習）
★ボタンの操作（動画学習）
★イベント監視（動画学習）

Day4

★jQueryを学ぼう
★jQueryを使うメリットとJavaScriptとの違い
★jQueryの書き方のルール（動画学習）
★メソッドを使った要素の指定（動画学習）
★イベントの監視（動画学習）
★アニメーション（動画学習）

Day5

★【調べながら実装しよう】jQuery実践課題①
★課題①：ドロワーメニューの実装
★課題②：ページトップへ戻るボタンを付ける

Day6

★【調べながら実装しよう】jQuery実践課題②
★課題③：モーダルで画像の拡大表示
★【重要】仕事において「自作 = 正義」ではない
★エンジニア向けメモ帳『Boostnote』
★アニメーション実装の引き出しを増やす方法

Sass学習編

Day7

★CSSの上位互換！Sassを学習しよう
★SassMeisterでSassの書き方を学ぼう（動画学習）
★Sassの入れ子の書き方（動画学習）
★疑似要素とクラスの書き方（動画学習）
★変数を使ってみよう（動画学習）
★定義したスタイルを使いまわそう（動画学習）
★【必見！】mixinを使ったブレイクポイントの記述（動画学習）
★functionを使おう（動画学習）
★Sassの要点まとめ

Day8

★デイトラ簡易版サイトのCSSをSassで書き直してみよう
★Sassをローカル環境で使えるようにしよう① - DartJS Sass Compiler and Sass Watcherの導入
★Sassをローカル環境で使えるようにしよう② - Sass利用時のフォルダ構成
★Sassをローカル環境で使えるようにしよう③ - DartJS Sass Compiler and Sass Watcherの動かし方
★Sassをローカル環境で使えるようにしよう④ - ファイル分割の方法
★JavaScript〜Sassの基礎学習編まとめ

Day9

★CSS設計の基本概念からクラスの付け方をイメージしよう
★重要な考え方その① 共通化する部分は共通パーツとして定義
★重要な考え方その② 「コンテナー」と「コンテンツ」の分離
★重要な考え方その③ クラス名から影響範囲が分かる
★重要な考え方その④ 状態を管理する
★まとめ

デザインカンプからコーディング編

Day10

★AdobeXDでWebカンプを作ってみよう①
★AdobeXDをダウンロードしよう
★AdobeXDの基本操作を覚えよう！（動画学習）
★Webカンプ（PC版）を作ってみよう！（動画学習）

Day11

★AdobeXDでWebカンプを作ってみよう②
★スマートフォン版のWebカンプを作ろう！（動画学習）
★開発する為に必要な素材の書き出し方や、機能を知ろう！（動画学習）

Day12

★準備編・ヘッダーとメインビジュアルのコーディング
★準備編：今回のコーディングで使う写真の紹介
★おさらい：デザインデータからコーディングする力はコーダーに必須の能力（動画学習）
★課題：ヘッダーとメインビジュアルのコーディング
★コーディングの準備：XDから画像のダウンロード + リセットCSS（動画学習）
★ヘッダーのコーディング例（動画学習）
★メインビジュアルのコーディング例（動画学習）
★ヘッダーの固定とレスポンシブ対応（動画学習）
★余裕がある人向けの課題
★回答例コード

Day13

★横並びカードのコーディング
★PC時のカードのコーディング例（動画学習）
★タブレット時とスマホ時のカードのコーディング例（動画学習）
★余裕がある人向けの課題
★回答例コード

Day14

★PerfectPixelを使ったチェック＆修正
★PerfectPixelのダウンロード・活用方法（動画学習）

Day15

★ボタン、見出しを自在に作れるようになる
★参考にすべき記事
★ボタン・見出しコーディングのメリット①
★ボタン・見出しコーディングのメリット②
★見出しとボタンのコーディング例（動画学習）
★回答例コード

Day16

★ニュース系のコーディング
★ニュース系のコーディング例（動画学習）
★余裕がある人向けの課題
★回答例コード

Day17

★テーブルとGoogleMap（iframe）埋め込みのコーディング
★参考にすべき記事
★Priceセクションのコーディング例（動画学習）
★Accessセクションのコーディング例（動画学習）
★余裕がある人向けの課題（動画学習）
★回答例コード

Day18

★お問い合わせフォームのコーディング
★参考にすべき記事
★Contactセクションのコーディング例（動画学習）
★余裕がある人向けの課題
★回答例コード

Day19

★フッターのコーディング
★フッターのコーディング例（動画学習）
★余裕がある人向けの課題
★回答例コード
★デザインデータからコーディング〜よく使うパターンを練習しよう編まとめ

実務でよく使うアニメーションの付け方編

Day20

★マウスホバー時の動きを付ける
★はじめに：実務に必須のアニメーションの付け方を学ぼう
★余裕がある人向けの課題
★メニューは『現在のページ＋ホバーしてるメニュー』にスタイルを付けるのが定石
★ホバー時のアクションに指定がないときは透過する
★アクション要素にはホバーアニメーションを付与する
★ホバーのコーディング例（動画学習）
★回答例コード

Day21

★Webフォント、デバイスフォントを理解する
★CSSのフォントの指定を理解する
★Googleフォントの使い方
★フォント周りの便利ツール紹介
★フォントファミリーは変数管理しておくと便利
★フォントのコーディング例（動画学習）
★回答例コード

Day22

★コーディング後の品質を担保するテスト
★課題：コーディングしたものをチェックする
★チェック項目の一覧とチェック方法
★主要チェックツールの使い方の例（動画学習）
★コーディング後のチェックの重要性
★勉強になる記事
★MacでIEを確認するとき＆WindowsでSafariを確認するときの方法

Day23

★スライダー（カルーセル）を作る
★課題：メインビジュアルをスライダーに変更
★スライダーの課題について
★扱いやすいスライダー系ライブラリを１つ持つ
★余裕がある人向けの課題
★背景として画像を設置する
★アローアイコンやページネーションの装飾はデベロッパーツールを確認しながら上書きしよう
★アローアイコンは上書きして中央基準で配置しよう
★スライダーのコーディング例（動画学習）
★回答例コード

Day24

★スクロールに応じて要素を「フワッ」と登場させる
★WOW.jsで「フワッと」表示するアニメーションを実装する
★アニメーションをカスタマイズしよう！
★wowを使ったコーディング例（動画学習）
★回答例コード

Day25

★スマホ時のドロワーメニューを作る
★ドロワーが作れるライブラリ
★余裕がある人向けの課題
★ドロワーメニューを開いた時のレイヤー階層に注意しよう！
★aタグをクリックしてもページ遷移が起きないようにする
★ドロワーのコーディング例（動画学習）
★回答例コード

Day26

★スムーススクロールとフローティングアイテムを作る
★スムーススクロールを作る
★「トップへ戻る」をフローティングアイテムにする
★ページ内リンクのクリックを検知する
★ページ内リンク先のidと位置を取得してアニメーションさせる
★固定ヘッダー分の高さを考慮するのを忘れずに！
★一定位置までスクロールしたらアイテムを表示する方法（フローティングアイテム）
★ページ内リンクとスムーススクロールのコーディング例（動画学習）
★スクロールに応じて表示するコーディング例（動画学習）
★回答例コード

Day27

★ページ内リンクでクリックした要素に下線を引く（クリックイベントの処理）
★余裕がある人向けの課題
★クリック時にクラスをつけ外しする
★クリックイベントのコーディング例（動画学習）
★回答例コード

Day28

★Q and Aをアコーディオンでコーディング
★余裕がある人向けの課題
★slideToggle()で簡単アコーディオン実装
★アコーディオンのコーディング例（動画学習）
★回答例コード

Day29

★モーダルを作る
★モーダルとは
★モーダルウィンドウを作るための手順
★data型を使ってjQueryの実装を楽にしよう！
★コンテンツが長い時はモーダル内でスクロールさせよう
★モーダルのコーディング例（動画学習）
★回答例コード

Day30～32

★中級総復習編
★課題：XDのデザインカンプからLPのコーディング（動画学習）
★ライブコーディング：XDからの書き出し編（動画学習）
★ライブコーディング：HTML編（動画学習）
★ライブコーディング：CSS編（動画学習）
★ライブコーディング：アニメーションやフォーム機能の実装編（動画学習）

課題編

Day33～37

★最終課題：実践コーディング
★課題：XDのデザインカンプからLPのコーディング
★画面キャプチャ
★素材元
★最終課題クリアおめでとうございます！
★最終課題を終えた方へ【品質チェック＆回答例】