Web制作勉強方法

デザインカンプからのコーディング課題中級に「農園サイト課題」を追加しました

デザインカンプからのコーディング中級課題
本ページにはプロモーションが含まれています。

今回は「【中級】デザインカンプからのコーディング実践演習【JavaScript導入】」に新課題の「架空農園サイト」を追加したので、紹介です。

中級課題は課題数が複数に

これまで中級課題は「ユアコーディング」という架空のサービスサイトのみでしたが、作ってから日が経っていたのもあり、より今風の、全く違う形の新しい課題を作ることにしました。

しょーご

ポートフォリオの被りを無くしていきたいと思っています。

Figmaデザインで作成

Adobe XDとFigmaの命運はわからないですが、XDの雲行きが怪しいのがそもそもの始まりで、新規デザインを基本的に今後はFigmaで作っていこうと思い、Figmaデザインにしました。

Figmaからのコーディング方法についても解説していますが、とても直感的でコーダー的にはありがたく、デザインシステムに是非採用してほしいツールです。

スマホファーストビューのデザインあり

これまではあえてPCデザインしか用意していなかったのですが、まだレスポンシブが不慣れな時期にそれをさせるのも酷だと思い、

道筋を示すために、ファーストビューのみスマホデザインも載せています。

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

両方コーディング可能だが、無料レビューは一つ(2つ目は有料)

  • 中級課題を購入してこれから取り組む人
  • 既にユアコーディングをクリアしている人

両者ともにコーディングは両方行っていただけます。

コーディング中級課題の解説、2つの違い

ただ、両方ともレビュー可能にしてしまうと、私の工数が死んでしまうので、今回有償で二作品目のレビューを受けることにしました。

以下のボタンからレビュー価格を見ることができます。

正直破格すぎて、時給的にはマイナスになりかけではあるのですが、私は

  • プロからきちんとレビューが受けられる、コーディング課題
  • レビューを受けているので、ポートフォリオで自信を持ってアピールできる

これを目指していて、また強みであると思っているので、レビューをつけないのはありえないと思い、リリースしました。

農園サイトの方が、難しい、しかし、作っていて楽しい

JavaScriptが絡む部分はこんな感じ。

  • ハンバーガーメニュー実装(ユアコーディングにもある)
  • アコーディオン実装(ユアコーディングにもある)
  • Swiperでスライド実装(ユアコーディングにもある)
  • フォームの入力チェック(ユアコーディングにもある)
  • ページ内リンクスムーススクロール(ユアコーディングにもある)
  • ローディング画面実装(農園サイトのみ)

農園サイトの全体像はこんな感じ。

デザインカンプからのコーディング中級課題
  • 画像の配置をあえてトリッキーにしていたり、
  • フォームの入力項目が少し多かったり
  • レスポンシブが少し複雑だったり

既存のユアコーディングより骨が折れる課題になったかと思います。

しかし、今回「架空だけど、テーマを身近に感じられて、作っていて楽しくて、ポートフォリオとしても映える課題」を意識したので、結構自信作です笑

コーディング課題にありがちな「よくわからない興味ないサイト」を作るのは結構味気なくてつまらないので、

私の課題はなるべく「本当にあるかのようなサイトデザイン」を意識しています。

しょーご

とは言え、難しいのは事実なので、今後動画解説を追加していく予定です。

ブログ版がおすすめ

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

この課題は単体購入が可能ですが、ブログ版でまとめて購入が一番お得になるようにしているので、興味があれば以下より取り組んでみてください。

投げ銭機能を設置しました!

寄付とメッセージには全て目を通させていただきます!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!