【デザインカンプ無料配布】未経験からのコーディング学習ステップ

クリ★スタでは、未経験からコーディングを学習している方向けにデザインカンプと解説記事を無料で配布・公開しているよ!
ぜひチャレンジしてみてね★

現在、コーディング学習をしている方でどのように学習を進めていけば良いのか迷っている方はとても多いかと思います。

僕自身もそうでした。

「progateを何周もやれば良いのか」

「本を買ってやった方が良いのか」

たくさんある学習方法にとても悩んでいました。
(僕の場合は、東京フリーランスさんのロードマップとサイト模写で合計10サイトコーディングしました)

現在は学習開始から1年以上が経過し、副業で様々な会社からお仕事を頂きWebデザイナーとして活動できるようになっています。

実際に実務でデザインやコーディングを行うようになると、学習している時にもっとデザインカンプからのコーディングをするべきだったなと思いました。 

その時に、僕も学習している人の役に立ちたいと思いデザインカンプの制作と初学者の方のために別記事で解説も行うことにしました。

一緒にやっているケインと協力して、4種類のデザインカンプと解説記事や解説動画の制作しました。

ぜひ挑戦してみてください♪

はじめてのコーディング

「はじめてのコーディング」はHTML/CSSをはじめて学ぶ方向けのコンテンツです。1からコーディングの基本をギュッと解説しています。
Progateやドットインストールとの併用もオススメです!
(全4回の連載になっています)

はじめてのコーディング① 〜事前準備編〜

コーディング課題〜初級編〜

初級編への挑戦はこちらから

初級編はこんな人におすすめ!

  • Progateの次に何をすればいいかわからない。
  • デザインカンプからのコーディングができるようになりたい。
  • 0からWebサイトをつくってみたい。

対象レベル

PorgateでHTML/CSS、jQueryを学習した方

この課題で学べること

  • XDのデザインカンプからのコーディング
  • レスポンシブコーディング
  • ハンバーガーメニューの実装方法
  • Flexboxの基本的な使い方etc…

この課題で学べないこと

  • 複数ページのディレクトリ構成
  • Webアクセシビリティに配慮したコーディング
  • CSS設計
  • 高度なアニメーションetc...
【コーディング課題】XDからコーディングをしよう【初級編】

まずは解説を見ながら模写をして力を付けるのもオススメです!

コーディング課題〜中級編〜

中級編への挑戦はこちらから

こんな人におすすめ!

  • ある程度コーディングに慣れてきたけど次に何をしたら良いかわからない
  • ポートフォリオに掲載できるサイトをコーディングしたい

対象レベル

PorgateでHTML/CSS、jQueryを学習し、クリスタコーディング課題の初級編を終えられた方。

この課題で学べること

  • XDのデザインカンプからのコーディング
  • レスポンシブコーディング
  • ハンバーガーメニューの実装方法
  • jQueryを用いたアニメーション

この課題で学べないこと

  • Webアクセシビリティに配慮したコーディング
  • CSS設計
  • 高度なアニメーションetc…
【コーディング課題】XDからコーディングをしよう【中級編】

コーディング課題〜上級編〜

上級編への挑戦はこちらから

こんな人におすすめ!

  • ある程度のレイアウトをコーディングできるようになってきた人のスキルアップに!
  • ポートフォリオに掲載できるサイトをコーディングしたい方に!

対象レベル

クリ★スタコーディング課題の初級編中級編を終えられた方。

(※もちろん上記以外の方のチャレンジも大歓迎です👍)

この課題で学べること

  • XDのデザインカンプからのコーディング
  • レスポンシブコーディング
  • ハンバーガーメニューの実装方法
  • jQueryを用いたアニメーション
  • コンタクトフォームのコーディング方法

この課題で学べないこと

  • Webアクセシビリティに配慮したコーディング
  • CSS設計
  • 高度なアニメーションetc…
【コーディング課題】XDからコーディングをしよう【上級編】

特典

ポートフォリオに使用可能です!!!

以下のルールに沿って、ポートフォリオに掲載OKです!

  • カンプからのコーディングとして使用
  • 作品ページに当記事のURLを記載(任意)
  • コードの改変、デザインの変更は自由に行ってください

ハッシュタグでつながろう

クリ★スタはWebデザイン勉強中の方を応援しています!

クリ★スタの課題を活用する方用にハッシュタグを用意しました!課題に挑戦する方、やり終えた方、その他質問や感想などを「#クリスタチャレンジ」のハッシュタグをつけてツイートしてくれた方には、リツイートしに行きます!!

ハッシュタグを使用する際は、以下の3点をツイートすることをおすすめします。学習記録として残しておきましょう★

  • 制作物のキャプチャやgifアニメーション
  • 学んだこと、工夫したこと
  • 課題のURL

Webデザイン勉強中のみんなで繋がりましょ〜☆

この記事がいいと思ってくださった方は、SNSでのシェアをお願いします![addthis tool="addthis_inline_share_toolbox_mqi1"]

Youtubeでは動画学習コンテンツを配信しています!

 動画での学習は、テキストでの学習の3倍以上の効果を得られると言われています。そのため、クリスタでは、初学者の方に効果的な学習をして頂くためにYoutubeで学習コンテンツを提供しています。

 ぜひチャンネル登録お願いします→クリ★スタYoutubeチャンネル

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA