Webサイトとりあえず作ってみよう!【ポートフォリオ】

初心者

こんにちは、なっちる先生(@nacchi_jagariko)です。

大学中退後、プログラミング完全未経験から就職し、絶賛リモートワーク中のものです。

先日こんなツイートをしました。

【プログラミング初心者勉強方法】
「どうやって勉強すればいいかわからない」もっちるさんへ
結論、Progateとドットインストールで学びなはれ
progateはゲーム感覚で、ひとつクリアしたらドットインストールで理論的な部分を補うのだよ。そして自分で作ってみる。
ググる力を身につけてね😉

すると、もっちるさんから、

Progateとドットインストールが終わったら、自分で作るっていうけど、何を作るの?教えて、なっちる先生

とのこと。

仕方ない、かわいい蒙古斑もっちるさんのために一肌脱ぎますか。💪

この記事はこういう人に向けです。

HTML, CSSはわかったけど自分で作るとなるとどうすれば良い!?
ポートフォリオ作りたいよぉ
bootstrap軽く使ってみたい!
※とっととダウンロードしたい方は最後らへんのzipファイルダウンロードして、早速自分で作ってみてくだされ!
では参りますよ〜。
スポンサーリンク

 なぜbootstrapなのか。

はい、まずこれですね。
まず、「bootstrapって何??」ですよねん。
bootstrapはずばり、Webフレームワークでございます。
bootstrapのサイトからファイル群をダウンロードすると
こういう感じでcssやらjsがたくさん入っています。
Webフレームワークとはこういうcssやjsのファイル群が入っていて、あらかじめクラス指定でスタイル付けされているものです。
コーダーはクラス名をしてするだけでデザインの知識がなくても簡単に装飾できるというわけなのですね。

ありがとう!おかげでcss少なくなるよ!!

今わからなくても全然大丈夫、使うことで色々と慣れてきます。

この段階(プログラミングを一通り学んだ段階)でbootstrapを使うメリットは
・複数のclass指定に慣れる
・フリーランス案件が取りやすくなる
・レスポンシブサイトに慣れる
ですね。

 

まあ、メリットがあるんだよ!ってこと!!

「百聞は一見にしかず」ということで使用例をみてみましょう。

え、何、ボタンcssで作ってって?

となったとします。

普通だったら、ほいさほいさ、で

See the Pen ボタン by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

こんな感じでhtmlのクラス名にcssを肉付けしていきますよね。
しかし、bootstrapの場合だと、
これだけ、なんです!!!
便利ですよね〜。

社長、ボタン100個納品できます。。

スポンサーリンク

 自分でサイトを作ってみましょう。

さあ、本題。
サイトを作ってくださいませ。
wixでポロポロっと作ったサイトがありますので、こちらをbootstrapを駆使して作ってみてください。
なっちるジョーンズのヨガサイト→https://toiletpaperjagarik.wixsite.com/mysite
こちら、デザイン代わりです。
綺麗にレスポンシブになっていないのですが、PCからSPになるまでの挙動は自分で考えてくださいませ。
日本語リファランス→https://getbootstrap.jp/
そしてこちら、bootstrapの日本語リファランスになります。
bootstrap使いたくねえよって言う人は使わなくてもいいのですよ。
ダウンロードしてお使いくださいまし。
使わなくていいんだよって言う人は使わなくてもいいのですよ。
  • css/top.css
  • index.html
  • js/top.js

にコードをガタガタと書き換えて作ってくださいまし。

bootstrapのこのサンプルを一応ソースコードに書いております。

これが普通に作れるようになったら、もうフロントエンドの現場に行けるだろうし、HP作るのが楽しくなるはず!家族や友達に見せて普通に自慢できるレベルですよ〜(画像とかテキストとか変えて自分色を出していってください。)

エンジニアでも新卒でテストばっかりさせられてHPも作れない〜という人もいるのです。

これを作りあげることで一皮むけた人間になること間違いなしです

今までやってきたProgateやドットインストールの学習内容が俯瞰して見られるようになるでしょう。

以上で今日の授業を終えますよー!

全然ヒントくれないのか!なっちる先生スパルタだなぁ。

ぐぐりまくるしかないな

応援してますよ😇

 

初心者
スポンサーリンク
なっちる先生をフォローする
なっちる先生
タイトルとURLをコピーしました