【コーディング課題】XDからコーディングをしよう【中級編】

未経験からWebデザイナーを目指している方向けにコーディング課題を作成したよ!チャレンジしてみてね★

このようなデザインカンプを配布しています。

コーディング課題は初級・中級・上級の3つのレベルを用意しています。
ぜひチャレンジしてみてください😊

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

この中級編は、PorgateでHTML/CSS、jQueryを学習し、クリスタコーディング課題の初級編を終えられた方を想定した難易度で作成しています。

このレベルのコーディングをささっとできるようになると、実務ができるレベルだと思っていただいて問題ないかと👍

課題データのダウンロード

課題のデザインカンプはこちらのリンクからダウンロードしてください。

回答を見ながら写経したい方は以下の解説記事をご覧ください。
今回は動画での解説を用意しているので、実際にコーディングをしながら口頭で全て解説しています😊

【コーディング課題 〜中級編〜】解説記事

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

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

  • カンプからのコーディングと明記すること!
  • 作品ページに当記事のURLを記載(任意)
  • コードの改変、デザインの変更は自由に行なってOK!

ハッシュタグで繋がろう!

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

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

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

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

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

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

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

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

5 COMMENTS

未経験からコーディングを10サイトするまでのポイント|クリスタ

[…] XDからコーディングをしよう【中級編】 […]

返信する
saoriogata

初めまして。こんにちは。

ものすご〜く素敵な学習サイトと動画とファイル配布をありがとうございます!

コーディングができないまま、数年が経過して、諦めていたところでした。
動画を再生と停止を繰り返し、初級からようやく中級編のコンタクトページまでカタカタ打ちまして、完成させることができました。

まだまだデザインカンプからゼロベースでマークアップして、スタイルを当てたり、Javascriptまで構築するなんてハードルが高くて泣きそうです。
(クリ★スタ様のスキルの高さに感動です)

実は気になったことがあり、コメントさせていただきました。
なぜだか分からないのですが、コンタクトページのバーガーメニューが、トップページのように展開しなかったのです。

解決策としては、トップページ のindex.htmlでの閉じタグの直前で

こちらの3行読み込んでいますが

contact.htmlでも同じようにの閉じタグの直前に

を読み込ませました。
(もちろん、jsフォルダは階層が違うので../として合わせました)
すると、メニューが展開いたします。

一安心と言ったところですが、配布してくださっているcontact.htmlファイルにもの記述がないと動かないと思います。。。。。

なぜかはわかりません。
余計なことを言っているのかもしれません。
ご迷惑だったらすみません。スルーして下さいね!

まずは、お礼もお伝えしたくて、コメントいたしました。
おかげさまでコーディングがさらに好きになりました。

言われたとおりに手を動かしているだけの私がぐったり疲れちゃいましたが
実況しながらコーディングされて、完成度高く仕上げて下さって、さらに動画までアップされて、お疲れでしょう笑(*˘˘*)
もしかして【コーディング課題中級編】⑤コンタクトページのコーディング11分30秒辺りで欠伸しちゃいました!?(また余計なお世話、すみません)

ほんとにありがとうございます♪
私も、就活含めしっかり頑張ろうと思います。

返信する

コメントを残す

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

CAPTCHA