実際にコーディングしてみよう

私が作ったカンプをもとにコーディングの練習をしていきましょう。
動画は10分単位で足早に説明していますが今回覚えるべきcssのプロパティはたったの3つだけです。
この三つを覚えれば自分のデザインを再現するために要素を自由自在に配置することができるので頑張りましょう。 codingする際はスマホで動画を流してPCで実際に作業してみてください。
動画の流れは以下になります。
・HTMLの要素について再認識する(要素とは何か)
・デザインカンプからHTMLへ書き出す際の考え方(セクションの区分けなど)
・Figmaからの画像データの書き出し方
・cssスタイリング HTMLへの書き出し方法(4本)座学 vscodeでhtmlの記述とcssでのスタイリングをざっくり伴走:(8本)
クリックでimgファイルのダウンロード

カンプからHTMLへの考え方(4本)

HTML1

HTML2

HTML3

HTML4

Figmaから画像の書き出し

vscodeを使ってコーディング

coding1

coding2

coding3

coding4

coding5

coding6

coding7

coding8

©masahikoaoki