制作するサイトの情報
コーディング課題01でコーディングしたワイヤーフレームをもとにニュースアプリのランディングページをコーディングしてみましょう。
骨組みのイメージはつかめているかと思うので、それをベースに作成していきましょう。
デザインカンプ(Figma)
デザインカンプをもとにコーディングしていきましょう。
カンプはこちらのFigmaファイルの02ページになります。
![](https://s3-alpha.figma.com/hub/file/4769272129/885323dd-466f-4f54-911b-af1006c842f3-cover.png)
WEBデザイン・コーディング練習課題用Figma | Figma Community
コーディング練習用のFigmaファイル。▼ 学習サイト
必要な知識
- HTML
- CSS
基準としては、ProgeteのHTML/CSSコースを終えたくらいになります。
学習・実装手順
- カンプをもとにフォントや色を指定して作成
- リセットCSSは`destyle.css`
- 画像は書き出しましょう
Twitterで学習開始を宣言しよう
ということで、コーディングしていきましょう。
Twitterで学習開始を宣言してみましょう。
コーディングで躓いた際は次のページでヒントが読めるので、参考にしてみてください。
コメント