こんにちは！Takeshi(lhZJlNpUPZ1iCfR)です！
WEBデザイナーやWEBコーダーになりたい方が独学でスキルを身に付けたい場合、何からどう勉強していいか分からずに中々前に進めていない方って結構いらっしゃるのでは無いでしょうか。
勉強して、WEBサイト模写して、慣れてきたら実際に案件を受注してみよう！
…でも最初って何をどうやって勉強したらいいのかな？
ここではそういった方に向けてとりあえずProgateでこのコースをやればwebサイトの模写に取りかかれるよ！
という内容でお伝えしたいと思います。
結論から言うと下記になります。
- HTML/CSS
- jQuery中級編まで
- JavaScript+jQuery上級編
こちらの3つになります。
実際にどのように勉強を進めていけばいいのか僕の経験を踏まえて紹介して行きたいと思います。
※このページを見ている方でProgateの存在を知らない方は少ないと思いますが、念のために紹介しておくと、Progateとは、「初心者でも挫折せずに学べるサービス」をモットーに開発されたオンライン学習サイトです。
未経験からプログラミングを勉強する方でも、とても理解しやすいように作られているので、まだ登録していない方は是非登録しましょう。
僕もめちゃお世話になっています。
ProgateのHTML/CSSコース
Html
まずはHTML/CSSのコースを受講しましょう。
個人的にオススメな進め方としては、
- 初級〜中級道場コースまでを1週
- 中級道場コースでおそらく詰むので、初級〜中級編までを再度受講
- 中級道場コースを再度受講
- 上級編を1週
- 上級編の道場コースを受講
- 以上の流れを3週する
こんな感じになります。
終わったら必ずアウトプットする
上記の流れが完了したら実際に自分のエディタでHTML/CSSを書いて架空のwebサイトを作ってみましょう。
もちろんレイアウトなどが思いつかなければProgateに出てきたようなwebサイトを参考にしても構わないです。
ちなみに、僕の場合は全くレイアウトが思いつかなかったのでProgateの中級編に出てきたwebサイトを参考に画像やテキスト、色などを変えて作ってました。
道場コースが全然クリアできない場合
何回やっても道場コースが全然クリアできない！
配置とかも間違って無いはずなんだけどなあ。
道場コースを進めていると上記のようなことが起こることがあります。
実際に僕も中級道場コースを進めている時に「いや絶対間違って無いだろこれ」と確信してるのにエラーが出てきて進めない…という現象に悩まされました。
もしこんなケースに遭遇したら、潔く答えをコピペして進めましょう。
ここで忘れちゃいけないのが、道場コースをクリアする為にProgateに臨んでいるわけではなく、HTML/CSSを覚える為にProgateに臨んでいる、ということです。
絶対間違って無いはずなんだけど何故か進めない…という確信がある場合は答えをコピペして先に進んでしまいましょう。
ProgateのjQueryコース
HTML/CSSが終わったら次はjQueryのコースを受講しましょう。
個人的にオススメな方法としては、
- jQuery〜jQuery中級道場コースを1週
- 上記を各3週する
こんな感じです。
このコースを受講することで自分のwebサイトにアニメーションをつけることができます。
例えばスマホの右上にあるハンバーガーメニューをタップして上からメニューが降りてきたり、とかそんな感じのやつです。
アウトプットの方法
HTML/CSSコースが終わって自分で作ってみたwebサイトに実際にjQueryを使ってアニメーションをつけてみましょう。
慣れてくるとjQueryのプラグインを試しに使ってみる、というのもいいかもしれません。
色々なプラグインがあって面白いので実装して遊んでみることをオススメします。
JavaScriptを先にやらない理由
jQueryでは無くJavaScriptを先にやっても構いませんが、JavaScriptを先にやると実際にどうwebサイトに関係してくるのかが分かりづらく、「JavaScript終わったけど、どういう時に使えばいいの？」みたいな状態になります。
実際にwebサイトに動きをつけるなどの項目が無いので達成感が得にくく、難しいので挫折しやすいです。
実際僕も最初JavaScriptのコースから始めたのですが、「これを使って何ができるの？？」みたいな状態になったので途中からjQueryのコースに切り替えました。
ProgateのJavaScript+jQuery上級コース
jQueryが終わったらJavaScriptのコースを進めましょう。
進め方としては、
- JavaScript Ⅰ〜JavaScript Ⅲ各2周ずつ
- 終わったら、jQuery上級コースを各2周ずつ
僕はこんな感じに進めていました。
JavaScriptのコースでは条件分岐の書き方、配列の仕組みなどを何と無く把握できてれば大丈夫なんじゃ無いかな、と思います。
そしてそこで学んだ知識をjQuery上級コースで実践的に使っていきましょう。
この流れで勉強することで実際に条件分岐などを使って、自分のwebサイトにアニメーションが実装されるまでの理解がしやすくなるのでオススメです。
アウトプットの方法
実際につけてみたいアニメーションのテンプレをググって、そのコードをカスタマイズして遊んでみましょう。
例えば、「スクロール ふわっと jQuery」とかでググると、スクロール量に応じて要素をふわっと出現させるコードを書いて公開してる方が沢山いらっしゃいます。
こんな風にググって出て来たコードを自分なりに改良して遊んでみると、とてもいい勉強になるのかなと思ってます。
模写に慣れたらやっておきたいこと
以上のコースを実践すればwebサイトの模写をするためのスキルは付いているはずです。
いくつか模写が終わった段階でオススメなのは、Progateのphpコース、Wordpressの勉強です。
Progateのphpコース
模写に慣れたらphpのコースを進めるのがオススメです。
お問い合わせページの機能なんかを実装する時や、Wordpressを使う際に必須になってくる言語だからです。
こちらも各3周ずつぐらいで進めるといいのかな、と思っています。
WordPressの勉強
WordPressって世界のトップ1000万ウェブサイトのうち、37%がCMSを使っている中で、WordPressはその60％のシェア率らしいです。
めっちゃ高いですよね。
是非この機会にWordpressも習得したいところですね。
ちなみにWordPressの勉強方法については以下の記事で紹介しておりますので、是非読んで見てください。
未経験からWordPressでコーポレートサイトを作れるようになるまでの学習方法
最後に
いかがでしたでしょうか。
ざっくりですが僕はこんな感じに学習を進めてきました。
もちろん人によって進め方や教材も異なるので一概には言えませんが、これから勉強を始めたいけど、何から始めようかなーなんて考えてる方がいれば是非参考にしてみて下さい。
また、「独学だけど、この先どんな流れで勉強を進めていいかよく分からない」という方は、プログラミングの独学勉強方法＆稼げるようになるまでのロードマップ【WEB制作】こちらの記事も参考までにどうぞ。
プログラミングで稼げるようになるまでのロードマップ【完全独学】
それでは最後までご覧いただきありがとうございました！