ProgateのWeb開発パスをやってみた!(1)
TOEICも終わり、目標がなくなってしまったのでこれからProgateというオンライン学習サービスを使ってWeb開発について学ぶことにしました。Progateは名前は聞いたことがありましたが利用するのは初めてでした。
Progateには様々なレッスンがあったのですが、Web開発パス(Node.js)というコースを見つけたのでこれをやっていきます!
どうやら教材のスライドを見ながらブラウザ上でコードを書いて学習するようですね。
以下学んだことや感想を書いていきます。。。
HTML&CSS初級編
・タグの使い方<h1>,<p>,<a>,<img>,<ul> (unordered list) ,<ol> (ordered list) ,<li>,<div>,<span>,<input>,<textarea>タグ
・属性は開始タグの中に含める
・href,src,class属性
・CSSは色、大きさ、配置を指定する別ファイル
・color,font-size,font-family,background-color,width,height,list-style,float,padding,border,marginプロパティ
・classにCSSを指定する場合ドットを付けなくてはならない
・DOCTYPE宣言
・head要素の中身
・ブロック要素、インライン要素(改行されるかどうか)
・送信ボタンは<input type = "submit">で書ける、value属性で文字を変えられる
ここまでやりましたが、かなりわかりやすくWebページ制作を学ぶことができました。インプットとアウトプット同時にできるのでよいですね!
次から中級編になりますが、ここから有料でした。月額1078円です。。。
HTML&CSS中級編
・<header>,<footer>タグ
・background-image,background-size,opacity,letter-spacing,display,border-radius,text-align,line-height,font-weight,box-shadow,cursorプロパティ
・インラインブロック要素(display:inline-block;)
・クラス名は半角スペースで区切ると複数指定することができる
・セレクタ:hoverとしてカーソルが乗った時のCSSを指定することができる
・Font Awesomeというサイトに使えるアイコンがいっぱい載っているのでhead要素でCSSと同様に読み込んで使う
・rgbaによる色の指定rgba(#,#,#,#)では4番目の引数がopacity
・transitionによってカーソルを乗せた時にアニメーションをつける
・position:absolute;を使うことによって要素を重ねて表示できる
・cursorプロパティによってカーソルを乗せた時のカーソルの形を変更できる
・セレクタ:activeとして要素がクリックされている間だけCSSを指定することができる
・position:fixed;を使うことによってヘッダーなどがスクロールしてもずっと表示され続けるようになる
ここまでくるとかなりお洒落なWebサイトを作ることができるようになりました!
この次のレッスンはJavaScriptを扱うようなので、動的なサイトも作れるようになりますね。
続きは明日やっていきます。。。