見出し画像

【無料練習素材】あなたはできる?模写コーディング腕試し!

✔︎対象レベル
・Progate HTML/CSSコースは終えた方
・Progate初めて模写コーディングにトライする方
・優しめなサイト模写で腕試ししたい方

こんにちは。オンラインWebスクール「デイトラ」を運営している東京フリーランス(@TokyoFreelance)です🗼

今回はデイトラの「Web制作コース」から、無料の模写コーディング素材として課題の一部を出題します!

早速本題ですが、このキャプチャの通りに、模写コーディングできますか?

画像1

キャプチャはPC版しか載せてませんが、スマホ版も用意してあります。

対象レベルはProgateのHTML/CSSコースを終えたくらいの人

苦労はするかもしれませんが、難しいレイアウトは一つもないので、学んだことを復習しながら進めればできるはず👍

アプトプットこそ最高のインプットであり、最も効率のいい復習になるので、ぜひ自分のHTML/CSSの基礎レベルチェックに挑戦してみてください❗️

やってみた人たちの感想を一部紹介↓


模写コーディング練習素材ダウンロード

ダウンロードはこちらから↓

内容物

スクリーンショット 2020-02-19 2.30.11

pc.pngとsp.pngが見本キャプチャで、制作に使う画像はimgフォルダの中に入れてあります。

スクリーンショット 2020-02-19 2.19.45

Progate以外で初めてコーディングするという方は、こちら記事のDAY8~10を先に終えてからトライしてください↓

目標:4時間で完成できたら合格です😎
(4時間で完成しなくても諦めないで!復習しながら進めましょう)

コーディングの手順&見本のソースコードは、リニューアル後の「デイトラ」アプリの中で公開するので、3月まで楽しみにお待ちください。

挑戦結果は、ぜひ #デイトラ でツイートしてくださいね❗️

フォローとスキも待ってます👋


追記:どこから手をつければいいか分からなかったら「パーツ分け」から始めよう!

さぁコーディングするぞ!と意気込ではじめたはいいものの、ヘッダーで手が止まって撃沈...😭という人も少なくないはず。

僕も最初はそうだったので、あの絶望感たるや...お察ししますw

そういう人は、手を動かしはじめる前に「パーツ分け」から始めるといいです!

↑こちらは現役マークアップエンジニアのすーさんのツイート。

全体を見ると絶対に解けないパズルのように思えたページも、パーツごとに見ればコーディングできそうな気がしませんか?

「あ、ここをブロックにして、flexboxでいけるな!」

みたいな。

ぜひやってみてください👍


※ここから先は大ヒントなので、自力でやりたい方は見ないでくださいね!

それでもよく分からんという方は、パーツ分けの見本を載せておくので見て下さい。

FireShot_Capture_165_-_30DAYSトライアル_-_http___127_0_0_1_5500_index_html__1_-2 (1)

①〜⑥までのブロックを、一つ一つ分解して見ていきます。

①コンテンツ幅が揃ってるから.containerクラスがあるといいかもな🤔
横幅960くらいでmargin:autoにしとこう(これ気づけたらもうコーディング中級者!)
②メニューバーは.containerの中でfloatでいけそう!
③ファーストビューsectionはwidth:100%にbackground-imageで画像表示かな?その中に.containerを入れれば良さげ
④h2タイトルとwidth:50%くらいで画像とテキスト左右ならべか...。またfloatでいいかな
⑤img+テキストの横並びブロックが3つあるからflex使うかー
⑥ここは全部中央揃えで良さげ。inputがあるからformもいるなー

ここまでできれば、もう8割は完成したも同然です❗️設計書がある状態なので、あとは図面通りに作るだけ。

このレイアウトを考える作業は、デザインカンプからコーディングする実務でも重要な力です。ぜひいまのうちから手を動かす前に「パーツ分け」をするクセを付けましょう!

いつも通勤中に見てるサイトを頭の中で分解するとかでもOK。それだけでコーディング力は爆上がりします!スキマ時間でもできる練習なので、ぜひやってみて下さい。フォローとスキ、待ってますよ❗️

もっと学びたくなった方はデイトラ「Web制作コース」もぜひ👍プログラミングスクール業界ではもちろん、オンラインスクール業界でも最安レベルです↓

それではお疲れ様でした👋

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
やったー\(^o^)/
670
フリーランスの羅針盤となるメディア『東京フリーランス』公式アカ。▶︎ 一線で活躍するフリーランスへのインタビュー / プログラミング等の学習コンテンツ / 現役弁護士による法律アドバイスなどを配信しています。