100日後にプロになる東大生

自己研鑽する東大生のブログです

ProgateのWeb開発パスをやってみた!(1)

 

TOEICも終わり、目標がなくなってしまったのでこれからProgateというオンライン学習サービスを使ってWeb開発について学ぶことにしました。Progateは名前は聞いたことがありましたが利用するのは初めてでした。

 

Progateには様々なレッスンがあったのですが、Web開発パス(Node.js)というコースを見つけたのでこれをやっていきます! 

 

どうやら教材のスライドを見ながらブラウザ上でコードを書いて学習するようですね。

 

f:id:hyakunichigotoudaisei:20210427084647p:plain

Progateのコース

 

以下学んだことや感想を書いていきます。。。

 

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要素の中身

  1. 文字コードの指定(meta)
  2. ページのタイトルの設定(title)
  3. CSSの読み込み(<link rel = "stylesheet" href "stylesheet.css">)

・ブロック要素、インライン要素(改行されるかどうか)

・送信ボタンは<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を扱うようなので、動的なサイトも作れるようになりますね。

 

続きは明日やっていきます。。。