→ 11/26(金)までAdobe製品「36%OFF」の特大SALE中!Adobe記事一覧はこちらから!

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

PENGIN
PENGIN

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

こんな感じのデザインデータを配布してます☆

以下の記事でコーディングの学習ステップを紹介しています!!

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

コーディング課題は初級、中級、上級の3つのレベルを用意しています!

初級編は特に、HTML/CSSの学習をはじめて、一通り基礎的な知識を学習し終えた方におすすめです。具体的にはProgateのHTML/CSS、jQueryを学習した方、または、はじめてのコーディングを学習した方を想定しています。

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

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

回答を見ながら学習したい方は、以下の解説記事をご覧ください。

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

おすすめの学習方法

コーディングの学習は以下の3セットをおすすめします。

  • 1セット目:解説を見ながら手を動かす。写経のつもりでやる。
  • 2セット目:理解しようとしながらやる。わからない点はメモしておく。
  • 3セット目:2セット目でわからなかったことを復習しながらやる。

1セット目は解説を見ながら写経のようにやるのでもOKです。このとき、理解しようとすらしなくて良いです。頻出のものはだんだんと分かってくるはずなので!

2セット目は理解しようとしながらやってみましょう!わからない点はメモしておいて、後で調べましょう!

3セット目は、2セット目でわからなかった点を理解することを重視してやってみましょう!

この3セットを繰り返せば、ある程度はコーディングが理解できるようになっているはずです!
地道にがんばりましょうね!!

まとめ

XDの導入方法やXDのデザインカンプからコーディングに必要な数値を取得する方法がわからない方は、以下の記事を参考にしてください。

>> 【保存版】AdobeXDからのコーディング方法を徹底解説!【初心者必見】

Googleフォントのインストール方法やコーディングに反映させる方法がわからない方、「そもそもWebフォントって何?」って状態の方は以下の記事を参考にしてください。

>> 【Webフォントの代表格】Googleフォントの使い方

PENGIN
PENGIN

毎日学習していてえらいです!!たくさんの方のチャレンジをお待ちしてます!

初級ができた方は中級もチャレンジしてみよう!

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

10 COMMENTS

Taki_23

はじめまして!
職業訓練でWebデザインを学んでいるのですが、色んな事が重なり、卒業まで残り少しの所で勉強も挫折しかけていたところ
このサイトを見つけ、とても励みになりました。
こんな温かみがあって親切なサイトが有るなんて…
感動です。
感謝です。

これからたくさんお世話になると思います。
ありがとうございます。

ヘルメン

クリスタさん、はじめまして。
案件取るのに言語はHTML、CSS、jQueryが出来ればいいことはわかりました。
その他の言語はとりあえず手をつけなくても大丈夫でしょうか?例えばお問い合わせフォームの通信部分はPHPが出来ないといけないのか、CSS部分もブートストラップができなくてもカバーできるのか教えてください。

タシマフミオ

課題のデザインカンプはこちらのリンクからダウンロードしてください。
からダウンロードしたのですがファイルの見方がわからないです
ファイルを開いてどうすればよいでしょうか

現在コメントは受け付けておりません。