自己紹介
-
文理系（？）の４年制大卒
-
新卒未経験でSES＋受託開発の中小企業に入社
-
入社後、３ヶ月間の社内研修を受講（C,Java,HTML,CSS,PostgreSQL,Linux..)
-
現在は大手保険会社のWindowsアプリ開発プロジェクト（C#.Net,SQLite使用）に参画中
-
Web系に転職を検討中。。
Progateについて
- Progateとは・・・
HTML、CSS、Java、Ruby、SQL etc..様々なプログラミング言語をWebまたはスマホで学習できるオンラインプログラミング学習サービスです。
➡︎ https://prog-8.com/
- 今回は『HTML＆CSS』の全７レッスンを受講した後、簡単に自作のポートフォリオサイトを作ってみました!
ポートフォリオサイトについて
- シンプルなデザインで、内容も軽めのTopページのみ作成しました！
（Simpler is usually better...笑)
- HTML&CSSのみの実装ですので、コンタクトフォームやリンク、ボタンなどありますが、見た目だけになっています。
- ProgateのHTML＆CSSのレッスン受講〜制作完了までにかかった時間は約５０時間くらいです（ちょっと時間かかりすぎたかもです笑）
- 制作〜公開までに参考にさせていただいた文献、使用したソフトや開発環境は後述
- 制作したWebページはGitHubPageにて公開いたしました！
➡︎ https://tomohisa07.github.io/sakutomo_portfolio_ver1.0./
#開発環境・使用ソフト・参考サイト
-
開発環境
MacBookAir(macOS Catalina 10.15.2) -
使用ソフト
Visual Studio Code ➡︎ コーディングに使用
GitHub Desktop ➡︎ ソースファイル、画像ファイルをGitHubにプッシュ（Upload）するために使用
Numbers ➡︎ 主にWebページのイメージを設計するために使用
-
参考サイト
① HTML&CSS学習
Progate
MDN web docs
qiAz web tech blog
② 画像データ取得 [Font Awesome](https://fontawesome.com) [SVG PORN](https://svgporn.com) [pixaboy](https://pixabay.com/ja/images/search/pc/?pagi=2) [Online Logo Maker](https://www.designevo.com/logo-maker/)
③ GitHubについて [ferret](https://ferret-plus.com/8498)
制作開始〜完成までにやったこと
- 1. 目標設定・計画
- ・目的の明確化 ➡︎ ProgateのHTML&CSSのレッスンの復習&実践
- ・目標の設定 ➡︎ ポートフォリオサイトのTOPページ１枚の作成
- ・設計 ➡︎ 他の方のポートフォリオサイトを参考にどんなデザインにするのか、サイトに入れる内容などを考える。
- 2. コーディング
- ・設計を基にProgateを復習しながらコーディングを進めていきました。
- ・わからない＆Progateで学習した範囲外のことはググって調べながら進めていきました。
- 3. Webページの公開
- ・ローカルリポジトリ＆GitHubにリモートリポジトリを作成後、ソースファイル・画像ファイルなどをPush（Upload）してGitHubページに公開しました。
所感
- ・良かった点
- 1. コーディングに入る前に目標設定や簡単な設計によって完成のイメージが固まっていたことで、
- 割とスムーズに完成までコーディングすることができました。
- 2. コーディングで詰まった時など、どうすれば上手くいくか考えたり自分で試してみたりする時間が
- 長くなりすぎないように意識し、わからないことはどんどんググっていち早く解決に辿り着けるようにできました。
- 3. Progateで学んだこと以外に、自分で調べて発見した新しい技術・知識
- （例：CSSだけでWebページをフェードインで表示させる）を取り入れたりして、楽しみながら制作することができました。
- ・反省点
- 1. 目標設定した際に、期限（納期）を定めていなかったことで、少しズルズルと制作をしていました。
- ➡︎ 今後は制作期間・時間の目標設定を実施
- 2. まだまだHTML&CSSについての知識、コーディング経験の不足しているため、
- ソースコードが雑であることが否めない・・
- ➡︎ 基礎がまだまだ身についていないので、MDN Web Docsなどを読んで知識をinputしつつ、継続的にコーディングしていきます。
今後の目標
・HTML&CSSだけでなく、JavaScriptやBootstrapなどを学んで、動的機能を持つWebサイトを作成する
・Ruby,railsを学んでSNSサービス（twitter,instagram)などのコピーサイトを作成する
最後に
最後までご覧いただきありがとうございます。
宜しければ、こちらの記事やソースについて、ご指摘・アドバイス・感想など頂けると幸いです。
まだまだ未経験新卒新人のヒヨコですので、お手柔らかに、、笑
今後ともよろしくお願いいたします！！