見出し画像

サイトを作れるようになりました。

中級編は1月上旬から学習していました。途中、お仕事をいただいたこともあり途切れた期間もありましたが凝縮すると3週間ちょっとでした。

中級はよりいろんなカスタマイズをサイトに施していきます。初めにJavaScriptとjQueryを学びます。新しい言語ぉ…また言語ぉ…という気持ちでした。そしてカリキュラム通りに学習を進めていきますが、「これ何に使うの…」状態。関数は楽しく理解できたけど、実際にどう使うかは謎でした。

あとはSassも学びます。これは革命です。入れ子が使えることでホバー時や疑似要素を書くのが楽になったり、あとはmixinを使ってレスポンシブの設定ができるということ。デイトラのカリキュラムは本当によくできています。

次にしばらくコーディングが続きます、というかずっとコーディングなんだけど。サイトでよくあるコンテンツのコーディングをしていきます。HTMLの書き方はだいたい分かるようになって、問題はCSSのあて方。実務で使うことを視野に入れながら進むカリキュラム。非実用的なあて方をしないように頭を使って本で調べてググってよくある質問見てSlack検索して…自走力も身についてきているようです。

えぇ…?反応しないな…。
あぁ…ここか…。
これどう使うの…。
なんで効かないの~…

などとブツブツ言いながらパソコンをポチポチします。CSSで出来る範囲のアニメーションの付加ができるようになったら、ここでJavaScriptとjQueryが登場します。彼らはアニメーションをつけるというのが大きな仕事のひとつです。わけの分からなかった関数はここで大活躍をします。なるほどね、class名を引っ張ってくるのね。あとはどのアクションでどうなるみたいなのを当てはめてアニメーションが付加。スライダーが実装できた時は感動しました…!!

あとは最後にLPの作成が2本あります。今までの集大成を発揮する場所です。カンプから画像を書き出し、フォルダを作り、ブロックをイメージしてdivで分けていって、だいたい組立ったらあとはJSなどでアニメーション。そんな感じで進めるのですが、気付いたことがひとつ。それは「レスポンシブ」対応をするためにスマホ版のカンプもよく見て組み立てないといけないということ。デザインのメンターさんに聞いた「カンプはPC版とスマホ版は並んでいるほうが見やすいみたい…!」というひとこと。オーマイゴッド…。そういう意味だったのねと理解。ブロック分けやCSSの設計に必要不可欠の要素でした。これからはレスポンシブのことを考えて設計する必要がありそう、と学べました。

あとはJS効かないよ~どおじでぇぇぇ~ってなったときはclass名がだいたい書き間違っている。書き方は間違ってないからclass名はコピペした方が良さそうだなと思いました。

あとは「px」という単位。
これ非常にやっかいで。本当にあんまり使わない方がいいなって思いました。今の時点では、だけど、大きいセクションごとのmarginやpaddingやmax-widthやらはpxでもいいと思うんだけど、細かいパーツのwidthやheightとかはレスポンシブの時に全てが狂うので使わない方がいいなって、学びました。そのあと、コーダーさんが「引き受けたデータのheightにゴリゴリpx使ってて困ってる」ってツイートしてらしたのでやっぱりそうだなと。その他の表現方法はいろいろあるけど使いよくて保守性が高いものを研究していきたいと思います。

なんとか課題2つを終えて中級編終了。

その後。

そろそろ自分のサイトをちゃんと作った方が良さそうと思ったのでデザインからやり直した。すると、シンプルなのにありえないぐらい時間がかかった。でも気付いたのは、余白の設定がしやすいように細かいところまでよく見て1pxを大切にしながら作業しているなということ。これは今までの自分になかったので進歩しているのだなぁと実感。

さ、コーディングしよ!と思ったのですがデザインを見て、「実績」がやっぱり欲しい…と思ったので続きの学習を先に進めることにしました。WordPressのカスタマイズができるようになれば仕事の幅が格段にアップすると思うので上級編走破を一区切りにしてそこでお仕事のお知らせをしようかなと思います。

という訳で、ちょっと短めでしたが中級編を走破したお話でした。

この記事が気に入ったらサポートをしてみませんか?