Introduction to Web development

  • Revision slug: Web_Development/Introduction_to_Web_development
  • Revision title: Introduction to Web development
  • Revision id: 61203
  • Created:
  • Creator: jswisher
  • Is current revision? No
  • Comment 3 words added, 15 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.

For another (overlapping) set of links to learning resources, see the MDN Learning pages.

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

Documentation topics

HTML

CSS

JavaScript

Beginning

Intermediate

Advanced

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>
<p>For another (overlapping) set of links to learning resources, see the <a href="/en-US/learn" title="https://developer.mozilla.org/en-US/learn">MDN Learning</a> pages.</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> <h3>HTML</h3> <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">HTML elements reference guide</a> — a comprehensive guide to HTML elements with details on how browsers support them</li> </ul> <h3>CSS</h3> <ul> <li><a class="external" href="/en/CSS/Getting_Started" title="https://developer.mozilla.org/en/CSS/Getting_Started">Getting started with CSS</a> — an absolute beginners guide to CSS covers basic concepts and fundamentals</li> <li><a class="external" href="/en/CSS/CSS_Reference" title="https://developer.mozilla.org/en/CSS_Reference">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="http://www.w3.org/MarkUp/Guide/Style" title="http://www.w3.org/MarkUp/Guide/Style">The W3C introduction to styling with CSS</a> &amp;mdsash; a brief guide to styling web pages for beginners.</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> <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> <h3>JavaScript</h3> <h4>Beginning</h4> <ul> <li><a class="external" href="/en/JavaScript/Getting_Started" title="https://developer.mozilla.org/en/JavaScript/Getting_Started">Getting started with JavaScript</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">JavaScript reference guide</a> — a comprehensive, regularly updated guide to JavaScript for all levels of learning from beginner to advanced.</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> <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> </ul> <h4>Intermediate</h4> <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://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> <li><a class="external" href="/en/Introduction_to_Object-Oriented_JavaScript" title="https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript">Introduction to object-oriented JavaScript</a> — learn about the JavaScript object model.</li> <li><a class="external" href="http://dev.opera.com/articles/view/javascript-best-practices/" title="http://dev.opera.com/articles/view/javascript-best-practices/">Christian Heilmann's JavaScript best practices</a> — learn about some of the obvious and (not so) obvious best practices when writing JavaScript.</li> </ul> <h4>Advanced</h4> <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> <li><a class="external" href="http://bonsaiden.github.com/JavaScript-Garden/" title="http://bonsaiden.github.com/JavaScript-Garden/">JavaScript Garden</a> — Documentation of the most quirky parts of JavaScript.</li> </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