こんな感じのものができました
menya'sPortfolio
背景
まず、私は文系の大学三年生です。講義等でプログラミングや情報工学系の知識は一切扱ったことがありません。けれどもコンピュータは幼少期から好きだったので、身近な存在ではありました。そこで、昨年応用情報処理技術者試験(AP)を受験し、取得する等して知識を取得していきました。そのための勉強は非常に楽しかったのですが、APはあまり実装をする能力を問われません。ならば、とりあえずフロント系の言語を学んで、何か作ってみよう!という感情に駆られました。ちなみにAPの午後はネットワーク、アーキテクチャ、マネジメント、システム監査で、特にアルゴリズムとは関係ない科目を取りました。
やりたいこと
・CSSアニメーションの実装
・レスポンシブデザイン
・Vue.jsも使ってみたい!
とりあえずこの3つを目標としました。
為になったサイトや記事
Progate
このサービスでHTML,CSS,JavaScriptを学びました。分かりやすいですし、勉強し放題で月額1000円は安いと思います。Progateが無かったら多分完成してなかったといえるレベルです。
Vue.js日本語公式ドキュメント
日本語です!!英語弱々でも安心。
Codepen
CSSやJavaScriptを使用したコードがプレビュー付きでたくさん投稿されているサイトです。アニメーションをどうやって動かすか、他に類似のどんな物があるか、と詰まった時に見ると良い感じ。
臆病な魔女
CSSアニメーションがフル活用されているサイトです。この方が作ったWebサイト群はクオリティが高すぎて、参考にはできませんでしたが、目標にはなりました。加えてモチベーションが上がりました。
Qiita
色々な記事を読み漁り、全部書くと冗長すぎるため、為になった記事を抜粋して記述していきます。
CSSアニメーション入門
名前の通り、CSSアニメーションを実装する上で非常に役立ちました。素晴らしい記事で、何度も読み返しました。
【爆速成長!】プログラミング駆け出し〜オリジナルポートフォリオ作成までに参考にしたサイト一覧
この記事は水先案内なものとして活用させていただきました。メンブレした際に見ると良い感じに直してくれるサイトもまとめられており、かなり有用です。
GitHub Pagesで静的なサイトを公開し、独自ドメインを設定する
今回はGithub Pagesを使って実装しました。自分のドメインを使用したかったので、その際にこの記事は役立ちました。
git pushがreject(拒否)されたときの対処法
githubやgitを使用するのも初めてだったので、エラーと何度も格闘する羽目になりました。その中でも最もハマったのがこのインシデントです。強制的にプッシュするのは駄目なんだ、知らなかったそんなの...というのを身を以て実感したりしました(本番用のレポジトリのファイルが吹き飛んだ)
反省点
途中でBootstrap使おうかなーとかCSSからSCSSに記法を変更しよう!とか様々なことが思い浮かんで、色々な方向に手を出した結果、完成が非常に遅れてしまいました。今後何かを作成する時は最初に決めたアセットのみを使って実装しようと誓いました。
なんとか完成!!!
学校が休みになって暇になったので、HTMLとSCSSとJavaScriptを勉強して自分のサイト(ポートフォリオ?)を作ってみました
— めにゃー (@publictrain2) April 23, 2020
是非見てください☺️https://t.co/dutpEtcGq7pic.twitter.com/Wygeeetkos
すごく嬉しかった
得たもの
・HTML,CSSの基本的な使い方
・Vue.js,jQueryの触り
・GitHub,Gitの使い方
非常に有意義なものになったと思ってます(じこまんぞく)。しかしながら、コードがスパゲティのようになってしまったので、次に何かデプロイする際は、綺麗なコードを書きたいと思います。(あとWorksのページを埋めたい...)
現在は休校で空いた時間を活用して何らかのWebサービスを作ってみたいなーと考えて、PythonとRailsと格闘しています。もし、私のような弱々初心者が自分のWebサイトを立ち上げたい!となった時に、この記事が役に立てれば非常に私は嬉しいです。