【中級Ex】デザインカンプからのコーディング実践演習【HTML,CSS,JS実案件レベル】

デザインカンプからのコーディング課題の中級Exに課題を追加しました

こんにちは、フリーランスのweb制作者として活動しているしょーごです。

このページでは、中級Ex編課題について解説していきます。

中級Ex編について

複数種類よりひとつ選んでコーディングする課題

デザインカンプからのコーディング課題 中級Ex
  1. 新卒採用サイト
  2. 旅館サイト

どちらか選択してコーディングしていただきます。

コーディング課題

この課題からまた難易度がぐっと上がります(;・∀・)

この課題は「複数ページ」で構成されています

デザインカンプはPCサイズのものだけになりますが、その代わり難関箇所のレスポンシブの仕方などは表示サンプルや完走者の実装例などを用意しています。

デザインカンプからのコーディング課題
新卒採用サイト
コーディング課題
旅館サイト

実際の案件では複数ページをコーディングすることがほとんどなので、本課題では下層ページを3枚つけました。

その他の特徴も合わせて一覧で書き出します。

  • 複数ページで構成
  • CSSアニメーションでの画像切替
  • JavaScriptでモーダルやタブ、header制御
  • JavaScriptのライブラリ使用(カレンダー)
  • 頻出の和風レイアウト(縦書きCSS、ブロークングリッドなど)
  • パンくずの構造化マークアップ

仕様が非常に実案件に近いので、こちらの課題を完走された方は、

問題なくHTML,CSS,JSの案件に望める

と思ってもらって大丈夫です👍

中級Ex以降は実績として強い

中級Ex以降はデザイン性も高いので、営業や就職・転職の際にコーディングスキルの大きなアピールになります。

ぜひみなさんにはこの先のPhotoshop編まで到達してほしいと思っています。

表示確認例

コーディング課題
しょーご

この課題は私が販売している「デザインカンプからのコーディング」の課題の一部なので、ここからコーディング課題について解説します。

デザインカンプからのコーディング課題とは?

デザインカンプからのコーディング練習課題は、実案件と同様のプロセスを経て、サイトを完成品として公開するところまで行っていただく、本格的なコーディング実践演習式課題です。

デザインカンプからのコーディング課題

実案件では実装後に担当者のチェックが入るのが基本です。

そこで、この課題では現役エンジニアによる「2回の表示確認特典」をつけています。

コーディング課題

また、全課題ポートフォリオとして利用OKです!!

各コーディング課題の中身

実際に制作するものは以下になります。

購入された商品により、同梱される課題が異なります。

コーディング練習 デザインカンプ
デザインカンプからのコーディング課題
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
デザインカンプからのコーディング課題
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
初級編イメージ
初級編その2
初級Exイメージ
中級イメージ
中級編【蓼科ごとう農園】
中級Exイメージ
中級Ex採用サイトイメージ
【2024年改定】上級イメージ
Photoshop編イメージ
previous arrow
next arrow
 

同梱されている課題の違い

このサイトで販売している商品は大きく3つあります。

  1. 全部盛り→全ての課題を同梱
  2. 中級以上→中級以上の課題を同梱
  3. 即戦力編→中級Ex、上級、Photoshop編を同梱
デザインカンプからのコーディング課題

実はnoteの方では各課題のバラ売りもしています。しかし、こちらでまとめて購入していただくことで

  • バラ買いよりも大幅に安くなる(最大20%)
  • 限定特典がつく(リンク先で解説)

こういったメリットを提供しています。

しょーご

更に詳しい情報は以下の販売ページにまとめています!

デザインカンプからのコーディングが未経験の方はこちらから御覧ください。

\20%オフ!!初心者から即戦力レベルまで一気に!!/

すでにデザインカンプからのコーディング経験がある方は、以下を御覧ください。

\15%オフ!!実務即戦力レベルまで一気に!!/

デザインカンプからのコーディング経験が3件以上あって、ポートフォリオを充実させたい強者は以下を御覧ください。

\10%オフ!!即戦力レベルのみ効率よく揃える!!/

});