初心者からちゃんとしたプロになるHTML+CSS実践講座

構成数 : 1枚

■Lesson 1 現場のコーディングとツール
01 Webサイト制作の現場で使う技術
02 Webサイト制作のワークフロー
03 デザインツールと制作ワークフロー
04 CSS設計を意識したコーディング
05 コーディングに最適なテキストエディター
06 デベロッパーツールを使いこなそう

■Lesson 2 フロントエンド技術の"いま"
01 レスポンシブWebデザインとモバイルファースト
02 画像フォーマットと軽量化
03 セマンティックWebを構築するための技術
04 モバイル環境への最適化
05 構造化データとリッチスニペット
06 Webアクセシビリティの考え方と基準

■Lesson 3 開発環境の構築
01 コマンドラインツールと操作方法
02 フロントエンド開発に必要なNode.jsのインストール
03 Web開発の作業を自動化するGulpを導入する
04 Gulpプラグインを利用して作業を効率化する
05 Webサーバーとドメインについて
06 Webサイトのデータをサーバーに送受信する仕組み
07 Gitを利用したバージョン管理システムの導入

■Lesson 4 カンプからのコーディング設計
01 コーディング設計
02 完成形とデザイン仕様の確認
03 情報構造にもとづいてマークアップを検討する
04 レイアウトに必要な枠を追加する
05 CSSを設計する
06 デザインカンプから素材とデータを抽出

■Lesson 5 BEMを使ったCSS設計
01 完成形を確認する
02 HTML制作の準備
03 コンポーネントの設計
04 ブレイクポイントの設計
05 コンポーネントのCSS設計
06 コーディングのポイント
07 JavaScriptライブラリの実装

■Lesson 6 Sass(SCSS)を取り入れる
01 完成形と全体構造の確認
02 基本となるHTMLの作成
03 基本となるCSSをSassで作成する
04 レスポンシブ対応のヘッダーを作成する
05 メインビジュアル部分にスライドショーを実装する
06 ページ中部のコンテンツ部分を作成する
07 ページ下部のカルーセルを実装する

■Lesson 7 Vue.jsを取り入れる
01 完成形と全体構造の確認
02 基本となるHTMLとCSSの作成
03 Vue.jsを使って写真の一覧を作成する
04 Vue.jsのプラグインでギャラリーサイト機能を追加

用語索引