【中級Ex】デザインカンプからのコーディング実践演習【HTML,CSS,JS実案件レベル】
こんにちは、フリーランスのweb制作者として活動しているしょーごです。
このページでは、中級Ex編課題について解説していきます。
中級Ex編について
複数種類よりひとつ選んでコーディングする課題
- 新卒採用サイト
- 旅館サイト
どちらか選択してコーディングしていただきます。
この課題からまた難易度がぐっと上がります(；・∀・)
この課題は「複数ページ」で構成されています
実際の案件では複数ページをコーディングすることがほとんどなので、本課題では下層ページを3枚つけました。
その他の特徴も合わせて一覧で書き出します。
- 複数ページで構成
- CSSアニメーションでの画像切替
- JavaScriptでモーダルやタブ、header制御
- JavaScriptのライブラリ使用（カレンダー）
- 頻出の和風レイアウト（縦書きCSS、ブロークングリッドなど）
- パンくずの構造化マークアップ
仕様が非常に実案件に近いので、こちらの課題を完走された方は、
「問題なくHTML,CSS,JSの案件に望める」
と思ってもらって大丈夫です👍
中級Ex以降は実績として強い
中級Ex以降はデザイン性も高いので、営業や就職・転職の際にコーディングスキルの大きなアピールになります。
ぜひみなさんにはこの先のPhotoshop編まで到達してほしいと思っています。
表示確認例
この課題は私が販売している「デザインカンプからのコーディング」の課題の一部なので、ここからコーディング課題について解説します。
デザインカンプからのコーディング課題とは？
デザインカンプからのコーディング練習課題は、実案件と同様のプロセスを経て、サイトを完成品として公開するところまで行っていただく、本格的なコーディング実践演習式課題です。
実案件では実装後に担当者のチェックが入るのが基本です。
そこで、この課題では現役エンジニアによる「2回の表示確認特典」をつけています。
また、全課題ポートフォリオとして利用OKです！！
各コーディング課題の中身
実際に制作するものは以下になります。
同梱されている課題の違い
このサイトで販売している商品は大きく3つあります。
実はnoteの方では各課題のバラ売りもしています。しかし、こちらでまとめて購入していただくことで
- バラ買いよりも大幅に安くなる（最大20%）
- 限定特典がつく（リンク先で解説）
こういったメリットを提供しています。
更に詳しい情報は以下の販売ページにまとめています！
デザインカンプからのコーディングが未経験の方はこちらから御覧ください。
＼20%オフ!!初心者から即戦力レベルまで一気に!!／
すでにデザインカンプからのコーディング経験がある方は、以下を御覧ください。
＼15%オフ!!実務即戦力レベルまで一気に!!／
デザインカンプからのコーディング経験が3件以上あって、ポートフォリオを充実させたい強者は以下を御覧ください。
＼10%オフ!!即戦力レベルのみ効率よく揃える!!／
