HTML/CSS

【超入門】初心者必見!模写コーディングをやってみた 実践編 Part3 レスポンシブデザイン編【HTML・CSS コーディング】

HTML/CSSの学習で定番の学習方法、「模写コーディング」のやり方、練習するときのポイントをまとめました下記の動画をもとに、実際に模写コーディングに取り組む動画の第3弾です!
【超入門】初心者向け 模写コーディング!オススメのやり方とポイント【HTML・CSS コーディング】
https://youtu.be/OH1X09Ilu9E

今回はレスポンシブデザインに挑戦しました。ご不明な点がございましたら、お気軽にご質問ください!
お手本ページのURL、ソースコード、動画内で模写したソースコードは下記からご覧ください。
画像素材等も全て配布しています!

★お手本サイトURL
https://webgodweb.com/ex/responsive/

★お手本サイト ファイル一式ダウンロードはこちらから
https://webgodweb.com/download.php?youtube=oGV1dmomUP0

★動画内で模写したソースコードの確認はこちら
https://webgodweb.com/reproduction/part3/

★「HTML5 Doctor Reset CSS」
http://html5doctor.com/html-5-reset-stylesheet/

— 「模写コーディングをやってみた 実践編」シリーズ —

↓ Part1↓
【超入門】初心者必見!模写コーディングをやってみた 実践編【HTML・CSS コーディング】
https://youtu.be/RBLkXAG4QTM

↓ Part2↓
【超入門】初心者必見!模写コーディングをやってみた 実践編 Part2【HTML・CSS コーディング】
https://youtu.be/KH-lN82sf7I

— 参考動画紹介 —

ふるさん「模写コーディングのツール6選!必須で便利なもの・コツを紹介」
https://youtu.be/6KQvGQAb4Mo
▶︎拡張機能「What Font」を紹介されています。

Hiko Proさん「【模写コーディング】やり方・メリット・おすすめのツールを紹介!【HTML/CSS】」
https://youtu.be/jWimXG1JD38
▶︎拡張機能「Perfect Pixel」を紹介されています。

— 効果音素材クレジット —
Otologic様
https://otologic.jp/

【タグ】
#Webデザイン #模写コーディング #HTML

関連記事

  1. 【超入門】もうCSSの真ん中寄せで悩まない!縦向き編【HTML・…
  2. 【超入門・初心者向け】CSSの小技シリーズ③ 便利なカウンター機…
  3. 【初心者向け】CSSの小技シリーズ① 図形(丸・矢印・三角形)の…
  4. 【超入門】作業効率爆上がり!必ず覚えておきたい超絶便利ショートカ…
  5. 【初心者向け】JavaScriptで簡単なタイピングゲームを作っ…
  6. 【初心者向け】jQueryプラグイン「slick」で簡単にスライ…
  7. 【Webデザイン初心者向け】デザインカンプからどうやってコーディ…
  8. 【超入門】何となく使ってない?ボックスモデル&box-sizin…
PAGE TOP