無料で学習!WEB制作ロードマップ【HTML/CSS/jQueryコーディング編】【2022年度】

学習方法
あさひ
あさひ

何かしらのご縁があって、このロードマップに辿り着いた皆さま、ありがとうございます!

① 主婦の皆さま、子供がいるとパートにもなかなか出られないですよね。通勤時間もったいない!

② 会社員の皆さま、複数の収入経路が欲しいですよね。でも帰ってきたら外に出る体力がない!

③ 学生の皆さま、このまま会社員になって良いのか?自分の力で稼ぐスキルを身につけたいですよね!

④ パソコン好きの皆さま、無料で学習したいと思ったらここに辿り着いちゃった?素晴らしい✨

あさひ
あさひ

私は①主婦パターンでした。一度パートに出たものの子育てとの両立難しい!!ということで在宅でお仕事ができるWEB制作に飛びつきました。
46歳で学習を始め、7カ月後の47歳で初案件獲得。
この記事では私がどのように学習を進めていったのか、紹介したいと思います。

はじめに

このロードマップについて

こちらの記事は未経験者がWEB制作を無料で学習する際のロードマップです。
WEB制作の中でも「コーディング」の学習方法です。

いきなりですが未経験者だと「WEB制作」とはなんぞや?ですよね。
ほぼ「ホームページ制作」と考えていただいて大丈夫です。
ホームページはデザインを作り、それをネットで見られる形にします。
その「ネットで見られる形にする」ことがコーディングです。

そしてここではお仕事ができる最低限「HTML/CSS/jQuery」の学習方法の説明です。
お仕事の幅が広がる「WordPress」、もっと手軽にWEB制作ができる「ノーコード」、WEBの利用はホームページだけじゃない!「公式ライン設定・運用」については別記事でロードマップを書こうと思いますのでお楽しみにしててください✨

なぜ無料で学習を推奨したいのか

あさひ
あさひ

皆さま、一番期待してるのは無料ですよね!?

はい。そんなあなたに読んでほしくてこのロードマップを書きました。

例えばスクールに入ってみて「もしかして自分にはWEB制作はあってないかも」と感じるかもしれないですよね。
高いスクール代…。やはり痛い!

でも無料ならば失うものはありません

正確に言えば費やした時間は失ってるかもしれませんが、何せ人生100年時代。
46歳だって、まだ半分に届いていないんです。
ほんの数か月、1年だって試してもいい時間だと思いますよ。

とにかく実行してみてください。
もし自分には合ってなくても「WEB制作は自分には合っていなかった」ということが分かるので、じゃあ良かったじゃないですか!(少々強引。)

対象者

コーディング?デザイン?

前述しましたが、こちらではWEB制作の中でも「コーディング」の学習方法を説明しています。
自分の経験がないのでここではお勧めしませんが、デザイナー寄りの方でしたら「ノーコード」のWEB制作もいいと思います。

例えば以下のツールです。
・ペライチ
・Wix
・Studio
(他にも Webflow, Ameba Ownd, Strikingly, Jimdo, …いろいろありますね)

ノーコードは「一般の人がWEBページを作れるように」というコンセプトなので、私はいきなりノーコードでも良いと思っています。
ただし細かい設定をする時にはコーディングの知識が必要になることがあります。
なのでお仕事にするのであれば「技術屋さん」ではなく「制作代行」しますよ、というスタンスで「私が制作できるのはこの範囲です」というのを厳密に設定した方がいいでしょう。

目標レベル

WEB制作でお仕事を取る方法は以下が考えられます。

❶未経験での就職・転職
❷経験者として転職
❸制作会社とパートナー契約
❹エンド営業(店舗・中小企業に直接交渉)
❺クラウドソーシングサイトで受注

結論ですが、この記事では「❺クラウドソーシングサイト」で 0→1 を達成したい方に向けての学習方法を案内しています。
(※「0→1 を達成」というのはずばり最初の収入です💰💰💰)
それが前述した「HTML/CSS/jQuery」の学習です。

順に説明すると「❶未経験での就職・転職」「❷経験者として転職」は説明省略として、「❸制作会社とパートナー契約」「❹エンド営業(店舗・中小企業に直接交渉)」は「HTML/CSS/jQuery」だけでは厳しいと私は考えています。

