Web業界で生き残る フリーランス Webデザイナーになる方法を50代のWebデザイナーが切り込みます!

スキルチェック・自己分析シート無料配布中!
スキルチェック・自己分析シート無料配布中!

CSSの練習に!仮案件:セミナーページ制作 ワイヤーフレームからのHTML・CSSコーディング(動画あり 15分18秒)

CSSの練習に!仮案件:セミナーページ制作 ワイヤーフレームからのHTML・CSSコーディング(動画あり 15分18秒)

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サイトの大枠(レイアウトに関わる部分)から指定していき、徐々に細かい部分の指定をしていくと効率よくコーディングが進みますよ。

この記事が気に入ったら
いいね ! しよう

Pocket
LINEで送る

関連記事

この記事を書いた人

Tomoko Fukumoto

50代のフリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。

無料メール講座

  • フリーランスWebデザイナーになるメール講座 スキルチェック・自己分析シート無料配布中!

体験型スクール&コミュニティ

  • Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ Webクリエイターズオンラインスクール

アーカイブ

スキルチェック&自己分析シート 限定無料配布中!

Webデザインの実力をつけて仕事にする!
自分の力で生きて行きたいあなたへ

Webデザインのスキルを収入にするフリーランス向け無料メール講座。

リアルにどんな考えで、どんな情報を重点的に集め、
具体的にどう動けば、Web業界で生き残る、安定した収入を得られる、

フリーランスWebデザイナーになれるのか?

あなたが、その方法を得られる内容になっています。
登録された方には、スキルチェック&自己分析シートをプレゼント中です!

メール講座登録フォームはこちら