【実践】模写コーディングのやり方 | HTML & CSS | Coding

こんにちは😊♪
今回はサイトの模写コーディングにチャレンジしました。

Youtubeのトップページのコーディングをしていて、コーディングの流れやコードの組み方などの参考になれば幸いです🙇‍♂️❗️

🎥 NEXT VIDEO!!
次の模写コーディング動画はこちら
   • 【実況】模写コーディングの決定版！やり方・手順・勉強方法 / 初心者や入門...  

0:00　オープニング
0:48　基本ルール
2:07　模写コーディングスタート
4:37　レイアウトを組む
5:55　ヘッダー(header)を組む
10:35　サイドバー(aside.sidebar)を組む
15:16　サイドバーのリスト
16:47　【ポイント】テキストとアイコンの並べ方
24:05　ヘッダーの詳細を組む
28:30　メイン(main)を組む
33:12　【ポイント】サムネイル画像比率保持
40:00　エンディング


⭐️ 自分でWebサイト作ってみませんか？ ⭐️
誰でも、できる！Webサイト公開の流れ！
   • 【10分でサイト公開】誰でもできる！Webサイト公開の流れ！  


✅ご視聴いただきありがとうございます🙇‍♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️

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

◆ Twitter. ツイッター
  / hirocodeweb  

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


🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
---- マウス ----
【 ロジクール アドバンスド ワイヤレスマウス 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...  
----------------------------------------------------------