mdn / learning-area Goto Github PK
View Code? Open in Web Editor NEWGitHub repo for the MDN Learning Area.
Home Page: https://developer.mozilla.org/en-US/Learn
License: Creative Commons Zero v1.0 Universal
GitHub repo for the MDN Learning Area.
Home Page: https://developer.mozilla.org/en-US/Learn
License: Creative Commons Zero v1.0 Universal
For example, when I click the "Open in Codepen" button included in the first link, it shows
It is not expected. I expect it puts text in HTML/CSS Input into Codepen's editor.
Hi there,
I'm not sure whether it's the correct section to ask what I'm going to ask in (if not, please let me know and delete this message).
I'm having a look at this HTML file —> learning-area/html/multimedia-and-embedding/responsive-images/responsive.html
and I can't get my head around my browser behaviour (I'm using Mozilla Firefox). I'm using the Web Developer tool and what I'm seeing is that when I change my screen's resolution width to 320px or less what I get is that my browser chooses the 480px image and as soon as I set my screen's resolution width wider than 320px (for example 321px) my browser goes straight for the 800px. The 320px image is not used at all. Why is my browser doing this instead of choosing the right images?
Thanks in advance for your reply
Fabio
when I right-click on the video and select show controls. Clicking on video plays it, but it doesn't remove class hidden.
Why is that?
add a folder to show the use of classes and id in css selectors
Hi there,
I'm new for html and studying responsive.html this topic.
On firefox, I can clearly see the results on Network Inspector that browser would download different-width jpg files when I set different viewport width. With the same source code, however, I can't see the same results on Google Chrome, even disable the cache.
Is there something I don't recognize or Do I misunderstand the content?
Thanks a lot!!
Luke
Hello, I am learning javascript via various places, one being MDN. They link here to the can-script.js file and there I see there is a bit of a scope issue which has thrown me off a bit.
When putting code like this in a file and running it, this script wide variable products is actually never assigned to outside of the fetch call, therefore it is completely unnecessary to declare it here. This leads to confusion because when trying to use this variable again after the initialise() function, it is undefined.
Either declare it inside the fetch and remove from the beginning of the file or show an example where fetch assigns to a variable outside its scope.
the given pattern also matches "|anana" or "|herry".
correction is "[bB]" in place of "[b|B]"
Hello there,
Im confused about the following code: planets-data.html wich is presented in the html tables asssesstment.
When i try to validate the code directly copied from your repository in https://validator.w3.org i got the following errors occur:
Error: A table row was 12 columns wide and exceeded the column count established using column markup (3).
I tryed to search about this topic on google, but I cant find proper solution. Another thing i noticed is, if i remove the "colgroup" tag at all the code seems to be validating fine with no errors. Why is this happening? Please help me understand it.
Is the CSS declaration "flex: 200px;" missing from the CSS code at the Wrapping section of the Flexbox lecture? It is mentioned on the content and the CSS doesn't seem to work properly without it.
As the website has Server-side website programming
section but this repo doesn't have its code.
var dogs = ["Thunder" , "Billy" , "Jonter" , "Lomber" , "Steward"];
var info = "The names of my dogs are: ";
var i =0;
while(i < dogs.length){
if(i === dogs.length -1){
console.log(info += " and " + dogs[i] + ".");
}
else{
console.log(info += dogs[i] + ",");
}
i++;
}
Above is the code i have and for some reason it does not print
The names of my dogs are: Thunder,Billy etc
instead it prints in this format
The names of my dogs are Thunder,
The names of my dogs are Thunder,Billy,
The names of my dogs are Thunder,Billy,Jonter,
The names of my dogs are Thunder,Billy,Jonter,Lomber,
The names of my dogs are Thunder,Billy,Jonter,Lomber and Steward.
i don't see what i have done wrong,maybe someone can help me,i'm not finding help anywhere else
link to the lesson :https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html
Hey, I was going through the javascript tutorial and I found a small typo. 🔎
The typo can be found in this page in the following directory:
The typo is in the following line:
You should, if at all possible, use this instead of setInterval()/recursive setTimeout(), unless you need a specific rate frame.
The word rate frame needs to be corrected to framerate. In all other places, framerate is used, this place alone needs to be corrected.
I'd be glad to do this change and I wanted to do a pull request on it, however, the explanation files cannot be found in this repo. It contains the code for the tutorials. 💻
It is a small typo but I still thought of letting you know! 😅
When completing the number-guessing-game code along, I've managed to replicate the js code in the html template provided, exactly as it's directed. I've even compared the completed html doc in the same js directory and it's a match (except for the //comments I've added).
Somehow, I still get this error:
here is the code line:
guessSubmit.addEventListener('click', checkGuess);
Any idea what the issue could mean? I'm a very early-stage beginner so please bare with me!
Thank you!
There is 3 if statements, the first if statement will override the two next following if sentences:
if(daySelect.value === "") {
daySelect.value = previousDay - 1;
}
if(daySelect.value === "") {
daySelect.value = previousDay - 2;
}
if(daySelect.value === "") {
daySelect.value = previousDay - 3;
}
Github link (Line 149:):
https://github.com/mdn/learning-area/blob/master/html/forms/datetime-local-picker-fallback/index.html
Mozillas official site (last example - Line 70:):
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#JavaScript
To me, it looks like a error, what is the correct version?
Thanks :-)
On the previous sessions (HTML and CSS), Active Learning was followed by a clear interactive feature. In CSS, it's not that clear (see just before this link).
It took me a while to figure that "the above example" or "in our example" was about the previous images. At first sight, I assumed it was a load error. This new approach both breaks the clear standard adopted so far and the interactivity.
A solution would be linking the image.
Hi,
This commit fb60ed9#diff-0eab77173ff17cb7ef2c478598ec7739L9 removed all the HTML and made this course confusing:
https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Basics
@chrisdavidmills should we revert your commit?
Cheers
The index.html file (provided via a link to the zip file on github) already has a pretty good summary attribute, but the assessment guide says it doesn't.
mentions the link http://html5shiv.googlecode.com/svn/trunk/html5.js, but it's 404.
I am following the instructions for Inheritance in JavaScript. When I add the line:
Teacher.prototype = Object.create(Person.prototype);
to my code and attempt to validate using Object.getOwnPropertyNames(Teacher.prototype) I do not see the functions listed on the prototype. Furthermore, when I attempt to run Person.prototype.greeting() or Teacher.prototype.greeting() I get an error referencing this on line 84.
Cannot read property 'first' of undefined
at Object.Person.greeting (oojs-class-inheritance-start.html:84)
at :1:18
This also happens when I try the same with the finished version of this code.
It appears to be a scoping issue but I am too new to javascript just yet to analyze what is going wrong.
Thanks.
don't show 300w of image.
run as google
chrome--版本 57.0.2987.133 (64-bit).
Hello,
I am not able to run the example for third-party API as posted https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube.
The error i received from Chrome is 'Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').'
I did get a key from Google using the instructions on index.html. I have tried to debug, the error seems to come from gapi.client.load. Please help.
Cheers,
Hannah
Hello everyone,
Context :
Issue :
Error Code: NS_ERROR_DOM_MEDIA_METADATA_ERR (0x806e0006) Details: static MP4Metadata::ResultAndByteBuffer __cdecl mozilla::MP4Metadata::Metadata(mozilla::ByteStream *): Cannot parse metadata
Workaround :
Assumption :
Possible resolution :
Thanks in advance and have a nice day !
Valsaa
Hi All
Since I am new in this topic and like I can’t automatically play a video with sound because Autoplay policy of modern browsers rulers, I was looking for some solution for this one.
I read that I can easily solve this issue by forcing a user interaction before you start to playback the video( for example adding a black background with a Click to play button) for it, Could you help me and give the code to do it in my own html file?
Thanks for your time
Best Regards
Alejandro Castan
In https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia#Accessible_audio_and_video_controls it is stated that video/audio native controls aren't keyboard accessible, which might've been true in the early ears after browsers implementing these elements. But I don't think that's the case today, the controls are keyboard accessible in Chrome, and certainly other browsers. However I'm not sure about the accessible names of the controls as I didn't use a screen reader to test it.
Everywhere hummus is meant, the word humous is used instead. Webster doesn't know that one. Just sayin'. Also on https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals there is an image of this page with no structure that will also need to be fixed since it says humous.
See http://stackoverflow.com/questions/43785607/inheritance-of-properties-through-passing-constructor-parameters
In general it is a good practise not to perform side effects (random
) in constructors, but let the caller who creates the object do this.
Thanks for the IndexedDB example. Very helpful.
A minor suggestion: the database and object store are both called notes
. In Chrome DevTools this creates a situation where you see the same word to describe different things.
Not sure if it's more obvious in Firefox DevTools.
For instructional purposes it might be more clear if the DB was called notesDB
and the OS was called notesOS
.
In line 27 if I'm making it's value empty it is not working,
Something like this ('' => ' ')
input.value = ''; => input.value = " "; //this statement show's can't find if I left space in-between " "
In the eg code line 27 with space in-between (" ") and run the code, in input field 2nd try error occurs all the time
"Finished for now...
So that's it for building the example — you got to the end, well done! Try your final code out, or play with our finished version here. If you can't get the example to work, check it against the source code."
No javascript is included in the source code. Just, an "Add your Javascript here".
Should the "check it against the source code" include the following:
<script> var randomNumber = Math.floor(Math.random() * 100) + 1; var guesses = document.querySelector('.guesses'); var lastResult = document.querySelector('.lastResult'); var lowOrHi = document.querySelector('.lowOrHi'); var guessSubmit = document.querySelector('.guessSubmit'); var guessField = document.querySelector('.guessField'); var guessCount = 1; var resetButton; guessField.focus(); function checkGuess() { var userGuess = Number(guessField.value); if (guessCount === 1) { guesses.textContent = 'Previous guesses: '; } guesses.textContent += userGuess + ' '; if (userGuess === randomNumber) { lastResult.textContent = 'Congratulations! You got it right!'; lastResult.style.backgroundColor = 'green'; lowOrHi.textContent = ''; setGameOver(); } else if (guessCount === 10) { lastResult.textContent = '!!!GAME OVER!!!'; setGameOver(); } else { lastResult.textContent = 'Wrong!'; lastResult.style.backgroundColor = 'red'; if(userGuess < randomNumber) { lowOrHi.textContent = 'Last guess was too low!'; } else if(userGuess > randomNumber) { lowOrHi.textContent = 'Last guess was too high!'; } } guessCount++; guessField.value = ''; guessField.focus(); } guessSubmit.addEventListener('click', checkGuess); function setGameOver() { guessField.disabled = true; guessSubmit.disabled = true; resetButton = document.createElement('button'); resetButton.textContent = 'Start new game'; document.body.appendChild(resetButton); resetButton.addEventListener('click', resetGame); } function resetGame() { guessCount = 1; var resetParas = document.querySelectorAll('.resultParas p'); for (var i = 0 ; i < resetParas.length ; i++) { resetParas[i].textContent = ''; } resetButton.parentNode.removeChild(resetButton); guessField.disabled = false; guessSubmit.disabled = false; guessField.value = ''; guessField.focus(); lastResult.style.backgroundColor = 'white'; randomNumber = Math.floor(Math.random() * 100) + 1; } </script>Hi,
I have been studying simple-fetch.html and simple-fetch-chained.html examples in JS - asynchronous - promises section. They are very good tutorial, thank you.
However, I have discovered that there is an issue with the fetch() method. When the code runs, it returns the following message in the console. (Note: I save my html and jpg files on my desktop.)
Fetch API cannot load file:///Users/apple/Desktop/coffee.jpg. URL scheme must be "http" or "https" for CORS request.
It seems like we must use an image that is stored online, otherwise it won't work. I have tried to use fetch("https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/coffee.jpg") and it is blocked and failed.
My workaround is to use a pseudo image URL (eg. https://picsum.photos/200/300) from https://picsum.photos.
Just want to point this out, cheers.
为什么这儿点击delete按钮,remove(listItem)删除的就是的当前delete按钮所在的li标签了呢?
Hello!
Learning with MDN involves to download files like examples or starter code from the learning area's repository. Instead of doing this one by one, I wanted to clone the entire repository and just browse it locally. This is not for contributions purpose. Is it allowed and if so, do I need to fork the repo first ?
Thanks you.
I want to help keep the website up to date and inform you that the given solution is not correct for the given instructions above:
https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form#frame_A_payment_form
HI,
I tried reproducing your work but the browser throws the Not-a-function error on line 14 in the Javascript file learning-area/javascript/building-blocks/gallery/main.js
I wish how it could be worked around. Am using firefox 60.0.1 on linux
I am learning javascript, and here: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions
If you read down a little bit, it says "This effectively gives the variable a name; you can also assign the function to be the value of multiple variables, for example:" shouldn't it instead say "This effectively gives the function a name; you can also assign the function to be the value of multiple variables, for example:"
According to the marking guide one should wrap both addresses at the top each in an <address>
element.
https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-finished/marking-guide.md
Isn't that wrong? In MDN it states:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address
According to this, wrapping the second address (Miss Eileen Dover) in an <address>
element is definitely wrong.
I'm not sure about the first address (Dr. Eleanor Gaye), but I think it's okay, because it's the author of the letter.
As of January 1 2019, Mozilla requires that all GitHub projects include this CODE_OF_CONDUCT.md file in the project root. The file has two parts:
If you have any questions about this file, or Code of Conduct policies and procedures, please see Mozilla-GitHub-Standards or email [email protected].
(Message COC001)
both nytimes/index.html and nytimes/nytimes_start.html are using var instead of const or let.
I have created a local branch with fixes and tested.
Also 2 vars submitBtn and playNav aren't used so I commented them out.
Can I push them to the repository?
As title.
Reproduce link: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods
I didn't see this anything about animations in CSS guides. How about adding it there? I can create a pull request if maintainers of this repo agree with the idea.
P.S. Thank you for the wonderful work you have done. It has been very helpful.
In the last example of How to structure an HTML form, the description describes an <input>
element of type date
for the CC expiration date. It mentions how this input type will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers.
But the code example has only a plain text input element. This is confusing.
I'm not sure if this is the correct place to report this; please let me know if so. Thanks
I was studying loops on https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code and they say you can exit a loop with break but if I remove the break statement on the code, the code works just the same. So what's the purpose of brek in the example?
I am following https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Setting_up_Node_and_npm step by step. I have overcome most problems, seemingly down to the way NPM has been installed on my W10 machine, but I am stuck on the error "TypeError: gulp.task is not a function". I can't tell if this is because i have made a mistake somewhere or if i am calling an out of date / deprecated function on a newer version of npm. Is it possible to get a copy of a working sample for the full gulpfil.js please? Mine is attached.
gulpfile.js.txt
Typo on line 43, should be "second".
The map isn't showing correctly. It seems like the API key has limited requests.
https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html
https://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html
After walking through the HTML Table Basics Article and learning how to style using HTML <col>
and colgroup>
elements I could not get my styles to show up by placing them in .
After visiting Stack Overflow it seems they're not supported and the current recommendation is to use CSS classes, however redundant that is.
Am I missing something?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.