「❸制作会社とパートナー契約」はこのロードマップだけではまだスキルが足りないです。(知人の会社など交渉次第でいけるかもしれませんが)

「❹エンド営業(店舗・中小企業に直接交渉)」はどのサーバーを選ぶか、保守運用、マーケティングなどの知識が必要となるので、こちらもまだスキルが足りません。(元々知識がある方や、知人のサイトなど調べながらの納期で了承いただけるならOKです)

ということで、このロードマップは早くお仕事をしてみたい方向けです。

あさひ
あさひ

とはいえ注意!!
必ずしもお仕事が取れるわけではありません。

このロードマップが終わっても、次の学習を始める事をお勧めします。
その頃にはWEB制作界隈の様子が何となく分かってきてると思います。
自分で進む方向を考え、何を学習するか決めましょう。

【次の学習例】
・サーバー周り知識
・WordPressオリジナルテーマ作成
・WordPressカスタマイズ
・Shopify

無料とは?どこまで無料と言ってるのか?

あさひ
あさひ

おっと危ない。「無料」の定義をしておかなきゃいけないですね。
無料と言っても以下の条件は必須です。

① そこそこ新しいパソコンが家にある
② ネット環境もある
③ 衣食住は確保できている
④ 図書館に予約システムがある。そこそこ最新の本がある

①~③について。
やはり元手や生活資金は必要です。
残念ながらスマホではできません。(いや…。よっぽど工夫したらできるか???)
パソコンと家のネット環境を整えましょう。
ここはパートなりアルバイトなりメルカリなり!
頑張ってお金をかき集めましょう。

①についてはやはり古いパソコンは動きが遅いです。ストレスになるので新しいパソコンの方が良いです。
WindowsかMacかについてはどちらでも良いです。(私の意見)
ネットを見るとどちらもお勧めされてるし、どちらでもお仕事している人がいますから。
じゃあどちらでも良いんじゃない!?と思います。
数年したら自分の好みが出てくるので、その時に改めて選びましょう。

1つ言うなら、もし新しいパソコンを買うようであれば家にあるのとは違う方を買った方が良いかもしれません。
古いパソコンは動作確認用に使えます!

④については「無料学習」のからくりがバレバレですね。
はい。図書館です。
予約して使いましょう。

学習の前にやること

図書館の本の予約

あさひ
あさひ

さて。最初にやることがあります!

まだまだ学習の前に確かめる事はあるのですが、ここで図書館の本を予約しておきます。
なぜなら、みんな借りようとして予約しているから順番待ちなのです!

世の中には図書館の本で学習している人たちがたくさんいるんです。
今はネットで図書館の予約ができる良い世界になりました。
以下の本を予約しておきましょう。

そしてここが私の無料学習法の欠点でもありますが、いつ予約した本の順番が来るのか分かりません
後述しますが、本の順番が回ってきたら下記で述べていることは一時中断してこちらの本に取り掛かってください。

時間の確保

あさひ
あさひ

最初から最後まで取り組まなければいけないことがあります

「時間の確保」です。

主婦だとしても社会人が副業でやるにしても、一番の壁はここですよね。
しかし学習期間はもちろん、お仕事を受けるようになっても納期がある仕事は時間がなければできません。

どうやって時間を確保するか?

(1) 今、何をして24時間を過ごしているのか洗い出す
(2) その中で削れるものを探す

シンプルにこれだけです。
注意としては睡眠時間や趣味の時間は削っちゃダメです。
(私の場合ですが多くの人が当てはまるのでは?)
睡眠や趣味の時間を削ると元気がなくなってしまいます。そうすると学習を止めてしまう。
主婦でしたら削っていいもののお勧めは(?)家事です!(私情爆発。)
家族に伝えて家事時間を削りましょう。

と言っても、やはり難しいですよね。
かくいう私もできてるとは…言えない。
皆さまの工夫、教えて下さい!!

最初は10分でも良いです。
お仕事を始めるまで、時間を作る練習をしていきましょう。

情報収集「ネットでロードマップを調べる」

今、この記事を読んでいるということは検索した結果だと思いますが、WEB界隈ではいろんな方がロードマップを書いています。
無理にこのロードマップを勧めるわけではありません。
自分のライフスタイル・性格に合うのが一番です!

