演習課題【デザインカンプからのコーディング①】

こま

こんにちは。こまです。

演習課題の1つがようやく終了しました！
紆余曲折あり完成するまでに時間がかかりましたが、頑張りました(^ ^)!

デザインカンプからのコーディングが難しい！！と苦戦している方にはぜひ読んでいただきたい記事です。一緒に頑張りましょう！

オンラインスクールCode＋の演習課題とは？どんなもの？

演習課題はAdobeXDのデザインカンプを見て、自分でコーディングしてLP制作するというものです。

Code＋は以下のように学習が進みます
①HTML/CSSの基礎学習
②簡単なLP制作（動画を見ながら行う）
③動きのある少し複雑なLP制作（動画を見ながら行う）
④演習課題（動画なし。課題は３つ。）← 今回はこちらの演習課題についてまとめています。

こま

『ヒントなしで自分でコーディングをする』って想像していたよりかなり大変ですね💦

本当に作業が進みまず、ちょっと挫折しそうになりました。
そこで、もう一度自分なりの学習をすることにしました。

知識の整理のため、初心者にわかりやすいと評判の書籍で勉強しました。
前半はデザイン/HTML/CSSの基礎知識のまとめ、後半はWebサイトを実際に作成するという流れになっています。

こま

基礎学習部分で知識の整理ができました。

またWebサイト制作で実際にコーディングすることで、さらに理解を深めることができたように思います。

価格:2,486円
(2023/2/21 07:58時点)
感想(34件)

設定が細かく記載されており、入門編、初級編、中級編、上級編など難易度が設定されています。
初心者の方にはおすすめのサイトです。私は入門編、初級編を1つずつ行いました。

オススメの理由
・無料で利用できます（一部有料のものもあります）。
・XDのデザインカンプを見ながらコーディングが行えます。
・コーディングを行う前のヒント（クラス分けなど）があります。
・コーディング例（ソースコード/でもサイト）があります。

知識の整理と、簡単なLDのコーディングを行ったので少し自信がつきました。そこで演習課題にもう一度取り組むことにしました。

時間をかけて丁寧に準備をしました。

デザインカンプを印刷して、色々と書き込みをしています。

こま

慣れてこれば事前準備なくコーディングができるようです。

パソコン上でXDに書き込みをする方もいるようですが、私には用紙に書き込む方が合っていました。

自己学習の成果や準備を念入りにしたので、以前よりスムーズに作業ができたように思います。
セクションごとにHTML→CSS→レスポンシブと作業を進めました。
セクションごとに行うことでレスポンシブ対応をする際、修正箇所がわかりやすく作業しやすかったです。初心者の方はこちらがオススメかもです。

最後に先生に確認をお願いしました。いくつか修正箇所のご指摘がありました。
“コードがきれいになりましたね”と声をかけてもらったり、思っていたより修正箇所が少なかったこともあり、ほっとしました。

・自分で気づかない点の指摘をしてもらえる

・どうすればいいのか具体的なアドバイスをもらえる

先生に課題を見てもらえるので、安心です。

『デザインカンプからのコーディングは本当に大変。なかなか進まなくて嫌になるけれど、みんな同じだよ。』とネット記事で読んだことがあります。
私も思うように進まず苦戦しましたが、動画を見るだけの受け身の授業より得ることが多かったように思います。課題はあと2つありますので、そちらも頑張りたいと思います。

Code＋で勉強しています。
分からないところも丁寧に指導してもらえますよ♪