Web制作 プログラミング

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

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

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

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

こんな方におすすめ

  • HTML/CSS編の学習が終わった人
  • Progateの次にする学習が知りたい人
  • Web制作を始めたばかりの人
  • Web制作の参考書を知りたい人
Progate道場編はみんな全然できないよ。
出来ぬ。

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

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

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

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

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

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

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

ドットインストールでやること

  • HTML/CSSの学習環境を整えよう
  • 詳解HTML 基礎文法編

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

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

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

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

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

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

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

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

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

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

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

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

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

Progateの次は、ドットインストールで環境を整える

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

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

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

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

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

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

僕の結論は

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

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

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

というイメージです。

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

 

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

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

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

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

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

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

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

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

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

ポイント

僕が学習4ヶ月目に0から作ったポートフォリオです。

画像クリックでサイトに飛びます。

 

 

初学者がやるべき参考書

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

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

参考書を使いましょう!

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

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

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

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

こちらもCHECK

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

続きを見る

 

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

参考書で学びつつ Xdデザインカンプを上級までこなす

 

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

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

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

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

ですが、

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

  1. 凝りすぎない(作り込まない)
  2. コードを見られる意識で書く

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

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

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

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

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

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

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

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

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

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

削ってあれなのか。

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

参考

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

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

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

開き方

macの場合:⌘commandキー +  ⌥optionキー + I(アイ) 
Windowsの場合:Ctrl + Shift + I(アイ)

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

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

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

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

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

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

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

シンプルに見やすいポートフォリオを意識しよう

 

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

 

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

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

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

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

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

入りは@pesomin1021でどうぞ!

大したことないアカウントを載せるな

 

こちらもCHECK

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

続きを見る

こちらもCHECK

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

続きを見る

 

 

 

Web制作 プログラミング

2021/7/15

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

独学でWeb制作を始めたけど、結局どの参考書を使っていったらいいのか分からない。 Web制作の独学を始めて、Progateやドットインストールを終えた頃にこういった悩みを抱えている人、多いと思います。 Web制作の本って結局どれを買えばいいの? せっかく独学するなら、時間を無駄にせずに良質な本を使って勉強したい。   僕も皆さんと同じくWeb制作の本はどれ買ったらいいんだろうとこのようなことを考えていました。 今ではWeb制作の独学を半年続けて、色々な制作物を作れるようになっています。 この記事 ...

ReadMore

Web制作 プログラミング

2021/7/21

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

こんにちは、会社員をしながらWeb制作で案件に挑んでいる@pesomin1021です。 この記事を読んでくださっているあなたは、プログラミング学習を始めて1~2ヶ月が経ち、ProgateのHTML/CSS編やjQueryが終わっている段階ですかね。 Progateが終わったら、次に何をするべき?という疑問を解消していきます! こんな方におすすめ HTML/CSS編の学習が終わった人 Progateの次にする学習が知りたい人 Web制作を始めたばかりの人 Web制作の参考書を知りたい人 Progate道場編 ...

ReadMore

Web制作 プログラミング

2021/7/15

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

プログラミングの学習を始めようと思った時、言語は何にしよう。まず何から始めればいいんだ? と考えますよね。Web系の言語はおすすめですよ。 今回は、Web系のプログラミング言語の学習を独学で始めて2ヶ月が経った僕が、2ヶ月の独学でできるようになったことを紹介します。 Web制作おすすめ Contents1 Web系プログラミングとは?2 2ヶ月でできるようになったこと3 2ヶ月目の学習内容4 デザインカンプからのコーディング4.1 メリット4.2 必要となるスキル4.3 おすすめのデザインカンプ5 Sas ...

ReadMore

Web制作 プログラミング

2021/7/15

プログラミング独学を一ヶ月継続した結果、できるようになったこと【文系初心者】

『プログラミングの勉強をしていきたいけど、何から始めたらいいのか分からない』 『いざ初めてみたけど1ヶ月で実際どれくらいできるようになるか気になる』 プログラミングで自由を手にしたい 独学でできるもんなの? プログラミングの学習方法を調べていると web制作でフリーランスになっている人や、会社員の何倍も稼いでいる人がいて、学習のモチベーションが上がりますよね。 でも自分と同じような、学習中の人の肌感覚が分かるものは少なくありませんか? 今回は、プログラミング独学を初めて一ヶ月が経った僕が、完全初心者の方に ...

ReadMore

-Web制作, プログラミング