情報収集「そもそもWEB制作とはなんぞや」

あさひ
あさひ

ここでちょっと整理整頓です。
一口に「WEB制作」と言っても実はいろいろなお仕事があります。

・ディレクター
・デザイナー
・コーダー
・バックエンドエンジニア
・中小エンドクライアント向けに1人で全部行う

広義の意味で捉えると、例えばサイトに載せる写真を撮るカメラマンさんだって「WEB制作のお仕事をしてる」と言えますもんね(まあ言わないと思いますが)

別に今からはっきり決めておかなくても良いと思いますが、様々な種類があると知っておいた方が良いと思います。

WEB制作の流れを知りたいときは、こちらの本がおススメです。

ちなみに私は
「中小エンドクライアント向けに1人で全部行う」「制作会社やフリーランスチームでコーダー」で迷い中です。
そうです。実は私もはっきりとは決めていません(笑)
なので両方やって考えてみようと思ってます。

ただ、このロードマップではコーダーとして初案件を取るまでを目的としているので、コーディングについて中心に述べていきます。

クラウドソーシングサイトを覗いてみる

あさひ
あさひ

実際にどういう形でWEB制作の仕事が発注されているのか知りたいですよね

今は良い時代になりました。「クラウドソーシングサイト」というお仕事のマッチングサイトがあります。
そこでどんな仕事が発注されているのか調べてみましょう。

クラウドワークス
ランサーズ
ココナラ

①②は発注商品が並んでいるサイト、③は自分のスキルを売るサイトです。
これらのサイトで「仕事を探す → ホームページ制作・WEBデザイン → HTML/CSSコーディング」で検索してみましょう。(③ココナラでは最初に「サービスを探す」「出品者を探す」から検索です。)

少し学習してみよう・そして楽しいかどうかの見極めをしてみよう

あさひ
あさひ

なかなか本格的な学習に入らなくてすみません…💦
なぜかというと「好き」を仕事にして欲しいから!

理由はいろいろあります。

・好きじゃないと続かないから
・明日死ぬかもしれないんだから好きなことばかりしていこう
・努力を努力と思わないので楽

ちなみに「嫌な事・辛い事」をしてもいいのは以下の条件の時だけです。

・続けた先に良い事があると分かる場合


さて。前置きが長くなりましたが、好きかどうかを見極めるにはどうすれば良いか?
まず、今までの行動を振り返ってみてください。

・プログラミングが好き
・インターネットが好き
・パソコンが好き

WEB制作に辿り着いた人であれば、おそらくパソコン好きだと思います。
向いている人だったら、今までもそれなりの兆候(?)があったはずです。
何が言いたいかと言うと、「在宅でできるから良さそう」「とにかく稼ぎたい」だけの理由でWEB制作を考えているのであれば、他の道もあるのでは?ということです。

Progate

じゃあ今まで別にパソコン好きじゃなかったから私には向いていないんだなと思うのは時期尚早です。
単にタイミングが合わなかっただけかもしれないので。

自分が向いているかどうかを確かめるには、まず試してみるのが確実です。
そのために便利なのが以下のサイトです。

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

このHTML/CSSの無料部分をやってみてください。
良い点は2つ。
①ブラウザさえあればできる
②パソコンはもちろんスマホでもできる

これをやってみて「面白そうかも」と思ったのならさらに学習を続けてみましょう!

ドットインストール

Progateの無料分が終わったらこちら。

ドットインストール
3分動画で初心者や独学の方でも無理なく勉強が続くプログラミング学習サービスです。Web制作の基礎から子供向けのゲーム制作レッスン、さらにシステム開発に使われるPHP、Ruby、Pythonなどの入門レッスンまで幅広く言語を体験できます。

こちらも無料範囲をやってみましょう。
同じくネットで学べる教材ですが、Progateと内容はあまり被りません。

こちらの良い点は「実際のWEB制作と同じようにエディターでコードを書き、ブラウザで表示する」というところ。

実際にブラウザ上で表示されるのって、ちょっとした感動ですよ。
私、すごい!!
という感動を味わえます。

私、WEB制作好きかも!→だったら本格的な勉強の前にこれをやろう!

