【30代からのプログラミング】超初心者がjQueryを使ってWEBサイト制作してみる。備忘録

ProgateでHTML/CSS、JavaScript、jQueryを学習したのでアウトプットしてみる

はたして、どこまでできるのでしょうか・・・。今回も習ったことと、ググったりしながらWEBサイトのLP(ランディングページ)を作って見たいと思います。

エディター

今回はマイクロソフト社が無料で提供してくれているVS Codeというエディターをダウンロードしてみました。なんかYouTubeのコーディングビデオを見ていて気が付いたのですが、動作がサクサク軽そうだなあ。と単に思ったからであります。Atomとできることはそう変わらなさそうですし、(今のところ)割合として利用している人が多いようですね。

初心者すぎておススメ拡張なんかはよくわからないまま、ネットでおススメされていたものをいくつかインストールしました。
  • vscode-icons
  • Visual Studio IntelliCode
  • Path Autocomplete for Visual Studio Code
  • IntelliSense for CSS class names in HTML
  • Indent-Rainbow

まずはHTMLのテンプレートとPathをつなげる


Qiitaでありがたい情報を見つけました。VS CodeでEmmet使ったらHTML書くの早くなった~! です。
HTMLは最初の宣言やらの決まった‘’おまじない”がありますが、それを 『!』を打つだけで一瞬で書き出してくれたりしました。 Atomでも『hr』を打つと自動でやってくていましたね。

今回はFontAwsomを使おうかどうしようか決めてないので、まだリンクは張っていませんが、とりあえずjQueryを使うのでそちらのリンクをCDNで張りました。といっても、Progateのをコピペしたです。

でここでふと気が付きました。プロゲートのCDNリンクが最新じゃないということに!
2019年ではjQuery3系が標準らしく、2系はめったに使わないとか… えー。
色々調べたのですが、おそらく教えてもらった部分は3系でも同じように使える気がするので、とりあえず、CDNを最新版に切り替えて挑戦してみようと思います。

ええと最新版はググったら出てくるのですが、グーグル神のライブラリで最新のものを確認するのが正攻法かと。ここ
このリサーチで気が付いたのですがGoogle Developersってなかなか面白そうですね。


jQueryを書く前に


jQueryは、Script.jsファイルの中に書いていくのですが、書き出しのおまじないがありましたよね。

$(function(){
. // この中に書くこと
.
.
});


では、頑張っていこうと思います。

追記:Script.js のPathが間違っててこの後かなり苦戦しました。/がいらなかった・・・。

コメント

このブログの人気の投稿

素人でもAdobe Stockでの副業で売り上げを出す方法を考察

プロフィール

【30代からのプログラミング】Progateでとにかく勉強してみる編