ゆるけーのポートフォリオサイトはこちら

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

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

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

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

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

すべて準備しています。

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

 

せっかくなので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でコーディングした勢いで引き続きコーディングを実装してきましょう。引き続き問い合わせ機能自体はダミーで大丈夫です。デザインカンプ(Fig...

 

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

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

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

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

 

最後に

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

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

それでは。

コメント

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