【基礎】プログラミング初心者からWordPress自作テーマを制作するまで【最短2ヶ月】

こんにちは。これすけです。
プログラミング初心者から、1ヶ月半でPHPオリジナルサイト、2ヶ月目で当サイトのWordpressオリジナル自作テーマを制作できるようになりました。


上記のPHPを用いたオリジナルサイト、Wordpressオリジナルテーマ制作まで、私が実践してきた学習過程を順にご紹介していきます。

プログラミング初心者から2ヶ月でWordpress自作テーマを制作するまでの学習手順

私がこれまで学んできたプログラミング学習法の過程をざっくり説明すると下記の通りになります。上から学習した順番になっています。

STEP.1
HTML/CSS基礎
STEP.2
レスポンシブデザイン
STEP.3
Bootstrap4
STEP.4
模写テスト
アウトプット実践
STEP.5
ポートフォリオ制作
ここまでできれば、コーディング案件の営業可能
STEP.6
JavaScript基礎
STEP.7
jQuery基礎
STEP.8
PHP基礎
STEP.9
PHPアウトプット
STEP.10
PHPオリジナルサイト制作
初めてのWebサービス制作
STEP.11
Wordpressについて
STEP.12
Wordpress自作テーマ
ここまで出来れば月10万円可能

では、具体的にどのように学習を進めたのかを、順を追って説明していきます。

HTML/CSS基礎

≫Progate HTML&CSS初級編
≫Progate HTML&CSS中級編

基礎はProgateで学びました。無料で受講できるのでオススメです。
Progateだけでは、まだ難しいなと感じる人は、ドットインストールの学習も受けると良いです。

≫ドットインストール はじめてのHTML（全15回）
≫ドットインストール はじめてのCSS（全17回）

ドットインストールの動画学習です。Webサイトを作る上で重要な基礎の部分なので、自分でコードを書きつつ、しっかりと理解するまで時間を使いましょう。

学んできたことを実践してみる

ここまで理解できたら、次は下記で復習です。これが理解できるようになればWebサイト構築の基礎は完了として良いです。
≫ドットインストール 実践！ウェブサイトを作ろう（全16回）

レスポンシブデザイン

≫Progate HTML & CSS 上級編 + 道場コース

Webサイトをスマホやタブレットなど、画面の違う大きさに対応させるための技術です。ドットインストールのレスポンシブ講座は、プレミアム会員限定となっているため、Progateにて学ぶことをオススメします。

ドットインストールにてHTML/CSSの基礎は学習済みなので、HTML & CSS上級編から学びましょう。これでレスポンシブデザインについて理解が深まります。
この頃から、説明通りの学習に加え、自分なりに改造を加えてアウトプットしてみることを始めました。


少しでも理解したら、とにかくアウトプットをすることが大切です。アウトプットはインプットの何倍もの効果があります。

Bootstrap4

≫ドットインストール Bootstrap 4入門（全22回）
※(6/3)現時点ではプレミアムプランになってしまっているようです。ですが、課金して学ぶことを推奨します。価値は十分にあります。

CSSによるスタイルコーディングを、劇的に効率化してくれるフレームワークです。特にGridレイアウトは必ず理解するようにしておきましょう。また、Bootstrapでも同じようにアウトプットをしています。

POINT
繰り返しになりますがアウトプットはとても重要ですので、インプットだけではなくアウトプットも必ず実践するようにしましょう。ちなみに、当サイト（koreblog）でもBootstrapをつかってコーディングをしています。

パソコンを使っての学習がメインですが、移動中の電車などでは、スマホ版Progateを利用して隙間時間でもインプットをするようにしていました。移動中にスマホ版Progate→帰宅後にパソコンでの学習。この流れによって、必然的に予習と復習が出来るのでかなり効率よくインプットできます。

実践アウトプット

ここまでの学習を経て、マナブさんの模写テストへ挑戦してみました。ここまでしっかりと学べていれば、スムーズに制作できると思います。わからないことがあっても、ググってしまえば必ず答えが見つかります。問題に直面した時に、諦めずに解決する意思がとても大切です。

