【無料練習素材】あなたはできる？模写コーディング腕試し！
✔︎対象レベル
・Progate HTML/CSSコースは終えた方
・Progate初めて模写コーディングにトライする方
・優しめなサイト模写で腕試ししたい方
こんにちは。オンラインWebスクール「デイトラ」を運営している東京フリーランス（@TokyoFreelance）です🗼
今回はデイトラの「Web制作コース」から、無料の模写コーディング素材として課題の一部を出題します！
早速本題ですが、このキャプチャの通りに、模写コーディングできますか？
キャプチャはPC版しか載せてませんが、スマホ版も用意してあります。
対象レベルはProgateのHTML/CSSコースを終えたくらいの人！
苦労はするかもしれませんが、難しいレイアウトは一つもないので、学んだことを復習しながら進めればできるはず👍
アプトプットこそ最高のインプットであり、最も効率のいい復習になるので、ぜひ自分のHTML/CSSの基礎レベルチェックに挑戦してみてください❗️
やってみた人たちの感想を一部紹介↓
今日実際にやりましたが、
— みと📘学生エンジニアLv1 (@mito_710_1) March 1, 2020
Progate後の腕試しにピッタリです✨
レイアウトも簡単なので、
自分なりにどうやって区切るのか、
ラフ画に起こしてみるといいと思います😊#デイトラ#プログラミング初心者#駆け出しエンジニアと繋がりたいhttps://t.co/OJF4HuMUBr
#デイトラ #今日の積み上げ #駆け出しエンジニアと繋がりたい
— みちよ＠🇧🇪イケてるおババエンジニアになりたい人 (@michiyoDBK) February 19, 2020
デイトラ1stのnew模写コーディング、pc版は一応出来ました(o^^o)
レスポンシブまで、後ちょいがんばります！
ググりまくったけど、最高の練習になりました。ショーへさん、短期間で素晴らしい課題をありがとうございます😊 pic.twitter.com/b0td5nXlEG
#デイトラ 模写 Bootstepを使って完成動画です！
— ピット君🐝プログラミング (@pitto5555) February 21, 2020
音声付きでYoutubeっぽく動画を作ってみました。
需要があれば動画の作り方などもツイートしていきたいと
思っております。@showheyohtaki#駆け出しエンジニアと繋がりたい #プログラミング初心者 #プログラミング初学者 #30DAYSトライアル pic.twitter.com/fQlsUU4UYi
大枠はできた…！細かい調整がまだあるけど、レベル的にちょうどよかったなぁ。
— 楽ママ@プログラミング勉強中 (@rakurakumama3) February 24, 2020
Progateのその先、模写サイト探してる方ぜひ、おすすめです。#デイトラ #駆け出しエンジニアと繋がりたい https://t.co/APJi4V2LU1
デイトラ模写
— ﾅｦﾌﾐ▼webデザイン (@n_bass_20) February 26, 2020
なんとか3時間ちょっとでレスポンシブまでできた、、😂
もっとシンプルにコーディングできるかもしれないけど、まずは同じ見た目で作ること優先でトライ⚡️
無料素材ありがてぇ。。#デイトラ #プログラミング #駆け出しエンジニアと繋がりたい pic.twitter.com/EoLsbNhC3q
模写コーディング練習素材ダウンロード
ダウンロードはこちらから↓
内容物
pc.pngとsp.pngが見本キャプチャで、制作に使う画像はimgフォルダの中に入れてあります。
Progate以外で初めてコーディングするという方は、こちら記事のDAY8~10を先に終えてからトライしてください↓
目標：4時間で完成できたら合格です😎
（4時間で完成しなくても諦めないで！復習しながら進めましょう）
コーディングの手順＆見本のソースコードは、リニューアル後の「デイトラ」アプリの中で公開するので、3月まで楽しみにお待ちください。
挑戦結果は、ぜひ #デイトラ でツイートしてくださいね❗️
フォローとスキも待ってます👋
追記：どこから手をつければいいか分からなかったら「パーツ分け」から始めよう！
さぁコーディングするぞ！と意気込ではじめたはいいものの、ヘッダーで手が止まって撃沈...😭という人も少なくないはず。
僕も最初はそうだったので、あの絶望感たるや...お察ししますw
そういう人は、手を動かしはじめる前に「パーツ分け」から始めるといいです！
【コーディング初心者のためのTips】
— ショーヘー@Webエンジニア (@showheyohtaki) January 22, 2019
教材の手順通りのコーディングから、自力でコーディングにステップアップするための第一歩が『セクション単位でパーツ分けできるようになること』です。
✅サイトのキャプチャ取る
✅上からパーツごとに分けて赤線引く
これだけで構成力上がるのでぜひ☺️
見本👇 https://t.co/YXgI6dI9G0
↑こちらは現役マークアップエンジニアのすーさんのツイート。
全体を見ると絶対に解けないパズルのように思えたページも、パーツごとに見ればコーディングできそうな気がしませんか？
「あ、ここをブロックにして、flexboxでいけるな！」
みたいな。
ぜひやってみてください👍
※ここから先は大ヒントなので、自力でやりたい方は見ないでくださいね！
それでもよく分からんという方は、パーツ分けの見本を載せておくので見て下さい。
①〜⑥までのブロックを、一つ一つ分解して見ていきます。
①コンテンツ幅が揃ってるから.containerクラスがあるといいかもな🤔
横幅960くらいでmargin:autoにしとこう（これ気づけたらもうコーディング中級者！）
②メニューバーは.containerの中でfloatでいけそう！
③ファーストビューsectionはwidth:100％にbackground-imageで画像表示かな？その中に.containerを入れれば良さげ
④h2タイトルとwidth:50%くらいで画像とテキスト左右ならべか...。またfloatでいいかな
⑤img＋テキストの横並びブロックが3つあるからflex使うかー
⑥ここは全部中央揃えで良さげ。inputがあるからformもいるなー
ここまでできれば、もう8割は完成したも同然です❗️設計書がある状態なので、あとは図面通りに作るだけ。
このレイアウトを考える作業は、デザインカンプからコーディングする実務でも重要な力です。ぜひいまのうちから手を動かす前に「パーツ分け」をするクセを付けましょう！
いつも通勤中に見てるサイトを頭の中で分解するとかでもOK。それだけでコーディング力は爆上がりします！スキマ時間でもできる練習なので、ぜひやってみて下さい。フォローとスキ、待ってますよ❗️
もっと学びたくなった方はデイトラ「Web制作コース」もぜひ👍プログラミングスクール業界ではもちろん、オンラインスクール業界でも最安レベルです↓
それではお疲れ様でした👋