35歳で初めてのプログラミングから転職まで【前半、HTML&CSS】

HTMLと書かれた画像です

プログラミングを知り転職をしようと思ったきっかけ

プログラミングを始めてみようと思ったきっかけは、年に1〜2度位しか会わない友達との何気ない会話の中で、私が「なにか他にいい仕事ないかな〜?」って言ったら「プログラミングやってみない?」と友達が勧めてきたのです。

友達の仕事はフロントエンドエンジニアというものらしいのですが、当時の私は全くどんな仕事かも分からなかったですが「仕事はたくさんあるよ」「覚えれば転職簡単だよ」とか、今までなら絶対にそんな言葉に乗らなかったのですが、なぜか今回はやってても良いんじゃないかという気持ちになり話を聞くことにしました。

IT業界は学歴不問の求人が多く、私は昔から体調が悪い時期が長く続いていて学校もあまり行かれていないので学歴も無く、今後が不安だったので学歴不問座ってゆっくり仕事ができるところに惹かれました。

「コードを書く」「ホームページを作ったりする」「言語?」と言われてもその時は全く理解していなかったです。

やりたいものにはどの言語が必要か、ニーズがある言語はなにか、twitterなどで人気の人のを見たりして調べて言語選ぶべきですよね。
最近ではYahooで働いてる人と知り合ったのですが、「PHPが良いよ」など教えてくれました。

最初に準備したのは

自分は地方に住んでいるため友達には遠いのでたまにしか会えないのですが、次の月に新幹線に乗って会いに行ったら、そのまま向かったのは本屋さん。

友達がいくつかパラパラ本を見ながら最終的に選んだ2冊を購入して読んで見てと!

書きながら覚えるHTML&CSS入門ワークブック』この本は、これから最初に勉強するやつだよ。

フロントエンジニアのための現在とこれからの必須知識』こっちは今はまだ理解できないけどいずれ参考になるから読んでねという本でした。

パソコン不慣れな私には紙媒体の方が読みやすくありがたい。

ただ読んでも意味が分からず英語っぽいのも出てきて英語が苦手なので不安しか無かったですが、「やる」って言っちゃったし”やる”しかない!と言い聞かせていました。


友達は次にネットでパソコン探しを初めて「MacBookAirのこの辺りが良いと思うよ」って言われ、その日のうちに勢いで購入しました

学習はじめ(HTML&CSS)

届いたパソコンを持って週末新幹線に乗って友達のところへ。

  • 友達 「本見てなんとなくわかった?」
  • 私 「ぜんぜん」「・・・」「・・・」

すみません、こんなレベルで…

そこで友達が最初に教えてくれたのは、本見ながらProgateってサイトで勉強してみよう!!ってことでした。

パソコンさえ経験あまりないので、まずは『コード書くの楽しんで』という事で、仕事や用事が色々あり帰るのが10時〜11時と遅い日が多かったので、35歳は無理せず自分のペースでやる。

目標

  • HTML&CSSの本を毎日10ページ進める!(1冊300ページ程)
  • Progateを1日1章はやる。

ProgateのHTML&CSSを最初から理解出来ずにProgate見て分からなくて本でも調べてと3周するのに1ヶ月程かかってしまいました。。。

  • 1周目はどんなものか知るために答えを見ながらで良いからとりあえず最後まで通してやってみる
  • 2周目に理解をタグの意味とか、動かし方覚える
  • 道場はかなりつまずくので3周目に頑張ろう!

最初から完璧に理解しようとせず、こんな感じでさらっと流せば良かったんだと思います。

少し時間が取れる人は1〜2週間で終わりで良いいのではないかと思います。
当時は存在を知らなかったのですが、ドットインストールも一緒に見ていれば、エディタの使い方などの説明あり良かったなと思います。

次はサイトをコピーしてみよう

Progate終わった!と報告したら「今度は何でも良いからサイトを見てコピーしてみよう」と指示が!

その時に教えてくれたのは自分で書けるようにエディタを入れることと、デベロッパーツールを使うとサイトの作りを見れる、GithubってところにSourceTree使ってネットにコード保存してみようかって事でした。

その時教えてくれたエディタはSublime textが就職してから周りのめっちゃレベルの高いエンジニアさん達は皆vs code(Visual Studio Code)だったので、こっちのが良かったかな??
SourceTreeは就職してからとても役に立ってくれました。

自分は特に好きなサイトも思いつかず「twitterの画面でもやってみる!」ことにしました。

友達 「何のタグ使ってるかとか、どこをグループにして階層作ってとかはできるだけ見て考えてから作ろうね!」

見るだけで分かるはずもなく、デベロッパーツールで調べて<li>を横並べにしてるんだー!アイコンmarginマイナスにしてずらしたんだ!など、カンニングしながら進めてみた。

一箇所作って、次作ってる時にここも<div>でまとめないと動かせないとか、色んな所を<div>で囲い直しながらなのでなかなか進まない…

サイトのコピーも1ヶ月位かけてやっと完成!

YouTubeの画面も模写しようとしましたが、ほかサイトの動画を埋め込んだりはよく分からず、この時はサイドバーだけ真似して断念…

1年後位先ですがReactを練習の時にYouTubeの動画を表示させるページ作りをすることがありました。

Githubに登録してリポジトリ作って、SourceTreeでURLからクローンしてできたフォルダに今回作った.htmlと.cssのファイルを入れてプッシュ!

  • 就職するまでは、Githubとかはほとんど理解できず使ってませんでした。
  • ヘッダー、サイドバーとか1箇所作ることにGithubにプッシュしながら作れば良かったな。
  • パソコン初心者の私には、ターミナルやvscodeでやるのは難しく、SourceTreeの方が変更箇所や誰が触ったかなど分かりやすくて良かったです。
  • Githubは、私一人しか使わないので就職してから複数人で作業する時に、「プッシュできない」「コンフリクトってなに?」と最初はパニックでした。

あとは本に載っているものをエディタに書いたり、floatやflexが理解が難しく何度かエディタに書いて試したりしてました。

友達

それじゃあ次はProgateのJavascriptにいってみよう!!