あさひ
あさひ

上記の2つのサイトをやって、自分に合いそうと思ったら本格的に学習していきます。
さて、本に沿ってやりましょう。
というところですが、実はまだです。
なかなか始まらなくてすみません。

あさひ
あさひ

無料学習が有料学習に負けるところ…。

それは「継続するモチベーション」だと思うのです。

大丈夫!私強いから一人でできる!という人もいると思いますが、そうでない場合は以下をお勧めします。

ツイッター

まずツイッターを始めましょう。
情報収集です。
タグを付けてツイートすれば、WEB学習界隈の方達と繋がれます。

「#Web制作 #プログラミング初心者 #Progate #ドットインストール #駆け出しエンジニアと繋がりたい」などなど。

ツイート内容はもちろん自由ですが、何をつぶやいていいか分からない方は以下を参考にどうぞ。

① 毎日の進捗記録
② 学習の感想
③ その日に学んだこと

ツイッターについては「頑張りすぎないツイッター運用(仮)」ということでBrainを書く予定です。
お楽しみに!

仲間づくり

ツイッターを見ていると、Web制作系のオンラインサロンがいくつも目につくと思います。
学習系・営業支援系、様々なジャンルがありますが、どれもお高いですよね。
しかも学習初期の段階なら必要ありません。

でも初期から必要なのは仲間です。
ということで私も入ってるお勧めサロンはこちら。

【Web制作】独学応援サロン 〜 独学はひとりでやるもんじゃない!
まだひとりで独学してるんですか?「独学はひとりでやるもんじゃない!」を信条に、Web制作/Webデザインの独学者が自由に意見交換、勉強や仕事の相談をできるフリースペースが《独学応援サロン》。どなたでも、無料で、いつでも、自由にご参加いただけ...

めがねんさんがサロン主のWEB制作の独学者が集うサロン。
私ももういい年なので(?)別に仲間がいなくても勉強続ける精神力はあると思っていましたが、間違いなく入って良かったと思います。

あ、これを言っていませんでした。

無料です!!

時々ツイッターでサロンやスクールが炎上していますが、こちらは炎上しようがないんですよ。
無料なので。(大事なことなので2回言いました。)
ぜひご検討してみてください。

本格的な学習開始 – LEVEL 1

あさひ
あさひ

Progateとドットインストールでだいたいの雰囲気は掴めた。
ツイッターやサロンで勉強する体制も整えた。
お待たせしました!
本格的な勉強開始です。

ここで【忍者CODE無料問題集】【1冊ですべて身につくHTML & CSSとWebデザイン入門講座】の2つを紹介します。
どちらを先にやっても良いです。
図書館の予約の本の到着次第ですね!

HTML/CSSの定着【忍者CODE無料問題集】

あさひ
あさひ

なぜこれが無料なの!?
忍者CODEさんが運営するサイトです。
このサイトを知った時はビビりました!

忍者CODE|挫折させないオンラインのプログラミングスクール
忍者CODEは、未経験からプロのITエンジニアやWeb制作者、Webデザイナーを目指せるオンラインのプログラミングスクール。初学者でも挫折させない充実したサポートと、受講後は高成功率を誇る転職支援や100%案件保証のプランが特徴。

この【忍者CODE無料問題集】ですが、はっきり言って私の転機です。
というのは、これをやるまではせいぜい1日1時間の勉強だったんですよ。
それがこれをやったら面白くて面白くて。
1日4時間やってました!

基本は問題を解いていくのですが、以下は簡単なアドバイスです。

私はhtmlとcssファイルを1つずつ用意してそこに書いていました。
問題ごとにファイルを作るのは面倒なので、適当に問題番号のクラス名をつけて書いていきました。
<div class=”b1-a”> ←初級(begginer)1のaタグ
みたいな感じです。

これも私の場合ですが、最初は何とか検索して答えたものの最後はもう答えを見てました。
ギブアップ!
難しかったら自分は初心者と割り切って答えを模写して良いと思います。
次に同じような実装をしたい時に、「忍者CODE問題集にあった!」と分かれば良いですよね。

HTML/CSSの定着【1冊ですべて身につくHTML & CSSとWebデザイン入門講座】

