Introduction to Web development

  • Revision slug: Web_Development/Introduction_to_Web_development
  • Revision title: Introduction to Web development
  • Revision id: 61194
  • Created:
  • Creator: addyosmani
  • Is current revision? No
  • Comment Updating HTML reference section; 48 words added, 1 words removed

Revision Content

Whether you're just getting started with Web development, or are just expanding your horizons into new realms of Web awesomeness, the links here should help you get started.

Note: The recommended resources on this page are subject to change.

Documentation topics

 

HTML

CSS

JavaScript

Resources

Opera's Web Standards Curriculum
Covers web design, HTML and HTML5, CSS, JavaScript and accessibility. This is a good starting point for beginners wishing to learn web development fundamentals across a number of areas.
SitePoint
A reliable reference site for learning HTML, CSS and JavaScript which also mentions feature support across different browsers and known browser bugs.
HTMLDog
An excellent and comprehensive reference site on HTML and CSS for beginners.
Google's HTML, CSS, and Javascript from the Ground Up
These easily digestible video tutorials from Google's expert web developers cover the basics of HTML, CSS and JavaScript.
CSSTutorial.net Beginner Tutorials
A broad range of useful text and video tutorials that cover the basics through to intermediate aspects of CSS.
Tizag CSS Tutorials
An easy-to-follow reference for those wishing to learn CSS through short, concise tutorials.
jQuery Fundamentals
An open-source reference book featuring detailed introductions to both JavaScript and jQuery Fundamentals for beginners.
JavaScript From Null: A Video Series
A video series on JavaScript for absolute beginners looking for more 'visual'-based learning

 

{{ languages( { "zh-tw": "zh_tw/Web_開發/Web開發入門" } ) }}

Revision Source

