【実況】模写コーディングの決定版！やり方・手順・勉強方法 / 初心者や入門者が意識すべき点や効率的な進め方などを解説！

今回は、Airbnbの模写コーディングを実況解説しました😊❗️
コーディングをする際に意識すべき点や、効率的に要素を共通化して管理する書き方なども説明しています😊🎵

---- この動画の構成 ----
0:50　画面表示について
1:51　SASSについて
3:43　HTMLを書いていく
4:19　Emmetについて
4:55　.container（コンテナ）について
5:51　クラス名について
6:05　ヘッダーを組む（HTML）
7:59　ヘッダーを組む（CSS）
10:18　フッターを組む（HTML）
11:55　レイアウト・パーツについて
12:46　フッターを組む（CSS）
14:20　コーディングで意識した方が良いこと
14:58　メインの要素を書く
16:06　共通セクション（.p-home__section）
16:53　メインビジュアルを組む
17:10　.containerの使い分け
17:34　.p-home__section
18:14　パーツ作り
18:19　パーツ作り（.c-text）
19:55　パーツ作り（.c-description）
20:41　パーツ作り（.c-button）
21:50　【 ※重要 】パーツ作り（.c-image）
23:16　パーツを使って組んでいく
23:37　セレクタ指定・クラス指定の違い
24:31　写真のリストを組む（.p-cardList）
27:11　.p-cardListを共通で使う
28:20　【 ※重要 】マージンをどちらに当てるか問題
29:18　画像+テキストのリスト（.p-areaList）
32:07　ボックス型エリア（.p-box）
33:35　ボタンのパターン作り
34:56　写真を入れてみる
35:36　写真の上にテキストを乗せるケース
36:03　擬似要素でグラデーションのレイヤーを作る
37:37　メインビジュアルを組む
38:06　ボタンのパターン作り2
38:58　ヘッダーのナビゲーション

📁 動画で使用したファイル 📁
https://www.craft.do/s/ym2RS2ZL1xNbg2

この動画が気に入っていただけたら、ぜひチャンネル登録よろしくお願いします🙇‍♂️❗️
その他のSNSもフォローいただけたら嬉しいです❗️

◆ チャンネル登録
http://www.youtube.com/hirocode?sub_c...

◆ Twitter. ツイッター
  / hirocodeweb  

◆ Instagram. インスタグラム
  / hirocodeweb  

◆ ROOM. 楽天ルーム
https://room.rakuten.co.jp/hirocode/


🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
---- マウス ----
【 ロジクール アドバンスド ワイヤレスマウス MX Master 3 】
https://amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "

---- キーボード ----
【 ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS 】
https://amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "

---- パソコン ----
【 Apple Macbook Pro 16inch 】
https://amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "

---- 周辺機器 ----
【 Apple AirPods Pro 】
https://amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。

【 Apple iPad Pro 11インチ 】
https://amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "


📕 おすすめ書籍 📕
---- デザイン 基礎編 ----
【 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 】
https://amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "

【 なるほどデザイン 】
https://amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "

---- デザイン 思考編 ----
【 誰のためのデザイン？ 】
https://amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "

【 IAシンキング Web制作者・担当者のためのIA思考術 】
https://amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "

---- 書籍デバイス ----
【 キンドルペーパーホワイト Kindle Paperwhite 】
https://amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。


🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link:    • Happy Children Background Music / Joy...  
----------------------------------------------------------