ブログ運営

HTML&CSS初心者におすすめなサイトと書籍のまとめ

 

はじめに

STUDYと書かれたダイス

こんな方におすすめ

  • HTML&CSSの勉強を始めるかた
私自身、2018年の9月1日からHTML&CSSの学習を始めました。

サンダー
子供のために学習サイトを作りたい!

このように思ったのがきっかけです。

全くの素人から始め、仕事しながら勉強なので少しずつですが、学習を始めて3週間でトップページだけ作成しました。

 

 

また、このサンプルページを作成するにあたり、工夫したことを下記の記事にまとめています。
ここでは、Webプログラミングの学習経過を書いています。
学習過程において、おすすめするサイトや書籍とその理由をまとめています。
.

オンライン学習サイトのおすすめ

ドットインストール

ココがおすすめ

  • HTMLやCSS、Wordpressなど無料で学べる講座が多い
  • 講師の田口さんが早口なので倍速しなくてもサクサク学べる
  • 一部講座は有料だが、有料でも月額980円とオトク

ココに注意

  • 事前知識がある前提で講義される事があるので、全くの初心者はついていけなくなる事がある
  • 動画はダウンロード不可

 

Progate

ココがおすすめ

  • 講座が終わると経験値が貰えてレベルアップなどゲーム感覚で学べる
  • 無料で学べる講座が多い
  • progateコミュニティや#progateのハッシュタグがあり、モチベーションの維持がしやすい
  • 有料でも月額980円とオトク

ココに注意

  • 穴埋めのクイズ形式なので、1から書きたい人には不向きかも
  • スマートフォンの対応はされていない(その代わりアプリがある)

 

Udemy

ココがおすすめ

  • プログラミングに限らず様々な講座が動画で学べる
  • 基本は有料だが、定期的に割引があり、一度購入すれば受講期限はない
  • 動画をダウンロードできるので、通勤や通学時も通信量を気にせず学べる

ココに注意

  • 有料講座のみ
  • 講座が多い分、どれを選べばよいか悩む

 

書籍のおすすめ

HTML5&CSS3デザインブック

 

ココがおすすめ

  • レスポンシブ対応やページレイアウトを学ぶのに最適
  • ブログ風ページとビジネスサイト風ページの2通り作成できる
  • ブログで使えそうなテクニックがたくさんある

ココに注意

  • HTMLやCSSの基本文法の説明はない

HTML5&CSS3デザインブック(おすすめ度:

 

Amazonで探す

Kindleで探す

楽天ブックスで探す

 

HTML5&CSS3レッスンブック

 

ココがおすすめ

  • 開発環境の構築からブログ風記事作成、ページ公開と一通りできる
  • 古いブラウザの対応方法なども書かれている
  • 投稿フォームや2カラム構成などについても触れてある

ココに注意

  • 少し古い情報がある
  • 良くも悪くも取り扱う内容が広すぎる

HTML5&CSS3レッスンブック(おすすめ度:

 

 

まとめ

個人的にはこのような順番で勉強しました。

ココがおすすめ

【PCがあるとき】

紹介した学習サイトで手を動かしながら、ある時は調べながら学習を進める。

【通勤・通学やPCが手元にないとき】

Udemyの学習動画はダウンロードできるので、事前にダウンロードしておいた講義を復習

 

ある程度インプットしたら、知識不足でもサイト制作に取り掛かる予定です。







人気の記事

1

サンダー直流(DC)と交流(AC)の違いって分かりますか? かみなりん家庭用のコンセントは交流(AC)だよね。乾電池はなんとなくDC(直流)というイメージです。 サンダー改めて聞かれると、交流と直流の ...

【オペアンプ】 反転増幅回路の回路図アイキャッチ 2

かみなりんオペアンプの反転増幅回路ってどういう特徴があるの? サンダー反転増幅回路は文字通り、入力電圧の符号を反転、増幅する回路になります。 かみなりん反転して、増幅するから反転増幅回路なんだね。じゃ ...

アノードコモンとカソードコモン 3

サンダー「アノードコモン」と「カソードコモン」の違い分かりますか? かみなりんえーっと、アノードがプラス側、カソードがマイナス側で・・・コモンってなんだっけ? サンダー改めて聞かれると、どっちがどうだ ...

4

かみなりんアフィリエイトで成果が発生しない!? という問題が起きているようですね。 アフィリエイトが発生しないというのは死活問題ですね。   原因はどうやら、アンカーリンク内のtarget= ...

旅行やアルバイト等の 紹介にバリューコマースの『MyLinkBox』が超便利!! 5

サンダーバリューコマースから2019年6月5日に『MyLinkBox』がリリースされました! かみなりんその『MyLinkBox』ってなに? サンダー『カエレバ』や『Rinker』はご存知でしょうか? ...

miMind使いかたアイキャッチ 6

サンダーマインドマップはご存知ですか?   放射状に枝が伸びていくアレですよね?   頭の整理をするのに良く使います   私もよく情報を整理するためにマインドマップを作成 ...

Web(ウェブ)開発の学習にオススメなUdemyコース3選 7

サンダー世界最大級のオンライン学習プラットフォームの【Udemy】はご存知ですか? アメリカのシリコンバレー発のオンライン学習サイトで、日本ではベネッセが運営しています。 私自身もWeb開発やPyth ...

ブレッドボード の使い方のアイキャッチ 8

サンダーブレッドボードって知ってる? かみなりん電子工作でハンダ付けせずに、手軽に電子回路が組めるボードだよね? サンダーそう、今回はそのブレッドボードの使い方を紹介します。ブレッドボードを使ってLE ...

箇条書きタグ自動追加ツール 9

【このツールの目的】 箇条書きタグ(ulタグもしくはolタグ)を自動で追加するツールです。 listタグも自動で追加します。 【箇条書きの種類選択】 数字無し箇条書き(ul) ・箇条書き数字有り箇条書 ...

LED抵抗計算機 10

LED抵抗自動計算機 下図のように、LED1個をつなぐとき、LEDに流したい電流から抵抗値を求める計算機です。   LED抵抗計算機 ↓電源電圧【例】5(V) ↓LEDの電圧降下【例】2(V ...

-ブログ運営
-, , ,