Progateが終わったら、次に何をするべき？

こんにちは、会社員をしながらWeb制作で案件に挑んでいる@pesomin1021です。

この記事を読んでくださっているあなたは、プログラミング学習を始めて1~2ヶ月が経ち、ProgateのHTML/CSS編やjQueryが終わっている段階ですかね。

Progateが終わったら、次に何をするべき？という疑問を解消していきます！

ドットインストールでエディタの使い方を学ぶ

Progate終わったら、次はドットインストールをやります。

ドットインストールはProgateと同じくプログラミングを学べるサービスです。

また長いこと基礎を学ぶの？

と思った方安心してください。

ドットインストールでやることは2つだけです。

ドットインストールでやるべき2つのこと

まずは、『HTML/CSSの学習環境を整えよう』というレッスンをやってみてください。

動画レッスンで10〜15分で終わりますし、無料です。

タイトル通り、今後Web制作をしていくために必要なブラウザやテキストエディタを使えるようになるレッスンです。

なぜこのレッスンが必要かというと

Progateでは、Progate側が用意してくれているテキストエディタを使用していますよね。

(コードを書いていく黒い画面のことです)

実際のコーディングではテキストエディタは自分のパソコンに入れて使う必要があります。

これは今後ポートフォリオサイトを作ったり、案件を受注して実務をこなしていく時も同じです。

なので、まずはこのレッスンの動画に沿ってVisual Studio Codeエディタを使えるようになりましょう。

そして、次に『詳解HTML 基礎文法編』をやってみてください。

このレッスンもタイトルの通りHTMLの基礎文法を学ぶものです。

このレッスンは、Visual Studio Codeエディタでコードを書くのに慣れるためですね。

Visual Studio Codeエディタを使う上で必須の拡張機能も1つ導入できます。

XDデザインカンプからのコーディングをする

HTML/CSSの基本を学習したら、デザインカンプコーディングを進めていきましょう！

※jQueryの学習がまだの方はProgateでjQueryを学習することをおすすめします。

サイト模写とデザインカンプはどう違う？

この記事を読んでいる方の中には、「あれ？サイト模写じゃないのかな。」

と思っている方もいるかもしれません。

僕の結論は

サイト模写はやる必要がなく、デザインカンプコーディングをやるべき　です。

サイト模写 = Web上にある既存のサイトを自分で再現する

デザインカンプコーディング = デザイナーが作った素材をコーディングで形にする

というイメージです。

詳しくはこちらの記事を参照してください。

 

おすすめのデザインカンプ

デザインカンプコーディングを始める時の、おすすめの素材を紹介しますね。

デザインカンプコーディングは検索すればいろんな方が無料配布されていますが、

力を入れるべきはこのデザインカンプセットです。

入門編から上級編まで入ってます。

最初は僕も不安でしたが、このnoteを選んで信じてWeb制作に打ち込んでよかったなと感じています。

[blogcard url="https://note.com/samuraibrass/m/mad296098d928"]

ぜひ、1回でいいのでどんな内容なのか見てみてくださいね。

このnoteで配布しているデザインカンプコーディングを全てこなした僕のポートフォリオを下で公開しています。

Xdデザインカンプコーディングにもアクセスできるので、よかったら見てみてください。

 

 

初学者がやるべき参考書

初学者の方が、Web上のサービスだけでデザインカンプコーディングをしていくには、知識が少し足りません。

では、どうすればいいのか？

参考書を使いましょう！

ここでは、僕が初学者の方に本当におすすめしたい参考書を紹介します。

参考書って結構大事です。最初に選んだ参考書が難しいと、学習のやる気がなかなか出ないですよね。

良い参考書でWeb制作を学習すれば、毎日コードを書くのが楽しいですよ！

別で記事を書いているので、Web制作学習のための参考書が必要だという方は読んでみてください。

【独学向け】Web制作の独学に本当に必要な本はこの7つです。実際に使った僕が解説

続きを見る

 

紹介した参考書に沿って学習すれば、誰でもポートフォリオを作れるようになりますよ！

 

ポートフォリオサイトを作る

ここまでの学習ステップをこなしてきた方は、ポートフォリオサイトを作りましょう！

ここ１番楽しみですよね、

僕も「さあ、0からポートフォリオ作るぞ」と思って自身のサイト作るの楽しかったです。

ですが、

ポートフォリオサイトを作成する上でのポイントが2つあります。

この2つについて解説します。

ポートフォリオを凝りすぎるのはNG？

結論：ポートフォリオは凝ってもあまり見られないかも

上の方に載せた僕のポートフォリオってそんなに興味持って見なかったですよね？

僕的には好きなテイストでデザインして、学習してきたことを最大限活かして作りました。

愛着はありますが、他の人から見たら好みは違うし、知りたいのは技術レベルや人柄ですよね。

ポートフォリオを凝るのは現場でバリバリ活躍しているプロの方かなと個人的に思います。

なので、初学者や案件獲得を目指す方、Web業界に転職するのが目的の方は、

「シンプルに丁寧に少しの工夫を入れて」見る人がストレスなく見れるようなポートフォリオを意識すると良いと思います！

ちなみに僕はWeb業界に転職することが目的かなと思ったので、jQueryで入れたエフェクトとか個人的な好みの装飾とか見にくかったセクションを削りました。

▼シンプルなのにオシャレでかっこいいポートフォリオ

[blogcard url="https://u-d-l.jp/"]

ポートフォリオはコードも見られる場合もある？

ブラウザ上にあるWebサイトのコードは、誰でも見ることができるはご存知ですか？

Google Chromeに標準で備わっている機能にディベロッパーツールというものがあります。

ディベロッパーツールの使い方は学習を進めていくうちに分かるようになります。

ここで覚えておいて欲しいことは、Web制作はサイトの見た目や動きが作れればコードはどうでも良いというわけではない ということです。

ポートフォリオは中身や実績だけでなく、コードそのものが制作物であるという意識を持てるといいですね！

ポートフォリオの場合はありませんが、第三者が保守・修正などしやすいようにコードを書く癖をつけていきましょう。

綺麗なコード、第三者が見ることを意識したい方は、こちらの参考書でCSSのクラス付けを学ぶことをお勧めします。

クラスの名前で迷うことがなくなりますよ！

▼綺麗なコードを書きたい方はチェック

 

おまけ：Twitterを並行して活用しよう

 

最後におまけですが、Web制作するならTwitterやりましょう！

TwitterにはWeb制作に関し、初学者のサポートや有益な発信をしている方が多数います。

学習でつまづいたことを質問したり、学習したことをアウトプットする場にもなります。

僕自身Web制作をしている中でTwitterの存在は大きいです。

学習に迷わないように、ロードマップを示している方もいるので、ぜひWeb制作の学習と並行してTwitterをやってみてください！

入りは@pesomin1021でどうぞ！

 

Web系プログラミングの独学を2ヶ月継続した結果と学習方法

続きを見る

こちらもCHECK

【独学向け】Web制作の独学に本当に必要な本はこの7つです。実際に使った僕が解説

続きを見る