Web系ほぼ初心者が一週間でポートフォリオサイトを作ってみた。

Web系ほぼ初心者が一週間でポートフォリオサイトを作ってみた。:

動機

4月からオーストラリアにワーキングホリデーで行くことになりどうせ仕事するならエンジニアとして仕事したいなぁと思っていた。

そんな時@yunecoさんの記事を見た。

素晴らしいサイトに感銘を受けて無いよりはあった方がいいだろうとポートフォリオ作ってみることにした。

スペック

Swift半年,Python三ヶ月ほど勉強した程度のweb系初心者。

概要

海外での仕事探しのため一からポートフォリオサイトを作った。

使用言語はHTML,CSS,JavaScript

使用サービスはFirebase

動画サイトで学習し、質よりスピード重視（英語も勉強しなきゃだから仕方ないね）

なにぶん初心者なのでクソコードです、ご了承ください。

スマホではほぼ機能しないと思います。

ポートフォリオ
GitHub

学習開始

1日目

サイトの作り方などネットで色々調べる。どうやらHTMLとCSSでサイトを作りJavaScriptでユーザーのアクションに対応するということがわかった。

最近Twitterで某動画学習サイト(レベル上がっていくやつ)をよくみるのでとりあえず有料会員登録し全てのJavaScript講座を受講してみた。

が、講座の内容が簡単すぎたのかJavaScriptについてほとんど把握できなかった。（変数、関数の使い方がメインでほんとに初心者の人には優しくて良い教材だと思うが他言語を使っている身としては少々物足りなかった。）

有料会員に登録した1000円があればちょっと贅沢なランチ食べれたのになぁと思いながら1日目終了。

二日目

昨日一応一通りの動画を見たのでサイトをとりあえず作ってみることに。

全くわからない、ファイルはどうやって管理するのか教えてくれなかったしHTML,CSS,JavaScriptそれぞれの連携方法もわからない。

確認方法もわからない。図画工作評定５段階中２の僕にはデザインもわからない。

ここでweb系言語が嫌いになりTwitterで愚痴り始める。

この日は一時間くらいで勉強をやめて愛しのPythonとの愛を育んだ。はぁ好き。

三日目

そうは言っても何か作らないと仕事見つからない。

JavaScript,HTML,CSSについてもう一度ネットをサーフィンしていた時、

〜ドットインストールとの邂逅〜

いや本当にこんなサブタイトルつけたいくらい衝撃的な出会いだった。

すごい実用的だし動画の種類も豊富だしで神サイトを見つけた僕はそれぞれの講座を受講しここでJavaScript,HTML,CSSの関係をやっと理解できた。

別にドットインストールの回し者じゃ無いけど本当にオススメです。

嫌いなんて言ってごめんね、やっぱり好きだよ。

四日目〜六日目

ドットインストール見ながらトライアンドエラーでコードを書いていく。

何気にフリーイラストを探してくるのが大変でコード書いてる時よりも画像を編集なんかしてる時間の方が長かった()

ここで自分のデザイン力のなさに挫折を繰り返した。

七日目

完成！！

Firebaseを使ってデプロイ！！

振り返り

足早に振り返ったけどこんな感じでサイトを作りました。

まだまだ対応していかなければいけないところも多いですが一応観れるようにはなったので公開しました。

ですがHTML,CSS,JavaScriptそれぞれのスタンダードな書き方がわからないためほぼJavaScriptで書いてしまいました。

これからは修正しつつそれぞれの言語の役割について理解を深めていきたいです。

まあ技術よりまずは英語勉強しないと何ですけどね。。。

プログラミング言語も英語も同じ言語なのになぜこんなに英語は難しいのか。。。

参考

VueとFirebaseの基本機能全部使ってぬるぬる動くポートフォリオサイトを作ったのでソースと解説
ドットインストール