デイトラ課題

作業時間 約20時間

使用した言語 HTML, CSS, SASS, jQuery

オリジナルサイト:http://sapmle.xyz/day-kadai/

ソースコード(GitHub) : https://github.com/daei0721/test.git


【概要】

デイトラの課題として、頻出であるカードやニュース、問い合わせフォームのサイトをデザインカンプからコーディングしました。今回は初めてPerfectPixelでデザインカンプとの差異をチェックしながらコーディングしています。
今回もレスポンシブデザイン込みです。
また、SCSSを利用しています。順次、jQuaryでアニメーション効果を付けていく予定です。

【意識したこと】

少しでもSASSで利用して素早くコーディングすることを意識しました。

また、PerfectPixelでチェックしてデザインカンプとの差異を極力無くすコーディングを意識しています。

【問題点】

まだまだSASSを使いこなせず、コーディングに苦労しました。
PerfectPixelでデザインカンプの差異を無くすコーディングを余白の部分がなかなかカンプ通りにデザインできなくて苦労しました。

【感想】

SASSを使用してコーディングするのは慣れずに時間が掛かってしまうが、今後のことを考えて意識して使用していこうと思います
デザインカンプからのコーディングが、カンプ通りにデザインすることの難しさを感じました。特に縦の余白の部分はpaddingやmarginだけだはなく
line-heightの余白も考えてコーディングすることに苦労しました。
SASSもカンプからのコーディングも数をこなして慣れていこうと思います。


deitora-study

CATEGORIES