こんにちは、YUMAです。
プログラミング学習開始34日目、ついにマナブさんロードマップのWebページの模写を公開できました！
マナブさん @manabubannai 模写2を公開しました！https://t.co/XVte7C2CUk
— YUMA (ゆうま) (@yuma_tempa) 2019年12月24日
ID: yuma
Password: yuma
HTML構造の作り方、class名の付け方を意識し、モバイルファーストで作成したらスムーズにできました。#プログラミング初心者 #駆け出しエンジニア pic.twitter.com/DNrkKqDExQ
僕が模写したのはこちらの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を超わかりやすく説明してくれているサイト、サルワカさんもお世話になりました。
マナブさんのロードマップ学習後に、このサイトを読んで復習しました。知らない知識もあったりするので、とても勉強になりますよ！
いざWebページを模写！
ここまで学習してから模写に挑戦すると、びっくりするくらいスムーズにできて、3日で完成しました。
模写をする上で意識したことがあるので、紹介しますね。
- HTMLの構造をしっかりと考える
- クラス名をわかりやすくつける
- モバイルファーストでコーディングする
HTML構造をしっかりと考える
模写は、箱をいかに上手く並べられるかによってやりやすさが変わります。
HTMLは、箱の中に箱があり、さらにその中に箱があるという構造です。これを上手くできないと、CSSがごちゃります。
以下のサイトなどが参考になります。
初心者向け！HTML/CSSのコーディング手順をイチからしっかりと。 | Webクリエイターボックス
クラス名をわかりやすくつける
クラス名を適当につけると、CSSがわかりづらくなったり、無駄なコードを書くことになりかねません。
そこで、僕はBEMという命名規則を参考にしました。
これのおかげで、自分でもわかりやすいクラス名がつけられました。
モバイルファーストでコーディングする
モバイルファーストとは、スマホ向けのデザインからコーディングすること。
PC用からでもいいのですが、僕はモバイルファーストのほうがやりやすかったです。
モバイルファーストは基本的に要素を縦並びにするので、シンプルにコードが書けます。モバイルが完成した後に、レスポンシブにするところだけCSSを追加することで、スムーズに作成できました。
まとめ
最初は何もかも理解できないかと思いますが、「自分で手を動かす&1週間後くらいに復習」すると、自然と理解できてきます。
僕も、最初に模写に挑戦しようとしたときは、俺才能ないかも...と心折れかけました。
でも、しっかりと学習を積み上げれば、前までは高すぎた壁も難なく乗り越えられます。
途中で辞めずに、楽しく継続しましょう！
僕は毎日Twitterで一日の積み上げを発信してるので、良かったらフォローしてください！
ゆうま@プログラミング (@yuma_tempa) | Twitter
また、instagramでは全写真アプリ&フィルタ完全制覇目指して毎日投稿してるので、こちらも良ければフォローお願いします！
最後まで読んでいただき、ありがとうございました！