あさひ
あさひ

図書館で予約した本、そろそろ順番が回ってきましたか?
ウキウキしますね!

こちらの本は初心者がWEB制作を学ぶのであれば、現在一番素晴らしい本と言って過言ではありません。

特に学習の仕方についての指定はないので、本通りに進めていきましょう。

HTML/CSSアウトプット【デザインカンプからのコーディング】

本を一冊終わらせたら、もうホームページが作れる状態です。
しつこいですが学習はインプット3:アウトプット7。

本当は後述の「jQuery/JavaScrip」を学習した方がそれなりのサイトを作れるのですが、私はまずここでアウトプットするのをお勧めします。

ここでのアウトプットとは「デザインカンプからのコーディング」というものです。

アウトプットすると、「自分はここが分かっていなかった」という発見があるんですよ。
何より1つ物作りをした!という楽しさがあります。

ここでデザインにも挑戦したい!という方は自分でデザインもしてみても良いと思います。
デザインソフトの使い方が分かる方はそれで作っても良いのですが、ここは手描きのデザインで良いと思います。(※手描きだと色味は違うので注意)

とはいえ私のようにコーダー希望だったり、まずコーディングをある程度できるようになってから、という場合はデザインされたものをコーディングするという学習をしましょう。

現在WEB制作学習用のサイトが多くあり、無料のデザインカンプもたくさんあります。
以下は「ポートフォリオとして掲載可能」と書いているサイトです。
後で自分のポートフォリオサイトを作る時に制作例として載せる事ができます。

ここで注意です。
無料のデザインカンプサイトは有名なので、多くの人がチャレンジしています。
なので制作例として自分のポートフォリオサイトに載せるのはOKだとしても、「見たことあるページ」だと思われる可能性も高いです。
画像は自分で用意したもので作成するのをお勧めします。

画像の基礎知識と扱いについての記事は後日書きますね!

もう一つ注意があります。
Adobe XD というデザインソフトがよく使われています。
2021年途中までは無料だったのですが、今は7日間の無料体験版となってしまいました。
しかし2022年3月現在、まだ無料版が残っています!
リンク場所を探すのが難しいので一応画像を貼っておきますね↓
https://www.adobe.com/jp/products/xd.html

デザインカンプからのコーディング方法

大きな流れは「AdobeXDやfigmaというデザインソフトで作られたデータから画像を出力し、余白などの数値を読み取り、ブラウザで再現すること」となります。
参考サイトはこちら。

301 Moved Permanently

自分が最初にここでコーディングしたからという理由だけでなく、いくつか見た中でもこちらが一番分かりやすいです。
何なら私のブログ見てないで(笑)、こちらのPENGINさんのブログを隅から隅まで読んで下さい!
WEB制作が一通り分かります。

無料デザインカンプ配布サイト3選

無料のデザインカンプですが、以下のサイトが良いでしょう。

  1. PENGIN BLOG (初級編まで)
  2. Codestep (初級編まで)
  3. あさひろぐ | 超初心者向け・コーディング練習用デザインカンプ

自分のサイトもちゃっかり入れてます😅
それぞれの特徴を一言で説明すると

1. PENGIN BLOG は先ほど述べたように手順について詳しく説明されています。
2. Codestep は入門編から上級編まで数が豊富。(画像データは各自で用意)
3. あさひろぐ は超超超初心者向けです。flexboxも使用していません。自分を初心者だと思うのならぜひ🎶

どれも優良サイトです!自分がテンション上がるものをどうぞ。

練習するサイト数は1・2程度で良いです。
なぜなら後述の jQuery/JavaScript のアウトプットの時にHTML/CSS もやるので。
でももちろんたくさん作っても良いですよ。

本格的な学習開始 – LEVEL 2

jQuery/JavaScript を学ぶ

デザインカンプからページを作ることができた!
私もうホームページ制作者と言えるんじゃない!?

あさひ
あさひ

うんうん。
そのくらい自信を持ちましょう🎶
でもちょっと待ってください!

だいたいのサイトの動きは JavaScript と呼ばれるプログラミング言語で作られています。
(CSSアニメーションもありますが)

ここで初めて「プログラミング」という言葉を使いました。
そう、HTML/CSSはプログラミング言語とは言えないんですね。

