tanatiyo ついに、初めてのポートフォリオが完成しました！しょーごさんの【初級】XDデザインからのコーディング練習【HTML/CSS】です！！
https://note.com/samuraibrass/n/n2108f5f03dd8?magazine_key=mad296098d928
初めてweb上で自分が作った（デザインカンプだけど）サイトを見て、少し涙が出ました（笑）嬉しいのと達成感と、もういろいろです！きっと先輩方の中にはこういった気持ちになった方もいるんだろうなと、今は束の間の喜びを噛みしめています→これから反省会（自分1人ですが）をするので、きっと数時間後には落ち込んでいます（笑）。
ポートフォリオはこちら↓
https://eileben.conohawing.com/shogo_shokyu/
それでは、簡単ですが前回の投稿から完走までの道のりを簡単に振り返っておきます。苦労した点なども残しておきます。
前回、Manaさんの「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」に戻り、ソースコードを印刷して、もう一度本を片手に復習しました。基本的にはそれをもとにして、「そういえばProtateで説明していたな～」とProgateに戻って確認したり、ドットインストールで「そういえば～」となればドットインストールに戻って動画をみたり、あとはググったりして、なんとか完成させました。
今回の大きな失敗を書いておくと
①始めの方からPerfectPixelを使って、位置を合わせていきましたが、知っている知識だけで無理矢理やると大変な目に合うことが分かりました＾＾；。無理やりpaddingやmarginで位置を合わせても、レスポンシブに対応させようとした時にすぐにガタガタになってしまいました。ボックスの概念も理解が不十分でした。なので、コードを書く最初の段階であまり使わない方が良さそうだなと感じました。もっと後のほう、具体的には『拡張性の高い骨組みとかを準備して、肉付けしていった段階くらい～最終的な確認』の時に使ったほうが良いのかも、です。
そのほかの失敗や思ったことは以下に書き連ねておきます。
②フォントの種類やフォントのスタイルがカンプ通りではないことがありました。意外と抜け落ちています。
③基礎がまだ固まっていないのを実感。特にボックスの概念が曖昧。分かった気でいた。せっかくのManaさんの本でもソースコードがダウンロードできるのに、見ていなかった。見本となるコードをもっと見ておくべきだった。全体のソースコードを印刷して見てみると、書き方の順序や整理の仕方など、本だけでは分からないことが多くあった。今のうちに見ることが出来て良かった。→一旦、Progateの道場レッスンのソースコードもエディタにベタ張りして全体を眺めてみるのも良い復習になるかも。もちろん、しょーごさんの模範解答もそうさせてもらいます！
④たまたま、ブログを始めた時に契約していたサーバーが、しょーごさんもお勧めしているConohaWingだったので、サーバーへのアップロードの記事を参考にしつつ、ポートフォリオの公開を試みることに。しかし、ブラウザ上でCSSが適用されないなど、いろいろトラブルが起こりました。ググっていくつかの対策を実行してみるも、うまくいかず。途方にくれた時にふとフォルダ名が大文字の「CSS」であることに気づき、結果的に小文字にしたらうまくいきました（初心者ですみません・・）。そこにたどり着くまでにあれやこれやと設定をいじってしまい、リセットCSSを無効にしてしまいました。そのせいで今度はブラウザ上のゆがみが気になり、コードをいじる→ブラウザ上で確認→ファイルを再度up、なんてことを何度も繰り返していました。こういう時に、デベロッパーツールを使いこなすのだなと痛感。いろいろと手間取ってしまった初upでした。
⑤サーバーにアップした後、実際にスマホで見てみると、少し位置がズレています。ガタガタでしたorz。。。次の初級Ex編までに、残りのデザインカンプを２つこなして、しょーごさんに提出する時には立派なモノを作りたい！
今日の積み上げ、あと一つ。模範解答をみて復習、です。
頑張ろう！