ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

【HTML,CSS編】プロゲート終わったら次にするべき4STEP

学習法
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
Adobeの期間限定セール開催中

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

独学でプログラミング(HTML,CSS)を学ぶ初めのステップとしてProgate(プロゲート)で学習をする方が多いと思います。

Progateでは初心者に分かりやすく、プログラミングを楽しく学習するコンテンツとしては素晴らしいサービスですが、将来エンジニアになりたい方や、フリーランスとして案件を獲得したい方だとProgateを数回やった程度では実践的なスキルは全く身につきません。

ネコ君
ネコ君

プロゲートのHTML,CSS編を3週もやったけど実践的なスキルは身につかない!次に何すればいいの〜??

Hiko
Hiko

Progateの学習を終えてからが本当のスタートです!次に何をするべきかいくつか学習方法をご紹介しますね!

今回はプログラミング初心者の方向けに、Progeteの学習(HTML,CSS編)の学習を終了した後に、エンジニアになったり仕事を獲得できる様な実践的なスキルを身につけるには何をすれば良いかいくつか方法をご紹介します!

こんな方にオススメ
  • ProgateのHTML,CSS編を一通り学習し終わった方
  • プログラミング初心者で将来エンジニア職に就きたい方
  • プログラミングの学習方法に迷っている方
Hiko
Hiko

この記事を読めば次に何をすれば良いか明確になると思います!

稼げるWebエンジニになる為のオススメの教材

フルスタック・Webエンジニア講座「稼げるエンジニア」なる事に特化した、動画学習コンテンツで、今なら24,000円が1,560円とかなりお得な教材です!
HTML,CSSだけではなく、高単価な案件が豊富なWordPressやJavaScript、PHP、Pythonなどこれ1本でWeb開発における学習が全てできてしまいます!

「起業したり、フリーランスとして仕事をしたい方」「ウェブサイトを作りたい方」「新しい収入源を得たい方」「経済的自由を得たい方」こんな方にオススメです!

※セールは定期的に行われます

スポンサーリンク

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

プロゲートでの学習は自身のエディタ(HTMLタグやCSSを書いた黒い画面)を使わずに、プロゲート側が用意してくれたエディタを使ってコーディングをしていたかと思います。

当然ですが、何かサイトを作る際にはエディタが必ず必要になってきます。

※Progateの様に親切に誰もエディタを用意してくれません。

またProgateの学習だけではHTMLタグ(<h3>など)やCSSメソッド(color:)の知識量はまだまだ不十分です。他にも何100種類ものタグがあるので使いこなせる様になる必要があります。

エディタの基本的な使い方、プロゲート以外のコーディングの仕方、この2つをカバーしてくれるのが、皆さんもご存知のドットインストールです。

ネコ君
ネコ君

ドットインストールって有料じゃないの?

Hiko
Hiko

有料のコンテンツもありますが、無料の教材で十分です!

この上記の4つのカリキュラムを学習してみましょう!(全て無料です)

Progateをある程度学習した方であればすんなりと理解できますが、ここで大事なのが自分のエディタを使ってコーディングをするという点です。

  • エディタの基本的な使い方をマスターする
  • FontAwsomeの使い方をマスターする
  • CSSファイルの読み込み、imgファイルの読み込み
  • 擬似要素の使い方
  • Flexboxの使い方をマスター(ここ重要)

パソコン初心者の方だと、ファイルの保存場所やファイルパスの通し方が分からないかと思いますので、ドットインストールで学びましょう!

プロゲートでは要素の横並び配置にfloatを使ったかと思いますが、最近ではあまり使わずFlexboxを使います。サイトのレイアウトを作るのにFlexboxの概念はとても重要なので押さえておきましょう!

Bootstrapでコーディングを効率よくする

これまでの学習では「HTMLを書く→class,idをタグに指定→CSSでスタイリング」と言った流れでwebページを作ってきたかと思いますが、HTMLタグの中にBootstrapの特殊な文字を書くと綺麗なスタイリングができてしまうのです。

つまりコーディングの速度が格段にスペードアップするという訳です。

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。

ウィキペディア
ネコ君
ネコ君

Bootstrapを使えば早く簡単にかっこいいサイトが作れるっていう訳だね!