ここらへんの話はそのうち耳にすると思います。
この段階では「へー」と思っておいてください。

そしてjQueryはJavaScriptのライブラリーです。
ここらへんの話も「へー」と思っておいてください。

最初は簡単なサイトを作るとしても、以下はできた方が良いでしょう。

・固定ヘッダー
・ハンバーガーメニュー
・スムーススクロール

余談ですが、実は上記は全てCSSでもできます。しかしやはりjQueryで作った方が良いです。
・スクロールした時に固定ヘッダーが現れる、という動きの方がすっきりする
・ハンバーガーメニューからページ内移動をする時にCSSだとうまく閉じない
・固定ヘッダーがあるところでCSSのスムーススクロールをすると、ヘッダーが隠れてしまう

最初はjQueryでこの3つが書けることを目標にしましょう。
JavaScriptはこの段階では何となくで大丈夫です。

肝心の勉強方法ですが、少々スパルタになります(笑)
まず無料でJavaScriptのこちらをどうぞ。

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
【旧版】はじめてのJavaScript (全8回) - プログラミングならドットインストール
Webサイトに動きをつけることができるJavaScriptを体験していきます。

Progate は「はじめてのJavaScript」、ドットインストールは「JavaScript I」「JavaScript Ⅱの途中まで」が無料範囲(2022年2月現在)です。

今の段階では必要ないかもしれませんが、楽しくなってきたら以下もどうぞ。

【旧版】JavaScriptでおみくじを作ろう (全9回) - プログラミングならドットインストール
JavaScriptで簡単なおみくじを実装する方法について学んでいきます。

そして次にjQuery

jQuery 学習レッスン 初級編 | Progate
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
jQuery入門 (全13回) - プログラミングならドットインストール
JavaScriptを簡潔に表現することができるjQueryについて学習していきます。

Progate は「jQuery 初級編」、ドットインストールは「jQuery入門」の途中までが無料範囲(2022年2月現在)です。

そして無料範囲が終わったらどうするかというと…

実践するしかありません。
ここでスパルタです(笑)
以下のデザインカンプからのコーディングをやってみて、例えばハンバーガーメニューを作る段階になったら、「ハンバーガーメニュー jQuery」などと検索してコードを読んで自分用に書き換えるのです。

ここで注意です。
やはり単なるコピペは「理解した」と言えません。
そのためのProgateとドットインストールです。
お手本のコードを理解した上で書きましょうね。

jQueryアウトプット【デザインカンプからのコーディング】

今度はjQueryも含めた「デザインカンプからのコーディング」です。
HTML/CSS の復習にもなります!
そこで使わせていただくのがまた例のサイトです。

  1. PENGIN BLOG (中級編・上級編)
  2. Codestep (中級編・上級編)

ここから2~3サイト選んで作ってみると良いでしょう。
今回も1つ目は写経でも構いませんが、2つ目以降は検索して作ってみてください!

本格的な学習開始 – LEVEL 3

ポートフォリオサイト作成

さて、ここまで来たらシンプルなHTML/CSSサイトは作れるようになっているはずです!
この時点でもうクラウドソーシングサイトへ応募できる実力はついています。

なのでどうせサイトを作るのなら、

・ポートフォリオサイト
・事業サイト

上記のどちらか、又は両方作りましょう。

人によって目指す方向はあると思いますが、制作会社様に見せるのかエンドクライアント様に見せるのかは分けた方がいいと思います。
この場では便宜的に以下のように決めています。(私の場合です)

・ポートフォリオサイト ← 制作会社様向け
・事業サイト ← エンドクライアント様向け

私はここが定まっていなかったので両方作りましたが、知り合いのホームページを作るとか特に予定が無い方は、最初はクラウドソーシングサイトでお仕事を探すのではと思います。
であるなら、ポートフォリオサイトを作ると良さそうですね。

このサイトに今まで作成したサイトを載せます。
ただし注意があります!

言葉遊びのようになってしまいますが、「制作実績」とは書かない方が良いです。
どうしても仕事でクライアントさんのサイトを作ったとイメージされてしまいます…。
「制作例」「作品例」というタイトルをつけましょう。

