私はシングルページアプリで作業を開始しています。（TiddlyWikiを考えてください）
本格的なウェブデザインをするのは久しぶりです。前回私が大きなサイトを構築したのは、css、javascript、html5 以前、つまり HTML と多くの CGI スクリプト (私の場合はほとんどが PHP) でした。私は何年にもわたって新しいテクノロジーの断片を取り上げてきましたが、組織化された形ではありません。
振り出しに戻って、ますます複雑なページ/サイト (HTML -> HTML+CSS -> Javascript -> HTML5 関数) に取り組む時が来たと思います。
これは、「ゼロからの Linux」に似たチュートリアルが浮かんでいるのではないかと思いますが、「ゼロからの Web サイト」に焦点を当てていますか? それとも、少なくとも HTML の hello world から始まり、論理的な方法で段階的に機能を追加する一連のチュートリアルですか?
ありがとう！
個人的には、HTMLとCSSを適切に学び、JavaScriptについて考える前に（特にSPAについて考える前に）、それがうまく機能するようにすることをお勧めします。これが私が最近誰かのために書いた小さなガイドで、あなたの助けになるかもしれません：
したがって、CSSマスターになるために考慮し、理解しなければならないことがいくつかあります（私の意見では重要な順序で）：
セレクターを使用すると、ページ上の要素をターゲットにできますが、セレクターがないと、ほとんど何もできません（要素にスタイルルールをインラインで追加することを除けば、悪い習慣です！）。セレクターの動作とそのサポートを理解します。
次に理解すべきことは、最も重要なトピックの1つです。これにより、CSSを不必要に書きすぎないようにすることができます。カスケードです。
特異性は、特定の要素に適用されるルールを決定します。ほとんどの場合、それは回避でき、無知で進むことができますが、それを理解すると、セレクターを飼いならし、自分との軍拡競争に巻き込まれるのを防ぎ、セレクターにIDを追加して、スタイルを適用します（それが意味をなさない場合） 、あなたは特異性を理解していません、読んでください！）
私がCSSについて人々と話すときはいつでも、ほとんどの人々はフォントのスタイル、背景、そしてそのすべてのジャズを理解しています。それは単純なことだからです;-)人々がいつも問題を抱えているように見える領域は、ポジショニングとフローティングを理解することです。これらは両方ともボックスモデルに関連付けられているため、最初にそれを学習してから、ポジショニングとフローティングに移ります。
この時点で少し頭がおかしくなっても心配しないでください。かなり紛らわしい概念です。
しかし、マークアップなしのCSSとは何ですか？むしろ、優れたHTMLなしで優れたCSSを使用するのはどのような用途ですか？CSSをよく理解することは、HTMLをよく理解することだと思います。次のWebサイトには、HTMLに関する大量の情報が含まれています。
最初に学ぶには少し深すぎるかもしれないので、次の本も強くお勧めします。
どちらも、CSSを使用して優れたセマンティックマークアップとスタイルを記述し、優れた結果を作成する方法を示しています。あなたがインターネットを持っているこの時代に誰が本を必要としているのか、私は知っていますか？！これらの本は素晴らしく、100％コストに見合う価値があります。
あまりターゲットを絞っていない提案もありますが、一般的なCSS/HTML学習のための優れたリソースです。
最後に、Webの大きな強みは、すべてのWebサイトが事実上オープンソース*であり、WebサイトのすべてのCSS / HTML/JSを表示できることです。次に何か面白いものを見つけたら、Firebugを開いて、何が起こっているのかを理解し、値を変更して、それがどのような影響を与えるかを確認してください。他の人がマークアップをどのように整理するか、どのようにスタイルを設定するか、CSSを介してjavascriptにどの機能を委任するかなどを確認してください。
上記のすべてを理解した後、最先端のCSSをいじくりまわすことができます。いくつかのCSS3テクノロジーで遊ぶための便利なWebサイト：
それが私が今考えることができるすべてです！もちろん、何かをマスターするのと同じように、それはあなたがどれだけの読書をするかではなく、あなたがあなたが読んだものをどれだけ練習するかです。あなたが実際にこれらのことに苦労しているときだけ、あなたは本当に洞察を得て、あなた自身のメンタルモデルを強化するでしょう。
JavaScriptに関しては、プログラミングを知っていると仮定して（CGIとPHPについて言及している場合）、ここにあるDouglasCrockfordのビデオをいくつか見ることを心からお勧めします。
CrockfordはJavaScriptのマスターであり、いくつかの大きな進歩を担当しています（彼は、JSONを発明し、JSLintを開始しました）。YUIシアタービデオは特に素晴らしく、信じられないほど詳細です:)
いくつかのツールと「デバッグ」のために、私が使用するものが機能するかどうかを確認します: JSfiddle
また、w3schools は、これらの概念の基本的な理解に最適です。
CodeAcademyの HTML5 と Javascript のトラックも役立つかもしれません。
CSS と JS がさらに多くの機能を追加し、HTML5 がより多くの要素タグを追加しただけです。
あなたの代わりに私がすることは、基本的なウェブサイトを作成し、チュートリアルに従って徐々に新しい機能を追加して独自のものにすることです.
私も2セント追加します。HTML、CSS、全体的な Web サイトのコーディング/デザイン プロセス、および私が本当に良いと考えるその他の有用な情報を学習するためのいくつかの素晴らしいシリーズを次に示します。
もっとたくさん投稿できますが、なぜそうなのか-これらは形を整えるのに十分です. それらから始めることをお勧めします。途中でさらに多くのリソースが見つかります。