Found 243 pages:
| # | Page | Tags and summary |
|---|---|---|
| 1 | Learn web development | Beginner, Index, Landing, Learn, Web |
| The aim of this area of MDN is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfortable". From there you should be able to start making your own way, learning from the rest of MDN and other intermediate to advanced resources that assume a lot of previous knowledge. | ||
| 2 | Accessibility | ARIA, Accessibility, Articles, Beginner, CSS, CodingScripting, HTML, JavaScript, Landing, Learn, Module |
| Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer, but your knowledge needs to go further than just using the technologies — you need to use them responsibly so that you maximize the audience for your websites and don't lock anyone out of using them. To achieve this, you need to adhere to general best practices (which are demonstrated throughout the HTML, CSS, and JavaScript topics), do cross browser testing, and consider accessibility from the start. In this module we'll cover the latter in detail. | ||
| 3 | Accessible multimedia | Accessibility, Article, Audio, Beginner, CodingScripting, HTML, Images, JavaScript, Learn, Multimedia, Video, captions, subtitles, text tracks |
| This chapter has provided a summary of accessibility concerns for multimedia content, along with some practical solutions. | ||
| 4 | Assessment: Accessibility troubleshooting | Accessibility, Assessment, Beginner, CSS, CodingScripting, HTML, JavaScript, Learn, WAI-ARIA |
| In the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix. | ||
| 5 | CSS and JavaScript accessibility best practices | Accessibility, Article, CSS, CodingScripting, Guide, JavaScript, Learn, color, contrast, hiding, unobtrusive |
| We hope this article has given you a good amount of detail and understanding about the accessibility issues surrounding CSS and JavaScript use on web pages. | ||
| 6 | HTML: A good basis for accessibility | AT, Accessibility, Article, Beginner, Buttons, CodingScripting, Forms, HTML, Learn, Links, a11y, assistive technology, keyboard, screenreader, semantics |
| You should now be well-versed in writing accessible HTML for most occasions. Our WAI-ARIA basics article will also fill in some gaps in this knowledge, but this article has taken care of the basics. Next up we'll explore CSS and JavaScript, and how accessibility is affected by their good or bad use. | ||
| 7 | Mobile accessibility | Accessibility, Article, Beginner, CodingScripting, Learn, Mobile, responsive, screenreader, touch |
| In this article we have provided you with some details of common mobile accessibility-specific issues and how to overcome them. We also took you through usage of the most common screenreaders, to aid you in accessibility testing. | ||
| 8 | WAI-ARIA basics | ARIA, Accessibility, Article, Beginner, CodingScripting, Guide, HTML, JavaScript, Learn, WAI-ARIA, semantics |
| This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it. | ||
| 9 | What is accessibility? | AT, Accessibility, Article, Beginner, CSS, CodingScripting, HTML, JavaScript, Learn, Tools, Users, assistive technology, keyboard, screan reader, screenreader |
| This article should have given you a useful high level overview of accessibility, shown you why it's important, and looked at how you can fit it into your workflow. You should now also have a thirst to learn about the implementation details that can make sites accessible, and we'll start on that in the next section, looking at why HTML is a good basis for accessibility. | ||
| 10 | CSS | Beginner, CSS, CodingScripting, Debugging, Landing, NeedsContent, Topic, length, specificity |
| Cascading Stylesheets — or CSS — is the second technology you should start learning after HTML. Whereas HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. So for example, you can use CSS to alter the font, color, size and spacing of your content, split it into multiple columns, or add animations and other decorative features. | ||
| 11 | CSS layout | Beginner, CSS, Floating, Grids, Guide, Landing, Layout, Learn, Module, Multiple column, Positioning, flexbox, float |
| At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox. | ||
| 12 | Flexbox | Article, Beginner, CSS, CSS layouts, CodingScripting, Flexible Boxes, Guide, Layout, Layouts, Learn, flexbox |
| That concludes our tour of the basics of flexbox. We hope you had fun, and will have a good play around with it as you travel forward with your learning. Next we'll have a look at another important aspect of CSS layouts — grid systems. | ||
| 13 | Floats | Article, Beginner, CSS, Clearing, CodingScripting, Floats, Guide, Layout, columns, multi-column |
| At this point, you should already have some powerful tools at your disposal for creating fairly complex web layouts. Excellent! In the next article we'll take it even further by looking at positioning. | ||
| 14 | Grids | Article, Beginner, CSS, CSS Grids, CodingScripting, Grids, Guide, Layout, Learn, Tutorial, grid design, grid framework, grid system |
| Having read this article you should now have an understanding of how grid layouts and grid frameworks work in CSS. You have also had a peek into the future of CSS grids and should now understand that the grid frameworks we use today are essentially a stopgap solution until we have a widely supported native way of achieving this in CSS. | ||
| 15 | Introduction to CSS layout | Article, Beginner, CSS, Floats, Grids, Introduction, Layout, Learn, Positioning, Tables, flexbox, flow |
| This article has provided a brief summary of all the layout technologies you should know about. Read on for more information on each individual technology! | ||
| 16 | Positioning | Article, Beginner, CSS, CodingScripting, Guide, Layout, Positioning, absolute, fixed, relative |
| I'm sure you had fun playing with basic positioning — it is one of the essential tools behind creating complex CSS layouts and UI features. With that in mind, in the next article we'll have even more fun with positioning — there we'll go a step further and start to build up some real world useful things with it. | ||
| 17 | Practical positioning examples | Article, Beginner, CSS, CodingScripting, Guide, Layout, Learn, absolute, fixed, relative |
| So that rounds off our look at positioning — by now, you should have an idea of how the basic mechanics work, as well as understanding how to start applying these to building some interesting UI features. Don't worry if you didn't get this all immediately — positioning is a fairly advanced topic, and you can always work through the articles again to aid your understanding. The next subject we'll turn to is Flexbox. | ||
| 18 | Introduction to CSS | Beginner, CSS, Cascade, CodingScripting, Inheritance, Introduction to CSS, Landing, Module, Selectors, color, properties, rules, units |
| CSS is used to style and lay out web pages — for example, to alter the font, colour, size and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module gets you started on the path to CSS mastery with the basics of how it works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, colour, and other units in CSS, cascade and inheritance, and debugging CSS. | ||
| 19 | Attribute selectors | Article, Attribute, Beginner, CSS, Guide, Learn, Selectors, presence, substring, value |
Attribute selectors are a special kind of selector that will match elements based on their attributes and attribute values. Their generic syntax consists of square brackets ([]) containing an attribute name followed by an optional condition to match against the value of the attribute. Attribute selectors can be divided into two categories depending on the way they match attribute values: Presence and value attribute selectors and Substring value attribute selectors. |
||
| 20 | CSS syntax | Beginner, CSS, CodingScripting, Selectors, Syntax, blocks, comments, declarations, rules, shorthand, whitespace |
| Next up, we dive into CSS syntax in a lot more detail, looking at how properties and their values form into declarations, multiple declarations form into declaration blocks, and declaration blocks and selectors form into complete CSS rules. We round off the article by looking at other CSS syntax features such as comments and whitespace. | ||
| 21 | CSS values and units | Article, Beginner, CSS, CodingScripting, Functions, Guide, color, length, units |
| I hope you enjoyed learning about CSS values and units — don't worry if this doesn't all make complete sense right now; you'll get more and more practice with this fundamental part of CSS syntax as you move forward! | ||
| 22 | Cascade and inheritance | Article, Beginner, CSS, Cascade, CodingScripting, Guide, Learn, importance, source order, specificity |
| In a previous article, we got into the various CSS selectors. At some point in your work, you'll find yourself in the situation where multiple CSS rules will have selectors matching the same element. In such cases, which CSS rule "wins", and ends up being the one that is finally applied to the element? This is controlled by a mechanism called the Cascade; this is also related to inheritance (elements will take some property values from their parents, but not others.) In this article we will define what the cascade is, what specificity is, what importance is, and how properties inherit from different rules. | ||
| 23 | Combinators and multiple selectors | Article, Beginner, CSS, Guide, Learn, Selectors |
| In our final article on selectors we'll explore combinators and multiple selectors — two ways of combining multiple selectors together for further useful selection capabilities. | ||
| 24 | Debugging CSS | Article, CSS, CSS editor, CodingScripting, DOM inspector, Debugging, Guide, Page Inspector, linting, validator |
| Well done for completing the last article of the first CSS module! Now that you've come this far, you can have a go at completing our CSS assessment, and then start exploring some other CSS and HTML modules. | ||
| 25 | Fundamental CSS comprehension | Assessment, Beginner, CSS, CodingScripting, Selectors, Style, Syntax, box model, comments, rules |
| You've covered a lot in this module, so it must feel good to have reached the end! The final step before you move on is to attempt the assessment for the module — this involves a number of related exercises that must be completed in order to create the final design — a business card/gamer card/social media profile. | ||
| 26 | How CSS works | CSS, CodingScripting, DOM, Guide, Link, Syntax, external, internal, line |
| CSS (Cascading Style Sheets) allows you to create great looking web pages, but how does it work under the hood? This article explains what CSS is, how the browser turns HTML into a Document Object Model (DOM), how CSS is applied to parts of the DOM, some very basic syntax examples, and what code is used to actually include our CSS in our web page. | ||
| 27 | Pseudo-classes and pseudo-elements | Article, Beginner, CSS, Guide, Learn, Pseudo, Pseudo-class, Pseudo-element, Selectors |
| In this, the third in our series of articles on selectors, we discuss pseudo-selectors — these don't select actual elements, but rather certain parts of elements, or elements only in certain contexts. They come in two main types — pseudo-classes and pseudo-elements. | ||
| 28 | Selectors | Article, Beginner, CSS, Class, Element, Guide, Learn, Pseudo-class, Pseudo-element, Selectors, combinator, id, universal |
| In CSS, selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine grained precision when selecting elements to style. In the next few articles we'll run through the different types in great detail, seeing how they work. | ||
| 29 | Simple selectors | Article, Beginner, CSS, Class, Element, Guide, Learn, Selectors, Type, id, universal |
In our first selectors article we'll learn about "simple" selectors, so-called because they directly match one or more elements of a document, based on the type of element (or its class or id.) |
||
| 30 | The box model | Article, Beginner, Block, Boxes, CSS, CodingScripting, Content, Guide, Learn, Learning, Model, background clip, border, box, height, inline, margin, overflow, padding, width |
| The CSS box model is the foundation of layout on the Web — each element is represented as a rectangular box, with the box's content, padding, border, and margin built up around one another like the layers of an onion. As a browser renders a web page layout, it works out what styles are applied to the content of each box, how big the surrounding onion layers are, and where the boxes sit in relation to one another. Before understanding how to create CSS layouts, you need to understand the box model — this is what we'll look at in this article. | ||
| 31 | Styling boxes | Beginner, Boxes, CSS, CodingScripting, Landing, Module, Tables, backgrounds, borders, effects |
| Hello and welcome to Styling CSS boxes — in the last module we looked at the content inside your boxes; in this module we'll look at styling the actual box itself, by manipulating background color and images, borders, and other parts of the box. We'll also look at other topics, from making HTML tables look good to applying advanced effects like filters and blend modes. | ||
| 32 | A cool looking box | Assessment, Beginner, CSS, Learn, backgrounds, borders, box, box model, effects |
| In this assessment you'll get some more practice in creating cool-looking boxes, by trying to create an eyecatching box. | ||
| 33 | Advanced box effects | Article, Beginner, Blend modes, Boxes, CSS, CodingScripting, Filters, Styling, box shadows, effects |
| We hope this article has proved to be fun — playing with shiny toys generally is, and it is always interesting to see what kinds of tools are just becoming available in cutting edge browsers. You've reached the end of the Styling boxes articles, so next up you'll test your box syling skills with our assessments. | ||
| 34 | Backgrounds | Article, Beginner, CSS, CodingScripting, Gradients, Guide, Images, Position, attachment, backgrounds, colors |
| This article should have taught you most of what you'll ever need to know about styling element backgrounds. Hopefully you'll have had some fun along the way too! In the next article we'll play with borders, and look at how to style those. | ||
| 35 | Borders | Article, Beginner, CSS, CodingScripting, Guide, Images, Radius, border, borders, radii |
| Now you understand borders, right? Not the ones at the edges of your country, but the ones at the edges of your elements. Borders are useful to understand, and have many different uses. In the article that follows, we'll take a sideways step, and explore best practices for styling tables — this will show a useful application of some of the techniques we've looked at so far in the module. | ||
| 36 | Box model recap | Article, Beginner, Boxes, CSS, CodingScripting, Guide, Layout, box model |
| We looked at the basics of the CSS box model in our Introduction to CSS module. This article will provide a recap, and dive into some further details on the subject. | ||
| 37 | Creating fancy letterheaded paper | Assessment, Background, Beginner, Boxes, CSS, CodingScripting, border, box, letter, letterhead, letterheaded, paper |
| If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment we'll challenge you to create an online template to achieve such a look. | ||
| 38 | Styling tables | Article, Beginner, CSS, CodingScripting, Guide, Styling, Tables |
| With the dizzy exciting heights of styling tables now behind us, we need something else to occupy our time. Never fear — the next chapter provides a look at some advanced box effects, some of which have only landed in browsers very recently (such as blend modes and filters), and some of which are a bit more established (such as box shadows.) | ||
| 39 | Styling text | Beginner, CSS, CodingScripting, Fonts, Landing, Links, Module, Text, font, letter, line, lists, shadow, web fonts |
| With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links. | ||
| 40 | Fundamental text and font styling | Article, Beginner, CSS, Guide, Style, Text, alignment, family, font, shorthand, spacing, weight |
| We hoped you enjoyed playing with text in this article! The next article will give you all you need to know about styling HTML lists. | ||
| 41 | Styling links | Article, Beginner, CSS, Focus, Guide, Learn, Links, Pseudo-class, hover, hyperlinks, menus, tabs |
| We hope this article has provided you with all you'll need to know about links — for now! The final article in our Styling text module details how to use custom fonts on your websites, or web fonts as they are better known. | ||
| 42 | Styling lists | Article, Beginner, CSS, Guide, Styling, Text, bullets, lists |
| Lists are relatively easy to get the hang of styling once you know a few associated basic principles and specific properties. In the next article we'll get on to link styling techniques. | ||
| 43 | Typesetting a community school homepage | Assessment, Beginner, CSS, CodingScripting, Link, Styling text, font, list, web font |
| In this assessment we'll test your understanding of all the text styling techniques we've covered throughout this module by getting you to style the text for a community school's homepage. You might just have some fun along the way. | ||
| 44 | Web fonts | @font-face, Article, Beginner, CSS, CSS Fonts, Fonts, Guide, Learn, font-family, web fonts |
| Now that you have worked through our articles on text styling fundamentals, it is time to test your comprehension with our assessment for the module, Typesetting a community school homepage. | ||
| 45 | Use CSS to solve common problems | Beginner, CSS, Learn |
| The following links point to solutions to common everyday problems you'll need to solve with CSS. | ||
| 46 | CSS FAQ | CSS, Example, FAQ, Guide, Web, questions |
Browsers use the DOCTYPE declaration to choose whether to show the document using a mode that is more compatible with Web standards or with old browser bugs. Using a correct and modern DOCTYPE declaration at the start of your HTML will improve browser standards compliance. |
||
| 47 | create fancy boxes | Beginner, CSS, CodingScripting, Learn |
| CSS boxes are the building blocks of any web page styled with CSS. Making them nice looking is both fun and challenging. It's fun because it's all about turning a design idea into working code; It's challenging because of annoying constraints and crazy freedom in the use of CSS. Let's do some fancy boxes. | ||
| 48 | Coding-Scripting | Beginner, CodingScripting |
| REDIRECT Learn | ||
| 49 | Common questions | CodingScripting, Infrastructure, Learn, Web, WebMechanics |
| This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the HTML or CSS learning articles.) These articles are designed to work on their own. | ||
| 50 | How can we design for all types of users? | Accessibility, Beginner, Design, Mobile, NeedsActiveLearning |
| When you're building a website, one top issue to consider is Universal Design: accommodating all users regardless of disability, technical constraints, culture, location, and so on. | ||
| 51 | How do I set up a basic working environment? | Beginner, CodingScripting, File structure, Guide, NeedsActiveLearning, beginner, web server |
| Especially when working on your first web project, you'll want to test it locally before you show it to the world. You can do this by setting up a local server. We'll also cover how to put a scalable structure in place so that your files stay organized even when your project gets big. | ||
| 52 | How do I start to design my website? | Beginner, Composing, NeedsActiveLearning, needsSchema |
| When starting with a web project, many people focus on the technical side. Of course you must be familiar with the technique of your craft, but what really matters is what you want to accomplish. Yes, it seems obvious, but too many projects fail, not from lack of technical knowhow but from lack of goals and vision. | ||
| 53 | How do I use GitHub Pages? | Beginner, GitHub, Guide, Web, gh-pages, git, publish |
| GitHub is a "social coding" site. It allows you to upload code repositories for storage in the Git version control system. You can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your GitHub code, use it, learn from it, and improve on it. You can do that with other people's code too! This article provides a basic guide to publishing content using Github's gh-pages feature. | ||
| 54 | How do you host your website on Google App Engine? | Beginner, Google App Engine, Google Cloud Platform, Guide, Host, Learn, Web, publish, website |
| Google App Engine is a powerful platform that lets you build and run applications on Google’s infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. Here's a step-by-step guide to hosting your website on Google App Engine. | ||
| 55 | How do you make sure your website works properly? | Beginner, Document, Guide, NeedsActiveLearning, Web, Web Development, WebMechanics, troubleshooting |
| So you've published your website online? Very good! But are you sure it works properly? | ||
| 56 | How do you set up a local testing server? | Beginner, Express, Flask, Learn, Node, PHP, Python, django, server-side, servers |
| Throughout most of the learning area, we tell you to just open your examples directly in a browser — this is done by double clicking the HTML file, or dragging and dropping it into the browser window, or choosing File > Open... and navigating to the HTML file, etc. There are many ways to achieve this. | ||
| 57 | How do you upload files to a web server? | Beginner, NeedsActiveLearning, WebMechanics |
| Now that you have built a simple page, you will want to put it online on some web server. We'll discuss how to do that using FTP. | ||
| 58 | How does the Internet work? | Beginner, Tutorial, WebMechanics |
| The Internet is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. | ||
| 59 | How much does it cost to do something on the web? | Beginner, WebMechanics, cost, hosting, web development tools |
| When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay). | ||
| 60 | What HTML features promote accessibility? | Accessibility, Beginner, HTML, Learn, NeedsContent |
| The following content describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities. | ||
| 61 | What are browser developer tools? | Beginner, Browser, CSS, CodingScripting, Dev Tools, HTML, JavaScript, Learn |
| The devtools live inside your browser in a subwindow that looks roughly like this: | ||
| 62 | What are hyperlinks? | Beginner, Infrastructure, Navigation, NeedsActiveLearning |
| Hyperlinks, usually called simply links, are a foundational concept behind the Web. To explain what links are, we need to step back to the very basics of Web architecture. | ||
| 63 | What do common web layouts contain? | Beginner, CSS, Design, HTML, NeedsActiveLearning |
| There's a reason we talk about web design. You start out with a blank page, and you can take it so many directions. And if you don't have much experience, starting out with a blank page might be a bit scary. We have over 25 years' experience and we'll give you some common rules of thumb to help you design your site. | ||
| 64 | What is a URL? | Beginner, Infrastructure, NeedsActiveLearning, URL |
| With Hypertext and HTTP, URL is one of the key concepts of the Web. It is the mechanism used by browsers to retrieve any published resource on the web. | ||
| 65 | What is a domain name? | Beginner, Domain names, Infrastructure, Intro, NeedsActiveLearning, Web |
| Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet. | ||
| 66 | What is a web server? | Beginner, Infrastructure, needsSchema |
| "Web server" can refer to hardware or software, or both of them working together. | ||
| 67 | What is accessibility? | Accessibility, Beginner, Intro, NeedsActiveLearning, Web |
| Because of physical or technical limitations, maybe your visitors can't experience your website the way you hoped. In this article we give general accessibility principles and explain a few rules. | ||
| 68 | What is the difference between webpage, website, web server, and search engine? | Beginner, NeedsActiveLearning, WebMechanics |
| As with any area of knowledge, the web comes with a lot of jargon. Don't worry, we won't overwhelm you with all of it (we have a glossary if you're curious). However, there are a few basic terms you need to understand at the outset, since you'll hear these expressions all the time as you read on. It's easy to confuse these terms sometimes, since they refer to related but different functionalities. In fact, you'll sometimes see these terms misused in news reports and elsewhere, so getting them mixed up is understandable! | ||
| 69 | What software do I need to build a website? | Beginner, NeedsActiveLearning, WebMechanics |
| You can download for free most of the programs you need for web development. We'll provide a few links in this article. You'll need tools to 1) create and edit webpages, 2) upload files to your web server, and 3) view your website. | ||
| 70 | What text editors are available? | Beginner, Composing, Guide, NeedsActiveLearning, Tools, text editor |
| A website consists mostly of text files, so for a fun, pleasant development experience you should choose your text editor wisely. | ||
| 71 | Drafts | |
| This page links to incomplete drafts, and material we really don't know what to do with yet. | ||
| 72 | Design of Navigation Menus | Beginner, Guide, Navigation, Reference, navigation |
| Designing a menu for an application might seem like a simple task, but the truth is it can be difficult. Any design would require consideration about who the audience is (skills, abilities, knowledge), and the complexity of the application. | ||
| 73 | How email works | Junk, junk |
| Email (i.e. electronic mail) may be the most heavily used feature on the Internet. You can use it to send messages to anyone who is directly or indirectly connected to the Internet. | ||
| 74 | How image maps work | Junk, junk |
| Graphics called image maps demonstrates one of the most common and helpful uses of HTML. Image maps are static images that has been turned to clickable images with various clickable parts. Image maps are created using Common Gateway Interface (CGI), a communications protocol by with the web server can communicate with other applications. | ||
| 75 | How websites work with databases | Junk, junk |
| One of the most useful applications of the Web is its capability to link a website with a database so web surfers can search for information. Not only can the Web serve up data, it can also collect it. For example, many websites ask users to "register" their names, addresses, and other demographic information, which is then captured and stored in a database. | ||
| 76 | Python | CodingScripting, Learn, NeedsContent, Python, new |
| Python is a widely used, general-purpose, interpreted scripting language. It is available on a broad range of platforms, including Windows, Linux, and Mac OS X. Python helps you work quickly and integrate systems effectively, and it encourages programmers to program without boilerplate (prepared) code. | ||
| 77 | Conditionals | CodingScripting, Learn, Python |
| If programs could just be run from bottom-down without possible detours they would achieve very little. Because of this, there are constructs (called conditionals) that can be used to take various paths inside code. Let's take our simple calculator and modify it so that the user can choose which operator to use. | ||
| 78 | Getting to know the interactive interpreter | CodingScripting, Learn, Python |
| Python can be used in basically two ways: interactive and non-interactive. When the interpreter is invoked with no command line options, it enters interactive mode. That means you can enter Python statements directly to a prompt and have them executed immediately. Using this mode allows you to enter short snippets of code to test ideas and experiment with the language. | ||
| 79 | Hello world | CodingScripting, Learn, Python |
| As customary when learning a new language, the first program a programmer writes is called "Hello, world!". It's a very simple program that outputs the text string "Hello, world!" to the console. But, as we'll see, there's a lot of stuff going on even in a program that's so simple. So let's fire up the Python interpreter and type the "Hello, world!" program. | ||
| 80 | Installing Python on your machine | Beginner, CodingScripting, Learn, Python |
| You can download the latest version of python here. Once you complete the download, launch the application from the Finder on your mac. | ||
| 81 | Lists | CodingScripting, Learn, Python |
| When it comes to data manipulation, one often needs some structure to store multiple values. Python is no exception and it actually has several compound data types. The one described in this article is very similar to some other structures in other languages: the list. It can store multiple values from different types (so you could have a list with integers only or a mix with integer, floating numbers, or even lists of lists). A list is written with values, separated by commas and enclosed in square brackets. | ||
| 82 | Loops | CodingScripting, Learn, Python |
| No summary! | ||
| 83 | Quickly Learn Object Oriented Programming | Classes, Inheritance, Iterators, OOP, Object, Objects, Python, Tutorial, object oriented programming, objects |
| This tutorial explains how to get started with object-oriented programming, using code examples and brief, practical explanations. | ||
| 84 | Variables | CodingScripting, Learn, Python |
| Doing computation on the fly is fun and all, but suppose you want to actually store the results of a computation. This is what variables are for. | ||
| 85 | Understanding Cloud architectures | Cloud, NeedsContent |
| Technical review completed. | ||
| 86 | Web security | Guide, Intermediate, NeedsExample, Privacy, Security |
| This competency demonstrates skills around the top of web security, which is a subset of Information security. The articles in this section will: | ||
| 87 | Web servers and Firewall - Maximum Security Against Attack | DMZ, FTP, Firewall, Internet, LAN, Security, web server |
| If you connect web servers to a network, you need to consider the security implications of doing so. Every network that has an Internet connection is at risk of being compromised. There are several steps that you can take to secure your LAN (Local Area Network). The only real solution is to close your LAN to incoming traffic and restrict outgoing traffic. | ||
| 88 | What people need to see your web site | Beginner, Guide, Marketing, Promotion, offline marketing, online advertising, website marketing |
| Building a website is fun and exciting! Unfortunately, the process doesn't stop there. After you have created a website, you need to make people and search engines know that your website exists on the Internet. This article will teach you how to get people to visit your website. Advanced topics like search engine optimization (SEO), microdata, rich snippets, schema, and other techniques that make your site receive a higher ranking in search engines will be excluded from this lesson. | ||
| 89 | Getting started with the Web | Beginner, CSS, Design, Guide, HTML, Index, l10n:priority, publishing, theory |
| It's a lot of work to create a professional website, so if you're new to web development we encourage you to start small. You won't build another Facebook right away, but it's not hard to get your own simple website online, so we'll start there. | ||
| 90 | CSS basics | Beginner, CSS, CodingScripting, Learn, Styling, Web, l10n:priority |
| Like HTML, CSS is not really a programming language. It is not a markup language either — it is a style sheet language. This means that it lets you apply styles selectively to elements in HTML documents. For example, to select all the paragraph elements on an HTML page and turn the text within them red, you'd write this CSS: | ||
| 91 | Dealing with files | Beginner, CodingScripting, Files, Guide, HTML, l10n:priority, theory, website |
| When you are working on a website locally on your own computer, you should keep all the related files in a single folder that mirrors the published website's file structure on the server. This folder can live anywhere you like, but you should put it somewhere where you can easily find it, maybe on your Desktop, in your Home folder, or at the root of your hard drive. | ||
| 92 | HTML basics | Beginner, CodingScripting, HTML, Learn, Web, l10n:priority |
| HTML is not a programming language; it is a markup language, and is used to tell your browser how to display the webpages you visit. It can be as complicated or as simple as the web designer wishes it to be. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or an image a hyperlink to somewhere else, can italicize words, and can make font bigger or smaller, and so on. For example, take the following line of content: | ||
| 93 | How the Web works | Beginner, Client, DNS, HTTP, IP, Infrastructure, Learn, Server, TCP, l10n:priority |
| This theory is not essential to writing web code in the short term, but before long you'll really start to benefit from understanding what's happening in the background. | ||
| 94 | Installing basic software | Beginner, Browser, Learn, Setup, Tools, WebMechanics, l10n:priority, text editor |
| That looks like a scary list, but fortunately you can get started in web development without knowing anything about most of these. In this article we'll just set you up with a bare minimum — a text editor and some modern web browsers. | ||
| 95 | JavaScript basics | Beginner, CodingScripting, JavaScript, Learn, Web, l10n:priority |
| JavaScript ("JS" for short) is a full-fledged dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity on websites. It was invented by Brendan Eich, co-founder of the Mozilla project, the Mozilla Foundation, and the Mozilla Corporation. | ||
| 96 | Publishing your website | Beginner, CodingScripting, FTP, GitHub, Google App Engine, Learn, Web, l10n:priority, publishing, web server |
| Publishing a website isn't a simple topic, mainly because there are so many different ways to do it. In this article we don't aim to document all possible methods. Rather, we'll discuss the pros and cons of three broad strategies from a beginner's point of view, and then walk you through one method that will work for now. | ||
| 97 | What will your website look like? | Assets, Beginner, Composing, Content, Design, Fonts, Learn, Plan, l10n:priority |
| Before you do anything, you need some ideas. What should your website actually do? A website can do basically anything, but for your first try you should keep things simple. We'll start by creating a simple webpage with a heading, an image, and a few paragraphs. | ||
| 98 | HTML | Beginner, Guide, HTML, Intro, Learn, Topic |
| To build websites, you should know about HTML — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define. | ||
| 99 | Forms and buttons | Article, Assessment, Beginner, Controls, Forms, HTML, Landing, Learn, Validation, semantics |
| Forms and buttons are a very important part of the Web — these allow your site visitors to input data and send it to you (e.g. registration, login and feedback forms), and you to implement controls for controlling complex functionality (for example submitting a form to the server, or pausing playback of a video.) This module gets you started. | ||
| 100 | Form and button basics | Article, Beginner, Buttons, Controls, Forms, HTML, Learn, buttons |
| In this article we'll take you through the basics of HTML forms, including their purpose, basic features, and common form controls. We'll also have a look at HTML buttons and how they can be used. | ||
| 101 | HTML Cheatsheet | Beginner, Guide, HTML |
| While using HTML it can be very handy to have an easy way to remember how to use HTML tags properly and how to apply them. MDN provides you with an extended HTML documentation as well as a deep instructional HTML how-to. However, in many cases we just need some quick hints as we go. That's the whole purpose of the cheatsheet, to give you some quick accurate ready to use code snippets for common usages. | ||
| 102 | HTML forms | Beginner, Featured, Forms, Guide, HTML, Landing, Learn, Web |
| This module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets. | ||
| 103 | Advanced styling for HTML forms | Advanced, CSS, Example, Forms, Guide, HTML, Web |
| In this article, we will see how to use CSS with HTML forms to style some form widgets that are difficult to customize. | ||
| 104 | Form data validation | Example, Forms, Guide, HTML, Intermediate, JavaScript, Web |
| Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know. | ||
| 105 | HTML forms in legacy browsers | Example, Forms, Guide, HTML, Intermediate, Web |
| All web developers learn very quickly (and sometimes painfully) that the Web is a very rough place for them. Our worst curse is legacy browsers. Okay, let's admit it, when we said "legacy browser" we all have in mind old versions of Internet Explorer ... but it's far from the only one. A one-year-old Firefox such as the ESR version is a legacy browser too. And in the mobile world? When neither the browser nor the OS can be updated? Yes, there are many older Android phones or iPhones that have stock browsers that are not up to date. These are also legacy browsers. | ||
| 106 | HTML5 form updates | Beginner, Forms, Guide, HTML, HTML5, Intermediate, Intro, NeedsBeginnerUpdate, NeedsUpdate, Overview, Web |
| This article summarizes changes to HTML forms introduced in HTML5. For a detailed guide to using forms, see our extensive HTML forms guide. | ||
| 107 | How to build custom form widgets | Advanced, Example, Forms, Guide, HTML, Web |
There are many cases where available HTML form widgets are just not enough. If you want to perform advanced styling on some widgets such as the <select> element or if you want to provide custom behaviors, you have no choice but to build your own widgets. |
||
| 108 | Example 1 | Forms, Guide, HTML |
| This is the first example of code that explains how to build a custom form widget. | ||
| 109 | Example 2 | Forms, HTML |
| This is the second example that explain how to build custom form widgets. | ||
| 110 | Example 3 | Forms, HTML |
| This is the third example that explain how to build custom form widgets. | ||
| 111 | Example 4 | |
| This is the fourth example that explain how to build custom form widgets. | ||
| 112 | Example 5 | Forms, HTML |
| This is the last example that explain how to build custom form widgets. | ||
| 113 | How to structure an HTML form | Beginner, CodingScripting, Example, Forms, Guide, HTML, Learn, Structure, Web |
| You now have all the knowledge you'll need to properly structure your HTML forms; the next article will dig into implementing all the different types of form widget you'll want to use to collect information from your users. | ||
| 114 | Example | Beginner, CSS, Example, Guide, HTML, Intro, Reference |
| This the example for a basic payment form for the article How to structure an HTML form. | ||
| 115 | Sending form data | Beginner, CodingScripting, Files, Forms, Guide, HTML, HTTP, Headers, Security, Web |
| This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data. | ||
| 116 | Sending forms through JavaScript | Advanced, Example, Forms, Guide, HTML, JavaScript, Web |
| HTML forms can send an HTTP request declaratively. But forms can also prepare an HTTP request to send via JavaScript. This article explores ways to do that. | ||
| 117 | Styling HTML forms | CSS, Example, Forms, Guide, HTML, Intermediate, Web |
| In this article, the user will learn how to use CSS with HTML forms to make them (hopefully) more beautiful. Surprisingly, this can be a little bit tricky. | ||
| 118 | The native form widgets | Beginner, Controls, Example, Forms, Guide, HTML, Intermediate, Web, Widgets |
| We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data. This guide is somewhat exhaustive, covering all of the available native form widgets. | ||
| 119 | Your first HTML form | Beginner, CodingScripting, Example, Forms, Guide, HTML, Learn, Web |
| Congratulations, you've built your first HTML form. It looks like this live: | ||
| 120 | Example | |
| This is the example code for the article My first HTML form. | ||
| 121 | HTML tables | Article, Beginner, CodingScripting, Guide, HTML, Landing, Module, Tables |
| A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little CSS for styling, HTML makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes you through all you need to know about structuring tabular data using HTML. | ||
| 122 | Assessment: Structuring planet data | Assessment, Beginner, CodingScripting, HTML, Learn, Tables |
| In our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an HTML table. | ||
| 123 | HTML table advanced features and accessibility | Accessibility, Advanced, Article, Beginner, CodingScripting, HTML, Headers, Learn, caption, nesting, scope, sumary, table, tbody, tfoot, thead |
| There are a few other things you could learn about table HTML, but we have really given all you need to know at this moment in time. At this point, you might want to go and learn about styling HTML tables — see Styling Tables. | ||
| 124 | HTML table basics | Article, Beginner, CodingScripting, HTML, Learn, Tables, basics, cell, col, colgroup, colspan, header, row, rowspan |
| That just about wraps up the basics of HTML Tables. In the next article we will look at some slightly more advanced table features, and start to think how accessible they are for visually impaired people. | ||
| 125 | Introduction to HTML | CodingScripting, HTML, Introduction to HTML, Landing, Links, Structure, Text, head, semantics |
| At its heart, HTML is a fairly simple language made up of elements, which can be applied to pieces of text to give them different meaning in a document (is it a paragraph? is it a bulleted list? is it part of a table?), structure a document into logical sections (does it have a header? three columns of content? a navigation menu?) and embed content such as images and videos into a page. This module will introduce the first two of these, and introduce fundamental concepts and syntax you need to know to understand HTML. | ||
| 126 | Advanced text formatting | Beginner, CodingScripting, Guide, HTML, Learn, Text, abbreviation, description list, quote, semantic |
| That marks the end of our study of HTML text semantics. Bear in mind that what you have seen during this course is not an exhaustive list of HTML text elements — we wanted to try to cover the essentials, and some of the more common ones you will see in the wild, or at least might find interesting. To find way more HTML elements, you can take a look at our HTML element reference (the Inline text semantics section would be a great place to start.) In the next article we will look at the HTML elements you'd use to structure the different parts of an HTML document. | ||
| 127 | Creating hyperlinks | Beginner, CodingScripting, Guide, HTML, Learn, Links, Title, absolute, hyperlinks, relative, urls |
| That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up for HTML, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — Advanced text formatting is your next stop. | ||
| 128 | Debugging HTML | Beginner, CodingScripting, Debugging, Error, Guide, HTML, Validation, validator |
| So there we have it, an introduction to debugging your HTML, which should give you some useful skills to count on when you start to debug CSS, JavaScript, and other types of code later on in your career. This also marks the end of the Introduction to HTML module learning articles — now you can go on to testing yourself with our assessments: the first one is linked below. | ||
| 129 | Document and website structure | Beginner, CodingScripting, Guide, HTML, Layout, Page, Site, blocks, semantics |
| At this point you should have a better idea about how to structure a web page/site. In the last article of this module, we'll study how to debug HTML. | ||
| 130 | Getting started with HTML | Attribute, Beginner, CodingScripting, Comment, Element, Guide, HTML, entity reference, whitespace |
| You've reached the end of the article — we hope you enjoyed your tour of the very basics of HTML! At this point you should understand what the language looks like, how it works at a basic level, and be able to write a few elements and attributes. This is a perfect place to be right now, as in subsequent articles in the module we will go into some of the things you have already looked at in a lot more detail, and introduce some new features of the language. Stay tuned! | ||
| 131 | HTML text fundamentals | Beginner, CodingScripting, Guide, HTML, Introduction to HTML, Learn, Text, headings, paragraphs, semantics |
| That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to create hyperlinks, possibly the most important element on the Web. | ||
| 132 | Marking up a letter | Assessment, Beginner, CodingScripting, HTML, Links, Text, head |
We all learn to write a letter sooner or later; it is also a useful example to test out our text formatting skills! In this assessment you'll be given a letter to mark up to test basic and advanced HTML text formatting skills, including hyperlinks, plus we'll test your familiarity with some HTML <head> contents. |
||
| 133 | Structuring a page of content | Assessment, Beginner, CodingScripting, Design, HTML, Layout, Learn, Structure, semantics |
| Structuring a page of content ready for laying it out using CSS is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of. | ||
| 134 | What’s in the head? Metadata in HTML | Beginner, CodingScripting, Guide, HTML, Meta, favicon, head, lang, metadata |
| That marks the end of our quickfire tour of the HTML head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things you'll find in there for now! In the next article we'll be looking at HTML text fundamentals. | ||
| 135 | Multimedia and embedding | Assessment, Audio, Beginner, CodingScripting, Flash, Guide, HTML, Images, Landing, Learn, SVG, Video, iframes, imagemaps, responsive |
| We've looked at a lot of text so far in this course, but the web would be really boring only using text. Let's start looking at how to make the Web come alive, with more interesting content! This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages. | ||
| 136 | Adding vector graphics to the Web | Beginner, Graphics, Guide, HTML, Images, Learn, Raster, SVG, Vector, iframe, img |
| This article has provided you with a quick tour of what vector graphics and SVG are, why they are useful to know about, and how to include SVG inside your webpages. It was never intended to be a full guide to learning SVG, just a pointer so you know what SVG is if you meet it in your travels around the Web. So don't worry if you don't feel like you are an SVG expert yet. We've included some links below that might help you if you wish to go and find out more about how it works. | ||
| 137 | From object to iframe — other embedding technologies | Article, Beginner, CodingScripting, Embedding, Flash, Guide, HTML, Learn, Multimedia and embedding, Object, embed, iframe |
| The topic of embedding other content in web documents can quickly become very complex, so in this article we've tried to introduce it in a simple, familiar way that will immediately seem relevant, while still hinting at some of the more advanced features of the involved technologies. To start with, you are unlikely to use embedding for much beyond including third party content like maps and videos on your pages. As you become more experienced however, you are likely to start finding more uses for them. | ||
| 138 | Images in HTML | Article, Beginner, Guide, HTML, Image, alt text, captions, figcaption, figure, img |
In the beginning, the Web was just text, and it was really quite boring. Fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added. There are other types of multimedia to consider, but it is logical to start with the humble <img> element, used to embed a simple image in a webpage. In this article we'll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to CSS background images. |
||
| 139 | Mozilla splash page | Assessment, Beginner, CodingScripting, Embedding, HTML, Images, Multimedia, Video, iframe, picture, responsive, sizes, srcset |
| In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla! | ||
| 140 | Responsive images | Article, Beginner, CodingScripting, Design, Graphics, Guide, HTML, Image, Intermediate, img, picture, sizes, srcset |
| That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here: | ||
| 141 | Video and audio content | Article, Audio, Beginner, Guide, HTML, Video, captions, subtitles, track |
And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like <iframe> and <object>. |
||
| 142 | Use HTML to solve common problems | CodingScripting, HTML |
| The following links point to solutions to common everyday problems you'll need to solve with HTML. | ||
| 143 | Add a hit map on top of an image | Graphics, Guide, HTML, Intermediate, Navigation |
When you nest an image inside <a>, the entire image links to one webpage. An image map, on the other hand, contains several active regions (called "hotspots") that each link to a different resource. |
||
| 144 | Define terms with HTML | Beginner, Guide, HTML, Learn, beginner, guide |
| When you need a term defined, you probably go straight to a dictionary or glossary. Dictionaries and glossaries formally associate keywords with one or more descriptions, as in this case: | ||
| 145 | Tips for authoring fast-loading HTML pages | Advanced, Guide, HTML, NeedsUpdate, Performance, Web |
| These tips are based upon common knowledge and experimentation. | ||
| 146 | Use JavaScript within a webpage | Beginner, HTML, JavaScript, OpenPractices |
| JavaScript is a programming language mostly used client-side to make webpages interactive. You can create amazing webpages without JavaScript, but JavaScript opens up a whole new level of possibilities. | ||
| 147 | Using data attributes | Custom Data Attributes, Example, Guide, HTML, HTML5, Web |
HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or Node.setUserData(). |
||
| 148 | How to contribute to the Learning Area on MDN | Beginner, Contribute, Documentation, Guide, Learn, MDN Meta, l10n:priority |
| On this page, you'll find everything you need to start helping improve MDN's learning content. There are many things you can do, depending on how much time you have and whether you are a beginner, a web developer, or a teacher. | ||
| 149 | Index | Index, Learn, MDN Meta |
| Found 243 pages: | ||
| 150 | JavaScript | Beginner, CodingScripting, JavaScript, JavaScripting beginner, Landing, Module, Topic, l10n:priority |
| JavaScript is a programming language that allows you to implement complex things on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, or interactive maps, or animated 2D/3D graphics, or scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. | ||
| 151 | Client-side web APIs | API, Articles, Beginner, CodingScripting, DOM, Graphics, JavaScript, Landing, Learn, Media, Module, WebAPI, data |
| When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. | ||
| 152 | Drawing graphics | API, Article, Beginner, Canvas, CodingScripting, Graphics, JavaScript, Learn, WebGL |
| At this point, you should have a useful idea of the basics of graphics programming using Canvas and WebGL and what you can do with these APIs, as well as a good idea of where to go for further information. Have fun! | ||
| 153 | Fetching data from the server | API, Article, Beginner, CodingScripting, Fetch, JavaScript, Learn, XHR, data |
| That rounds off our article on fetching data from the server. By this point you should have an idea of how to start working with both XHR and Fetch. | ||
| 154 | Introduction to web APIs | 3rd party, API, Article, Beginner, Browser, CodingScripting, Learn, Object, WebAPI, client-side |
| At this point you should have a good idea of what APIs are, how they work, and what you can do with them in your JavaScript code. You are probably excited to start actually doing some fun things with specific APIs, so let's go! Next up, we'll look at manipulating documents with the Document Object Model (DOM). | ||
| 155 | Manipulating documents | API, Article, Beginner, CodingScripting, DOM, Document, Document Object Model, JavaScript, Learn, Navigator, WebAPI, Window |
| We have reached the end of our study of document and DOM manipulation. At this point you should understand what the important parts of a web browser are with respect to controlling documents and other aspects of the user's web experience. Most importantly, you should understand what the Document Object Model is, and how to manipulate it to create useful functionality. | ||
| 156 | Third party APIs | 3rd party, API, Beginner, CodingScripting, Google Maps, Learn, NYTimes, Third party, youtube |
| This article has given you a useful introduction to using third party APIs to add functionality to your web sites. | ||
| 157 | Video and audio APIs | API, Article, Audio, Beginner, CodingScripting, Guide, JavaScript, Learn, Video |
I think we've taught you enough in this article. The HTMLMediaElement API makes a wealth of functionality available for creating simple video and audio players, and that's only the tip of the iceberg. See the "See also" section below for links to more complex and interesting functionality. |
||
| 158 | Introducing JavaScript objects | Article, Assessment, Beginner, CodingScripting, Guide, JavaScript, Learn, Objects, Tutorial |
| In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages, and act as handy data containers. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, then look at how to create your own objects. | ||
| 159 | Adding features to our bouncing balls demo | Assessment, Beginner, CodingScripting, JavaScript, Learn, OOJS, Object-Oriented, Objects, l10n:priority |
| In this assessment, you are expected to use the bouncing balls demo from the previous article as a starting point, and add some new and interesting features to it. | ||
| 160 | Inheritance in JavaScript | Article, Beginner, CodingScripting, Inheritance, JavaScript, Learn, OOJS, OOP, Object, Prototype, l10n:priority |
| This article has covered the remainder of the core OOJS theory and syntax that we think you should know now. At this point you should understand JavaScript object and OOP basics, prototypes and prototypal inheritance, how to create classes (constructors) and object instances, add features to classes, and create subclasses that inherit from other classes. | ||
| 161 | JavaScript object basics | API, Article, Beginner, CodingScripting, JavaScript, Learn, Object, Syntax, bracket notation, dot notation, instance, l10n:priority, object literal, theory, this |
Congratulations, you've reached the end of our first JS objects article — you should now have a good idea of how to work with objects in JavaScript — including creating your own simple objects. You should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep track of all the properties and methods in our person object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names. Objects let us keep the information safely locked away in their own package, out of harm's way. |
||
| 162 | Object building practice | Article, Beginner, Canvas, CodingScripting, Guide, JavaScript, Learn, Objects, Tutorial, l10n:priority |
| We hope you had fun writing your own real world random bouncing balls example, using various object and object-oriented techniques from throughout the module! This should have given you some useful practice in using objects, and good real world context. | ||
| 163 | Object prototypes | Article, Beginner, CodingScripting, Constructor, JavaScript, Learn, OOJS, OOP, Object, Prototype, create(), l10n:priority |
| This article has covered JavaScript object prototypes, including how prototype object chains allow objects to inherit features from one another, the prototype property and how it can be used to add methods to constructors, and other related topics. | ||
| 164 | Object-oriented JavaScript for beginners | Article, Beginner, CodingScripting, Constructor, Create, JavaScript, Learn, OOJS, OOP, Object, Object-Oriented, instance, l10n:priority |
| This article has provided a simplified view of object-oriented theory — this isn't the whole story, but it gives you an idea of what we are dealing with here. In addition, we have started to look at how JavaScript relates to and how it differs from "classic OOP", how to implement classes in JavaScript using constructor functions, and different ways of generating object instances. | ||
| 165 | Working with JSON data | Article, Beginner, CodingScripting, Guide, JSON, JavaScript, Learn, Objects, Tutorial, l10n:priority |
| In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript. | ||
| 166 | JavaScript building blocks | Article, Assessment, Beginner, CodingScripting, Conditionals, Functions, Guide, JavaScript, Landing, Loops, Module, events, l10n:priority |
| In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly. | ||
| 167 | Build your own function | Article, Beginner, CodingScripting, Functions, Guide, JavaScript, Learn, Tutorial, build, invoke, l10n:priority, parameters |
| With most of the essential theory dealt with in the previous article, this article provides a practical experience — here you'll get some practice with building up your own custom function. Along the way, we'll also explain some further useful details of dealing with functions. | ||
| 168 | Function return values | Article, Beginner, CodingScripting, Functions, Guide, JavaScript, Learn, Return, Return values, l10n:priority |
| There's one last essential concept for us to discuss in this course, to close our look at functions — return values. Some functions don't return a significant value after completion, but others do, and it's important to understand what their values are, how to make use of them in your code, and how to make your own custom functions return useful values. We'll cover all of these below. | ||
| 169 | Functions — reusable blocks of code | API, Article, Beginner, Browser, CodingScripting, Custom, Functions, Guide, JavaScript, Learn, Method, anonymous, invoke, l10n:priority, parameters |
| Another essential concept in coding is functions, which allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times. In this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define them, scope, and parameters. | ||
| 170 | Image gallery | Assessment, Beginner, CodingScripting, Conditionals, Event Handler, JavaScript, Learn, Loops, events, l10n:priority |
| Now that we've looked at the fundamental building blocks of JavaScript, we'll test your knowledge of loops, functions, conditionals and events by getting you to build a fairly common item you'll see on a lot of websites — a JavaScript-powered image gallery. | ||
| 171 | Introduction to events | Article, Beginner, CodingScripting, Event Handler, Guide, JavaScript, Learn, events, l10n:priority |
| Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example if the user clicks a button on a webpage, you might want to respond to that action by displaying an information box. In this article we will discuss some important concepts surrounding events, and look at how they work in browsers. This won't be an exhaustive study; just what you need to know at this stage. | ||
| 172 | Looping code | Article, Beginner, CodingScripting, DO, Guide, JavaScript, Learn, Loop, break, continue, for, l10n:priority, while |
| Programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete. Here we'll look at the loop structures available in JavaScript that handle such needs. | ||
| 173 | Making decisions in your code — conditionals | Article, Beginner, CodingScripting, Conditionals, JavaScript, Learn, Switch, conditions, else, if, l10n:priority, ternary |
| In any programming language, code needs to make decisions and carry out actions accordingly depending on different inputs. For example, in a game, if the player's number of lives is 0, then it's game over. In a weather app, if it is being looked at in the morning, show a sunrise graphic; show stars and a moon if it is nighttime. In this article we'll explore how so-called conditional statements work in JavaScript. | ||
| 174 | JavaScript first steps | Arrays, Article, Assessment, Beginner, CodingScripting, Guide, JavaScript, Landing, Module, Numbers, Operators, Variables, l10n:priority, maths, strings |
| In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key building blocks in detail, such as variables, strings, numbers and arrays. | ||
| 175 | A first splash into JavaScript | Article, Beginner, CodingScripting, Conditionals, Functions, JavaScript, Learn, Objects, Operators, Variables, events, l10n:priority |
| Now you've learned something about the theory of JavaScript, and what you can do with it, we are going to give you a crash course in the basic features of JavaScript via a completely practical tutorial. Here you'll build up a simple "Guess the number" game, step by step. | ||
| 176 | Arrays | Arrays, Article, Beginner, CodingScripting, JavaScript, Join, Learn, Pop, Push, l10n:priority, shift, split, unshift |
| In the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides. | ||
| 177 | Basic math in JavaScript — numbers and operators | Article, Beginner, CodingScripting, Guide, JavaScript, Learn, Math, Operators, augmented, increment, l10n:priority, maths, modulo |
| In this article we have covered the fundamental information you need to know about numbers in JavaScript, for now. You'll see numbers used again and again, all the way through your JavaScript learning, so it's a good idea to get this out of the way now. If you are one of those people that doesn't enjoy math, you can take comfort in the fact that this chapter was pretty short. | ||
| 178 | Handling text — strings in JavaScript | Article, Beginner, CodingScripting, Guide, JavaScript, Join, Quotes, concatenation, l10n:priority, strings |
| Next we'll turn our attention to strings — this is what pieces of text are called in programming. In this article we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in strings, and joining strings together. | ||
| 179 | Silly story generator | Arrays, Assessment, Beginner, CodingScripting, JavaScript, Learn, Numbers, Operators, Variables, l10n:priority, strings |
| In this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories. Have fun! | ||
| 180 | Storing the information you need — Variables | Arrays, Booleans, JavaScript, Numbers, Objects, Updating, Variables, declaring, initializing, l10n:priority, loose typing, strings |
| By now you should know a reasonable amount about JavaScript variables and how to create them. In the next article we'll focus on numbers in more detail, looking at how to do basic math in JavaScript. | ||
| 181 | Useful string methods | Article, Beginner, CodingScripting, JavaScript, Learn, case, indexof, l10n:priority, length, lower, replace, split, upper |
| Now we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more. | ||
| 182 | What is JavaScript? | 3rd party, API, Article, Beginner, Browser, CodingScripting, Core, JavaScript, Learn, Script, comments, external, inline, l10n:priority, what |
| So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript, and what kind of things you can do with it. Along the way you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things. | ||
| 183 | What went wrong? Troubleshooting JavaScript | Article, Beginner, CodingScripting, Debugging, Developer Tools, Error, JavaScript, Learn, Tutorial, console.log, l10n:priority |
| So there we have it, the basics of figuring out errors in simple JavaScript programs. It won't always be that simple to work out what's wrong in your code, but at least this will save you a few hours of sleep and allow you to progress a bit faster when things don't turn out right earlier on in your learning journey. | ||
| 184 | Use JavaScript to solve common problems | Beginner, JavaScript, Learn |
| The following links point to solutions to common everyday problems you'll need to solve with JavaScript. | ||
| 185 | Server-side website programming | Beginner, CodingScripting, Intro, Landing, Learn, Server, Server-side programming, Topic |
| The Dynamic Websites – Server-side programming topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a generic introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications. | ||
| 186 | Django Web Framework (Python) | Beginner, CodingScripting, Intro, Learn, Python, Server-side programming, django |
| Django is an extremely popular and fully featured server-side web framework, written in Python. The module shows you why Django is one of the most popular web server frameworks, how to set up a development environment, and how to get started with using it to create your own web applications. | ||
| 187 | Assessment: DIY Django mini blog | Assessment, Beginner, CodingScripting, Learn, Server-side programming, blog, django, server-side |
| In this assessment you'll use the Django knowledge you've picked up in the Django Web Framework (Python) module to create a very basic blog. | ||
| 188 | Django Tutorial Part 10: Testing a Django web application | Beginner, CodingScripting, Django Testing, Testing, Tutorial, django, server-side, tests, unit tests |
| Writing test code is neither fun nor glamorous, and is consequently often left to last (or not at all) when creating a website. It is however an essential part of making sure that your code is safe to release after making changes, and cost-effective to maintain. | ||
| 189 | Django Tutorial Part 11: Deploying Django to production | Beginner, CodingScripting, Deployment, Django deployment, django, web server |
| That's the end of this tutorial on setting up Django apps in production, and also the series of tutorials on working with Django. We hope you've found them useful. You can check out a fully worked-through version of the source code on Github here. The next step is to read our last few articles, and then complete the assessment task. |
||
| 190 | Django Tutorial Part 2: Creating a skeleton website | Article, Beginner, CodingScripting, Guide, Intro, Learn, Tutorial, django, server-side |
| You have now created a complete skeleton website project, which you can go on to populate with urls, models, views, and templates. | ||
| 191 | Django Tutorial Part 3: Using models | Article, Beginner, CodingScripting, Learn, Model, Tutorial, data, django, server-side |
| In this article we've learned how models are defined, and then used this information to design and implement appropriate models for the LocalLibrary website. | ||
| 192 | Django Tutorial Part 4: Django admin site | Article, Beginner, CodingScripting, Learn, Python, Tutorial, django, django_admin, server-side |
| That's it! You've now learned how to set up the administration site in both its simplest and improved form, how to create a superuser, and how to navigate the admin site and view, delete, and update records. Along the way you've created a bunch of Books, BookInstances, Genres and Authors that we'll be able to list and display once we create our own view and templates. | ||
| 193 | Django Tutorial Part 5: Creating our home page | Article, Beginner, CodingScripting, Learn, Tutorial, django, django templates, django views, server-side |
| We've now created the home page for our site — an HTML page that displays some counts of records from the database and has links to our other still-to-be-created pages. Along the way we've learned a lot of fundamental information about url mappers, views, querying the database using our models, how to pass information to a template from your view, and how to create and extend templates. | ||
| 194 | Django Tutorial Part 6: Generic list and detail views | Beginner, Learn, Tutorial, django, django templates, django views |
| Congratulations, our basic library functionality is now complete! | ||
| 195 | Django Tutorial Part 7: Sessions framework | Article, Beginner, CodingScripting, Learn, Python, Server, Tutorial, django, django sessions, server-side, sessions |
| You now know how easy it is to use sessions to improve your interaction with anonymous users. | ||
| 196 | Django Tutorial Part 8: User authentication and permissions | Article, Authentication, Beginner, Forms, Learn, Permissions, Python, Server, Tutorial, django, django authentication, server-side, sessions |
| Excellent work — you've now created a website that library members can login into and view their own content, and that librarians (with the correct permission) can use to view all loaned books and their borrowers. At the moment we're still just viewing content, but the same principles and techniques are used when you want to start modifying and adding data. | ||
| 197 | Django Tutorial Part 9: Working with forms | Beginner, CodingScripting, Django Forms, Forms, HTML forms, Learn, Tutorial, django, server side |
| Creating and handling forms can be a complicated process! Django makes it much easier by providing programmatic mechanisms to declare, render and validate forms. Furthermore, Django provides generic form editing views that can do almost all the work to define pages that can create, edit, and delete records associated with a single model instance. | ||
| 198 | Django Tutorial: The Local Library website | Article, Beginner, CodingScripting, Guide, Learn, Tutorial, django, server-side |
| Now that you know a bit more about the LocalLIbrary website and what you're going to learn, it's time to start creating a skeleton project to contain our example. | ||
| 199 | Django introduction | Beginner, CodingScripting, Intro, Learn, Python, Server-side programming, django |
| Congratulations, you've completed the first step in your Django journey! You should now understand Django's main benefits, a little about its history, and roughly what each of the main parts of a Django app might look like. You should have also learned a few things about the Python programming language, including the syntax for lists, functions, and classes. | ||
| 200 | Django web application security | Article, Beginner, CodingScripting, Learn, Python, Security, Server-side programming, Web security, django, server-side |
| Django has effective protections against a number of common threats, including XSS and CSRF attacks. In this article we've demonstrated how those particular threats are handled by Django in our LocalLibrary website. We've also provided a brief overview of some of the other protections. | ||
| 201 | Setting up a Django development environment | Beginner, CodingScripting, Development environment, Installing, Intro, Learn, Python, django |
| You now have a Django development environment up and running on your computer. | ||
| 202 | Express Web Framework (Node.js/JavaScript) | Beginner, CodingScripting, Express, Express.js, Intro, JavaScript, Learn, Node, Server-side programming, node.js |
| Express is a popular unopinionated web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks. | ||
| 203 | Express Tutorial Part 2: Creating a skeleton website | Beginner, CodingScripting, Development environment, Express, Intro, Learn, Node, npm, server-side |
| You have now created a skeleton website project for the Local Library and verified that it runs using node. Most important, you also understand how the project is structured, so you have a good idea where we need to make changes to add routes and views for our local library. | ||
| 204 | Express Tutorial Part 3: Using a Database (with Mongoose) | Beginner, CodingScripting, Database, Express, Learn, Node, ODM, nodejs, orm, server-side |
In this article we've learned a bit about databases and ORMs on Node/Express, and a lot about how Mongoose schema and models are defined. We then used this information to design and implement Book, BookInstance, Author and Genre models for the LocalLibrary website. |
||
| 205 | Express Tutorial Part 4: Routes and controllers | Beginner, CodingScripting, Express, Express routes, Learn, Routes, nodejs, server-side |
| We've now created all the routes for our site, along with dummy controller functions that we can populate with a full implementation in later articles. Along the way we've learned a lot of fundamental information about Express routes, and some approaches for structuring our routes and controllers. | ||
| 206 | Express Tutorial Part 5: Displaying library data | Beginner, Controller, Express, Learn, Template, View, nodejs, pug |
| We've now created all the "read-only" pages for our site: a home page that displays counts of instances of each of our models, and list and detail pages for our books, book instances, authors, and genres. Along the way we've gained a lot of fundamental knowledge about controllers, managing flow control when using asynchronous operations, creating views using Pug, querying the database using our models, how to pass information to a template from your view, and how to create and extend templates. Those who completed the challenge will also have learned a little about date handling using moment. | ||
| 207 | Express Tutorial Part 6: Working with forms | Beginner, CodingScripting, Express, Forms, HTML forms, Learn, Node, server-side |
| Express, node, and third party packages on NPM provide everything you need to add forms to your website. In this article you've learned how to create forms using Pug, validate and sanitize input using express-validator, and add, delete, and modify records in the database. | ||
| 208 | Express Tutorial Part 7: Deploying to production | Beginner, CodingScripting, Deployment, Express, Learn, Node, heroku, server-side |
| That's the end of this tutorial on setting up Express apps in production, and also the series of tutorials on working with Express. We hope you've found them useful. You can check out a fully worked-through version of the source code on Github here. | ||
| 209 | Express Tutorial: The Local Library website | Beginner, CodingScripting, Express, Intro, Learn, Node, Tutorial, nodejs, server-side |
| Now that you know a bit more about the LocalLIbrary website and what you're going to learn, it's time to start creating a skeleton project to contain our example. | ||
| 210 | Express/Node introduction | Beginner, CodingScripting, Express, Learn, Node, nodejs, server-side |
| Congratulations, you've completed the first step in your Express/Node journey! You should now understand Express and Node's main benefits, and roughly what the main parts of an Express app might look like (routes, middleware, error handling, and template code). You should also understand that with Express being an unopinionated framework, the way you pull these parts together and the libraries that you use are largely up to you! | ||
| 211 | Installing LocalLibrary on PWS/Cloud Foundry | Beginner, Cloud Foundry, CodingScripting, Deployment, Express, Learn, Node, PWS, Pivotal, production, server-side |
| If you followed the above steps, you should have now deployed the LocalLibrary app to PWS. Well done! If the deployment wasn't successful, double check all the steps. | ||
| 212 | Setting up a Node development environment | Beginner, CodingScripting, Development environment, Express, Intro, Learn, Node, nodejs, npm, server-side |
| You now have a Node development environment up and running on your computer that can be used for creating Express web applications. You've also seen how NPM can be used to import Express into an application, and also how you can create applications using the Express Application Generator tool and then run them. | ||
| 213 | Server-side website programming first steps | Beginner, CodingScripting, Guide, Intro, Landing, Learn, Server-side programming |
| In this, our server-side programming module, we answer a few fundamental questions about server-side programming — "what is it?", "how does it differ from client-side programming?", and "why is it so useful?". We then provide an overview of some of the most popular server-side web frameworks , along with guidance on how to select the most suitable framework for creating your first site. Lastly we provide a high-level introductory article about web server security. | ||
| 214 | Client-Server overview | Beginner, CodingScripting, Guide, Intro, Learn, Server, Server-side programming |
| At this point you should have a good overview of the operations that server-side code has to perform, and know some of the ways in which a server-side web framework can make this easier. | ||
| 215 | Introduction to the server side | Beginner, CodingScripting, Guide, Intro, Learn, Server, Server-side programming |
| Congratulations, you've reached the end of the first article about server-side programming. | ||
| 216 | Server-side web frameworks | Beginner, CodingScripting, Guide, Intro, Learn, Server, Server-side programming, Web frameworks |
| This article has shown that web frameworks can make it easier to develop and maintain server-side code. It has also provided a high level overview of a few popular frameworks, and discussed criteria for choosing a web application framework. You should now have at least an idea of how to choose a web framework for your own server-side development. If not, then don't worry — later on in the course we'll give you detailed tutorials on Django and Express to give you some experience of actually working with a web framework. | ||
| 217 | Website security | Beginner, CodingScripting, Guide, Intro, Learn, Security, Server-side programming, Web security |
| This article has explained the concept of web security and some of the more common threats that your website should attempt to protect against. Most importantly, you should understand that a web application cannot trust any data from the web browser! All user data should be sanitized before it is displayed, or used in SQL queries or file system calls. | ||
| 218 | Tools and testing | Accessibility, Automation, Beginner, CSS, CodingScripting, HTML, JavaScript, Landing, Learn, Testing, Tools, Topic, cross browser, user testing |
| Once you've started to become comfortable programming with core web technologies (like HTML, CSS, and JavaScript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from ready-rolled CSS and JavaScript, to testing and automation apps, and more besides. As your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, and working out reliable testing plans for your code. This part of the learning area aims to give you what you need get started and make informed choices. | ||
| 219 | Cross browser testing | Accessibility, Automation, Beginner, CSS, CodingScripting, HTML, JavaScript, Landing, Learn, Module, Testing, Tools, cross browser |
| This module focuses on testing web projects across different browsers. We look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing. | ||
| 220 | Handling common HTML and CSS problems | Article, Beginner, CSS, CodingScripting, HTML, Learn, Selectors, Testing, cross browser, linting |
| Now you should be familiar with the main types of cross browser HTML and CSS problems that you'll meet in web development, and how to go about fixing them. | ||
| 221 | Handling common JavaScript problems | Article, Beginner, CodingScripting, JavaScript, Learn, Libraries, Testing, cross browser, feature detection, linting, polyfills |
| So that's JavaScript. Simple huh? Maybe not so simple, but this article should at least give you a start, and some ideas on how to tackle the JavaScript-related problems you will come across. | ||
| 222 | Handling common accessibility problems | Accessibility, Article, Beginner, CSS, CodingScripting, HTML, JavaScript, Learn, Testing, Tools, cross browser, keyboard |
| Hopefully this article has given you a good grounding in the main accessibility problems you might encounter, and how to test and overcome them. | ||
| 223 | Implementing feature detection | Article, Beginner, CSS, CodingScripting, JavaScript, Learn, Modernizr, Testing, Tools, cross browser, feature detection |
| This article covered feature detection in a reasonable amount of detail, going through the main concepts and showing you how to both implement your own feature detection tests and use the Modernizr library to implement tests more easily. | ||
| 224 | Introduction to automated testing | Article, Automation, Beginner, CodingScripting, Learn, Sauce Labs, Testing, Tools, Web Stack, cross browser |
| This was quite a ride, but I'm sure you can start to see the benefit in having automation tools do a lot of the heavy lifting for you in terms of testing. | ||
| 225 | Introduction to cross browser testing | Article, Beginner, CodingScripting, Learn, Testing, concepts, cross browser |
| This article should have given you a high-level understanding of the most important concepts you need to know about cross browser testing. Armed with this knowledge, you are now ready to move on and start learning about Cross browser testing strategies. | ||
| 226 | Setting up your own test automation environment | Article, Automation, Beginner, Browser, CodingScripting, Learn, Testing, Tools, cross browser, selenium |
| This module should have proven fun, and should have given you enough of an insight into writing and running automated tests for you to get going with writing your own automated tests. | ||
| 227 | Strategies for carrying out testing | Article, Automation, Beginner, CodingScripting, Learn, Testing, concepts, cross browser, device lab, user testing, virtual machine |
| After reading this article you should now have a good idea of what you can do to identify your target audience/target browser list, and then effectively carry out cross browser testing on that list. | ||
| 228 | WebGL | Beginner, NeedsContent, WebGL |
| When trying to describe WebGL (and its parent technology OpenGL) we often say that it is a technology for drawing 3D graphics and applying visual effects to it, such as lighting, texturing, shadows, and so on. This is probably its most common use. | ||
| 229 | WebGL by example | Beginner, Example, Graphics, Learn, WebGL |
| No summary! | ||
| 230 | Basic scissoring | Beginner, Example, Graphics, Learn, Tutorial, WebGL |
| No summary! | ||
| 231 | Boilerplate 1 | Beginner, Example, Learn, Tutorial, WebGL |
| No summary! | ||
| 232 | Canvas size and WebGL | Beginner, Example, Learn, Tutorial, WebGL |
| No summary! | ||
| 233 | Clearing by clicking | Beginner, Example, Graphics, Learn, Tutorial, WebGL |
| No summary! | ||
| 234 | Clearing with colors | Beginner, Example, Graphics, Learn, Tutorial, WebGL |
| No summary! | ||
| 235 | Color masking | Beginner, Example, Graphics, Learn, Tutorial, WebGL |
| No summary! | ||
| 236 | Detect WebGL | Beginner, Example, Graphics, Learn, Tutorial, WebGL |
| No summary! | ||
| 237 | Hello GLSL | Beginner, Example, Graphics, Learn, Tutorial, WebGL |
| No summary! | ||
| 238 | Hello vertex attributes | Beginner, Example, Graphics, Learn, Tutorial, WebGL |
| No summary! | ||
| 239 | Raining rectangles | Beginner, Example, Graphics, Learn, Tutorial, WebGL |
| No summary! | ||
| 240 | Scissor animation | Beginner, Example, Graphics, Learn, Tutorial, WebGL |
| No summary! | ||
| 241 | Simple color animation | Beginner, Example, Graphics, Learn, Tutorial, WebGL |
| No summary! | ||
| 242 | Textures from code | Beginner, Example, Graphics, Learn, Tutorial, WebGL |
| No summary! | ||
| 243 | Video textures | Advanced, Example, Graphics, Learn, Tutorial, WebGL |
| No summary! | ||