どちらもメリットデメリットはあるのですが、１からサイトを作れるというメリットがあるのはWeb制作会社です。自社開発だと部分的な開発になってしまうので総合的な技術が身につきません。自分はこの業界7年くらいいますが未だ駆け出しエンジニアだと思って勉強してます。学習を習慣化させるためには以下の記事を参考にしてみてください。職業訓練校かドットインストール、もしくは両方やるのがよいです。フロントエンドエンジニアのフリーランスは大きく分けて2つ働き方があります。hoshilogは、Web業界やフリーランスエンジニアを目指す初心者の方にもわかりやすく業界の転職やエージェント事情を解説するメディアです。独学後すぐにフリーランスという方もいるのは事実なのですが、上記のメリットを抜かしてフリーランスになるのはもったいないです。上記のように結果的には自分も月収60〜90万程稼げるようになったのですが、もちろんそれまでには多少のいばらの道はありますし、伸び悩み辛い時期もあります。実際に自分で体験したフリーランスエージェント、転職サイト、プログラミングスクールを中心に紹介しています。スクールは、バックエンド言語が強いのでサービスを作りたいという方はおすすめです。大事なのはその企業がレガシー（古い）な技術を採用していないことです。また余談ですが、ハローワークのおばさんにオススメしないとか言われて帰らされる人もいるようですが、熱意はアピールしとくべきです。ここの年数は個人差ありです。長ければ長いほどしたずみが長いので、技術力が高まると思います。自分の場合はここに6年費やしました。知識は上塗りしていけばいいので、完璧でなくてもまず終わらせることも大事です。ドットインストールは自分がhtmlを覚えたころから存在していて（つまり2012年くらい）未だに圧倒的な人気を誇るプログラミング学習サービスです。ただ企業選びで失敗しても辞めてまた転職すれば大丈夫なので、迷ったら入ってみましょう。順序として、ドットインストールを一回やってみて自分に合いそうだったら職業訓練校に行く流れです。検索することで見つかっていくと思うので、参考になるサイトをブックマークしていくといいです。サイトであれば命名ルールから自分で考えるため見る側としてもその人の実力がわかりやすいですね。フロントエンドのフリーランスとして企業に週5で業務委託で常駐しています。何事も初めが肝心ですがエンジニアも同じです。初めに面白くなさそう、難しいと感じては挫折して終わりです。企業選びでこの後の道が変わってしまいますので、慎重に企業選びをしましょう。フリーランスとして働きながら充実した福利厚生も受けたい人はおすすめです。何故なら模写はそれはそれで勉強にはなるのですが思考停止でコピペで出来てしまうため、面接官へのアピールとしては1番低いレベルになってしまいます。ただこの時期にがむしゃらに頑張った経験は無駄にならないですし、逆にだらだらやってしまうと多分覚えられずに終わってしまいます。ここで注意点ですが、オリジナルサイトを作るときは教科書がない状態になるので必ず躓きます。そういう場合自力で解決できない場合は人に聞いた方が早いです。ですが、ロードマップを見てる方は生半可な気持ちでやろうとしてる方ではない人が多いと思いますので、仕事を辞めた方が時間が使えるので本当にエンジニアとして生きていくという覚悟ができているなら全然ありだと思います。いきなりフリーランスになりたいという方もいるかもですが、自分はおすすめしません。いきなりサイトを作ると言われても難しいかもしれませんが、自分が作ってみたいサイトなら何でも構いません。やり方としては以下です。有料版もありますが無料版でも十分初歩的な勉強はできます。主に以下の動画を学習しましょう。ちなみに自分の場合自社開発系企業を1年、その後Web制作会社を5年務めています。もちろんここの年数は人によってばらつきはあるので、あくまで目安になります。面接や企業選びで気を付けるべきことは下記記事に書いていますので良ければ参照ください。よければ、感想などをTwitterなどでシェアして頂けますと幸いです。サイト作成できるようになるためには、人から教えてもらう方が圧倒的に効率的です。スクールもスクールによってはオンラインだったり教室へ行っても毎回知らない人ばかりなので知り合いはできず孤独を感じます。職業訓練校は学校のように同じメンバーが週5で授業形式で学ぶので仲間ができやすいですし、モチベーションが上がります。自分も自分の周りのエンジニアもですが、稼げるからプログラミングを選択したという人は少ないはずです。その時稼ぐだけがモチベーションの原動力だけだと続かないと思います。なぜならすぐに稼げると思っちゃってるからです。またfeedlyというアプリは更新された記事をまとめてくれるので、便利です。ブログ等で大きな収入があれば別ですが、単発のWebサイト制作だけで食っていくのは最初の1～2ヶ月はいいかもしれませんが、全然楽にならないのでおススメしません。。フロントエンドエンジニアが主に働く現場は２つあってWeb制作会社と自社開発系企業です。必須であるレスポンシブデザインは有料なので、有料版に移ってもいいのですが、書籍で学ぶのもおススメです。もちろん年数だけではないので企業が求める技術に到達していればの話ではありますが、全然可能になっているという現実があります。実はというと自分自身、7年前何しようかな～と悩んでいた時、ハローワークでWebデザイナー科の職業訓練校を見つけ応募しました。それで今があるので、職業訓練校には感謝しています。自社開発に興味があるなら1年間Web制作会社、2年目を自社開発系企業というのもおすすめです。ちなみに最近流行りの模写は個人的にポートフォリオに含めない方がいいと思ってます。職業訓練校とは、国が再就職を斡旋する施策で、雇用保険をもらいつつ手に職系の技術を学ぶことができます。入社前に覚えておくべきコーディングのTIPSを下記カテゴリにまとめていますので、知らないことがないかチェックしてみてください。個人差はありますが、学び始めてだいたい2〜3ヶ月でポートフォリオと制作物の作成に取りかかれると思います。このブログでは、自身の経験からフリーランスを目指す方や駆け出しエンジニアの方に向けてWebを仕事にする方法やトレンド情報をアウトプットしています。もし、独学は辛いし、仕事しながら学びたいという方はスクールもありです。なので、ドットインストールを少しやってみて、面白いなっと思ってゆくゆくはフリーランスになりたいなという方はこのロードマップを是非参考にしてみてください。業務委託はフリーランスエージェントという紹介業をしている会社とコンタクトをとり斡旋先の企業を紹介してもらいます。フリーランスエージェントは、何社かあって下記記事でまとめていますので宜しければ参照ください。ただ仕事を辞めないと職業訓練校に通う資格はないので、仕事を続けつつ学びたいという人は難しいかもしれません。progateもいいですが、progateはあくまで初歩の初歩なので次にどうしたらいいんだろうという人も多いようです。オフィシャルサイトが少しわかりづらいような気がしたので最寄りのハローワークへ行って聞いてみるとよいです。以上、メリットは沢山ありますが、個人的には一人ではないというのが一番のメリットだと思います。「転職できた！」「フリーランスエンジニアデビューしました！」といったコメントが運営者の励みになります。 上級まで進めたら道場を飛ばしてFlexbox編に進んでください。Web制作の人もフロントエンドの人もこのあとJavaScriptを学習していきますが、色分けして、どうやって処理がされているかを流れとしてとらえていくといった形です。ただし、デザインの学習ではPhotoshopやイラストレーターは必須なので、前回を超える参加人数で、これから更に増えていきそうに思います。僕がこの記事を書いて説明していくようにコードを書いていくことですね。CSS→Sassへと置き換えることでより知識が深まっていきます。例えば配列をやったときに、コンソールで結果を見たときになんのことか分からないと思ったら、なので、0番はdogなのでコンソールではdogが出力されるという仕組みとなるわけです。学習を始めたばかりの人はProgateから始めることが多いのでProgateで説明します。Web制作でのProgateのJavaScript編ではpart３までをやるように推奨されていましたが、フロントエンド志望の方は７までをやってください。またぴか兄さんの講座には参加しますのでその都度まとめてみたいと思っています。こちらの本ではデザインをしていく上での考え方も載っていますのでかなり参考になるはずです。模写の目的はコーディング力を身につけること、レイアウト通りに配置出来ることなので、いい画像選びに時間をかけないようい注意してください。これくらい領域を分けて領域毎にコーディングをしていくと形にしやすいです。模写はいくつか積み重ねていけば身についていくので最初から難しいサイトに挑戦しなくても大丈夫です！ちょっと高いと思われるかもしれませんが、Adobe CC単体で買うよりも安く手に入ります。position:relativeとposition:absoluteの存在です。上記コードに書いてある1132×700という部分を500×500のように数字を変えるだけで仮の画像の大きさが変わるので画像のレイアウトにはこれで困らなくなるはずです。CSS設計の教科書をやるとCSSでは頭一本抜きんでるのでCSS極めたい方はトライしてみることがお勧め。Flexboxでレイアウトを組めるようになったら模写をしてみます。ProgateのCSSではでてきませんが僕の記事で紹介してあるような【nth-child】といったchild属性を覚えておくとレイアウト変更(画像が増えた時等)にも楽に変えれるのでWeb制作をやられる方は特に覚えておいて損はないはずです。paddingでは要素そのものを大きくして周りとの距離をだすものだと頭に入れておいてください。consoleは入出力の制御インターフェースのことでlogはデータのようなものです。XDのチュートリアルを見れば操作方法は分かるので、こちらでデザインカンプを作成し、コーディングからアニメーションまで出来たらOKです。ドットインストールレベル２まで出来たらjQueryに進みます。用語が複雑なのもあるため、分からなかった時はスライドを丁寧にみて分からない用語はじっくり調べてみてください。幸い僕はブログで説明することが出来ているので、インプット脳は出来ているのかなと思ってます。marginはpaddingとは違って、体の大きさは大きくならないものの、要素間の距離はだせるといった特徴があります。気になったので試しにクラス名とか色々つけてやってみましたが、画像の大きさがバラけたりして上手くいきませんでした。他にもpaddingとmarginの使い方も迷いそうなので説明しておきます。僕も必死になってやっているところなので一緒に頑張っていきましょう(苦笑)お金かけられないよーっという方はAdobe XDの無料プランで大丈夫です。このサイトなら模写できる！っと思ったサイトを模写することも大切です。今の世の中のサイト(特に最近)の９割はFlexBoxが使われていると言っても過言ではないそうです。他にも力試しとして忍者codeさんの練習問題に挑戦してみると更なるインプットと理解が深まっていきます。処理の流れが見える化したら、イメージがつくため言語化しやすいはずです。インプットするときに、誰かに教えることを想定したインプットが大切かもしれません。答えと合っているかどうか(書いた通りのコードで見本のように実装できるかどうか)を基準にしてください。「animalsの配列箱に入っている0番にあたる言葉を出力せよ」画像はフリーの素材から画像を引っ張ろうとする人が多いのですが、意外とその画像選択に時間をかける人が多く、それは時間の無駄です。大切なのは、コードを理解して説明できるようにして、言語化していくことです。書籍の目的はコードを読めるようにすることやコードを理解していくことにあります。一つの要素からオーラを発して他の要素と距離をとらせるみたいな感じです。(念を発していなくてもヒソカには近づきたくないｗ)jQueryはProgateか書籍の学習をお勧めしていました。(僕はProgateしかやってません)話が脱線しましたが、ドットインストールではミニアプリを言語化してコード記述するところまでやりましょう。Sassを学習したら模写したサイトをSassで編集してみます。JavaScriptに進むときはProgateのJavaScriptを1~3までをやってください。JavaScriptライブラリでもあるReactを進めていきます。ProgateはHTML,CSS編と同じく道場はスキップしましょう。WordPressをやるタイミングはjQueryをやってからがお勧めWeb制作との違いは、よりプログラミングスキルが求められるというところです。ただ、４つ目の「順番を入れ替える」というところでCSSは記述があるのですがHTMLの記述が抜けてるようです。少年漫画が好きな自分はこうやって覚えましたが、他にいい覚え方があるはずなので皆さんなりに工夫して何かに例えて覚えてみましょうｗフロントエンドと違って、デザインスキルが求められるのがWeb制作です。自分も必死に食らいついている段階なので、やっていないことまでまとめるのは恐縮でしたが僕は模写した後にこちらの本をやったことで復習にもなり理解が深まり、出来そうにないものを模写するということは、インプットが足りないということなのでまた勉強のやり直しになります。Vue.js(フレームワーク)はHTMLに直接関わって書き込めるのでWeb制作をやられる人は勉強しておくのもいいかも？「記述したコードがどのようにコンソールに出力されるのかを説明できるようにする」[…] Web制作の方はこちらの記事を読んでみてください。 […]そこで独断と偏見で<ul><li>で作ったほうがよさそうだなと思ったので模写していくときにFlexboxでは出来ないものがいくつか出てくるのでその都度調べながら進めていきます。こんな形で自分の言葉で「書いたコードを説明できるようにする」ことで理解が深まっていくので分からない人は是非このやり方をやってみてください。こちらのパッケージだけでも操作には慣れていけるので迷いなく学習できるはずです。console.logとは、データを読み出し取り出すための入出力信号だと思ってください。基礎的なところはProgateで十分学べるかなと僕は感じました。こんな形である程度インプット出来たら、模写したサイトにJavaScriptやjQueryで動き、アニメーションをつけてみてください。この二つを使うことで容易に要素内への侵入(画像の中にテキストを入れる等)が可能になります！レベル２クリアの目安として、音声だけ聞いてコードを書いたとき、デザインカンプはイラストレーターやフォトショップとがありますが、 2018年のWebデベロッパーのロードマップ The 2018 Web Developer Roadmap. とのツイートもあり6ヶ月かな…？となっています。 バックエンドエンジニアのロードマップ. 黄色枠が著者のお勧めスキルのようです。 とりあえず、まずは自分がやった事あるものに赤丸を付けて見ました。 全体. フロントエンドのスキル. 自分はフロントエンドエンジニアなのでフロントエンド(html,css,JS)のフリーランスになる想定のロードマップですが、プログラマーであっても同じような道のりを辿ることは可能かと思います。 フロントエンド. バックエンドエンジニアの学習ロードマップ. ロードマップを書かせて、順番に積んでってもらって6ヶ月ぐらいでおめでとうが言えました — フロントエンドエンジニア (@terrace_tech) July 4, 2020. JQueryの姿はもう完全にありませんね。。。 バックエンド