見出し画像

コーディングの練習をしよう!〜入門編その1〜

※2020年10月29日リニューアルしましたm(_ _)mもし、前回のままご利用中の方は、レイアウトの変更はほぼありませんので大変お手数ですが、画像やテキストを入れ替えてご利用ください。

こんにちは!ちづみです!( ´ ▽ ` )現在フリーランスとしてサイト制作で生計をたてています。٩( 'ω' )و
ブログはこちら

コーディングの練習用のための初級、中級はあるのですが、今回はもっとコーディングに挑戦しやすいように、入門編のデザインを作ってみました。

ポートフォリオにも掲載OKなのでぜひご活用ください!(その場合、デモサイトという書き方がいいと思います)

入門編はこんな感じのデザインです。

画像1

XDの見方についてはこちらで簡単に説明していますので、一度見てから始めるとスムーズです。XDのurlカンプが初めての方など、まずはこちらをみてどのようにコーディングしていくか掴んでいただければと思います。

準備物としてはAdobeXDのダウンロードが必要です。

お手元のパソコンでダウンロードできるかどうか確かめてみてください(無料です)


私の想いですが、学習がとにかく楽しくなるように一番大切なことは「続けること」で、続けるのに一番大事なのは「楽しさがあるか」だと思っています。楽しいと思える環境作りは力を入れたい、、!


もし、この入門編ができたらこちらもできるかと思いますので、興味があればぜひどうぞ!


・XDデータに触りながらコーディングができる
・progateのhtml、cssが終わった方がチャレンジするのにちょうどいい難易度の模写ができる
・ポートフォリオに記載OK(練習用と記載ください)
・参考用のコードはついておらず、デザインのみです。ご了承くださいm(_ _)m

ググるのは必須ですが、ぜひ挑戦していただけたらと思います!

本書の内容
・XDデータ
・参考コード
・コード解説



この続きをみるには

この続き: 228文字
この記事が含まれているマガジンを購入する
コーディングの練習課題を1つにまとめました。こちらからまとめて購入すると単体で購入するより1260円お得です。コーディングのポートフォリオとして掲載OKです。

600名以上にご利用いただいたコーディングの練習シリーズをまとめました。progateのhtml、cssを終えた方が取り組めるちょうどいい…

または、記事単体で購入する

コーディングの練習をしよう!〜入門編その1〜

ちづみ

500円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
私もだいすき!
162
海外を住み歩くノマドです。ゆるく日々あったことを書いてます。

こちらでもピックアップされています

web制作で稼ぐための超実践的練習ドリル
web制作で稼ぐための超実践的練習ドリル
  • 7本

小学校の教員→webデザイナーの私が考える実践的なスキルアップの課題を提供しています。

コメント (3)
初めまして。
XDに興味があり、
先ほどnoteを購入したんですが、
私のWIN10ではXDがインストールできなかったです。

てっきり、テスト用のurlで見れたから
大丈夫かなと思ってまとめ買いしたんですが…。

何かいい方法ないですかね?
恐らく回答得られないと思いますが、リニューアル版だと以前のようにスムーズに画像やテキストがコピーできないのですが、理由は何かあるのでしょうか。
始めまして。
入門編その1に挑戦しています。
XDのカンプと、ダウンロードした参考コードのindex.htmlをブラウザ(chrome)で見た時ではレイアウトが異なるのですが、なぜでしょうか?
せっかくポートフォリオとして掲載OKとしてくださっているので、ピクセルパーフェクトを目指したいのですが、参考コードとレイアウトが違うので間違っているのかなと戸惑います。
気にせずにXDとあっていれば模写できているということでいいのでしょうか?
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。