はじめてのCSS編終了。結局ドットインストールとprogateどっちやればいいのか

はじめてのHTMLを終えて、引き続きはじめてのシリーズ。
今度はCSS編に突入だー。

progateとドットインストールをやりつつ思うのは、プログラミングは個性がでそうだということ。
教材によってだいぶやり方に差が出る気配がする。
いろんなのをみながら自分に合ったやり方を探すのがいいのかな？

フフーフ

やってから考える！出発！

スポンサードサーチ

はじめてのCSSを開始

早速初めていこう。
レッスン内容はこんな感じ

•  #01 はじめてのCSSを書いてみよう (02:53)
  • 完成版の確認
  • styleタグ
  • セレクタ、プロパティ
  • CSSファイルの作成、読み込み
•  #02 デベロッパーツールを使ってみよう (02:37)
  • デベロッパーツールの起動
  • Elmentsパネル
  • HTML/CSSの確認
  • Styles/Computedタブ
•  #03 色の表現方法を学んでいこう (02:44)
  • 色キーワード
  • rgb()
  • 16進数による表現
  • コメントの書き方
•  #04 フォントを設定していこう (01:29)
  • color
  • font-family
•  #05 CSSのボックスモデルを確認しよう (01:42)
  • background-color
  • ボックスモデル
•  #06 marginで外側の余白を設定しよう (01:57)
  • marginの設定
•  #07 divタグを使ってみよう (02:36)
  • div
  • class
  • 中央揃えのやり方
•  #08 Flexboxを使ってみよう (02:51)
  • 余白の設定
  • Flexbox
•  #09 アイコン画像のスタイリングをしよう (02:34)
  • 半角空白区切りのセレクタ
  • border-radius
  • border-width
  • border-style
  • border-color
•  #10 見出しのスタイルを整えよう (01:53)
  • 要素の検証
  • 見出しのスタイリング

 #11 リストのスタイリングをしていこう (02:55)

• • リストのスタイリング
  • Flexbox

 #12 align-itemsを使ってみよう (01:47)

• • align-items

 #13 セレクタの適用範囲を限定しよう (02:47)

• • sectionのスタイリング
  • >区切りのセレクタ

 #14 line-heightで行間を調整しよう (02:17)

• • 余白の調整
  • line-height

 #15 プロフィールサイトを完成させよう (01:19)

• • footerのスタイリング
  • プロフィールサイトの完成

引用：ドットインストール　Copyright © 2011-2020 dotinstall.com. All Rights Reserved.

はじめてのHTMLからそのまま続いていく

前回視聴した、はじめてのHTMLの続きから。
すべてそのまま使うので、間をあけずに視聴してしまおう。

コードや素材もすべてつながっているので、万が一捨ててしまった場合や消してしまった場合は戻ってコードを書く必要がある。
もちろん、話がまったくわからなくなってしまうので、ここから始めることはできない。

無料の工程をやってみて

一通り、無料で出来るHTMLとCSSの工程が終了。

おつかれさまにゃー

ちゃんねこ

流れのスピード感が早め

やはりリアルタイムで同じコードを打ち込んでいくのはかなりつらい。
ちょこちょこ止める必要がある。

あと思ったのは、やはりひとつひとつへのコードへの言及がすくないかな？
流れとしては完成形がきまっていて、それを実現するにはどうしたらいいか。という流れですすむ。

だから、完成形は隙間が大きいからこれを書いて　色が薄いからこれを書いて　フォントを変えるからこれを書いて
という、完成形ありきの流れだった気がする。

スポンサードサーチ

ドットインストールとprogateどっちやればいい？

結論から言うと、どっちもやったほうがいい。
なぜかというと、コードを書いていくうちになんとなく流れがつかめてきた気がするから。

もちろん1から全部かけ！といわれたまだ厳しい。
けど、フォントの線を薄くしようーって言われたら、あぁこれは前にfont-weight: normal;ってやったな。っていうのがちらほらでてきた。
何度か繰り返すうちに、決まったパターンに対しての予想がつくようになったのは一歩進んでいるということのはず。

絶対にどっちか選ばないと死ぬ

という状況なら、超初心者にはprogate　初心者にはドットインストールがいいと思う。
一通りやった感じでは

ドットインストールは実地訓練、progateは座学という感じ。
簡単な知識の土台を作るのは、progateかなと思う。

次の目標

とりあえずprogate・ドットインストールという、初心者向けのサイトのお試しをしてみた。
これ以上進むには、どちらのサイトも有料版い進む必要がある。

ということで、まずはprogateの有料プラン・中級編にチャレンジ！
それでも心配であればまたドットインストールの有料プラン→udemyという流れで進んでいく予定。
ひとまずはレビューはここまで。

それでは、また。