1ヶ月でサイトの模写までできた学習工程を公開!コツも教えます。

f:id:Psuke222:20191225193613p:plain

こんにちは、YUMAです。

プログラミング学習開始34日目、ついにマナブさんロードマップのWebページの模写を公開できました!

僕が模写したのはこちらのAirbnbのページ

Airbnbオープンホーム

そしてこちらが、僕の模写!ユーザーIDとパスワードは、どちらも「yuma」です。

https://yuma-studio.com/works/Airbnb2/index.html

今回は、1ヶ月でWebページの模写までできるようになった僕の、ここまでの学習工程を紹介します。

Webページ模写ができるようになるまでの学習工程

最初に、学習開始時の僕のプログラミングスキルを紹介しておきます。

  • Javaの超基本的なところ
  • JavaScriptちょっといじったことある
  • HTMLとCSSははてなブログの余白とか文字の大きさとか変えれるくらい

Webページ模写で使うのはHTMLとCSSのみなので、JavaとかJavaScriptは使ってません。HTMLとCSSに関しては、ほぼど素人状態でスタートしました。

マナブさんのロードマップを模写の前まで制覇する

元々僕がプログラミングを本格的に勉強しようと思ったのは、マナブさんのロードマップに出会ったからです。

これを読んで、「俺もプログラミングで稼ぎたい!」と思いました。会社の研修などでもプログラミングは得意な方だったので、俺なら絶対できるという自信もありました。

マナブさんのロードマップとはこちらです。

【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】 | manablog

本当に書いてある通りに学習しました。

基本「動画視聴→ブログ記事を読む」の流れです。これを、模写の手前まで2週間くらいで終わらせました。

記事にある通り、動画を見つつ自分で実際に手を動かしながら学習しました。ちなみに使っていたテキストエディタは、Atomです。(今はVScodeを使っています)

ProgateでHTMLとCSSをさらに身につける

すぐに模写をやろうと思ったのですが、いざやろうとしたら「何から手をつければいいかわからない...」という状況に陥ったので、もう少し勉強することにしました。

というのも、今までは一からWebサイトのコーディングをしていなかったので、何から手をつけていいかわからなかったんですね。

そこで、超人気プログラミング学習サイトのProgateをやることにしました。

Progateは、超基本から丁寧に学習でき、手も動かせるので本当に身につきます。

これを、HTML&CSSの初級から上級までのレッスンと道場を完全制覇しました。期間は1週間くらい。

上級でWebページを一からコーディング&レスポンシブデザインまで勉強できるので、かなり力が付きます。初心者には超おススメです!

ちなみに、上級まで全部受講するには有料版にする必要があります。でも、たった月980円でプログラミング知識を身につけられると考えれば、安いものです。

ドットインストールでBootstrapを学習

マナブさんのロードマップでもBootstrapは学習できるのですが、いまいち理解が足りなかったので、超有名プログラミング動画教材のドットインストールで勉強することに。

Bootstrap編は有料なのですが、こちらも1000円なので迷わず登録しました。

Bootstrapを使ってのWebページのコーディングを一から勉強できるので、こちらも初心者には超オススメです!

ちなみに、スマホ紹介アプリの製作編も視聴したのですが、とても良い復習になるので、見るだけでもオススメです。

サルワカさんで復習もした

HTMLやCSSを超わかりやすく説明してくれているサイト、サルワカさんもお世話になりました。

マナブさんのロードマップ学習後に、このサイトを読んで復習しました。知らない知識もあったりするので、とても勉強になりますよ!

HTML&CSS入門:イチからWebデザインを習得する講座

いざWebページを模写!

ここまで学習してから模写に挑戦すると、びっくりするくらいスムーズにできて、3日で完成しました。

模写をする上で意識したことがあるので、紹介しますね。

  • HTMLの構造をしっかりと考える
  • クラス名をわかりやすくつける
  • モバイルファーストでコーディングする
HTML構造をしっかりと考える

模写は、箱をいかに上手く並べられるかによってやりやすさが変わります。

HTMLは、箱の中に箱があり、さらにその中に箱があるという構造です。これを上手くできないと、CSSがごちゃります。

以下のサイトなどが参考になります。

初心者向け!HTML/CSSのコーディング手順をイチからしっかりと。 | Webクリエイターボックス

クラス名をわかりやすくつける

クラス名を適当につけると、CSSがわかりづらくなったり、無駄なコードを書くことになりかねません。

そこで、僕はBEMという命名規則を参考にしました。

一番詳しいCSS設計規則BEMのマニュアル - Qiita

これのおかげで、自分でもわかりやすいクラス名がつけられました。

モバイルファーストでコーディングする

モバイルファーストとは、スマホ向けのデザインからコーディングすること。

PC用からでもいいのですが、僕はモバイルファーストのほうがやりやすかったです。

モバイルファーストは基本的に要素を縦並びにするので、シンプルにコードが書けます。モバイルが完成した後に、レスポンシブにするところだけCSSを追加することで、スムーズに作成できました。

まとめ

最初は何もかも理解できないかと思いますが、「自分で手を動かす&1週間後くらいに復習」すると、自然と理解できてきます。

僕も、最初に模写に挑戦しようとしたときは、俺才能ないかも...と心折れかけました。

でも、しっかりと学習を積み上げれば、前までは高すぎた壁も難なく乗り越えられます。

途中で辞めずに、楽しく継続しましょう!

僕は毎日Twitterで一日の積み上げを発信してるので、良かったらフォローしてください!

ゆうま@プログラミング (@yuma_tempa) | Twitter

また、instagramでは全写真アプリ&フィルタ完全制覇目指して毎日投稿してるので、こちらも良ければフォローお願いします!

Login • Instagram

最後まで読んでいただき、ありがとうございました!