progateのhtml/cssコースが終わったらするべきこと

こんにちは鈴木祐登です

本日はprogateのhtml/cssコースが終わったらするべきことというテーマで話していきたいと思います。

簡単に僕の自己紹介をすると、現在大学に通いながらフリーランスとして活動してまして、主にHP制作やwebアプリケーション開発などの受託案件をフルリモートで受けているます。

僕自身もプログラミングはprogateから始めていて、最初の方はかなりやり込んでいました。現在でも画像が残っていたので参考に貼っておきます笑

今回はそんな僕がprogateを終えて、現在フリーランスとして活動するにあたってやってきたことをなるべき再現性の高い形でお伝えさせていただきます。

参考になれば幸いです。

動画でも解説しているので、動画がいいひとはこちらからどうぞ。

1. エディタからprogateでやったことを再現する

まずprogateのhtml/cssコースが終わったらやるのはこれです。エディタっていうのは簡単にいうとprogateとは違って実際に自由に編集して動くコードを自分のパソコン上でかける環境のことです。

やってみるとわかるが意外と一からやるとできないというのを感じるかと思います。

progateでただインプットをしただけでは身についてない部分は多いと思うので、ここでアウトプットして定着させるのが一番いいです。

エディタでのコーディングがある程度できるようになったら、コーディングを効率化するツールの使い方を学ぶのがいいと思います。

案件をこなす上で最低限抑えておいた方が良いものをいくつか挙げておきます。

ここら辺のツールを使えるとコーディングのスピードが格段に早くなります。

ここではそれぞれのツールの使い方の説明は省きますが、ご自身で調べて使いこなしてみてください。

コーディングの効率化するツールを使えるようになったら次は模写コーディングを行なっていきましょう。

模写コーディングというのは既存のサイトをフロントの部分だけを見ながら自分でそのサイトを再現してコーディングすることです。

既存サイトを模写コーディングすることで自分の知らなかった技術や実装方法に関して知ることができます。

案件をこなすのに絶対に外せないのがこのデザインカンプからのコーディングです。

企業様から案件をこなす場合は通常、デザインのデータをもらい、それをもとに正確にコーディングしていくことが求められます。

これができずに、なんとなくでサイト制作をここまでしてきた方も多いと思うので、ここで一度デザインデータからコーディングをできるようになりましょう。

デザインカンプ自体は「デザインカンプ無料」等で調べると無料のデザインカンプがたくさん出てくるのでそちらを使わせていただくのが一番早いと思います。

僕のお勧めはこちらの

クリスタさんの無料のデザインカンプが個人的には使いやすくてお勧めでした。

難易度別になっているのでまずは「始めてのコーディング」の部分から始めてはどうでしょうか。