おためし受講中

プロデザイナーが実践するHTML&CSSスキル向上トレーニングvol.3

「HTMLとCSSの基礎知識はあるけど、その知識をどう応用したらいいのかわからない」
「実際にWebページをコーディングしようとすると指が動かない」

この授業は、こんな悩みを抱えている方におすすめです。

私が本格的にHTMLとCSSを学び始めたのは、2013年の4月から。冒頭に書いた悩みは、初めてWebページを作成しようとした時に私も抱いていました。

そこで、HTMLとCSSスキルを向上させるために始めたのが、今回ご紹介する「HTMLスケッチ」です。
本授業では、実在するWebページをHTMLとCSSを使って自らの手で再現するこの手法を実際に授業で行います。ライブコーディングを見ることでページの構造や成り立ちを理解でき、より実践的な知識に進歩させる一助になるのではないかと考えております。

授業では、Webサイトを題材にしてコーディングのポイントを解説する他、私が実際に使っているショートカットやプラグイン、ツールについてもご紹介する予定です。

新人ならではの視点を活かしてお話しすることで、同じような悩みを持っている方のコーディングスキル向上に少しでも参考になれば幸いです。

学生代表

  • 未定

    未定

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    01:08  (00:12 ~ )
    デザインスケッチをするページ紹介
    01:00  (01:20 ~ )
    メインエリアのコーディング
    17:25  (02:20 ~ )
    Font Awesome
    17:10  (19:45 ~ )
    タブをコーディング
    17:52  (36:55 ~ )
    ページ右側をコーディング
    14:43  (54:47 ~ )
    【後半】質疑応答
    Q:今の画面は事前にどこかでダウンロードできるんですか?
    01:35  (1:10:15 ~ )
    Q:flont解除の方法のうち、今後の傾向としてどれを選択するのが良いと思われますか?
    04:25  (1:11:50 ~ )
    Q:iタグを普段使わないでspanの方を使っているのですが、iタグの方が文法的には正しいのでしょうか?
    01:03  (1:16:15 ~ )
    Q:先生の師匠はどんな方で、コーディングは神速ですか?
    01:50  (1:17:18 ~ )
    Q:「-webkit-gradient」で各ブラウザ対応OK?
    01:47  (1:19:08 ~ )
    Q:文字サイズとpaddingはpx指定がメジャー?
    01:05  (1:20:55 ~ )
    Q:ValidatorはW3Cですか?
    02:11  (1:22:00 ~ )
    Q:先生の使っているMacのOSは何ですか?
    00:40  (1:24:11 ~ )
    Q:スケッチの対象とするサイトで使われているフォントを、どのように調べて使用されていますか?
    02:21  (1:24:51 ~ )
    Q:rightにあるアイコンたちが縦に並んでいるのは、コピペでやりましたか?
    01:14  (1:27:12 ~ )
    課題発表
      (1:28:26 ~ )

    生放送授業への参加は無料です
    Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
    ×