私はWeb開発の学習に非常に興味があり、数年前にW3SchoolsからHTMLとCSSに関する基本を学びましたが、今日の標準に準拠したWebサイト、つまりテーブルを使用しない自由に流れるサイトを開発する方法を学びませんでしたサイトの設計を管理します。

私が始めることができるいくつかの良いリソースは何ですか？

CSS Zen Garden

CSS Zen Gardenをチェックして、さまざまな結果を確認してください。これらは非常に用途が広く、同じソースコードに対して多くの違いを提供します。最新のCSSテクニックについて多くを学びます。それらを完全に分析しなくても、少なくとも通常のアクセス可能なHTMLに対して多くのインスピレーションとCSSの能力を見つけるでしょう。CSS Zen Gardenの素晴らしい点は、スタイルに対するセマンティクスです。コンテンツはスタイルではありません。スタイルはすべてCSSによって純粋に実行されます。これは、データを多くの異なるクライアントが消費し、スタイルを視覚化するクライアントのみがスタイルを使用できるため、正しい方法です。

本

本から学ぶことになると、これは非常に良いCSSの出発点のように見えます。

インターネット

私はインターネットでSmashing Magazineを読み、多くの例とアプローチを提供しています。それは、デザインビジネスからウェブデザインなどの素晴らしいアプローチまでの記事に及びます。

Webサイトとアプリケーションの作成方法を学ぶ最良の方法は、実際にそれを行うことです。つまり、プロジェクトを作成し、常にそれを行う必要があります。この短いビデオは、新人の感情を伝え、主題に関するいくつかの良いアドバイスを提供します。

また、Web開発の学習に興味のある人向けに、始める前に読んでおくべき推奨事項をいくつか書きました。

ただし、言葉をまったく知らない言語を話せないのと同じように、有用なプロジェクトを構築する前に基本を十分に理解する必要があります。ここでは、自分で探検できるいくつかの基本とサイトを取り上げるリソースを紹介します。

無料でウェブ開発の基本を学ぶのに最適な場所があります。ここから始めますが、それらから分岐して、直接教えていないことをいじりましょう。いくつかの作業を行った後、他のサイト/プロジェクトをゼロから自分で作成してみてください。そうすることで、概念が強化され、実装の詳細がわかります。また、おそらく追加のことも教えられます。あなたは、単にすることはできません、だけで読み取ることにより、優れた開発者やデザイナーになるあなたが作成する必要があります！

Web開発を学ぶデザイナー向けの短期集中コースを作成しました

見てみな！デザインベースのオーディエンス向けに調整されていますが、学習するすべての人に適用されます。スライド/投稿/ビデオの基本を教え、それぞれの終わりに小さなプロジェクトを割り当てて、実際のフロントエンド開発を教えます。

• レッスン1-Web開発の背後にある理由と理由
• レッスン2-HTMLとCSSの開始
• レッスン3-JavaScriptの開始（JS）

その他の優れたチュートリアルWebサイト

• CodeAcademy-いくつかの言語の一般的な知識の基礎。
• Mozillaの「Webの学習」シリーズ -これは最初のレベルから始まり、より複雑なトピックに導くことができます。素晴らしいリソース、私はそれを強くお勧めします。
• Udacity-一般的なWeb開発クラス。
• Tuts + -より具体的なトピックに関するチュートリアル。
• KhanAcademy-個人的には使用していませんが、毎日良くなっているようです。

W3Schoolsのを使用しないでください、それは一般的に時代遅れと非常に起こりやすいエラーです。代わりに、あなたが何か特定の探している場合は、以下のドキュメントサイトのいずれかを習得して使用するために、上記のもののようなチュートリアルのWebサイトを使用しています。

ドキュメンテーション

優れたWeb開発者になるには、プロパティやライブラリなどのドキュメントを確認することが不可欠です。以下は、使用できる最高のドキュメントです。

