@やまP's Blog

ゆっくりしていってね。

Progateでプログラミングする際の注意点【初心者向けHTML/CSSのコツ】

現在ProgateでHTML/CSSを勉強している人たちの中には、

 

「思ってたよりプログラミング簡単じゃね?」

「とりあえずレッスン修了したけど、何をすればいいんだろう?」

「道場編難しすぎる!」

 

やっていくうちに色々な問題がでてくると思いますが、ProgateでHTML/CSSの勉強をしている人は、プログラミング初心者の方がほとんどだと思いますので、悩みに対してどう解決して行けばいいのかわからなくなる時も、、、

 

この記事ではProgateでHTML/CSSを学習して身に付けたスキルをどう利用すればいいのか、学習する際に気を付けておきたいことを解説しますのでどうかお付き合いください。

はじめに HTMLとCSSについて

まずHTMLとは「Hyper Text  Markup Language(ハイパー・テキスト・マークアップ・ランゲージ)」の略で、ネット上のWebページの土台となるファイルを作成する言語(マークアップ言語)です。

 

HTMLは『<』と『>』で挟まれた「タグ」と呼ばれる様々な意味を持つ文字列を使うことでコンピューターにそのページの構造を理解させることを指します。

 

 一方、CSSとは「Cascading Style Sheets」の略で、HTMLで書いた文章の文字の色や大きさなどの見た目を装飾するための言語です。

 

わかりやすくHTMLだけで作ったサイトの画像を添付してみます。

HTMLでロゴの画像を挿入して文字にリンクをつけただけのWebページで味気なく見えると思います。

 

続いて上記のHTMLをCSSで装飾した場合のサイト画像を添付します。

文字の位置関係、行間のスペース、大きさ、色、背景画像などを装飾してあります。

 

 

サイトの雰囲気が全く違いますよね、このようにHTMLとCSSはセットで考えてください。同時に、HTML/CSSだけではWebサイトの見た目をレイアウトしただけなのでサイトそのもが機能するわけではないので、注意が必要です。

 

ちなみにこちらのお洒落なサイトはプログラミング初心者にオススメするHTML/CSSの参考書、こちらをみて作成しました。

 他にもお洒落なデザインが学べる参考書なので気になる方はこちらからポチッと♪

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

 

 

では、プロゲートで学習する際のコツについて解説していきます。

Progateについて簡単に説明。

 はじめに、Progateとはオンラインで学べるプログラミング学習サービスです。

prog-8.com

 

イラストを使ったスライド式の学習方法を採用していて、本や動画よりも直感的に学びやすく、実際にコードを書いて動作を確認できるので、プログラミング初心者が必ずと言って良いほど通る道の一つがProgateです。

 

2020年 オススメのプログラミング学習方法はこちらからどうぞ。

 

www.chonbo4645.com

 Progateをやる時の注意点!かなり重要です。

 Progateでレッスンをやっているとわかると思うのですが、HTML/CSSは他の言語と比べると簡単なので、問題集やドリルを解いてる感覚でスラスラ次のスライドに進める。

ここが注意点です!つまりどういうことかと言うと、

 

コードを理解した気になっている、レッスンの修了が目標になっている

 

タグを丸暗記しろと言うことではなく、今書いているコードがどのようにWebサイトで表示されているのかを理解しながらコードを書くのが重要です。

 

レッスンでわからない所があった時、スライドに戻って確認してクリアする、、、これではコードを丸写ししているだけに過ぎません。いつの間にかレッスンの全過程を修了することが目標になっているパターンも、、、

 

 Progateを利用した方の多くが経験あると思うのですが、一通りHTML/CSSについてのレッスン修了後に道場編(自分で1からサイトを作るレッスン)、これで躓いた若しくは、挫折したという方が少なからずいると思います。

 

「あんなにレッスンしたのに」

「全くできなかった、才能ないかも、、、」

 

出来なくて良いんです!!

 

はじめは出来なくてOK!じゃあなんで出来ないのかを考えると、インプットに対してアウトプットの量が圧倒的に足りないからです。

 

どんな業種やスポーツにしても人は覚えた知識は使わないとスキルとして身につきません。

 

次の章でHTML/CSSを効率良く覚える方法を解説していきます。

HTML/CSSを効率良く覚える方法

 

素早く効率的にHTML/CSS知識としてではなくスキルとして身に着けるためには、

「レッスンで習ったコードをローカル環境を使って自分でアレンジして書いてみる」これが大事です。

 

例えば、レッスンでヘッダーについてのタグや構造を勉強をしたら、実際に自分でもヘッダーを作ってみることがスキル習得への近道です。

 

大事なポイントは、Progateのレッスンと同じヘッダーを作るのではなく、文字の色や大きさを変えてみたり、幅や高さを変えて自分オリジナルのヘッダーを作ることです。

 

ただスライドを進めていくだけの学習では、どうしてもスキルとして定着しにくく、使えない知識として蓄積されるだけなので、覚えた知識は手を動かしてスキルとして身に付けましょう!

エンジニアとして活躍したい人はHTMLに時間をかけ過ぎない!

 

「将来はエンジニアになりたい!」

「オリジナルアプリを作りたい!」

 

なんて人はHTMLとCSSはプログラミングの入りとして基本を覚えておくだけで十分です。

 

理由は、HTMLやCSSが使えるぐらいでは転職で有利になりませんし、プログラマーとして求人を出している企業でHTMLやCSSを使う仕事はほぼないからです。

 

しかし、中には副業で稼ぐためにプログラミングを勉強してる方もいると思います。

 

そんな方も長くても1ヶ月ぐらいを目処に基礎を固めて、それ以降はPHP(サーバーサイド言語)やJavaScript(フロントサイド言語)を覚えて動的なサイトを作る練習をしましょう。

 

初心者がHTML/CSSのスキルでお金を稼ぐ場合、ほとんどが企業からのLP作成の案件になるので、LP作成に必要なコーディングという技術を学ぶ方法を紹介します。

 こちらの記事を読んでみてください。プログラミング初心者がお金を稼ぐイメージが掴めます。

www.chonbo4645.com

 

 参考書も使ってみよう お洒落なサイト作れます!

 

Progateである程度、HTML /CSSについて理解したら本屋で参考書を買って勉強するのもオススメです!

 

理由はProgateでは月額制のレッスンであっても基礎的なレイアウトやタグしか教えてくれないからです。

 

一方、参考書ではProgateにはないお洒落なデザインのサイト作成の方法を学ぶことが出来ますし、サイトを作る際の画像ファイルやロゴも簡単に入手できるのもメリットの1つです。

 

参考書を選ぶ際のポイントは、

  1. 発売年数が新しいのを選ぶ
  2. 自分が作りたいサイトのレイアウトが紹介されている 

これぐらいです。あまり古い参考書を買うとエラーの原因に繋がるので、避けましょう。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

 
世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

 

 最後に

最後までこの記事を読んで頂いてありがとうございます。

ここまでProgateでHTML/CSSを学習する際のコツと注意点について触れてきましたが、いかがだったでしょうか。

 

Progateで勉強する際に気を付けるポイントを復習すると

  1. 問題集感覚でレッスンをやらない
  2. レッスン全過程クリアを目標にしない
  3. 覚えたコードやタグはローカル環境で実際に書いてアウトプットする
  4. 期間を決めて学習する

 

この4つのポイントを意識していれば、生産性のない学習から自分を守ることができるので、常に頭の片隅に入れておきましょう!

 

最後まで読んで頂いてありがとうございます。