【完全無料-回答コード有り-】デザインカンプからのコーディング練習【超初級編】

くりのすけです。

デザインカンプからのコーディング練習シリーズの超初級編です。

これまで初級編、中級編①、②と公開していますが、今回は超初級編としまして、Progateを終えた方に丁度良さそうなレベルのものを用意いたしました。
とは言ってもやってみたら、結構難しいかもしれません。

今回は完全無料とさせていただきますので、腕試しとしてぜひチャレンジしてみてください！！

どんなサイトを作るかと言いますと

PC

タブレット

SP

ハンバーガーメニュー表示時

すみません。完全に自分のnoteの宣伝のサイトになってますが。。

作成するサイトに関してはこんな感じです。
所々、難しい箇所があるかもしれませんが、やりきるとスキルが上がっているかと思います。

sample.zip

5742287 Bytes

ファイルダウンロードについて

ダウンロード

今回は、「sample」というフォルダの中に、画像のデザインカンプと空のhtmlファイル、cssファイルを用意しました。各画像は用意しています。
また、テキスト原稿も用意していますので、コピペしてください。

※カンプのnote一覧の内容と現在実際に販売されているnoteの内容や値段などが異っていますが、ご了承ください。

さらに今回は、回答用のサンプルコードがあります。
レスポンシブ対応、ハンバーガーメニューも対応しています。
申し訳ありません、解説はありません。

▼ サンプルコード

sample_answer.zip

346586 Bytes

ファイルダウンロードについて

ダウンロード

いきなり、答えを見ながら写経するのも良いですが、まずは自力でトライしてみてくださいね。　※ハンバーガーメニューはコピペで構いません。

模写が難しいときは、サンプルコードを見てくださいね！

では、頑張ってください！！

こちらのnoteの内容が、初学者に良い内容であればシェアをお願い致します^^