広告 ブログ運営

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)の違いについて知りたい 直流(DC)の交流(AC)について、それぞれ特徴を知りたい   電気の流れる向き・電流・電圧が変わるの ...

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

    オペアンプの反転増幅回路 オペアンプの反転増幅回路は下図のようになります。 反転増幅回路の入力電圧をVi、出力電圧をVoとすると下記の式で表されます。   オペア ...

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

  LEDのアノードとカソードについてとその見分け方 「アノードコモン」と「カソードコモン」について説明する前に、LEDのアノードとカソードについて説明します。   LEDは正しい ...

4

という問題が起きているようですね。 アフィリエイトが発生しないというのは死活問題ですね。   原因はどうやら、アンカーリンク内のtarget="_blank"が関係しているようだと。でも正確 ...

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

  MyLinkBoxで商品紹介できる広告主一覧 MyLinkBoxで商品紹介できる広告主一覧は下記の通りです。 カテゴリー 広告主一覧 モール(物販) Yahoo!ショッピング/楽天市場/ ...

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

      私もよく情報を整理するためにマインドマップを作成しています。 何か思いついたときにメモ代わりとして使用する事もあり、常に携帯しているスマホでマインドマップを作 ...

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

アメリカのシリコンバレー発のオンライン学習サイトで、日本ではベネッセが運営しています。 私自身もWeb開発やPythonなどのコースを購入しています。プログラミングだけでなく、動画編集や写真撮影など様 ...

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

  こんな方におすすめ ブレッドボードの使い方を知りたい ブレッドボードの使い方:ブレッドボードとは?ブレッドボードの仕組みについて   ブレッドボードは電子部品の足を差し込むだけ ...

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

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

LED抵抗計算機 10

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

-ブログ運営
-, , ,