Found 348 pages:
# | Page | Tags and summary |
---|---|---|
1 | Learn web development | Beginner, CSS, HTML, Index, Intro, Landing, Learn, Web |
Welcome to the MDN learning area. This set of articles aims to provide complete beginners to web development with all that they need to start coding websites. | ||
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. Beyond mechanical use, it's important to learn how to use these technologies responsibly so that all readers might use your creations on the web. To help you achieve this, this module will cover general best practices (which are demonstrated throughout the HTML, CSS, and JavaScript topics), cross browser testing, and some tips on enforcing accessibility from the start. We'll cover accessibility in special 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 | Test your skills: CSS and JavaScript accessibility | Accessibility, Assessment, Beginner, HTML, JaavScript, Learn, test your skills |
This aim of this skill test is to assess whether you've understood our CSS and JavaScript accessibility best practices article. | ||
7 | 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 help to fill 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. | ||
8 | Mobile accessibility | Accessibility, Article, Beginner, CodingScripting, Learn, Mobile, responsive, screenreader, touch |
In this article, we have provided you with some details about common mobile accessibility-specific issues and how to overcome them. We also took you through the usage of the most common screenreaders to aid you in accessibility testing. | ||
9 | Test your skills: HTML accessibility | Accessibility, Beginner, HTML, Learn, test your skills |
This aim of this skill test is to assess whether you've understood our HTML: A good basis for accessibility article. | ||
10 | 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. | ||
11 | Test your skills: WAI-ARIA | Accessibility, Assessment, Beginner, Learn, WAI-ARIA, test your skills |
This aim of this skill test is to assess whether you've understood our WAI-ARIA basics article. | ||
12 | 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. | ||
13 | Aprender y obtener ayuda | Beginner, Learn, Learning, Web Development, getting help |
It is great that you are putting some time into learning a new set of skills, but there are good practices to employ that will make your learning more effective. There are also are times when you'll get stuck and feel frustrated — even professional web developers feel like this regularly — and it pays to know about the most effective ways to try and get help so you can progress in your work. This article provides some hints and tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish.. | ||
14 | 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. | ||
15 | How can we design for all types of users? | Accessibility, Beginner, Design, Example, Intro, 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. | ||
16 | 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 a lack of technical know-how, but from lack of goals and vision. | ||
17 | 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. | ||
18 | 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. | ||
19 | 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? | ||
20 | How do you set up a local testing server? | Beginner, Express, Flask, Learn, Node, PHP, Python, django, lamp, server-side, servers |
Throughout most of the learning area, we tell you to just open your examples directly in a browser — this can be done by double clicking the HTML file, dragging and dropping it into the browser window, or choosing File > Open... and navigating to the HTML file. There are many ways to achieve this. | ||
21 | How do you upload your files to a web server? | Beginner, FTP, GitHub, Uploading, WebMechanics, hosting, rsync, sftp |
If you have built a simple web page (see HTML basics for an example), you will probably want to put it online, on a web server. In this article we'll discuss how to do that, using various available options such as SFTP clients, RSync and GitHub. | ||
22 | 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. | ||
23 | How much does it cost to do something on the Web? | Beginner, WebMechanics, cost, hosting, web development tools |
When 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 how you get what you pay (or don't pay). | ||
24 | 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. | ||
25 | 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, depending on what browser you are using: | ||
26 | What are hyperlinks? | Beginner, Infrastructure, Navigation, NeedsActiveLearning |
Hyperlinks, usually called 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. | ||
27 | 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. | ||
28 | 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. | ||
29 | What is a URL? | Beginner, Infrastructure, NeedsActiveLearning, URL, resources, urls |
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. | ||
30 | What is a web server? | Beginner, Infrastructure, needsSchema |
The term web server can refer to hardware or software, or both of them working together. | ||
31 | 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. | ||
32 | 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! | ||
33 | What software do I need to build a website? | Beginner, NeedsActiveLearning, WebMechanics |
You can download most of the programs you need for web development for free. We'll provide a few links in this article. | ||
34 | What text editors are available? | Beginner, Composing, Guide, Tools, text editor |
A website consists mostly of text files, so for a fun, pleasant development experience you should choose your text editor wisely. | ||
35 | Front-end web developer | Beginner, CSS, Front-end, HTML, JavaScript, Learn, Tools, Web Standards |
Welcome to our front-end web developer learning pathway! | ||
36 | 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. | ||
37 | CSS basics | Beginner, CSS, CodingScripting, Learn, Styling, Web, l10n:priority |
Like HTML, CSS is not a programming language. It's not a markup language either. CSS is a style sheet language. CSS is what you use to selectively style HTML elements. For example, this CSS selects paragraph text, setting the color to red: | ||
38 | Dealing with files | Beginner, CodingScripting, Files, Guide, HTML, l10n:priority, theory, website |
When you are working on a website locally on your 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. | ||
39 | HTML basics | Beginner, CodingScripting, HTML, Learn, Web, l10n:priority |
HTML is not a programming language; it is a markup language that defines the structure of your content. 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 image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content: | ||
40 | 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. | ||
41 | 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. | ||
42 | JavaScript basics | Beginner, CodingScripting, JavaScript, Learn, Web, l10n:priority |
JavaScript ("JS" for short) is a full-fledged dynamic programming language that can add interactivity to a website. It was invented by Brendan Eich (co-founder of the Mozilla project), the Mozilla Foundation, and the Mozilla Corporation. | ||
43 | Publishing your website | Beginner, CodingScripting, FTP, GitHub, Google App Engine, Learn, Web, l10n:priority, publishing, web server |
Publishing a website is a complex topic because there are many ways to go about it. This article doesn't attempt to document all the possible methods. Instead, it explains the advantages and disadvantages of three approaches that are practical for beginners. Then it steps through one method that can work right away for many readers. | ||
44 | The web and web standards | Beginner, Front-end, Learn, Web, Web Standards |
This article provides some useful background on the Web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course. | ||
45 | What will your website look like? | Assets, Beginner, Composing, Content, Deprecated, Design, Fonts, Learn, Simple, l10n:priority, step by step |
Before doing 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. | ||
46 | 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. | ||
47 | Index | Index, Learn, MDN Meta |
Found 348 pages: | ||
48 | JavaScript — Dynamic client-side scripting | 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, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, or more—you can bet that JavaScript is probably involved. | ||
49 | Asynchronous JavaScript | Beginner, CodingScripting, Guide, JavaScript, Landing, Promises, async, asynchronous, await, callbacks, requestAnimationFrame, setInterval, setTimeout |
In this module we take a look at asynchronous JavaScript, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server. | ||
50 | Choosing the right approach | Beginner, Intervals, JavaScript, Learn, Optimize, Promises, async, asynchronous, await, requestAnimationFrame, setInterval, setTimeout, timeouts |
To finish this module off, we'll provide a brief discussion of the different coding techniques and features we've discussed throughout, looking at which one you should use when, with recommendations and reminders of common pitfalls where appropriate. We'll probably add to this resource as time goes on. | ||
51 | Cooperative asynchronous JavaScript: Timeouts and intervals | Animation, Beginner, CodingScripting, Guide, Intervals, JavaScript, Loops, asynchronous, requestAnimationFrame, setInterval, setTimeout, timeouts |
This tutorial looks at the traditional methods JavaScript has available for running code asychronously after a set time period has elapsed, or at a regular interval (e.g. a set number of times per second), discusses what they are useful for, and considers their inherent issues. | ||
52 | General asynchronous programming concepts | JavaScript, Learn, Promises, Threads, asynchronous, blocking |
In this article, we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and JavaScript. You should understand these concepts before working through the other articles in the module. | ||
53 | Graceful asynchronous programming with Promises | Beginner, CodingScripting, Guide, JavaScript, Learn, Promises, async, asynchronous, catch, finally, then |
Promises are a comparatively new feature of the JavaScript language that allow you to defer further actions until after a previous action has completed, or respond to its failure. | ||
54 | Introducing asynchronous JavaScript | Beginner, CodingScripting, Guide, Introducing, JavaScript, Learn, Promises, async, asynchronous, await, callbacks |
In this article we briefly recap the problems associated with synchronous JavaScript, and take a first look at some of the different asynchronous techniques you'll encounter, showing how they can help us solve such problems. | ||
55 | Making asynchronous programming easier with async and await | Beginner, CodingScripting, Guide, JavaScript, Learn, Promises, async, asynchronous, await |
More recent additions to the JavaScript language are async functions and the await keyword, part of the so-called ECMAScript 2017 JavaScript edition (see ECMAScript Next support in Mozilla). These features basically act as syntactic sugar on top of promises, making asynchronous code easier to write and to read afterwards. They make async code look more like old-school synchronous code, so they're well worth learning. This article gives you what you need to know. |
||
56 | 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 will quickly encounter Application Programming Interfaces (APIs). APIs are programming features for manipulating different aspects of the browser and operating system the site is running on, or manipulating 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. | ||
57 | Client-side storage | API, Article, Beginner, CodingScripting, Guide, IndexedDB, JavaScript, Learn, Storage |
That's it for now. We hope you've found our rundown of client-side storage technologies useful. | ||
58 | 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! | ||
59 | Fetching data from the server | API, Article, Beginner, CodingScripting, Fetch, JSON, JavaScript, Learn, Promises, Server, XHR, XML, XMLHttpRequest, data, request |
This article shows how to start working with both XHR and Fetch to fetch data from the server. | ||
60 | 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). | ||
61 | 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. | ||
62 | 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 websites. | ||
63 | 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. |
||
64 | Introducing JavaScript objects | Article, Assessment, Beginner, CodingScripting, Guide, JavaScript, Learn, Objects, Tutorial |
In JavaScript, most things are objects, from core JavaScript features like 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-based 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. | ||
65 | 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. | ||
66 | Inheritance in JavaScript | Article, Beginner, CodingScripting, Constructor, Function, Getter, Inheritance, JavaScript, Learn, OOJS, OOP, Object, Object member, Prototype, extends, l10n:priority, setter |
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. | ||
67 | 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. |
||
68 | 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. | ||
69 | Object prototypes | Article, Beginner, CodingScripting, Constructor, JavaScript, Learn, OOJS, OOP, Object, Prototype, Prototype Chaining, 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. | ||
70 | 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 different ways of generating object instances. | ||
71 | Test your skills: JSON | Beginner, Example, JSON, JavaScript |
This aim of this skill test is to assess whether you've understood our Working with JSON article. | ||
72 | Test your skills: Object basics | Beginner, JavaScript, Learn, Objects, test your skills |
This aim of this skill test is to assess whether you've understood our JavaScript object basics article. | ||
73 | Test your skills: Object-oriented JavaScript | Beginner, JavaScript, Learn, OOJS, Objects, test your skills |
The aim of this skill test is to assess whether you've understood our Object-oriented JavaScript for beginners, Object prototypes, and Inheritance in JavaScript articles. | ||
74 | Working with JSON | Article, Beginner, CodingScripting, Guide, JSON, JSON API, JSON Arrays, JSON parsing, JSON structure, 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. | ||
75 | 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. | ||
76 | 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. | ||
77 | 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. | ||
78 | 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. | ||
79 | 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. | ||
80 | 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! | ||
81 | 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. | ||
82 | Test your skills: Arrays | Arrays, Beginner, JavaScript, Learn, test your skills |
This aim of this skill test is to assess whether you've understood our Arrays article. | ||
83 | Test your skills: Math | Beginner, JavaScript, Learn, Math, test your skills |
This aim of this skill test is to assess whether you've understood our Basic math in JavaScript — numbers and operators article. | ||
84 | Test your skills: Strings | Beginner, JavaScript, Learn, strings, test your skills |
This aim of this skill test is to assess whether you've understood our Handling text — strings in JavaScript and Useful string methods articles. | ||
85 | Test your skills: variables | Beginner, JavaScript, Learn, Text your skills, Variables |
This aim of this skill test is to assess whether you've understood our Storing the information you need — Variables article. | ||
86 | Useful string methods | Article, Beginner, CodingScripting, JavaScript, Learn, case, indexof, l10n:priority, length, lower, replace, split, upper |
Now that 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. | ||
87 | 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. | ||
88 | 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, especially in the earlier stages of your learning journey. | ||
89 | JavaScript building blocks | Article, Assessment, Beginner, CodingScripting, Conditionals, Functions, Guide, Introduction, 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 blocks 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. | ||
90 | 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 practical experience. Here you will get some practice building your own, custom function. Along the way, we'll also explain some useful details of dealing with functions. | ||
91 | Function return values | Article, Beginner, CodingScripting, Functions, Guide, JavaScript, Learn, Return, Return values, l10n:priority |
There's one last essential concept about functions for us to discuss — return values. Some functions don't return a significant value, but others do. It's important to understand what their values are, how to use them in your code, and how to make functions return useful values. We'll cover all of these below. | ||
92 | 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. | ||
93 | 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. | ||
94 | 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 selects a button on a webpage, you might want to respond to that action by displaying an information box. In this article, we 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. | ||
95 | 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. | ||
96 | Making decisions in your code — conditionals | Article, Beginner, CodingScripting, Conditionals, JavaScript, Learn, Switch, conditions, else, if, l10n:priority, ternary |
In any programming language, the 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. | ||
97 | Test your skills: Conditionals | Beginner, Conditionals, JavaScript, Learn |
The aim of this skill test is to assess whether you've understood our Making decisions in your code — conditionals article. | ||
98 | Test your skills: Events | Beginner, JavaScript, Learn, events, test your skills |
This aim of this skill test is to assess whether you've understood our Introduction to events article. | ||
99 | Test your skills: Functions | Beginner, Functions, JavaScript, Learn, test your skills |
This aim of this skill test is to assess whether you've understood our Functions — reusable blocks of code, Build your own function, and Function return values articles. | ||
100 | Test your skills: Loops | Beginner, JavaScript, Learn, Loops |
This aim of this skill test is to assess whether you've understood our Looping code article. | ||
101 | Solve common problems in your JavaScript code | Beginner, JavaScript, Learn |
The following links point to solutions to common problems you may encounter when writing JavaScript. | ||
102 | Learn to style HTML using CSS | Beginner, CSS, CodingScripting, Debugging, Landing, Style, Topic, length, specificity |
Cascading Stylesheets — or CSS — is the first technology you should start learning after HTML. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. 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. | ||
103 | CSS building blocks | Beginner, CSS, Learn, building blocks |
This module carries on where CSS first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more. | ||
104 | 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 eye-catching box. | ||
105 | Advanced styling effects | Article, Beginner, Blend modes, Boxes, CSS, CodingScripting, Filters, Styling, box shadows, effects, shapes |
We hope this article was fun — playing with shiny toys generally is, and it is always interesting to see what kinds of advanced styling tools are becoming available in modern browsers. | ||
106 | Backgrounds and borders | Background, Beginner, CSS, Image, Learn, Position, borders, color |
We have covered quite a lot here, and you can see that there is quite a lot to adding a background or a border to a box. Do explore the different property pages if you want to find out more about any of the features we have discussed. Each page on MDN has more examples of usage for you to play with and enhance your knowledge. | ||
107 | CSS selectors | Attribute, Beginner, CSS, Class, Learn, Pseudo, Selectors, id |
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 this article and its sub-articles we'll run through the different types in great detail, seeing how they work. | ||
108 | Attribute selectors | Attribute, Beginner, CSS, Learn, Selectors |
As you know from your study of HTML, elements can have attributes that give further detail about the element being marked up. In CSS you can use attribute selectors to target elements with certain attributes. This lesson will show you how to use these very useful selectors. | ||
109 | Combinators | CSS, Selectors, combinators |
The final selectors we will look at are called combinators, because they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document. | ||
110 | Pseudo-classes and pseudo-elements | Beginner, CSS, Learn, Pseudo, Pseudo-class, Pseudo-element, Selectors |
The next set of selectors we will look at are referred to as pseudo-classes and pseudo-elements. There are a large number of these, and they often serve quite specific purposes. Once you know how to use them, you can look at the list to see if there is something which works for the task you are trying to achieve. Once again the relevant MDN page for each selector is helpful in explaining browser support. | ||
111 | Test your skills: Selectors | Beginner, CSS |
The aim of this task is to help you check your understanding of selectors in CSS. | ||
112 | Test your skills: The Box Model | Beginner, CSS |
The aim of this task is to help you check your understanding of the CSS Box Model. | ||
113 | Type, class, and ID selectors | Beginner, CSS, Class, Learn, Selectors, id |
In this lesson we will take a look at the simplest selectors that are available, which you will probably use the most in your work. | ||
114 | CSS values and units | Beginner, CSS, Function, Image, Learn, Number, Position, color, length, percentage, units, values |
This has been a quick run through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units reference page; you will encounter many of these in use as you work through these lessons. | ||
115 | Cascade and inheritance | Beginner, CSS, Cascade, Inheritance, Learn, rules, source order, specificity |
The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved. | ||
116 | 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. | ||
117 | Debugging CSS | Beginner, CSS, DOM, Debugging, DevTools, Learn, source |
Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. Perhaps you believe that a certain selector should match an element, but nothing happens, or a box is a different size than you expected. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you to find out what is going on. | ||
118 | 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. | ||
119 | Handling different text directions | Beginner, CSS, Learn, logical properties, writing modes |
The concepts explained in this lesson are becoming increasingly important in CSS. An understanding of the block and inline direction — and how text flow changes with a change in writing mode — will be very useful going forward. It will help you in understanding CSS even if you never use a writing mode other than a horizontal one. | ||
120 | Images, media, and form elements | Beginner, CSS, Forms, Images, Learn, Media, replaced content |
This lesson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in CSS. In the next article we'll look over a few tips you'll find useful when you have to style HTML tables. | ||
121 | Organizing your CSS | Beginner, CSS, CodingScripting, Learn, comments, formatting, methodologies, organizing, post-processor, pre-processor, styleguide |
As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability. | ||
122 | Overflowing content | Beginner, Block Formatting Context, CSS, Data Loss, Learn, overflow |
This lesson introduced the concept of overflow. You should understand that default CSS avoids making overflowing content invisible. You have discovered that you can manage potential overflow, and also, that you should test work to make sure it does not accidentally cause problematic overflow. | ||
123 | Sizing items in CSS | Beginner, CSS, Intrinsic size, Learn, max size, min size, percentage, sizing, viewport units |
This lesson has given you a rundown of some key issues that you might run into when sizing things on the web. When you move onto CSS Layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on. | ||
124 | Styling tables | Article, Beginner, CSS, CodingScripting, Guide, NeedsUpdate, Styling, Tables |
With styling tables now behind us, we need something else to occupy our time. The next article explores debugging CSS — how to solve problems such as layouts not looking like they should, or properties not applying when you think they should. This includes information on using browser DevTools to find solutions to your problems. | ||
125 | Test your skills: Images and Form elements | Beginner, CSS |
The aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on Images, Media and Form elements. | ||
126 | Test your skills: Overflow | Beginner, CSS |
The aim of these tasks is to help you check your understanding of overflow in CSS. | ||
127 | Test your skills: The Cascade | Beginner, CSS |
The aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on The Cascade and Inheritance. | ||
128 | Test your skills: Writing Modes and Logical Properties | Beginner, CSS |
The aim of this task is to help you check your understanding of Writing Modes and Logical Properties. The things you need to know to complete these tasks are covered in the lesson on Handling different text directions. | ||
129 | Test your skills: backgrounds and borders | Assessment, Beginner, Learn, Skill test, backgrounds, borders |
This aim of this skill test is to get you working with CSS backgrounds and borders using the skills you have learned in the previous lesson. | ||
130 | Test your skills: sizing | Beginner, CSS, Example |
The aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on Sizing items in CSS. | ||
131 | Test your skills: tables | Beginner, CSS, Example |
The aim of this task is to help you check your understanding of the skills you studied in the lesson on styling tables. | ||
132 | Test your skills: values and units | Beginner, CSS, Example |
The aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on CSS Values and Units. | ||
133 | The box model | Beginner, CSS, Learn, border, box model, display, margin, padding |
That's most of what you need to understand about the box model. You may want to return to this lesson in the future if you ever find yourself confused about how big boxes are in your layout. | ||
134 | CSS first steps | Beginner, CSS, Landing, Learn, Module, first steps |
CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML. | ||
135 | Getting started with CSS | Beginner, CSS, Classes, Elements, Example, Learn, Selectors, Syntax, state |
In this article we will take a simple HTML document and apply CSS to it, learning some practical things about the language along the way. | ||
136 | How CSS is structured | Beginner, CSS, HTML, Learn, Selectors, Structure, comments, properties, shorthand, values, whitespace |
Now that you are beginning to understanding the purpose and use of CSS, let's examine the structure of CSS. | ||
137 | How CSS works | Beginner, CSS, DOM, Learn |
We have learned the basics of CSS, what it is for and how to write simple stylesheets. In this lesson we will take a look at how a browser takes CSS and HTML and turns that into a webpage. | ||
138 | Using your new knowledge | Beginner, CSS, Learn, Playground |
With the things you have learned in the last few lessons you should find that you can format simple text documents using CSS, to add your own style to them. This assessment gives you a chance to do that. | ||
139 | What is CSS? | Beginner, CSS, Introduction to CSS, Learn, Modules, Specifications, Syntax |
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, with a simple syntax example, and also covers some key terms about the language. | ||
140 | CSS layout | Beginner, CSS, Floating, Grids, Guide, Landing, Layout, Learn, Module, Multiple column, Positioning, alignment, flexbox, float, table |
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, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about. | ||
141 | Beginner's guide to media queries | Beginner, CSS, Layout, Learn, media query |
In this lesson you have learned about media queries, and also discovered how to use them in practice to create a mobile first responsive design. | ||
142 | 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 — CSS Grids. | ||
143 | Floats | Article, Beginner, CSS, Clearing, CodingScripting, Floats, Guide, Layout, columns, multi-column |
You now know all there is to know about floats in modern web development. See the article on legacy layout methods for information on how they used to be used, which may be useful if you find yourself working on older projects. | ||
144 | Grids | Article, Beginner, CSS, CSS Grids, CodingScripting, Grids, Guide, Layout, Learn, Tutorial, grid design, grid framework, grid system |
In this overview we have toured the main features of CSS Grid Layout. You should be able to start using it in your designs. To dig further into the specification, read our guides to Grid Layout, which can be found below. | ||
145 | 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! | ||
146 | Legacy layout methods | Beginner, CSS, Floats, Guide, Layout, Learn, grid system, legacy |
You now understand how various grid systems are created, which will be useful in working with older sites and in understanding the difference between the native grid of CSS Grid Layout and these older systems. | ||
147 | Multiple-column layout | Beginner, CSS, Guide, Layout, Learn, Learning, Multi-col, Multiple columns |
You now know how to use the basic features of multiple-column layout, another tool at your disposal when choosing a layout method for the designs you are building. | ||
148 | Normal Flow | Beginner, CSS, Layout, Learn, float, grid, normal flow |
Now that you understand normal flow, and how the browser lays things out by default, move on to understand how to change this default display to create the layout needed by your design. | ||
149 | Positioning | Article, Beginner, CSS, CodingScripting, Guide, Layout, Positioning, absolute, fixed, relative |
I'm sure you had fun playing with basic positioning; while it is not a method you would use for entire layouts, as you can see there are many tasks it is suited for. | ||
150 | 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 build 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. | ||
151 | Responsive design | Images, Media Queries, RWD, Responsive web design, flexbox, fluid grids, grid, multicol, typography |
Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively. | ||
152 | Supporting older browsers | Beginner, CSS, Guide, Layout, Learn, feature queries, flexbox, float, grid, legacy |
You now have the knowledge to confidently use techniques such as Grid and Flexbox, create fallbacks for older browsers, and make use of any new techniques that might come along in the future. | ||
153 | Test Your Skills: Fundamental layout comprehension | Assessment, Beginner, CSS, Layout, Learn |
If you have worked through this module then you will have already covered the basics of what you need to know to do CSS layout today, and to work with older CSS as well. This task will test some of your knowledge by way of developing a simple webpage layout using a variety of techniques. | ||
154 | Test your skills: Flexbox | Assessment, Beginner, Learn, Skill test, flexbox |
The aim of this task is to get you working with Flexbox and demonstrate your understanding of how flex items behave. Below are four common design patterns which you might use Flexbox to create, your task is to build them. | ||
155 | Test your skills: Grid Layout | Beginner, CSS, Guide, Learn |
This aim of this task is to get you working with CSS Grid Layout, and test that you understand how a grid and grid items behave. You will be working through three small tasks which use different elements of the material you have just covered. | ||
156 | Test your skills: Media Queries and Responsive Design | Beginner, CSS, Guide |
This aim of this task is to get you working with responsive web design with a practical task. Everything you need to know to complete this task was covered in the guide to Media Queries, and the other layout lessons in this section. | ||
157 | Test your skills: Multicol | CSS, Example, Guide |
The aim of this task is to get you working with the CSS column-count , column-width , column-gap , column-span and column-rule properties and values covered in our lesson on Multiple-column Layout. You will be working through three small tasks which use different elements of the material you have just covered. |
||
158 | Test your skills: floats | Beginner, CSS, Example, Guide |
The aim of this task is to get you working with the CSS float and clear properties covered in our lesson on Floats. You will be working through three small tasks which use different elements of the material you have just covered. |
||
159 | Test your skills: position | CSS, Example, Guide |
The aim of this task is to get you working with the CSS position property and values covered in our lesson on Position. You will be working through two small tasks which use different elements of the material you have just covered. |
||
160 | 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. | ||
161 | 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. | ||
162 | 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. | ||
163 | 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. | ||
164 | 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. | ||
165 | Web fonts | @font-face, Article, Beginner, CSS, CSS Fonts, Fonts, Guide, Learn, Web Development, Web Fonts Article, Web fonts documentation, 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. | ||
166 | Use CSS to solve common problems | Beginner, CSS, Learn |
The following links provide solutions to common problems you may face when working with CSS. | ||
167 | CSS FAQ | CSS, Example, FAQ, Guide, Web, questions |
In this article, you'll find some frequently-asked questions (FAQs) about CSS, along with answers that may help you on your quest to become a web developer. | ||
168 | Using CSS generated content | Basic, Beginner, CSS, CSS:Getting_Started, Graphics, Guide, NeedsUpdate, Web |
This article describes some ways in which you can use CSS to add content when a document is displayed. You modify your stylesheet to add text content or images. | ||
169 | 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. | ||
170 | Learning area release notes | Learn, Release Notes |
This page details significant changes made to the learning area. Check back here if you want to know what new content is available, and what existing content has been improved. | ||
171 | 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 general 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. | ||
218 | Properly configuring server MIME types | HTTP |
By default, many web servers are configured to report a MIME type of text/plain or application/octet-stream for unknown content types. As new content types are invented or added to web servers, web administrators may fail to add the new MIME types to their web server's configuration. This is a major source of problems for users of Gecko-based browsers, which respect the MIME types as reported by web servers and web applications. |
||
219 | Server-side website programming first steps | Beginner, CodingScripting, Guide, Intro, Landing, Learn, Server-side programming |
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?". | ||
220 | 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. | ||
221 | 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. | ||
222 | 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. | ||
223 | Website security | Beginner, CodingScripting, Guide, Intro, Learn, Security, Server-side programming, Web security, Website Security |
This article has explained the concept of web security and some of the more common threats against which your website should attempt to protect. 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 and file system calls. | ||
224 | Structuring the web with 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. | ||
225 | HTML Cheatsheet | Beginner, Draft, 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. | ||
226 | HTML Tables | <td>, <th>, <tr>, 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. | ||
227 | 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. | ||
228 | 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. | ||
229 | 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. | ||
230 | 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. | ||
231 | 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. | ||
232 | Creating hyperlinks | Beginner, CodingScripting, Guide, HTML, HTTP, Learn, Links, Title, absolute, href, 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. | ||
233 | Debugging HTML | Beginner, CodingScripting, Debugging, Error, Guide, HTML, Validation, validator |
So there we have it, an introduction to debugging 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. | ||
234 | 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. | ||
235 | Getting started with HTML | Attribute, Beginner, CodingScripting, Comment, Element, Guide, HTML, entity reference, whitespace |
You made it to the end of the article! We hope you enjoyed your tour of the basics of HTML. At this point, you should understand what HTML looks like, and how it works at a basic level. You should also be able to write a few elements and attributes. The subsequent articles of this module go further on some of the topics introduced here, as well as presenting other concepts of the language. |
||
236 | 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 Advanced text formatting 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. | ||
237 | 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 our text formatting skills. In this assignment, you'll have a letter to mark up as a test for your HTML text formatting skills, as well as hyperlinks and proper use of the HTML <head> element. |
||
238 | 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. | ||
239 | Test your skills: Advanced HTML text | Beginner, HTML, Learn, advanced text, test your skills |
The aim of this skill test is to assess whether you've understood our Advanced text formatting article. | ||
240 | Test your skills: HTML text basics | Beginner, HTML, Learn, Text, test your skills |
This aim of this skill test is to assess whether you've understood our HTML text fundamentals article. | ||
241 | Test your skills: Links | Beginner, HTML, Learn, Links, test your skills |
The aim of this skill test is to assess whether you've understood our Creating hyperlinks article. | ||
242 | 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. | ||
243 | Multimedia and Embedding | Assessment, Audio, Beginner, CodingScripting, Embedding, Flash, Guide, HTML, Images, Landing, Learn, Multimedia, SVG, Vector Graphics, Video, Web, iframes, imagemaps, img, 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. | ||
244 | 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. | ||
245 | 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. | ||
246 | Images in HTML | Article, Beginner, Guide, HTML, Image, JPEG, PNG, alt text, captions, figcaption, figure, img, scr |
That's all for now. We have covered images and captions in detail. In the next article we'll move it up a gear, looking at how to use HTML to embed video and audio in web pages. | ||
247 | Test your skills: HTML images | Beginner, HTML, Images, Learn, test your skills |
This aim of this skill test is to assess whether you've understood our Images in HTML article. | ||
248 | Mozilla splash page | Assessment, Beginner, CodingScripting, Embedding, HTML, Images, JPEG, Multimedia, PNG, Video, iframe, img, picture, responsive, sizes, src, 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! | ||
249 | Responsive images | Article, Beginner, CodingScripting, Design, Graphics, Guide, HTML, Image, Intermediate, JPEG, PNG, Pictures, captions, hyperlinks, img, picture, sizes, src, 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: | ||
250 | 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> . |
||
251 | Test your skills: Multimedia and embedding | Beginner, Embedding, HTML, Learn, Multimedia, test your skills |
This aim of this skill test is to assess whether you've understood our Video and audio content and From object to iframe — other embedding technologies articles. | ||
252 | 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. | ||
253 | Add a hitmap 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. |
||
254 | Define terms with HTML | Beginner, Guide, HTML, Learn |
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: | ||
255 | Tips for authoring fast-loading HTML pages | Advanced, Guide, HTML, NeedsUpdate, Performance, Web, Web Performance |
These tips are based on common knowledge and experimentation. | ||
256 | 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. | ||
257 | 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() . |
||
258 | 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 JavaScript frameworks, to testing and automation tools, and more besides. As your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, working out a reliable toolchain to give your development process superpowers. | ||
259 | 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. | ||
260 | 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. | ||
261 | 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. | ||
262 | 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. | ||
263 | 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. | ||
264 | 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 benefits of using automation tools to do some of the heavy lifting in terms of testing. | ||
265 | 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. | ||
266 | 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. | ||
267 | 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. | ||
268 | Git and GitHub | Beginner, GitHub, Learn, Web, git |
All developers will use some kind of version control system (VCS), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll back to previous versions of the code base if a problem is discovered later on. The most popular VCS (at least among web developers) is Git, along with GitHub, a site that provides hosting for your repositories and several tools for working with them. This module aims to teach you what you need to know about both of them. | ||
269 | Understanding client-side JavaScript frameworks | Beginner, Frameworks, JavaScript, Learn, client-side |
JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience. | ||
270 | Accessibility in React | Accessibility, Beginner, Frameworks, JavaScript, Learn, React, client-side, focus management, keyboard |
In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screenreader users. | ||
271 | Adding a new todo form: Vue events, methods, and models | Beginner, Forms, Frameworks, JavaScript, Learn, Methods, client-side, events, models, vue |
Excellent. We can now add todo items to our form! Our app is now starting to feel interactive, but one issue is that we've completely ignored its look and feel up to now. In the next article, we'll concentrate on fixing this, looking at the different ways Vue provides to style components. | ||
272 | Advanced Svelte: Reactivity, lifecycle, accessibility | Accessibility, Beginner, Components, Frameworks, JavaScript, Learn, Lifecycle, Svelte, client-side, reactivity |
In this article we have finished adding all the required functionality to our app, plus we've taken care of a number of accessibility and usability issues. We also finished splitting our app into manageable components, each one with a unique responsibility. | ||
273 | Beginning our React todo list | App, Beginner, Frameworks, JavaScript, Learn, React, Style, client-side |
Now our todo list app actually looks a bit more like a real app! The problem is: it doesn’t actually do anything. We’ll start fixing that in the next chapter! | ||
274 | Componentizing our React app | Beginner, Frameworks, JavaScript, Learn, React, client-side, events, interactivity, state |
And that's it for this article — we've gone into some depth on how to break up your app nicely into components, end render them efficiently. Now we'll go on to look at how we handle events in React, and start adding some interactivity. | ||
275 | Componentizing our Svelte app | Beginner, Components, Frameworks, JavaScript, Learn, Svelte, client-side, conditional rendering, passing data |
Now we have all of our app's required functionality in place. We can display, add, edit and delete todos, mark them as completed, and filter by status. | ||
276 | Creating our first Vue component | Beginner, Components, Frameworks, JavaScript, Learn, client-side, props, state, vue |
And that will do for this article. At this point we have a nicely-working ToDoItem component that can be passed a label to display, will store its checked state, and will be rendered with a unique id each time it is called. You can check if the unique id s are working by temporarily adding more <to-do-item></to-do-item> calls into App.vue , and then checking their rendered output with your browser's DevTools. |
||
277 | Deployment and next steps | Beginner, Deployment, Frameworks, JavaScript, Learn, Svelte, client-side, resources |
In the previous article we learning about Svelte's TypeScript support, and how to use it to make your application more robust. In this final article we will look at how to deploy your application and get it online, and also share some of the resources that you should go on to, to continue your Svelte learning journey. | ||
278 | Dynamic behavior in Svelte: working with variables and props | Beginner, Frameworks, JavaScript, Learn, Svelte, Variables, client-side, props |
That will do for now! In this article we already implemented most of our desired functionality. Our app can display, add, and delete todos, toggle their completed status, show how many of them are completed and apply filters. | ||
279 | Ember Interactivity: Footer functionality, conditional rendering | Beginner, Ember, Frameworks, JavaScript, Learn, client-side, conditional rendering |
That's enough for now. At this point, not only can we mark todos as complete, but we can clear them as well. Now the only thing left to wire up the footer are the three filtering links: "All", "Active", and "Completed". We'll do that in the next article, using Routing. | ||
280 | Ember app structure and componentization | Beginner, Components, Ember, Frameworks, JavaScript, Learn, client-side |
Great! Everything looks as it should. We have successfully refactored our HTML into components! In the next article we'll start looking into adding interactivity to our Ember application. | ||
281 | Ember interactivity: Events, classes and state | Beginner, Classes, Ember, Frameworks, JavaScript, Learn, Services, client-side, decorators, events |
OK, so that's great progress for now. We can now add todo items to our app, and the state of the data is tracked using our service. Next we'll move on to getting our footer functionality working, including the todo counter, and look at conditional rendering, including correctly styling todos when they've been checked. We'll also wire up our "Clear completed" button. | ||
282 | Ember resources and troubleshooting | Beginner, Ember, Frameworks, JavaScript, Learn, client-side, resources |
Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information. | ||
283 | Focus management with Vue refs | Beginner, Frameworks, JavaScript, Learn, client-side, focus management, refs, vue |
So that's it for focus management, and for our app! Congratulations for working your way through all our Vue tutorials. In the next article we'll round things off with some further resources to take your Vue learning further. | ||
284 | Framework main features | Beginner, Frameworks, JavaScript, Learn, client-side, features |
At this point you should have more of an idea about the actual languages, features, and tools you'll be using as you create applications with frameworks. I'm sure you’re enthusiastic to get going and actually do some coding, and that's what you are going to do next! At this point you can choose which framework you'd like to start learning first: | ||
285 | Getting started with Ember | Beginner, Ember, Frameworks, JavaScript, Learn, client-side |
So far so good. We've got to the point where we can start build up our sample TodoMVC app in Ember. In the next article we'll look at building up the markup structure of our app, as a group of logical components. | ||
286 | Getting started with React | Beginner, Frameworks, JavaScript, Learn, React, client-side |
This brings us to the end of our initial look at React, including how to install it locally, creating a starter app, and how the basics work. In the next article, we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned. | ||
287 | Getting started with Svelte | Beginner, Frameworks, JavaScript, Learn, Svelte, client-side |
This brings us to the end of our initial look at Svelte, including how to install it locally, create a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned. | ||
288 | Getting started with Vue | Beginner, Frameworks, Installation, JavaScript, Learn, client-side, vue |
Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes. | ||
289 | Introduction to client-side frameworks | Beginner, Frameworks, JavaScript, Learn, client-side |
And that brings us to the end of our introduction to frameworks — we’ve not taught you any code yet, but hopefully we've given you a useful background on why you'd use frameworks in the first place and how to go about choosing one, and made you excited to learn more and get stuck in! | ||
290 | React interactivity: Editing, filtering, conditional rendering | Beginner, Frameworks, JavaScript, Learn, React, client-side, conditional rendering, filtering |
So that's it — our app is now functionally complete. | including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screenreader users.||
291 | React interactivity: Events and state | Beginner, Frameworks, JavaScript, Learn, React, client-side, events, interactivity, state |
That's enough for one article. Here we've given you the lowdown on how React deals with events and handles state, and implemented functionality to add tasks, delete tasks, and toggle tasks as completed. We are nearly there. In the next article we'll implement functionality to edit existing tasks and filter the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way. | ||
292 | React resources | Beginner, JavaScript, Learn, React, client-side, framework, resources |
Our final article provides you with a list of React resources that you can use to go further in your learning. | ||
293 | Rendering a list of Vue components | Beginner, Frameworks, JavaScript, Learn, client-side, lists, v-for, vue |
And that brings us to the end of another article. We now have sample data in place, and a loop that takes each bit of data and renders it inside a ToDoItem in our app. |
||
294 | Routing in Ember | Beginner, Ember, Frameworks, JavaScript, Learn, Routing, client-side |
Congratulations! You've finished this tutorial! | ||
295 | Starting our Svelte Todo list app | Beginner, Components, Frameworks, JavaScript, Learn, Svelte, client-side, state |
With our markup and styling in place our Todo list app is starting to take shape, and we have everything ready so that we can start to focus on the features we have to implement. | ||
296 | Styling Vue components with CSS | Beginner, CSS, Frameworks, JavaScript, Learn, Styling, client-side, vue |
Our work is done on the styling of our sample app. In the next article we'll return to adding some more functionlity to our app, namely using a computed property to add a count of completed todo items to our app. | ||
297 | TypeScript support in Svelte | Beginner, Frameworks, JavaScript, Learn, Svelte, Typescript, client-side |
In this article we took our to-do list application and ported it to TypeScript. | ||
298 | Using Vue computed properties | Beginner, Frameworks, JavaScript, Learn, client-side, computed properties, vue |
In this article we've used a computed property to add a nice little feature to our app. We do however have bigger fish to fry — in the next article we will look at conditional rendering, and how we can use it to show an edit form when we want to edit existing todo items. | ||
299 | Vue conditional rendering: editing existing todos | Beginner, Frameworks, JavaScript, Learn, client-side, conditional rendering, v-else, v-if, vue |
This article has been fairly intense, and we covered a lot here. We've now got edit and delete functionality in our app, which is fairly exciting. We are nearing the end of our Vue series now. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. | ||
300 | Vue resources | Beginner, JavaScript, Learn |
Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips. | ||
301 | Working with Svelte stores | Beginner, Frameworks, JavaScript, Learn, Stores, Svelte, client-side |
In this article we added two new features: an Alert component and persisting todos to web storage. |
||
302 | Understanding client-side web development tools | Beginner, CSS, Deployment, HTML, JavaScript, Learn, Tools, Transformation, client-side, linting |
Client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. We finish up by providing a complete toolchain example showing you how to get productive. | ||
303 | Client-side tooling overview | Beginner, Introduction, Learn, Tools, client-side |
That rounds off our gentle introduction to the topic of client-side web tooling, from a high level. Next up we provide you with a crash course on the command line, which is where a lot of tooling is invoked from. We’ll take a look at what the command line can do and then try installing and using our first tool. | ||
304 | Command line crash course | Beginner, CLI, Command Line, Learn, Terminal, Tools, client-side, npm |
That brings us to the end of our brief tour of the terminal/command line. Next up we’ll be looking in more detail at package managers, and what we can do with them. | ||
305 | Deploying our app | Beginner, Deployment, GitHub, Learn, Netlify, Testing, Toolchain, Tools, case study |
That's it for our sample case study, and for the module! We hope you found it useful. While there is a long way to go before you can consider yourself a client-side tooling wizard, we are hoping that this module has given you that first important step towards understanding client-side tooling, and the confidence to learn more and try out new things. | ||
306 | Introducing a complete toolchain | Beginner, Complete toolchain, Development environment, Learn, Tools, Transformation, case study |
We've come a long way in this chapter, building up a rather nice local development environment to create an application in. | ||
307 | Package management basics | Beginner, Learn, Tools, dependency, npm, package manager, package repository, yarn |
This brings us to the end of our tour of package managers. Our next move is to build up a sample toolchain, putting all that we've learnt so far into practice. | ||
308 | Web forms — Working with user data | Beginner, Featured, Forms, Guide, HTML, Landing, Learn, Web |
This module provides a series of articles that will help you master the essentials of web forms. Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface. However, for historical and technical reasons it's not always obvious how to use them to their full potential. In the articles listed below, we'll cover all the essential aspects of Web forms including marking up their HTML structure, styling form controls, validating form data, and submitting data to the server. | ||
309 | Advanced form styling | Advanced, CSS, Example, Forms, Guide, HTML, Web |
While there are still difficulties using CSS with HTML forms, there are ways to get around many of the problems. There are no clean, universal solutions, but modern browsers offer new possibilities. For now, the best solution is to learn more about the way the different browsers support CSS when applied to HTML form controls. | ||
310 | Basic native form controls | Beginner, Controls, Example, Forms, Guide, HTML, Input, Web, Widgets |
This article has covered the older input types — the original set introduced in the early days of HTML that is well supported in all browsers. In the next section, we'll take a look at the newer values of the type attribute that were added in HTML5. |
||
311 | CSS property compatibility table for form controls | Advanced, CSS, Forms, Guide, HTML, Junk, NeedsUpdate, Web |
The following compatibility tables try to summarize the state of CSS support for HTML forms. Due to the complexity of CSS and HTML forms, these tables can't be considered a perfect reference. However, they will give you good insight into what can and can't be done, which will help you learn how to do things. | ||
312 | Client-side form validation | Beginner, Example, Forms, Guide, HTML, JavaScript, Learn, Web, regex |
Client-side form validation sometimes requires JavaScript if you want to customize styling and error messages, but it always requires you to think carefully about the user. Always remember to help your users correct the data they provide. To that end, be sure to: | ||
313 | HTML forms in legacy browsers | Example, Forms, Guide, HTML, Intermediate, Web |
To understand common patterns, it helps to read browser documentation. If you are reading this on MDN, you are at the right place to start. Just check the support of the elements (or DOM interface) you want to use. MDN has compatibility tables available for most elements, properties and APIs that can be used in a web page. There are other resources that can be amazingly helpful: | ||
314 | How to build custom form controls | Advanced, Example, Forms, Guide, HTML, Web |
There are some cases where the available native HTML form controls may seem like they are not enough. For example, if you need to perform advanced styling on some controls such as the <select> element or if you want to provide custom behaviors, you may consider building your own controls. |
||
315 | Example 1 | Forms, Guide, HTML |
This is the first example of code that explains how to build a custom form widget. | ||
316 | Example 2 | Forms, HTML |
This is the second example that explain how to build custom form widgets. | ||
317 | Example 3 | Forms, HTML |
This is the third example that explain how to build custom form widgets. | ||
318 | Example 4 | Advanced, Example, Forms, Guide, HTML, Web |
This is the fourth example that explain how to build custom form widgets. | ||
319 | Example 5 | Forms, HTML |
This is the last example that explain how to build custom form widgets. | ||
320 | How to structure a web form | Beginner, CodingScripting, Example, Forms, Guide, HTML, Learn, Structure, Web |
You now have all the knowledge you'll need to properly structure your web forms. We will cover many of the features introduced here in the next few articles, with the next article looking in more detail at using all the different types of form widgets you'll want to use to collect information from your users. | ||
321 | 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. | ||
322 | Other form controls | Beginner, Controls, Example, Forms, Guide, HTML, Web, Widgets |
As you'll have seen in the last few articles, there are a lot of different types of available form element. You don't need to remember all of these details at once, and can return to these articles as often as you like to check up on details. | ||
323 | Sending form data | Beginner, CodingScripting, Files, Forms, Guide, HTML, HTTP, Headers, Security, Web |
As we'd alluded to above, sending form data is easy, but securing an application can be tricky. Just remember that a front-end developer is not the one who should define the security model of the data.It's possible to perform client-side form validation, but the server can't trust this validation because it has no way to truly know what has really happened on the client-side. | ||
324 | Sending forms through JavaScript | Advanced, Example, Forms, Forms Guide, Guide, HTML, HTML forms, JavaScript, Learn, Security, Web, Web Forms |
HTML forms can send an HTTP request declaratively. But forms can also prepare an HTTP request to send via JavaScript, for example via XMLHttpRequest . This article explores such approaches. |
||
325 | Styling web forms | Beginner, CSS, Example, Forms, Guide, HTML, Learn, Web |
As you can see, as long as we want to build forms with just text fields and buttons, it's easy to style them using CSS. In the next article, we will see how to handle form widgets which fall into the "bad" and "ugly" categories. | ||
326 | Test your skills: Advanced styling | Assessment, Beginner, Forms, Learn, Pseudo-classes, Styling, test your skills |
This aim of this skill test is to assess whether you've understood our Advanced form styling and UI pseudo-classes articles. | ||
327 | Test your skills: Basic controls | Assessment, Beginner, Forms, Learn, basic controls, test your skills |
This aim of this skill test is to assess whether you've understood our Basic native form controls article. | ||
328 | Test your skills: Form structure | Beginner, Forms, HTML, Learn, Structure |
This aim of this skill test is to assess whether you've understood our How to structure a web form article. | ||
329 | Test your skills: Form validation | Assessment, Beginner, Forms, Learn, Validation, test your skills |
This aim of this skill test is to assess whether you've understood our Client-side form validation article. | ||
330 | Test your skills: HTML5 controls | Assessment, Beginner, Forms, HTML5, Learn, test your skills |
This aim of this skill test is to assess whether you've understood our The HTML5 input types article. | ||
331 | Test your skills: Other controls | Assessment, Beginner, Forms, Learn, Select, datalist, test your skills, textarea |
This aim of this skill test is to assess whether you've understood our Other form controls article. | ||
332 | Test your skills: Styling basics | Assessment, Beginner, CSS, Forms, Learn, Styling, test your skills |
This aim of this skill test is to assess whether you've understood our Styling web forms article. | ||
333 | The HTML5 input types | Beginner, Controls, Example, Forms, Guide, HTML, Web, Widgets |
That brings us to the end of our tour of the HTML5 form input types. There are a few other control types that cannot be easily grouped together due to their very specific behaviors, but which are still essential to know about. We cover those in the next article. | ||
334 | UI pseudo-classes | Beginner, CSS, Example, Forms, Guide, HTML, Pseudo-classes, Styling, Web |
This completes our look at UI pseudo-classes that relate to form inputs. Keep playing with them, and create some fun form styles! Next up, we'll move on to something different — client-side form validation. | ||
335 | Your first form | Beginner, CSS, CodingScripting, Example, Forms, Guide, HTML, Learn, Web |
Congratulations, you've built your first web form. It looks like this live: | ||
336 | Example | Beginner, CodingScripting, Example, Forms, Guide, HTML, Learn, Web |
This is the example code for the article Your first HTML form. | ||
337 | Web performance | CSS, HTML, HTTP, JavaScript, Learn, Performance, Web Performance |
Building websites requires HTML, CSS, and JavaScript. To build websites and applications people want to use, which attract and retain users, you need to create a good user experience. Part of good user experience is ensuring the content is quick to load and responsive to user interaction. This is known as web performance, and in this module you'll focus on the fundamentals of how to create performant websites. | ||
338 | CSS performance optimization | CSS, Performance, Reference, Tutorial |
CSS is render blockingTo optimize the CSSOM construction, remove unnecessary styles, minify, compress and cache it, and split CSS not required at page load into additional files to reduce CSS render blocking. | ||
339 | HTML performance features | HTML, Learning, Web Performance |
HTML is by default fast and accessible. It is our job, as developers, to ensure that we preserve these two properties when creating or editing HTML code. Complications can occur when, for example, the file size of a <video> embed is too large, or when a webpage is not optimized for mobile devices. This module intends to walk you through the key HTML performance features that can drastically improve the quality of your webpage. |
||
340 | JavaScript performance | Images, Media, Performance, Video, Web Performance |
This article looks to introduce performance issues caused by scripts and introduces tips and tricks for optimizing JavaScript for web performance. | ||
341 | Measuring performance | API, Beginner, Guide, Tools, Web |
When writing code for the Web, there are a large number of Web APIs available that allow you to create your own performance measuring tools. | ||
342 | Multimedia: Images | Images, Media, Performance, Video, Web Performance |
This article looks at optimizing image and video to improve web performance. | ||
343 | Multimedia: video | Images, Media, Performance, Video, Web Performance |
This article looks at optimizing video to improve web performance. | ||
344 | Perceived performance | Perceived Performance, Web Performance |
Perceived performance is how fast a website seems to the user. | ||
345 | The "why" of web performance | Beginner, Introduction, Learn, Performance, Reference, Tutorial, Web Performance |
Web performance is all about making websites fast, including making slow processes seem fast. This article provides an introduction into why web performance is important to site visitors and for your business goals. | ||
346 | The business case for web performance | Web Development, Web Performance |
We've discussed the importance of web performance. You've learned what you need to do to optimize for web performance. But how do you convince your clients and/or management to prioritize and invest in performance? In this section, we discuss creating a clear business-case to convince decision-makers to make the investment. | ||
347 | Web performance resources | Best practices, Website performance |
Web performance is all about user experience and perceived performance. As we learned in the critical rendering path document, linking CSS with a tradional link tag with rel="stylesheet" is synchronous and blocks rendering. Optimize the rendering of your page by removing blocking CSS. | ||
348 | What is web performance? | Beginner, Introduction, Learn, Performance, Reference, Tutorial, Web Performance |
Web performance is all about making web sites fast, including making slow processes seem fast. Does the site load quickly, allow the user to start interacting with it quickly, and offer reassuring feedback if something is taking time to load (e.g. a loading spinner)? Are scrolling and animations smooth? This article provides a brief introduction to objective, measureable web performance*, looking at what technologies, techniques, and tools are involved in web optimization. | ||