≫ 模写テストサイト.1
≫ 模写テストサイト.2

模写テスト1

模写テスト2


この頃、同じように周りで模写を始めている方が多く、どうしても周りと比べてしまう自分がいました。人と比べることはあまり良くないかもしれませんが、自分はかなり刺激を受け、プログラミング学習に身が入りました。こっそりライバル設定した人と競うことで、かなりのスキルアップができます。

あと、なるべく毎日Twitterで発信した方が良いです。
皆さんにライクされたり、コメントをいただけることが、かなりの原動力になります。

ポートフォリオ制作

模写を2件終えた後は、ポートフォリオ制作です。
≫自作ポートフォリオ

ポートフォリオは、すでにあるHTMLやCSSの記述を修正する作業がメインですので、自分で難しい記述をすることは特にありません。私が制作したポートフォリオは動きも多く、一見すごいサイトに思えますが、ここまで学習を終えた方なら、意外と簡単に作れたりします。

具体的には、作るというよりは、中身を差し替える。という表現の方が正しいかもしれません。この時点でポートフォリオを公開する目的は、ドメイン取得やサーバーでサイトを公開するまでの知識を身につけるために取り組みました。

ポートフォリオの制作は、ショーヘーさんの記事を参考にさせていただきました。
≫DAY18. 『HTMLテンプレートを使ってみよう＋自分のポートフォリオサイトを作ろう①』

ポートフォリオの準備が出来たら、次にインターネットにポートフォリオを公開する準備をしましょう。Webサイトを公開する手順は、必ず覚えなければならない項目ですので、必ず確認しておきましょう。

詳しくは下記の記事にまとめました。

ポートフォリオを公開する手順
Webサイトを公開するために必要な3つの手順！初心者でも簡単！【徹底解説】

ここまでで、「Webサイトを制作〜公開するまで」の基礎知識は身についている状態です。次はサイトに動きをつける、JavaScriptとjQueryの学習に進みます。

JavaScript

≫Progate JavaScript Ⅰ〜Ⅲ
ProgateにてJSの基礎知識を学習しました。基礎までだとⅢまでで良いと思います。私は Ⅰ〜Ⅲのみ学習しました。

jQuery

≫Progate jQuery 初級編
ProgateにてjQueryの基礎を学びます。JavaScriptの基礎が身についていれば、スムーズに理解できるはずです。

jQueryや他の言語にも言えることですが、全てを覚える必要はありません。こういう動作ができるんだなくらいでOKです。あとは、実装するときにGoogleで調べる→コードを使う→必要な箇所をいじる。という感じで構いません。

ある程度理解をしたら、必ずアウトプットもしてみてください。
方法としては、これまで作った模写サイトにjQueryを実装して動きをつけてみましょう。


ここまでがプログラミング初心者〜jQueryまでの学習方法になります。
次はPHP基礎を学び、実際にPHPを用いてアウトプット。その次にWordpress自作テーマへと進んでいきます。

これまでの流れを見ていただくとわかると思いますが、要所要所でアウトプットをすることが重要になります。少しでも理解できたなと思ったら、まずはコードを書いて実際に動くかどうかアウトプットをしてみましょう。仮に動かなくても、これまでの学習を見直したり、Googleで検索すれば解決できるはずです。とにかく実践あるのみです。

少し長くなってしまいましたので、PHPからの学習手順は次回の記事で紹介させていただきます。

続きの記事
【PHP実践方法】プログラミング初心者から実践した学習方法【おすすめ】

なお、プログラミング学習の手順【完全版】は、下記にて配信しております。

プログラミング初心者から、半年で33万円稼げるようになった学習の全手順を記録しています。

note



プログラミング初心者から、半年で33万円稼げるようになった学習の全手順

上記のnoteには、特典もご用意しています。

  • 作業動画を公開
  • テンプレートコードの配布
  • 完成したWebサイトのコードの配布
  • PHPで作ったWebサービスのコード一式を配布

気になる方は、ぜひ参考にしてみてください。
≫プログラミング学習の手順【完全版】

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


次の記事

【PHP実践方法】プログラミング初心者から実践した学習方法【お…