このカリキュラムではこのシンプルなWordpress themeのコピーを作ることを題材にします。
具体的にはこのthemeのトップページと記事ページの2ページを作ることを課題とします。
目的：情報設計の理解とhtmlの理解および慣れること
- デザインデータをよく見て情報設計をする
- 今回作業用にGitのブランチを切る。
git checkout -b feature/html_draft - 情報設計をもとに
source/index_draft.htmlにトップページのhtmlを、source/article_draft.htmlに記事ページのhtmlを記述する - 大枠htmlの記述が終わったら、remoteにpushしてmasterブランチに対してプルリクエストをする
- 講師の確認をもらい、masterブランチに今回の作業をマージする
以上
目的：hamlの理解および慣れること
- 今回作業用にGitのブランチを切る。
- git checkout master
- git fetch
- git pull origin master
- git checkout -b feature/haml
- 前項で作成したhtmlをhamlに変換する
- 共通パーツをレイアウトに書き出す
source/index.html.hamlにトップページのhamlを、source/article.html.hamlに記事ページのhaml記述する
- hamlが書き終わったら、remoteにpushしてmasterブランチに対してプルリクエストをする
- 講師の確認をもらい、masterブランチに今回の作業をマージする
以上
目的：htmlとcssの役割分担を理解すること。css,scssに慣れること
- 今回作業用にGitのブランチを切る。
- git checkout master
- git fetch
- git pull origin master
- git checkout -b feature/header_css
source/stylesheets/site.css.scssにヘッダーのスコープを作ってスタイルを書く- メディアクエリを使ってスマートフォン時のスタイルも書く
- ChromeとIE11でデザインどおりにレイアウトできていることを確認する
- 完了したらremoteにpushしてmasterブランチに対してプルリクエストをする
- 講師の確認をもらい、masterブランチに今回の作業をマージする
以上