<p>Whether you're just getting started with Web development, or are just expanding your horizons into new realms of Web awesomeness, the links here should help you get started.</p>
<div class="note"><strong>Note:</strong> The recommended resources on this page are subject to change.</div>
<table class="mainpage-table"> <tbody> <tr> <td width="50%"> <h2>Documentation topics</h2> <p> </p> <h3>HTML</h3> <ul> <dl> <dt>Getting started </dt> <ul> <li><a class="external" href="http://dev.opera.com/articles/view/12-the-basics-of-html/" title="http://dev.opera.com/articles/view/12-the-basics-of-html/">The basics of Hypertext Mark-up Langage (HTML</a>) - what exactly is HTML?</li> <li><a class="external" href="http://reference.sitepoint.com/html/page-structure" title="http://reference.sitepoint.com/html/page-structure">Basic structure of a web page</a> - the doctype and document 'tree'</li> <li><a class=" external" href="http://reference.sitepoint.com/html/elements" title="http://reference.sitepoint.com/html/elements">Fundamental HTML Elements</a>  - structural, head, list, form elements and more, explained by category.</li> <li><a class=" external" href="http://htmldog.com/guides/htmlbeginner/" title="http://htmldog.com/guides/htmlbeginner/">HTML Beginners Tutorial</a> - a tutorial and exercise that recap and take you through the basics you've learned above.</li> <li><a class="external" href="/en/HTML/Element" title="https://developer.mozilla.org/en/HTML/Element">The MDC HTML Elements Reference Guide</a> - a comprehensive guide to HTML elements with details on how Gecko/Firefox support them</li> </ul> </dl> </ul> <h3>CSS</h3> <ul> <dl> <dt>Getting started </dt> <ul> <li><a class="external" href="/en/CSS/Getting_Started" title="https://developer.mozilla.org/en/CSS/Getting_Started">The MDC Guide To CSS For Beginners</a> - an absolute beginners guide to CSS covers basic concepts and fundamentals</li> <li><a class="external" href="/en/CSS_Reference" title="https://developer.mozilla.org/en/CSS_Reference">The MDC CSS Reference Guide</a> - a complete guide to CSS with details on the level of Gecko/Firefox support for each.</li> <li><a class="external" href="/en/Common_CSS_Questions" title="https://developer.mozilla.org/en/Common_CSS_Questions">Common CSS Questions</a> - common questions and answers for beginners</li> </ul> <dt>Intermediate</dt> <ul> <li><a class="external" href="http://www.html.net/tutorials/css/" title="http://www.html.net/tutorials/css/">Intermediate CSS Concepts</a> - grouping, pseudo-classes and more.</li> </ul> </dl> </ul> <h3>JavaScript</h3> <ul> <dl> <dt>Getting started </dt> <ul> <li><a class="external" href="/en/JavaScript/Getting_Started" title="https://developer.mozilla.org/en/JavaScript/Getting_Started">The MDC Guide To JavaScript For Beginners</a> - what is JavaScript and how can it help you?</li> <li><a class="external" href="/en/JavaScript/Guide" title="https://developer.mozilla.org/en/JavaScript/Guide">The MDC JavaScript Reference Guide</a> - a comprehensive, regularly updated guide to JavaScript for all levels of learning. </li> <li><a class=" external" href="http://yuiblog.com/crockford/" title="http://yuiblog.com/crockford/">Crockford on JavaScript</a> - an in-depth video series on the JavaScript language.</li> </ul> <dt>Intermediate</dt> <ul> <li><a href="/en/JavaScript/A_re-introduction_to_JavaScript" title="https://developer.mozilla.org/en/a_re-introduction_to_javascript">A Re-Introduction to JavaScript</a> - a recap on the JavaScript programming language aimed at intermediate-level developers</li> <li><a class="external" href="http://eloquentjavascript.net/contents.html" title="http://eloquentjavascript.net/contents.html">Eloquent JavaScript </a>- a comprehensive guide to intermediate and advanced JavaScript methodologies</li> <li><a class=" external" href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" title="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/">Essential JavaScript Design Patterns</a> - an introduction to essential JavaScript design patterns</li> </ul> <dt>Advanced</dt> <ul> <li><a class="external" href="http://ejohn.org/apps/learn/" title="http://ejohn.org/apps/learn/">Learning advanced JavaScript</a> - John Resig's guide to advanced JavaScript</li> <li><a class="external" href="http://uk.video.yahoo.com/watch/111585/1027823" title="http://uk.video.yahoo.com/watch/111585/1027823">Crockford on Advanced JavaScript</a> - a three part video series on advanced JavaScript concepts</li> </ul> </dl> </ul> </td> <td width="50%"> <h2>Resources</h2> <dl> <dt><a class="external" href="http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur" title="http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur">Opera's Web Standards Curriculum</a></dt> <dd>Covers web design, HTML and HTML5, CSS, JavaScript and accessibility. This is a good starting point for beginners wishing to learn web development fundamentals across a number of areas.</dd> <dt><a class="external" href="http://reference.sitepoint.com/" title="http://reference.sitepoint.com/">SitePoint</a></dt> <dd>A reliable reference site for learning HTML, CSS and JavaScript which also mentions feature support across different browsers and known browser bugs.</dd> <dt><a class="external" href="http://htmldog.com/" title="http://htmldog.com/">HTMLDog</a></dt> <dd>An excellent and comprehensive reference site on HTML and CSS for beginners.</dd> <dt><a class="external" href="http://code.google.com/edu/submissions/html-css-javascript/" title="http://code.google.com/edu/submissions/html-css-javascript/">Google's HTML, CSS, and Javascript from the Ground Up</a></dt> <dd>These easily digestible video tutorials from Google's expert web developers cover the basics of HTML, CSS and JavaScript.</dd> <dt><a class="external" href="http://www.csstutorial.net/" title="http://www.csstutorial.net/">CSSTutorial.net Beginner Tutorials</a></dt> <dd>A broad range of useful text and video tutorials that cover the basics through to intermediate aspects of CSS.</dd> <dt><a class="external" href="http://www.tizag.com/cssT/" title="http://www.tizag.com/cssT/">Tizag CSS Tutorials</a></dt> <dd>An easy-to-follow reference for those wishing to learn CSS through short, concise tutorials.</dd> <dt><a class="external" href="http://jqfundamentals.com/book/book.html" title="http://jqfundamentals.com/book/book.html">jQuery Fundamentals</a></dt> <dd>An open-source reference book featuring detailed introductions to both JavaScript and jQuery Fundamentals for beginners.</dd> <dt><a class="external" href="http://net.tutsplus.com/tutorials/javascript-ajax/javascript-from-null-video-series/" title="http://net.tutsplus.com/tutorials/javascript-ajax/javascript-from-null-video-series/">JavaScript From Null: A Video Series</a></dt> <dd>A video series on JavaScript for absolute beginners looking for more 'visual'-based learning</dd> </dl> </td> </tr> </tbody>
</table>
<p> </p>
<p>{{ languages( { "zh-tw": "zh_tw/Web_開發/Web開發入門" } ) }}</p>
Revert to this revision