初心者がprogateでプログラミング(html,cssから)のオンライン学習しました。かっこいいサイトを作るコツとか基礎が身に付いた。

サイト

課金して有料部分も学んでいます。

ふと、そうだプログラミングをやってみたいなと思い立ちオンライン学習サイトのprogateというところを利用してみることにしました。

昔、ちょっとやってみて放置していたんですが再開することにしたんです。

最初は、htmlやcssのことを学習していき、有料のところになったので課金しました。一か月980円(税込み)です。

昔から、htmlやcssは、自分のサイトを作るために本を見たりして、ある程度は知っていたので、すいすいと学習は進みました。

自分で環境を用意しなくても学習できるのが初心者向けでいいと思う。

progateのいいところは、このサービス内で学習が完結していて、スライドというのを、何度も見返すことができ、さらに、だんだんと学習強度が高くなっていくことです。

最初は、ヒント多めなんですが、そのヒントが、だんだんと少なくなっていきます。

繰り返し学習していくと、だんだんとスライドを見返すことなしに、htmlやcssの場合であれば、例題のサイト作成を、すいすいと作り上げることができるようになっていますよね。

サービス内で学習が完結しているっていうのは、真ん中にコードを打ち込む場所があり、右側に、打ち込んだ結果と見本、左側に、どういうことをするのかっていうのヒントなどが配置されているということです。

ですので、できたら、ディスプレイは、大き目で広い範囲を表示できるようなののほうが学習はしやすいと思います。

自分が打ち込んだコードの結果が、すぐに右側のところで反映されるっていうのは分かりやすくていいですよね。

なんにも分からない状態の初心者だと、ただ教材を与えられても、どういう環境を整えれば学習しやすいのかというところから分かりません。

コンソールってなに?みたいな感じですね。

別の有名なオンラインプログラミング学習サービスとの比較

有名なオンライン学習サービスがあって、そこは動画を観て、自分でやっていくっていうスタイルです。

いきなり、そこではなくて、まずはprogateで基礎的なことを鍛えてから、そこの有名なオンライン学習サービスをやってみると、かなりすんなりと学習していけるのではないでしょうか。

有名なオンライン学習サービスでは、動画を観ながら、自分で用意した環境でコードを打っていくっていうことになるので、習字でいえば模写をして、きれいな字を書けるように練習していくっていうのに似ていると思います。

模写をして知識を身に付けていくには、まずは、その前段階として、どういうふうに字を書けば美しく見えるのかという知識があると、模写しつつ、なるほど、こういうふうに書くから、きれいになるのかといった構造的なことも見えやすくなりますよね。

progateは、そんなプログラムの基本部分を初心者のうちに身に付けることができるサービスではないでしょうか。

まずはprogateで基礎を鍛錬しておけば、他の学習サイトで、さらっと流れていくような部分も理解しやすくなると思います。

htmlやcssって、各プログラミング言語と密接な関係があることが分かった。

html、css、javascript、jQueryと学習して、今は、Rubyっていうのを学習しています。

この過程で学習してきて思ったのは、htmlって、プログラミング言語って言われるものと密接な関係があるんだなって思ったことです。

以前は、ここまで関連性があるとは思ってませんでした。

プログラミングを始まるなら、まずは、htmlからっていうのが、どこかの情報にありましたが、その通りなんでしょうね。

そして、プログラミング言語っていうのは、根本的な構造みたいなものは、ほとんど一緒みたいなんだなっていうことです。

Rubyっていうのを学習していて、最初に思ったのは、へぇ~Rubyっていうのにもif文があるんだっていうことです。

プログラマーの人からすれば、なにを言っているんだ?みたいなことだと思いますが、初心者な私は、そんなふうに思いました。

なにか「実現したいこと」があって、それを実現するために、どのプログラミング言語を使うのかっていうだけのことなのかな?

プログラミング言語の種類によって、得意分野、不得意分野っていうのはあるのだと思いますが。

jQueryは、「実現すること」を、ある程度パッケージ化して利用しやすくしてあるっていうことなんでしょう。

progateで苦労したこと。一回、せこい手を使ってしまいました。

