現在までの成果
HTML・CSSの基礎を学び終わったのでサイト模写をしてみました！
さらにレンタルサーバーを借り、サイトを公開しました！
模写コーディング
今回模写コーディングさせていただいたのは「Airbnb」さんの公式ページです。
実際にはTOPページの動画を用意できなかったので画像で置き換えています。
そのまま公開してしまうと権利上の問題でアウトなので、アクセス権限をかけてます。
ID:training
PASS:training
作成したのがこちらのサイト。
実際に模写コーディングをやってみて
実際に模写コーディングをすると勉強したはずのことが出てこなかったり、そもそも勉強してないことが出てきたりします。今回はBootstrapというCSSフレームワークを使って模写を行いましたが、Bootstrapについて全く知識がなかったためかなり苦戦しました。
このBootstrapというフレームワークですが、実際はコーディングを効率よく楽にできるかなりおすすめのものです。最初こそ使い方で苦労しましたが慣れてしまえばかなり簡単にコーディングを行うことができます。
ですが、模写コーディングを通してたくさんググったりするので新しい知識を増やすにはいいと思いました。
また小さなことですが、ボタンやテキストの位置が見本と違ったりという問題を修正することで、着実にレベルアップしている実感がありました。
Bootstrap
現在はBootstrap5がありますがこちらを今回使用しました。
使用方法は２種類あって、一つ目はファイルをダウンロードして使用する方法。
二つ目は公式ページにあるCSSのリンクをコピーして使用する方法です。
私はCSSをコピーして使いましたが、使い方についてはHTMLのclassタグの中に”mt-5″のような形で指令を書くというものです。ちなみに”mt-5″はCSSでいうところのmagin-top:5;のようなイメージです。
他にもグリッドシステムというものがあり画面サイズによって表示を変えるレスポンシブサイトに自動的にしてくれるというとても便利なものです。
慣れるまで大変ですが公式ページをみたりぐぐったりして使ってみることをおすすめします。CSSの基礎がわかっている方なら使い方は、ある程度早く習得できると思います。
Bootstapの記事もいつか書いてみたいと思います。
今後の活動について
今後の活動としては、ランサーズ・クラウドワークスで案件を探しつつ、空いている時間でJavaScriptの理解を深めたいと思います。
一応基礎的なことは学習しましたがHTML/CSSよりも難易度が高く理解度を深めないと実戦で使えないと感じています。
JavaScriptの理解度が深まってきたら、JavaScriptを使ったサイトの模写をおこなっていきたいと思います。
コメント