社内のデザイナー向け勉強会資料です。

▼ 作るもの
<a href="https://cheez-coding-dojo.vercel.app/" target="_blank" rel="nofollow noopener noreferrer">https://cheez-coding-dojo.vercel.app/</a>

社内のデザイナー向け勉強会資料です。

▼ 作るもの
https://cheez-coding-dojo.vercel.app/

デザイナー向けコーディング道場

1.1 必要なツールのダウンロード

1.2 GitHubにリポジトリを作成してみよう

1.3 Next.jsを立ち上げよう

1.4 emotionの設定

1.5 とりあえずvercelにデプロイしてみよう

1.6 [番外編] セーブ時にコードフォーマッターが動くよう設定しよう

2.1 Design Tokensを設定しよう

2.2 Headerコンポーネントを作成しよう(flexbox)

3.1 メインビジュアルいい感じにしよう

4.1 見出しComponentのを作ろう (擬似要素・potision・children)

5.1 自己紹介コンテンツを作ってみよう(学んだこと応用)

6.1. 作品ギャラリーを作ってみよう(grid)

メモ

mochimochi