コーディング録画してみた。

こんにちは。

ゆーへーです。
今回のnoteはコーディング風景がみたい！！って前言われたので、キャプチャーしてみました。

キャプチャーソフトは、Filmoraってソフトです。有料ですが使いやすくて良かったです。

今回コーディングしたのは、こちら▼

きいたところによると、progate終えた人がこれを作ると、コーディングにかかる時間がだいたい5日～2週間程度らしい。

ちなみに僕はゆっくり作って45分程度でした。
はやい人はもっと早いと思う。

こんな方向けです。

・Progateが終わったら何をやったらいいの？
・ちょうどいいレベルでいいサイトないかな？
・せっかく作るならポートフォリオに載せたいな

■動画はこちら

音声は、ありませんが字幕いれてもらったらちょっとだけコメントしてます。

まぁこのHTMLで合ってるかどうかって言われると他にも良い書き方があるのかもしれないけど、動作も問題ないしエラーも出てないのでOK。

■早くコーディングするコツ

・コーディングの順番を意識する。
　①HTMLを書く
　②クラス名を入れる（HTML書くと同時に）
　③CSSを書く
　④ブラウザ確認しながら完成度を高めていく

①のHTMLを書くは、デザインのデータみたらだいたいわかると思う。
②のクラス名は、自分のよく使うクラス名を決めておいてそれを書く。
　例えば、flexboxはflex_box。
　レイアウトのクラス名なら、col-sm-6 col-xs-12など
　（これはbootstrapの名前のつけ方）
　※bootstrapは使いません。

まぁこんな感じで、名前も決めておけばコーディングも早くなります。
最後におかしくなってないかブラウザチェックして完了です。

お好みでJqueryで、スムーススクロールいれたり、画像のポップアップとか入れたら良いと思います。