• W3.org -Webブラウザによって実装されるほとんどすべての公式ドキュメント。これらのドキュメントを読むことを学ぶことは非常に重要です！これは、W3Schoolsとは一切関係ありません。
• Mozillaのドキュメント -のFireFoxのクリエイターからA非常に信頼性の高いサードパーティのリソース日まで滞在までのこと。
• WHATWG.org -W3に対する一種のオープンソースの競合。一部のブラウザは、ここからW3を介して特定の提案を実装する場合があります。
• DevDocs-公式ではありませんが、1つのサイトに多数の言語ドキュメントがあります。とても便利です。

便利なフィード

• WebPlatformDaily - （土日を除く）のすべてのウェブ毎日更新を扱うニュースのリスト。
• SitePoint-さまざまなことに関する本当に役立つ記事。
• WebDesignerDepotは -スパムの側にあることができますが、彼らの実際の記事のほとんどは良いです。
• Smashing Magazine-より高度なトピックがありますが、ほとんどすべてが良い読み物です。
• A List Apart-ブログ形式のもう少し高度な知識。

編集者

小さなプロジェクト/コードで遊ぶ

• JSFiddle-小さなプロジェクトを作成し、それらを追跡します。
• CodePen-他の人のコード落書きを見て、他の人に見せるために自分のコードを送信してください。

フルテキストエディター

• SublimeText
• 原子

その他の便利なウェブサイト

• マイリソースページ -イントロからレスポンシブデザイン、Webブラウザーでアニメーション化するさまざまな方法の分析に至るまで、私がコンパイルしているリソースのリスト。
• フロントエンド開発者のハンドブック -フロントエンドトピックの広い範囲をカバーポストのAより多様けど役に立つコレクション。
• WebFieldManual-役立つリソースの大規模なコレクション。
• StackOverflowのは -あなたが持っている場合は、特定の関連する質問をプログラミングし、StackOverflowのはあなたの助けを得るために比類のないです。
• LearnLayout -CSSでのレイアウトの実行に関する基本を学びます。
• Webデザインでのポジショニング -おそらく最も役立つと思われる私のクラッシュコースの一部。
• 知っておくべき30のCSSセレクター -それらについて知り、後で時間を節約してください。CSSセレクターの知識をテストするためのクールな小さなゲームもあります。
• Codrops CSSリファレンス -簡潔で役立つリファレンスページ。
• CodeMentorとThinkful -1対1の指導を受けるために支払うことができるサイト

あなたが好きなウェブ開発者とデザイナーの個人的なブログを探してください。彼らはしばしば素晴らしい、素晴らしいコンテンツを持っています。

また、非常に役立つUIデザインの紹介も作成しました。その中にいくつかの追加の素晴らしいリソースをリンクしました。

十分に強調することはできません。学ぶための最善の方法は、限界を押し広げ、継続的にそうすることです。

役立つWeb関連サイトのさらに大きな（そしておそらく圧倒的な）リストについては、WebDesignRepoをチェックしてください！

Webデザイン（レイアウトソリューション、使いやすさ、グラフィックス、技術的ソリューション）について学ぶのに最適な場所は次のとおりです。

それらのウェブサイトで記事を書いた人々のすべてのウェブサイトを見てください：

離れリスト
24ways.org

または、リストの設計に関するより技術的なもの、およびフローティングhttp://css.maxdesign.com.au/index.htm

あなたは、Web標準何であるかを知っている必要があります。公式ソースは 次のとおりです。WorldWide Web Consortium（w3c） 高度に技術的であるため、そこから学ぶのは少し難しいですが、Web上での動作とその理由を知りたい場合は、チェックアウトするのが良いでしょう。標準規格について。最も便利なのは、HTMLコードのバリデーターです。

最良の方法の1つは、優れたWebサイトのソースコードをよく見ることと、当然のことながら、トリックを学習するためにそれらのようなものの割合を調整することです。

そして、優れたWebデザイナーのWebサイトと彼らが何をしているかを見てください。

Jason Santa Maria
Dustin Curtis
Joshua Davis
David DeSandro
http://www.thinkingforaliving.org/
など...

そして私のDeliciousブックマーク（さまざまなものがあり、それらを掘り下げて、不要なものをざっと読む必要があります） http://www.delicious.com/Littlemad/webdesign

