【無料】Figmaのデザインカンプからコーディングに取り組んでみよう

コーディング課題
この記事は約3分で読めます。
  • Progateで勉強してみたけど、そこから何を勉強すればいいかわからない…。
  • Figmaのデザインカンプからコーディングするイメージが湧かない…。
  • サイトのコーディングの量をとにかくこなしたい…。

コーディングの勉強やデザインカンプからコーディングしている方向けに、Figmaのカンプからコーディングできるコーディング課題をつくってみました。

コーディングの練習・勉強に必要な

  • Figmaのデザインカンプ
  • デモサイト
  • ソースコードの一例

すべて準備しています。

ぜひ、コーディングの練習・学習にお役立ててみてください。

一応それぞれが作成したサイトについてはポートフォリオとして掲載しても問題ありません。

ただ、学習サイトや書籍を用いて制作した場合は、実務ではない旨・学習課題として取り組んだ旨を記載しないと後々案件先企業とのトラブルになる恐れがあるのでお気をつけください!
(そのあたりは自己責任でお願いします)

あと任意項目ですが当サイト名やURLなどもポートフォリオに記載してもらえるとありがたいです!(必須ではありません。)

 

せっかくなのでTwitterでコーディング課題に取り組むのを宣言してみましょう!

コーディング課題01:HTMLの構造理解

まずは、実務ではやることがないですがワイヤーフレームをコーディングしてみて、HTMLの構造やCSSで骨組みを組み立てるイメージをつけてみましょう。

【無料】(コーディング課題01)ワイヤーフレームをコーディングしよう
制作するサイトの情報まずはHTML/CSSの一歩目としてほぼワイヤーフレームの状態のものをコーディングしてみましょう。実際にワイヤーフレームをコーディングすることはありませんが、WEBサイトの骨組みをつくるという発想ではいい勉強になるかと思...

 

コーディング課題02:CSSの実装理解

コーディング課題01でつくったワイヤーフレームをもとにニュースアプリのLPをコーディングしてみましょう。

【無料】(コーディング課題02)ニュースアプリのLPをコーディングしよう
制作するサイトの情報コーディング課題01でコーディングしたワイヤーフレームをもとにニュースアプリのランディングページをコーディングしてみましょう。骨組みのイメージはつかめているかと思うので、それをベースに作成していきましょう。デザインカンプ...

 

コーディング課題03:量をこなす

コーディングの量をこなすべく、うどん屋のペライチもののサイトをコーディングしてみましょう。

【無料】(コーディング課題03)うどん屋のサイトをコーディングしよう
制作するサイトの情報コーディング課題02でニュースアプリでコーディングのイメージが何となくわかってきたら、量をこなすということでうどん屋の1枚もののホームページをつくってみましょう。構造となる骨組みの部分はほとんど今までのコーディング課題と...

 

コーディング課題04:バリエーションを増やす

コーディング課題03までは白や灰色ベースでしたが、今回は青色ベースのランディングページになります。バリエーションを増やすためにもぜひ取り組んでみてください。

【無料】(コーディング課題04)コンサルタントのLPをコーディングしよう
制作するサイトの情報コーディング課題02やコーディング課題03でコーディングした勢いで引き続きコーディングを実装してきましょう。引き続き問い合わせ機能自体はダミーで大丈夫です。デザインカンプ(Figma)デザインカンプをもとにコーディングし...

 

コーディング課題05:コーディングに慣れる

簡単なコーポレートサイトをコーディングしてみましょう。

背景画像固定やネガティブマージンなども使ってCSSに慣れていきましょう。ちなみにJavaScriptやjQueryは不要です。

【無料】(コーディング課題05)会社のホームページをコーディングしよう
制作するサイトの情報白を基調としたコーポレートサイトのコーディングをしてみましょう。今回もJavaScriptやjQuery不要でコーディングできます。デザインカンプ(Figma)デザインカンプをもとにコーディングしていきましょう。カンプは...

 

最後に

コーディングが一通り終わったらこちらで学習完了報告をしてみましょう。

質問はぜひブログのコメント機能からお気軽に質問してくださいー。
それでは。

コメント

  1. コーダーを目指しています。
    デザインは貴方様が作成したと記載してコーディングしたものをポートフォリオをのせることは可能でしょうか?

    • コメントありがとうございます!
      はい、ポートフォリオに掲載しても問題ありません。
      念のため、実務ではなく学習課題である旨もあわせて記載するのをおすすめします。
      (そのあたりは自己責任でお願いします)

      あと任意ですが当サイト名やURLなどもポートフォリオに記載してもらえるとありがたいです!(必須ではありません)

      コーダーになれるよう応援しております!
      ぜひ嬉しい報告お待ちしておりますー!

      • ありがとうございます!
        学習課題であることを記載したいと思います。
        サイト名やURLも載せる予定にしています。

        がんばります!!

タイトルとURLをコピーしました