progateのhtmlやcssの学習をしていて、苦労したなって思ったのは、見本の通りにサイトを作成するっていう課題です。

自分で打ち込んだ分と見本のサイトを見比べても、どこが違うのか初心者には分からないことがありました。合格しないと先に勧めません。

修正箇所が赤丸で示されるのですが、よく分からないということがありました。

これは、私の学習不足が原因ということもあると思うんですが、結局は、paddingなどを調整して判定を繰り返していると、合格となることが多かったです。

もぉ~分からん!ダメだ~って一回なったときは、完成版のソースをコピペしてきてしまいました(すみません)
ちゃんと復習しようと思います(反省)

学んだことを活かして、単発のちょっとした仕事をすることができました。

progateにて、html、cssの学習を全てやり終えてしばらくしてから、クラウドソーシングで、cssのちょっとした修正の仕事をすることができました。

ほんと、ほんのちょっとの作業だったんですが、どのようにすれば修正できるのかっていうのを調べるのに、少し時間がかかりました。

ポイントというか修正依頼をくださった原因となったのは、「子要素がfloatになっていると、その部分が浮くというふうになり親要素の高さが0(ゼロ)になってしまう」という現象です。

この部分を、progateでの学習がヒントになり気づくことができました。

このfloatが浮くっていう現象で困っている人って、かなりいると思います。

たとえば、無料ブログで、初心者の人がテンプレートを、いろいろいじっていたら、テキスト部分のエリアが、ごっそり消えてしまったとかですね。

ブログのトップ画像の下のコンテンツ部分が、背景色とか背景画像でいっぱいになってしまったりなどの現象です。

親要素に高さを持たせるためには、clear:bothしたり、親要素にfloatを入れたりなどなどしないといけないそうです。
ここに、分かりやすくまとめられています。
http://qiita.com/shizuma/items/e79702c915a557491884

こんな感じで原因と特定して解決方法を調べるには、単語を知っていたほうがいいですよね。

たとえば、親要素とか子要素っていう単語です。

progateで学習していたことがヒントになり、そういえば、floatは「浮く」んだったなって気づくことができれば、調べれば、すぐに解決方法が出てくるというわけです。

プログラミングは、調べれば解決できるという力が必要だそうです。

たしかに、どんどんと検索してヒントや答えを見つけていけば、それが自分のプログラミング力の向上にもなりますよね。

ただ、なにも分からない初心者だと、どういう言葉を使って、どういうふうに検索していけばいいかが分からないわけです。

その部分の基礎を鍛えるためにもprogateは役立つということですね。

学習していたときに気づいた点のツイートのまとめ

以下、progateで学習していて気付いたことをツイートしていたのを、まとめておきます。


透過と、角を丸くする。
この二つをするだけで、サイトが、だいぶかっこよくなります。


ここで、子要素のfloatが浮くために、親要素の高さがなくなるという現象を学びました。


よくモダンなWEBサイトで見かける、薄いフィルターをかける処理が、これです。他にも、いろんな方法があるのでしょう。
これも、サイトがかっこよくなるポイントですよね。


CSSでもアニメーションの動きを実装できたりしますが、jqueryだと、もっといろいろできるっていうことかな。


これ盲点でした。今後役立つと思います。


ってことで、お仕事を一つさせていただくことができました。報酬は、ちょっとだけですが。

でも、この仕事をして思ったのは、htmlとかcssが、よく分からない人にとっては、私のような初心者レベルの人間でも役立つことができるし、非常に喜んでもらえるってことでした。

最後に、サイトをかっこよくする素人なりのポイント、気づいた点を箇条書きしておきます。

  • 背景画像に、薄い黒のフィルターをかける。
  • 文章を四角くかこったとことか、ボタンとかは、透過させる。(opacity rgb)
  • ボタンの角は丸くする。(border:radius)
  • cssのアニメーションを取り入れる。

こんな感じかな。

とくに、かっこよく見えるのは、透過させることですね。

オンライン学習サービスprogateのサイトは、こちら

https://prog-8.com/

スポンサーリンク
レンタングル大




レンタングル大




シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レンタングル大