1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

エンジニアのスキルシートがゲームみたいでかっこよかったので自分で自己紹介サイトを作ってみた

Last updated at Posted at 2024-07-28

イントロダクション

エンジニアとしてのキャリアを考え始めたとき、他のエンジニアの「TypeScript★★★、AWS★★」、みたいな、スキルシートを見て「かっこいい」と感じて、まず、今まで学んだHTMLとCSSの知識のアウトプットにもなるし、これから作る作品などもサイトでわかるようにしたいと思い、自己紹介サイトを作ることを決意しました。

これまで学習してきたこと

Progate

WEB開発コースでJavaScriptのコースとHTMLとCSSのコースを全部やってNode.jsまでやりました。(Node.jsは意味不明なまま言われるがままやっていた)

Udemy

まず、実践的なHTMLとCSSの知識をつけたくてこのコースを受けました。

JavaScriptの知識が足りないと思って、受けましたが、学んだことがあるものばかりであまり意味がなかったです。ですが、丁寧な解説だったので構文の理解力があがりました。

自己紹介サイト作成後(一ヶ月くらい前に作り終わった)

Progate

Reactのコース(楽しかった)とNode.jsのコースを全部やりました。

Udemy

Reactを実践的に学びたいと思い受講。おすすめです。

WEBアプリ制作に向けて受講中(7月28日)。Reactの講座でNode.jsを扱っていたのでスムーズに受けられている気がする。

準備と計画

JavaScriptも使って作成する気だったのですが、自分が作ろうと思っているデザインが結構シンプルで私の知識不足もあり、HTMLとCSSのみでよくねってなってHTMLとCSSのみで作成しました。Udemyの講座でBootstrapの使い方は学んでいましたが、その頃、YouTubeでエンジニア面談みたいなので「Bootstrap使ったら誰でも作れるでしょ」みたいなのを見てBootstrap使わないでつくるかーってなって作り始めてしまいました。(その後、使えばよかったと後悔する)ワイヤーフレームを作成しようとFigmaを使ってみるがむずくて断念。Pinterestなどでデザインを参考にして作成。

学んだこと、工夫したこと

ヘッダーのリストにa hrefを付けて任意の場所に飛べるようにすること。
ヘッダーを透けすようなデザインにした。
Font Awesomeの使い方
Githubで静的サイトの公開方法(作って満足してしまい、公開するのを忘れていた)
作り終えてコードがきたないことに気づき、チャットGPTと対話しながらきれいにした。
このくらいですかね。あとは、講座を見返したりして作ってました。

終わりに

シンプルなサイトだからなのか慣れてきたからなのか割と時間がかからなかったです。大学で作ってて友人に「これ自分で作ったの!すごいじゃん」と言ってもらってエンジニアのやりがいってこうゆうことなのかとか思ったり。始めて自分で作った作品でしたが、今思うと結構熱中して夢中で作ってました。作りたいと思うものがいっぱいあるのでそれを実現できるように勉強頑張ります。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?