【中級編】未経験からwebサイトを作れるようになるには?

web制作
スポンサーリンク

こんにちは、はるです。

今回は前回の初級編の続きとなっています。
少しづつ内容が難しくなってきますが、より高いクオリティのサイトが作れるようになるのでぜひ参考にしてください!

前提のレベル感
  • HTML,CSSの基礎がわかる
  • 模写コーディングをいくつか経験している

ここまではシンプルで動きのないサイトを作ってきました。
ここからはjQueryというJavascriptのライブラリであり、サイトに動きをつけることができるものを学んでいきます。

具体的なプログラミングの仕方などについては今回の記事では書きませんが、雰囲気だけ軽く紹介しておきます。
下がjQueryのプログラムになります。

$("#fadeBtn").click(function(){
  $("#box").fadeOut("slow");
});

fadeBtnというidのついたボタンを押すと、boxというidのつく要素をゆっくりフェードアウトさせるという処理が書かれています。

見た目はなんだか難しそうな感じがしますね。
それもそのはず、jQueryはHTML,CSSのようなマークアップ言語ではなく、プログラミング言語にあたります。

しかし一つずつ学んでいけば、web制作で使う最低限のものなら誰でも習得できると思います。
これから勉強法について紹介しますので、学習を始めていきましょう!

まずはProgateから

jQuery学習の入り口としてオススメしているのが、Progateです。
本当の基礎の文法からわかりやすく解説されており、程よい演習も用意されています。

また、モーダルやアコーディオン、スライドなど実際のwebにも多く使われている機能を学ぶことができます。
学習を始めるハードルもあまり高くなく、初学者には本当におすすめできます。

しかしProgateだけでは知識が足りないので、もうちょっと学習をしていきましょう。

jQueryをもっと深く学ぶ

次はもう少し深く学んでいきます。
ネットで学ぶのもいいですが、全体を体系的に学んでからわからない部分だけネットで調べるのがいいです。

そこで使っていくのは本です。
jQueryの本はいくつもありますので、自分に合うものを選ぶといいでしょう。

僕がオススメしているのは『jQuery標準デザイン講座』です。
この本には30のレッスンが載っていて、実際にコードを書きながら学べます。

またこの本のいいところはサンプルが充実しているところです。
必要なjQueryのコード以外はすべて完成しているサイトが用意され、足りないコードを補填しながら学習するという流れになっています。
解説もとても丁寧なのでProgate後の学習にぴったりだと思います。

いかがでしたでしょうか。
正直、HTML,CSSと比べたらjQueryは結構難しいと思います。
そのため挫折しそうになったり、モチベーションが急に下がってしまうこともあるかもしれません。

そのようなときに僕は、自分のオリジナルサイトを作ってみたり、webのデザインを学んでみたりと他のことをして気分転換を行っていましたね。
スキルアップを実感する瞬間が一番楽しいので、そこまでの辛抱だと思って頑張っていきましょう!

コメント