![見出し画像](https://assets.st-note.com/production/uploads/images/132841571/rectangle_large_type_2_d41b08b0ea3639cc4c11277423575ca1.jpeg?width=1200)
コーディング練習 入門編:カフェサイト No.1
1回目となる今回はFigmaを使いパソコンサイトのデザインです。
「無料コーディング練習所」のデータを参考に作成しました。
教材は「入門編:カフェサイト」を使いました。
記事の内容は主に練習結果で、作成方法の説明ではありません。
なお、コーディング練習を始める前に、コーディング学習オンラインサービスの「ドットインストール」と「Progate」でホームページのコーディングに必要なことを学びました。
Figmaのフレームはデスクトップのデスクトップにしました。
![](https://assets.st-note.com/img/1709505148876-c1wrDQp2DC.jpg?width=1200)
完成したものはこちらです。
![](https://assets.st-note.com/img/1709505175973-k0WetP92z0.jpg?width=1200)
ブログ部分はオートレイアウトを使いレスポンシブにしています。
![](https://assets.st-note.com/img/1709505288240-Q6k9K8AI5I.jpg?width=1200)
![](https://assets.st-note.com/img/1709505298400-HIfN8LkpAa.jpg?width=1200)
![](https://assets.st-note.com/img/1709505336938-fiJpXXyVGD.jpg?width=1200)
プロトタイプで、ナビボタンの「blog」をクリックするとblogに移動するようにしました。
画像では伝わらないことがあるので、動きが分かるように動画にまとめたものを作りました。
音声はありません、無音です。
ご覧いただけましたら幸いです。
作成したデザインは下記のサイトにあります。
Figmaはブラウザベースのコラボレーション・インターフェース・デザイン・ツールで、無料版を利用しています。Figmaの使い方はFigmaに関するサイトの記事や動画を使い学びました。
使えないよりは使えた方がよいと思い勉強しましたが、いろいろなことを覚えていくとwebデザインもやりたいと思うようになりました。
教材として使っている「無料コーディング練習所」は下記サイトにあります。
(https://webdesigner-go.com/coding-practice/)
よろしければサポートお願いします!いただいたサポートはクリエーターとしての活動費に使わせていただきます!