【初心者コーダー】Webサイトを作成する時に、学習した方法を紹介【スキルアップ】

こんにちは、書川(かきかわ)です。

WEBやメディアに関して全くの知識がなかった僕は、2018年の夏からプログラミングを勉強し始めました。どのようにしてプログラミング言語の習得をして来たかをシェアいたします。

このメディアを作るまでの簡単なロードマップ

以下が実際に僕がこのブログを制作する際に学んだ言語。

  • HTML5
  • CSS3
    ▶️はじめに、画面に文字を表示させるため、HTMLとCSSを学びました。
  • JavaScript(jQuery)
    ▶️画面に表示させた文字に動きをつける事で安っぽいサイトが少しだけリッチになります。
  • WordPress
    ▶️WordPressのテーマをPHPという言語を使って自作してみました。ここが非常に苦労しました。
  • Sass
    CSSのメタ言語であるSassを導入する事で、管理しやすくなりました。

これらは、何十万円もお金を払って専門学校やオンラインスクールを受講する事はなく、結果的にこのWEBサイトを構築することが出来ました!

HTMLとCSSを学ぶ際にお世話になったモノ

僕が実際に初心者のうちにお世話になってモノを紹介します。

HTMLの技術書ならこれ一冊!

CSS・Sassの技術書で、ここまで丁寧に書かれた本は少ない!

※SassはCSSのメタ言語。初学者がいきなり導入するには負担が重いので、すでに製作した成果物のCSSをSassにしてみるなどして試しに導入を検討することをお勧めします。

Udemyなら本以上に価値のある経験を得られる。

僕が今でもやって良かったと思うのが、ジョナスさんがUdemyで公開しているPCやスマートフォンに対応した(レスポンシブ)WEBサイトを実際に構築してみると言う講義。

こちら▶️Build Responsive Real World Websites with HTML5 and CSS3

本では得られないTipsや、サイト構築に必須ではないけれど知っていれば他の人よりもイケてるデザインに出来るテクニックが満載でした。

まずは、ジョナスさんに講義を受ければ間違い無さそうです。

サイト構築を学んだら、イケてるデザインをたくさん吸収です。

動画や本で学んだ後は、世の中に溢れているイケてるサイトからインスパイアを受けてサイトデザインに盛り込んでいくだけです。

大事なのは参考サイトを模写したり、手を動かして実際に成果物を作ることだと思います。

僕がオススメのWEBサイトは以下の3つ。学ぶは真似ぶと言われているので、たくさんのサイトを真似して引き出しを増やしていきましょう!

https://responsive-jp.com/
画像をクリックでサイトに飛びます。
https://io3000.com/
画像をクリックでサイトに飛びます。
https://webdesignday.jp/

生のJavaScriptより、 jQueryの方がハードルが低いです。

生のJavaScriptを極めるには方向性が違うけど、コーダーが手っ取り早くjQueryを導入するなら間違いなくこの本。

簡単なJavaScriptであればjQueryを書いているうちに理解してくるから、始めから生のJavaScriptに打ちのめされるのが怖い方にも勧めたい。

Udemyなら小難しい事も楽しく学べる。

HTMLとCSSでWEBサイト構築は出来るけど、JavaScriptを学ぶと更に可能性が広がります。

そもそもJavaScriptは出来ることが多く、フロントエンドだけでは無くバックエンドでも活躍する事が出来る万能言語です。JavaScriptに詳しくなれると強いなぁと感じます。

フロントエンドだけで十分な方は、先ほど紹介したジョナスさんのWEBサイト構築の講義はきっと理解の助けになってくれます。

こちら▶️Build Responsive Real World Websites with HTML5 and CSS3

更にJavaScriptを突き詰めたい方は、上記の講座に加えて以下で生のJavaScriptを学習する事ができます。ちなみにジョナスさんの講義なので一貫性があります。

こちら▶️The Complete JavaScript Course 2020: Build Real Projects!

ジョナスさんは知識を出し惜しみしないので皆さんに知って欲しいです。

WordPressは結局この一冊。

正直、基本的な操作や説明はWordpressのサイトの中に全部書いてる。

自作テンプレートや小テーマをいじれる様になると、書店にある9割の本は初心者向けで同じ事しか書いてない本だらけでうんざりしてくると思う。

紹介している本は、痒いところに手が届く。自走して考えながらWebサイトを自由に構築したいならこの本は期待に応えてくれる。ぜひ。

Web開発者は、デベロッパーツール(検証モード)で少しでも楽をする。

楽をするということは手を抜くということではなく、もっと有益で価値の高いことに時間を効率的に割くこと。
出来る限りツールを活用して楽をすることをお勧めする。

Macユーザーは⌘ + shift + cを入力するとデベロッパーツール(検証モード)を使える。
これからweb開発しようと考えている方には必須。

本以外なら、動画で学んだ方が効率的。

なぜ、動画で学ぶことがオススメなのかは以下で説明していく。

これからWEB言語を学びたい方に一番の不安なところは、自分の書いたコードが正しいのかを客観的に確認できないこと。

メンターがいないと先に進まないこともある。
当たり前だけど、分からないことが分からないのが独学者の悲しい現実。

僕がお勧めするUdemyでは、0から完成までの一貫した流れでコンテンツの作成方法を解説しており、本だけで得られる情報量をはるかに超えていた。

巷では何十万円もするオンラインスクールが有名だが、経済的な無理をして受講する必要ない。

▶️未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

努力している人は皆が休んでいる時に行動している。

努力というのは時間の経過ではなく、作業量で圧倒的に差がつく。
動画は速度を調整して再生が出来るから、2倍速にして爆速でインプットしている。
限られた人生で時間は無駄に出来ない。控えめに、動画のコスパは最高だ。

高いお金払って先生を雇う必要はないと、このWebサイトを作って感じた。