これらのフレームワークをすべて学習する前に...

Webデザインのデザイン部分に注意を向けたいと思います。

もちろん、Bootstrapまたは他のフレームワークを使用してWebサイトを簡単に構築できます。しかし、それは設計ではありません。フレームワークは基礎となることができますが、独自のスピンを行わないと、基本的に他のすべてのWebサイトと同様のWebサイトが得られます。

だからこそ、デザインの基本を学び、それらを自分で適用してみることをお勧めします。

（美しい）Webサイトを自分でどのように作成しますか？

これは本に値する質問ですが、ここにいくつかのポインタがあります。

1. 設計の基本原則についてお読みください。Webデザインのこの7ステップの入門書は、開始に役立つはずです。また、Smashing Magazineのこの一連の記事。
2. 他の人のデザインを観察します。彼らはどのような基本原則をどのように使用しましたか？ただし、単に観察するのではなく、観察結果に注意してください。
3. ビジネス目標を念頭に置いて設計します。Webデザインは、ビジネスが目標を実現し、ユーザーが自分の目標を達成できるようにするために存在します。2つの目標が収束すると、誰もが幸せになります。したがって、その目標は常にあなたの出発点であるべきです。この目標（フォントの選択、色の選択、レイアウトなど）に基づいて、各デザインの決定を行う必要があります。
4. デザイン全体に調和があることを確認してください。一般的に、これは送信したいメッセージ、色、フォント、ウェブサイトの雰囲気、ブランドの調和を意味します。モジュラースケールを使用してサイズ決定をガイドすることにより、デザインに調和を組み込み始めます。このミニシリーズでは、ハーモニーとモジュラースケールの使用について詳しく説明します。
5. この驚くべきタイポグラフィの紹介を読んでください：ButterickのPractical Typographyまたは、少なくともこの要約

最初から設計してみてください

さて、これらすべてのことを読み終えて、HTMLとCSSを知っていれば、あなた自身の非常にシンプルなデザインをすることができるでしょう。

黒と白のテキストだけで単一のページを設計してみてください。

なぜテキストだけですか？テキストは、ウェブ上でメッセージを伝えるために最もよく使われる媒体だからです。したがって、Webデザイナーとしてのあなたにとって、テキストの見栄えを良くし、読みやすくすることが基本です。

なぜ白黒ですか？色を選ぶことはさらに別の獣だからです。小さな一歩を踏み出すことで、自分の進歩に満足し、より早く学ぶことができます。

学んだ基本的な設計原則を適用し、他の人の設計の観察結果を使用し、そのページの目標を考え、モジュラースケールを使用してテキストのサイズを調整します。

学習の最良の方法は、物を作ることですので、自分をウェブサイトにしてください。

標準、alistapart、tutsplusをお読みください。

本が必要な場合は、SitePointのHTMLユートピア：CSSを使用したテーブルなしの設計をご覧ください。

csszengardenとW3Schoolsについてのいくつかの考え。

正直なところ、WordPressサイトの開発方法を学ぶことから始めます。はい、HTML、CSS、PHPを使用してサイトをコーディングできますが、WordPressサイトをより速くまとめて、必要に応じてカスタマイズできます。

今日の標準を学ぶことから始めたい場合は、http：//nettuts.com/をお勧めします。プレミアムメンバーシップを取得し、いくつかの優れたチュートリアルにアクセスすることも有益です。PSDからHTMLへの移行が興味のあるものである場合、彼らはそれをカバーします。

NettutsはEnvatoの一部です。Envatoには、Web開発、ワードプレス、ベクター、写真やビデオの編集などをカバーするチュートリアルサイトがいくつかあります。始めるのに最適な場所です。

ちょうど私の2セント。

Photoshop on Webデザインの初心者には、このサイトhttp://psdvibe.com/をお勧めします

たくさんのチュートリアルがあるウェブサイトがたくさんあります。ただし、ウェブデザインを学ぶのに最適なプラットフォームはhttp://teamtreehouse.com/です。それが役に立てば幸い！ニック