経験ゼロから学ぶHTML/CSS
こんにちは。
34歳2児のパパで夫婦フルタイム共働きをしているサティーです。
「入社11年目・転職歴なしでしたが病気療養をきっかけに30代後半アラフォー時代の働き方・過ごし方を模索中」がこのnoteのコンセプトですが
場所にとらわれない働き方の模索としてドットインストールの「HTML/CSS入門」をやってみました。
1.きっかけ
「場所と時間にとらわれないリモートワークしたいならPC1台あればできることだ!」と探してたのですが何からはじめりゃ良いか分からないのでGoogleで出てきたドットインストールの初心者講座を勢いで受けてみることに。
こちらです↓
◆HTML/CSS入門
・HTML入門 (全15回)
・CSS入門 (全17回)
◆教材
→プロフィールサイトを作るというテーマで1本2~3分程度でわかり易く
サクサクっと進みます。
◆学習時間
→事前のVisual Studioとか準備含めても1講座1時間×2回=2時間程度でした。
わからない単語が出たら随時巻末にある参考サイトとか見てました。
2.やってみた感想
◆HTML
→WEBページ表示する裏方の概念だって理解できました。書いた文章が
テキスト記事じゃなくてホームページという表現になるだけで、
やってることはブログ記事書くようなものなんだとw。
◆CSS【カスケーディング・スタイル・シートの略】
→色とか配置とかレイアウトルールを作ること。これでHTMLで
部屋つくってCSSでオシャレになるかきめるって感じなんですね。
◆全般
→「作業自体は単純な内容の繰り返しで多分慣れるともっと効率よく
やれるんだろうな~。自分が設定した内容が反映されるすごい!
でも、そんなに楽しいわけでは無かった。」というのが本音でしたw…
あと、昔Excelメイン、Accessちょこっと使ってた業務で効率化
するために関数ググって習得してた思い出がデジャブしましたね。
3.で、良かったの?悪かったの?
良かったです。
◆良かったこと
→語弊を恐れずに言うとプログラミングは全部"書くこと"だから基本的な
書き方理解できて良かった(というか知らないと次に進めなかった)。
◆悪かったこと
→HTMLとCSSだけ知っててもまあスキルとしては弱いですよね。
Excelとword使えても金にならないのと一緒なんだと思います。
web業界入るための最低スキル。
確かに職場でも新しい人入ってきて『Office特にExcel教えてください』
ってなった時の絶望感半端ないので
『HTML/CSS × マーケティング × フロント営業経験』とか
他のスキルと組み合わせる基礎スキルって感じですね。
小学生はプログラミング必修ですし30代の僕は今からでもキャッチアップしていかないと娘の方が圧倒的なスキルを持つかも…w
4.今後どう使う?
今はBtoBのフロント営業やってるんですが業務で''API"というキーワード頻発していてググッても理解できていなかった部分の糸口になりそうです。
僕は非エンジニアでプログラミングする側でなくてエンドと用途を
検討する側なんですが相手のエンジニアと話が合わなすぎて焦っていた矢先でした…
今回APIの大元となるHTMLのソース書くのを経験できたので『習うより慣れろ』という感じで頭にスーッと入ってきたのは良い収穫で前に進めそうです。
※Qiitaでこの記事読んでも途中投げだしで挫折しないレベルになりました。
そして勢いでQittaも登録しましたw
【いまの理解を整理】
----------↓基本3本柱 自宅(WEBページ)を建てる
◆HTML【骨組み】
→httpでリクエストしてレスポンスあって表示される
◆CSS【装飾】
→表示されるレイアウトを変える
◆javascript【手の込んだ装飾】
→CSSで補えない動きのある飾り付け
---↓応用 他の家(WEBページ)が使ってる良いネタ(API)持ってくる
◆jQuery【他の家の手の込んだ装飾ランキング】
→Javascriptのよく使う機能ライブラリで短いコードで実装できる
◆JSON※1【他の家の装飾をどう受け入れるか定義する】
→クライアント側のリクエストとサーバー側APIのレスポンスを管理
→Ajax(エイジャックス)通信※2 にて実装するケース多い模様
◆PHP※3【自動ドアみたいに来訪者に合わせた設備起きたい】
→クライアントが訪れたら動的にサーバー側が動く仕組み作れる
※1. JavaScript Object Notation
※2.Asynchronous JavaScript + XML
※3 応用では人気言語なので他言語も勉強するのが吉?
単なエンドの要望は『試しに書いてみた』とかできるようになるといいな~と淡い期待を抱きながらこの挑戦続けます!
お読みいただいてありがとうございました!!
--------------------------------------------------------------------
【参考サイト】
・どちらかというと「WEB API」の知識をつけたくて上から順番に辿っていきました。非エンジニアでもわかりやすかったです。
この記事が気に入ったらサポートをしてみませんか?