Hello, I am Kosuke.

プログラミング実践記2ヶ月目完了:Bootstrapを活用してWEBページやWEBサイトを制作してみた

どうも、プログラマのこうすけ(@kosuke_upd)です。

プログラミングを開始してから2ヶ月が経過しましたが、最近はポートフォリオを充実させるためにWEBページや簡単なWEBサイトを作成したりと、実践的なことをメインに行なっています。

今回は、プログラミング実践記の2ヶ月目が終了したということで、前回の続きである7週目から9週目終了時点までのことについて話していきます。学習したBootstrapを活用して実際にWEBページやWEBサイトを作成して思ったことや、作成したものも紹介するので、ぜひご覧ください。

前回のあらすじ

前回はプログラミング実践記の5〜6週目についてお話しました。前回はLPやサイトの写経のことについて話しているので、まだ読んでいない場合はあわせてぜひご覧ください。

プログラミング実践記5〜6週目:LPやサイトの写経を始めてみた

プログラミング実践記7〜9週目の作業内容

プログラミング実践記43日目〜63日目に僕が行った作業内容は以下の通りです。

2018/07/06(金)
プログラミング実践記43日目
ブログ
記事投稿 × 1
プログラミング実践記5〜6週目:LPやサイトの写経を始めてみた
Udemy
Bootstrap
ドットインストール
CSSでの吹き出し作成
FirebaseでWEBサイト公開
2018/07/07(土)
プログラミング実践記44日目
Udemy
Bootstrap
ドットインストール
レスポンシブサイト作成
JavaScript入門
2018/07/08(日)
プログラミング実践記45日目
Udemy
Bootstrap
Sketch
ドットインストール
Flexbox入門
CSSグリッドレイアウト入門
2018/07/09(月)
プログラミング実践記46日目
Udemy
Bootstrap
ドットインストール
UNIXコマンド入門
WordPress入門
写経
LP × 1
2018/07/10(火)
プログラミング実践記47日目
受託
サイト制作
Udemy
Bootstrap
Sketch
ドットインストール
PHPでカレンダー作成
さくらのVPS入門
2018/07/11(水)
プログラミング実践記48日目
写経
LP × 1
Udemy
Bootstrap
ドットインストール
PHPで画像アップロード掲示板作成
2018/07/12(木)
プログラミング実践記49日目
Udemy
Bootstrap
Sketch
ドットインストール
AWS入門
JavaScriptでモーダル作成
2018/07/13(金)
プログラミング実践記50日目
ドットインストール
JavaScriptでタブメニュー作り
Udemy
Sketch
JavaScript
写経
LP × 1
2018/07/14(土)
プログラミング実践記51日目
WEBページ作成
プロフィールページ作成
2018/07/15(日)
プログラミング実践記52日目
WEBページ作成
プロフィールページ作成
2018/07/16(月)
プログラミング実践記53日目
WEBサイト制作
仮想の歯科サイト作成(構想練り)
高機能なWordPressテーマを購入&遊び
2018/07/17(火)
プログラミング実践記54日目
WordPress関連
購入したWordPressテーマのドキュメントインプット
写経
LP × 1
Udemy
Sketch
WEB開発
2018/07/18(水)
プログラミング実践記55日目
サイト制作
デモサイト制作
Udemy
WEB開発
JavaScript
写経
LP × 1
2018/07/19(木)
プログラミング実践記56日目
デモサイト制作
大枠の完成
Udemy
WEB開発
JavaScript
2018/07/20(金)
プログラミング実践記57日目
デモサイト制作
デモコンテンツ作成
2018/07/21(土)
プログラミング実践記58日目
デモサイト制作
デモコンテンツ作成
2018/07/22(日)
プログラミング実践記59日目
デモサイト制作
デモコンテンツ作成
2018/07/23(月)
プログラミング実践記60日目
デモサイト制作
デモコンテンツ作成
2018/07/24(火)
プログラミング実践記61日目
デモサイト制作
トップページコーディング
Udemy
WEB開発
2018/07/25(水)
プログラミング実践記62日目
デモサイト制作
下層ページ作成
Udemy
WEB開発
2018/07/26(木)
プログラミング実践記63日目
デモサイト制作
下層ページ作成

7週目〜9週目の3週間での作業内容を振り返ってみると、最初はそれ以前までと同様に量、質ともに充実した作業を行えていたのですが、8〜9週目くらいから少し量、質ともに落ちてしまいました。

具体的には、今後の方向性に迷いが出てきてしまったために、いろいろ調べごとをしていたりモチベーションが低下してしまったのです。

ただ、そんな中でも手を動かし続けて、実際にWEBページやWEBサイトを作成しました。面白いことに、実際に何かを完成させるとモチベーションは高まり、今では以前のような高いモチベーションで毎日作業し続けられています。

実際に作成した2つのもの

この3週間で僕は2つのものを作成しました。何度もお話しているように、WEBページ(プロフィールページ)とWEBサイトです。

これらはソースコードとともに完全にオープンにしているので、それぞれ簡単な説明とともに紹介します。

1. WEBページ(プロフィールページ)

作成したサンプルプロフィールページ

こちらは「ねこさん(@xVanillaChai)」という方のSlackコミュニティで、「プロフィールページを作ろう」という企画があり作成した僕のプロフィールページです。

このページは、ネット上にあるおしゃれなページをいくつかピックアップし、それを自分なりにアレンジして作成しました。

僕のGitHubにて公開しています。アニメーションをふんだんに活用しており、実際に見ると面白いかなと思いますので、こちらからぜひご覧ください。

Kosuke Muraka – Progate_Users

2. WEBサイト(サンプル歯科サイト)

サンプル歯科サイト

「WEBページを作成したので、次は簡単なWEBサイトを作ってみよう!」ということで作成したのがこちらのサンプル歯科サイトです。

こちらは5ページからなるWEBサイトであり、Bootstrapを使用して作成しました。WEB制作の受託を行うことを想定して作成したため、あくまでスタンダードなデザインにしました。

こちらもGitHubにて公開しているので、もしよければぜひご覧ください。

UPDATE Dentist

実際になにか作ることでスキルはすぐ身につく

この3週間で僕は実際に動くものを2つ制作しました。「せっかく作るならかっこいいものを」という思い、学習したことをそれぞれに適用させながら作成しましたが、なかなか良い手応えを掴めました。

この3週間で主にBootstrapを学習していましたが、Bootstrapをそれぞれに使ってみたことで、Bootstrapを実際にどう使っていくかということが掴めた感じがします。

今では、Bootstrapに対する心配事はなくなったと言っても良いほどです。

とまあこんな感じで、学習したことを生かして実際に何かを作ってみることで、そのスキルはすぐに身につくので、どんどんプロダクトを作っていきましょう。僕も、次は簡単なWordPressテーマを制作してみようかなと考えています。

次回のプログラミング実践記はまた2週間後くらいを予定しているので、ぜひ次回も楽しみにしていてください!

補足

3ヶ月目を更新したのでぜひご覧ください。

プログラミング実践記3ヶ月目:WordPressテーマを制作してみた

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です