ここで迷うのがお問い合わせフォーム。
サーバーとやり取りするので、PHPという言語を使います。
JavaScript/jQueryをやったばかりなのにまた新しい言語かい!…ですよね。

ここで頑張ってPHPを勉強しても良し、Googleフォームの埋め込みをしても良し。
単にTwitterのDMやメールアドレスを案内するのも良しです。
無理はしないで良いと思いますよ。
ただし注意!!
次の項目で案内する「GitHubPages」にアップする場合はPHPは使えません。
ここは気を付けて下さい。

サイト公開

立派なポートフォリオサイトができた!

公開してみる🎶

今現在、私が知ってる無料で公開できる方法は2種類です。
GitHubPages
無料レンタルサーバー XFREE

詳しくは別記事で解説予定です。(こればっかり😅)
お急ぎの方は頑張って検索してください🏁

おわりに

かなり詰め込んで書いてみました。
今さらですが、もっと記事を分けた方が良かったのかもしれないですね。
学習を始めるまでが長すぎました💧

有料で学習するか無料で学習するか意見は様々だと思うのですが、少なくとも「無料で学習する方法があることを知って欲しい」という想いでこの記事を書きました。

学習しようと思った時に「50万円のスクールしか知らない、ここに入ろう」というのは避けたいなと思ったからです。

無料で学習というのは基本的に独学となります。
そこが難しいようなら有料の価値があると思います。
無料も有料もどちらも知ってるなら、あとは自分の選択だけですものね。

そして無料で学習させていただいた分、お金を稼げるようになったあかつきには何かしらの形で還元していきたいものです。

では皆さまの学習が良いものとなりますように✨
応援しております😊

オマケ【実は学習無料サイトは他にもたくさんあります】

私は使っていないのですが、無料の学習サイトはたくさんあります。
たとえばこちらのヒツジさんのサイト。
見た時にかなり衝撃を受けました!
もう今までの忘れてこれで良いのでは(笑)

【無料・初心者向け】Webサイトの作り方と準備|Webデザインの教科書
プログラミングスクールに通わなくても大丈夫!!Webサイトの作り方や準備の仕方を徹底解説します。無料で始められるWebデザインの教科書。

個人のサイト以外もたくさんあります。

CS50 for Japanese: コンピュータサイエンスの入門 – 当ウェブサイトは、Creative Commons ライセンスに基づいて管理されています。
Just a moment...

codecademyは英語ですが、自動翻訳でいけるのではないかと思います。
ドラゴン桜でも「勉強はこの国で許された唯一の平等」というセリフがありましたよ。
(唯一ではないと思いますが😅)
勉強する環境はいくらでも整っています。

以下はProgateやドットインストールと同じく宣伝として一部無料です。
無料分多めのものを選びましたが、入門編は被る箇所も多いのでざっと様子を見て、自分に合うかどうかを確かめましょう。

Skillhub [スキルハブ]
Skillhubはフリーランス、起業したい人、就職・転職したい人のための初心者から学べるオンラインスクールです。
https://cyllabus.jp/
CODEPREP | プログラムを書いて動かしながら学ぶ実践型のプログラミング学習サービス
CODEPREPはオンラインプログラミング学習サービスです。1日10分プログラムを書くことで「毎日こつこつプログラムを書く習慣」と「作ったものを動かす体験」を提供し、プログラミング学習の「継続」をサポートしていきます。そうして、一人でも多く...
プログラス: Proglus | 2000本以上の動画でプログラミング入門できるサービス
プログラスでプログラミングを学び、自分らしく働こう!!HTML、CSS、JavaScript、 Ruby、 SQLをはじめ、AWS、 GCP、 ChatGPT、OpenAI APIの使い方も学べます。はじめての方でも体系的にウェブ開発のスキ...

HTML/CSS 以外はこちら

Nuxt.js + Ruby on Rails + AWS Fargate の開発・デプロイチュートリアル
プライベートで、 Nuxt.js × Rails のアプリケーションを開発し、AWS Fargate にデプロイしました。そこで得た知見・学びを output し更に理解を深める & 備忘録として残しておこうと思い、この本を執筆しました!

その他、私も把握していない数多くのサイトがあると思います。
探してみてくださいね!

タイトルとURLをコピーしました