<a href="https://hikopro.com" class="btn btn-primary">HOME</a>

例えば上記の様に書いたとしましょう。すると、、、

HOME

こんな感じにかっこいいボタンが簡単に作れてしまいます。書いたのは「btn btn-primary」たったのこれだけです。

これをCSSでスタイリングしようとすると、、、

.button{
border-radius:7px;
background:#3490dc;
padding:10px 16px;
color:white;
text-decoration:none;
font-size:15px;
}
.button:hover{
color:white;
background:#227dc7;

こうなります。

ネコ君
ネコ君

Bootstrapすごーい!!

いかにBoostrapが効率的かお分かりいただけたかと思います。

↓Bootstrapの使い方よく使うコーディングを解説↓

スポンサーリンク

GoogleChromの検証ツールの使い方をマスターする

初心者の方がコーディングをしていくと、画像の中央揃えが上手くいかない、marginとpaddingが上手く作動しない時が多々ありどうした良いか分からないことが多々あります。

その問題を解決してくれるのがGoogle Chromの検証ツールです!

↓Google Chromの検証ツールの使い方完全マニュアル↓

検証ツールのメリット
  • コーディングのミスが直ぐに見つかる
  • margin,paddingの状態が一目で分かる
  • デバイスによっての見え方を確認することができる
  • 公開されているサイトのコードを見る事ができる
  • コードのテストができる

模写コーディングで実践スキルを身につける

Bootstrapを使える様になった後に模写コーディングにチャレンジしてみましょう!

Progateの学習が終了し、エディタの使い方、FontAwsome、Flexbox、検証ツール、Bootstrapの使い方が分かった方は、実際に1からサイトを作ってみましょう!

ネコ君
ネコ君

自分一人で1からデザインしてサイト作れる自信はないよー!

Hiko
Hiko

安心して下さい!こらから行うのは模写コーディングといって既存であるサイトを真似して同じページを作る学習をします!

模写コーディングとは?

実際に公開されているサイトを見ながら、同じサイトの見た目になる様に1からコーディングをしていく事を言います。

僕もこれまで6サイトほど模写コーディングをしましたがぶっちゃけこの方法が最もHTML,CSSのスキルを伸ばすのに効果的です!

↓模写コーディングについてはこちらの記事で詳しく解説しています↓

プログラミングスクールでブーストするのもアリ

HTML,CSSの基礎が終わったところで、プログラミングとはどんなものなのかが分かったかと思いますが、ここからHTML,CSSを極めるのかPHPやJavaScriptなどHTML,CSSに+@ のスキルを身につけるか決める必要があります。

正直HTML,CSSでだけで食っていくのは正直きついし、誰にでも身につける事ができるスキルなので、他の言語を学ぶ事をオススメします!

  • PHP
  • JavaScript
  • Ruby Ruby on Rails
  • Python
  • WordPress

Web系の開発に携わりたい方ならこの辺りを習得するといいでしょう。

TechAcademy [テックアカデミー] のホームページでそれぞれの言語で開発できるものや、現役エンジニアがオススメする言語が書いてあるのでチェックして見ましょう!

正直なところ、これらの言語をマスターするには1年ほどはかかり、挫折者も多いので独学が苦手という方は、プログラミング学習の環境を変える事も大事です。

フリーランスエンジニアを目指す方向けのプログラミングスクール5選

Progate学習が終わった後まとめ

ネコ君
ネコ君

何をすれば良いか分からなかったけどこの記事を読んでやることが明確になった!

いかがでしたでしょうか!

Progate学習終了〜模写コーディングまで解説してきましたが、この4STEPを終えると、HTML&CSSに関しては卒業してもOKなレベルです。

HTML&CSSの学習が終わった方は、LP制作に必要なスキルを習得してクラウドソーシング系のサイトで案件を受注して見るのもありですね!

その他のPHPやRubyなどのプログラミング言語を学びたい方は、TechAcademy のサイトを参考に自分にあった言語を選択してみましょう!

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

HikoPro
HikoPro

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

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

↓合わせて読みたいプログラミングの記事↓

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
学習法
HikoPro Blog

コメント

タイトルとURLをコピーしました