CSSコーディングが上手くなりたいという方にスクールの勉強会の一部を動画でアップしました。
参考なれば嬉しいです。
Webサイトを作る時、コーディングに入る前に根本的なデザイン(設計)のプロセスが大事だよ・・・という話から、ワイヤーフレーム・デザインカンプ・CSSコーディングに取り掛かるまでの流れがわかるようになっています。
設計部分は、参加メンバー全員で意見を出しあいながら、キャッチコピーや掲載内容、配置の順番を決めていきました。
実案件はもちろん、例え、練習用のサイトでも、一番大事なのは「設計」です。
【Webデザイン勉強会一部チラ見せ】
仮案件:セミナーページ制作 ワイヤーフレームからのHTML・CSSコーディング(15分18秒)
以上、勉強会の一部をご紹介しました。
動画は15分ですが実際の勉強会は2時間越え。
1時間で終わる予定でしたが、しっかりとガチでCSSのコーディングをすると、はやり時間がかかりますね。
想定外に時間配分が延長してしまいましたが、このあたり、調整しつつも内容重視でこれからも勉強会を開催していきますよー!
【Webデザイン勉強会内容紹介】
- 根本的なデザイン(設計)のプロセス
- HTML5マークアップの考え方
- HTML・CSSコーディングの基本
- HTML・CSSコーディング力アップの順番
- HTML・CSSのエラー修正
- Flexboxの基本と応用
- Webアイコンフォント Font Awesomeの利用方法
- TableのCSS
- 使い回しを考えたフォームボタンのCSSスタイル
- 画像をどうマークアップするか?
・・などなど。
HTML・CSSコーディング力アップの順番としては、動画で説明している通り、Webサイトの大枠(レイアウトに関わる部分)から指定していき、徐々に細かい部分の指定をしていくと効率よくコーディングが進みますよ。