From 3398068fd58abeb5dd823bd90d2a19222db70093 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Fri, 25 Oct 2024 16:50:19 +0100 Subject: [PATCH 01/85] fix links --- files/en-us/_redirects.txt | 41 +- files/en-us/_wikihistory.json | 1263 ++++++++--------- .../2d_breakout_game_phaser/index.md | 2 +- .../2d_breakout_game_pure_javascript/index.md | 2 +- .../available_text_editors/index.md | 2 +- .../how_much_does_it_cost/index.md | 2 +- .../upload_files_to_a_web_server/index.md | 6 +- .../what_are_browser_developer_tools/index.md | 2 +- .../what_software_do_i_need/index.md | 2 +- .../how_does_the_internet_work/index.md | 4 +- .../common_questions/web_mechanics/index.md | 2 +- .../what_are_hyperlinks/index.md | 2 +- .../what_is_a_web_server/index.md | 2 +- .../backgrounds_and_borders/index.md | 4 +- .../cascade_and_inheritance/index.md | 4 +- .../building_blocks/debugging_css/index.md | 4 +- .../index.md | 4 +- .../images_media_form_elements/index.md | 4 +- .../en-us/learn/css/building_blocks/index.md | 2 +- .../css/building_blocks/organizing/index.md | 4 +- .../overflowing_content/index.md | 4 +- .../selectors/attribute_selectors/index.md | 4 +- .../selectors/combinators/index.md | 4 +- .../css/building_blocks/selectors/index.md | 4 +- .../index.md | 4 +- .../type_class_and_id_selectors/index.md | 4 +- .../sizing_items_in_css/index.md | 4 +- .../building_blocks/the_box_model/index.md | 4 +- .../building_blocks/values_and_units/index.md | 4 +- .../practical_positioning_examples/index.md | 2 +- .../css/first_steps/getting_started/index.md | 4 +- .../how_css_is_structured/index.md | 4 +- .../css/first_steps/how_css_works/index.md | 4 +- files/en-us/learn/css/first_steps/index.md | 2 +- .../css/first_steps/what_is_css/index.md | 4 +- files/en-us/learn/css/index.md | 4 +- .../dealing_with_files/index.md | 91 -- .../add_a_hit_map_on_top_of_an_image/index.md | 2 +- .../howto/define_terms_with_html/index.md | 2 +- .../use_javascript_within_a_webpage/index.md | 4 +- files/en-us/learn/html/index.md | 4 +- .../getting_started/index.md | 2 +- .../learn/html/introduction_to_html/index.md | 2 +- .../images_in_html/index.md | 4 +- .../other_embedding_technologies/index.md | 4 +- .../video_and_audio_content/index.md | 4 +- files/en-us/learn/index.md | 4 +- .../learn/javascript/first_steps/index.md | 2 +- files/en-us/learn/javascript/index.md | 2 +- .../first_steps/fractions_and_roots/index.md | 4 +- .../first_steps/getting_started/index.md | 4 +- files/en-us/learn/mathml/first_steps/index.md | 2 +- .../learn/mathml/first_steps/scripts/index.md | 4 +- .../learn/mathml/first_steps/tables/index.md | 4 +- .../first_steps/text_containers/index.md | 4 +- files/en-us/learn/mathml/index.md | 2 +- .../business_case_for_performance/index.md | 2 +- files/en-us/learn/performance/css/index.md | 4 +- files/en-us/learn/performance/html/index.md | 4 +- files/en-us/learn/performance/index.md | 2 +- .../learn/performance/javascript/index.md | 4 +- .../measuring_performance/index.md | 4 +- .../learn/performance/multimedia/index.md | 4 +- .../perceived_performance/index.md | 4 +- files/en-us/learn/performance/video/index.md | 4 +- .../what_is_web_performance/index.md | 4 +- .../performance/why_web_performance/index.md | 4 +- .../learn/server-side/express_nodejs/index.md | 2 +- .../angular_building/index.md | 2 +- .../angular_filtering/index.md | 2 +- .../angular_getting_started/index.md | 2 +- .../angular_item_component/index.md | 2 +- .../angular_styling/index.md | 2 +- .../angular_todo_list_beginning/index.md | 2 +- .../ember_conditional_footer/index.md | 2 +- .../ember_getting_started/index.md | 4 +- .../ember_interactivity_events_state/index.md | 2 +- .../ember_resources/index.md | 2 +- .../ember_routing/index.md | 2 +- .../ember_structure_componentization/index.md | 2 +- .../react_accessibility/index.md | 2 +- .../react_components/index.md | 2 +- .../react_getting_started/index.md | 4 +- .../react_interactivity_events_state/index.md | 2 +- .../index.md | 2 +- .../react_resources/index.md | 2 +- .../react_todo_list_beginning/index.md | 2 +- .../svelte_components/index.md | 2 +- .../svelte_deployment_next/index.md | 2 +- .../svelte_getting_started/index.md | 4 +- .../index.md | 2 +- .../svelte_stores/index.md | 2 +- .../svelte_todo_list_beginning/index.md | 2 +- .../svelte_typescript/index.md | 2 +- .../svelte_variables_props/index.md | 2 +- .../vue_computed_properties/index.md | 2 +- .../vue_conditional_rendering/index.md | 2 +- .../vue_first_component/index.md | 2 +- .../vue_getting_started/index.md | 4 +- .../vue_methods_events_models/index.md | 2 +- .../vue_refs_focus_management/index.md | 2 +- .../vue_rendering_lists/index.md | 2 +- .../vue_resources/index.md | 2 +- .../vue_styling/index.md | 2 +- .../understanding_client-side_tools/index.md | 2 +- .../learn_web_development/changelog/index.md | 9 + .../en-us/learn_web_development/core/index.md | 9 + .../learn_web_development/educators/index.md | 9 + .../learn_web_development/extensions/index.md | 9 + .../browsing_the_web}/index.md | 54 +- .../browsing_the_web/search-engine.jpg | Bin 0 -> 15808 bytes .../browsing_the_web/web-page.jpg | Bin 0 -> 15562 bytes .../browsing_the_web/web-site.jpg | Bin 0 -> 27954 bytes .../environment_setup/code_editors/index.md | 73 + .../command_line/glitch.png | Bin .../environment_setup}/command_line/index.md | 29 +- .../command_line/mac-terminal.png | Bin .../command_line/mac-terminals-ls.png | Bin .../command_line/npm-install-option.png | Bin .../command_line/win-terminals-cd.png | Bin .../command_line/win-terminals.png | Bin .../environment_setup}/command_line/wsl.png | Bin .../dealing_with_files/file-structure.png | Bin .../dealing_with_files/index.md | 120 ++ .../dealing_with_files/website-screenshot.png | Bin .../environment_setup/index.md | 40 + .../installing_software}/index.md | 51 +- .../getting_started/index.md | 20 + .../css_basics/box-model.png | Bin .../your_first_website}/css_basics/boxes.jpg | Bin .../css_basics/css-declaration-small.png | Bin .../your_first_website}/css_basics/index.md | 12 +- .../css_basics/website-screenshot-final.png | Bin .../website-screenshot-font-small.png | Bin .../css_basics/website-screenshot-styled.png | Bin .../how_the_web_works/index.md | 4 +- .../how_the_web_works/road.jpg | Bin .../simple-client-server.png | Bin .../html_basics/alt-text-example.png | Bin .../html_basics/finished-test-page-small.png | Bin .../grumpy-cat-attribute-small.png | Bin .../html_basics/grumpy-cat-small.png | Bin .../your_first_website}/html_basics/index.md | 12 +- .../your_first_website}/index.md | 42 +- .../javascript_basics/hello-world.png | Bin .../javascript_basics/index.md | 4 +- .../website-screen-scripted.png | Bin .../publishing_your_website/ftp.jpg | Bin .../github-create-repo.png | Bin .../publishing_your_website/index.md | 4 +- .../publishing_your_website/jsbin-screen.png | Bin .../the_web_and_web_standards/index.md | 6 +- .../color-picker.png | Bin .../what_will_your_website_look_like/index.md | 47 +- .../updated-google-images-licensing.png | Bin .../updated-google-images.png | Bin .../website-drawing-scan.png | Bin files/en-us/learn_web_development/index.md | 57 + .../your_first_webextension/index.md | 2 +- files/en-us/related/imsc/basics/index.md | 2 +- files/en-us/web/css/index.md | 2 +- files/en-us/web/css/tutorials/index.md | 2 +- files/en-us/web/guide/index.md | 2 +- files/en-us/web/html/index.md | 2 +- .../cycletracker/html_and_css/index.md | 2 +- files/en-us/web/tutorials/index.md | 6 +- 166 files changed, 1303 insertions(+), 1021 deletions(-) delete mode 100644 files/en-us/learn/getting_started_with_the_web/dealing_with_files/index.md create mode 100644 files/en-us/learn_web_development/changelog/index.md create mode 100644 files/en-us/learn_web_development/core/index.md create mode 100644 files/en-us/learn_web_development/educators/index.md create mode 100644 files/en-us/learn_web_development/extensions/index.md rename files/en-us/{learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines => learn_web_development/getting_started/environment_setup/browsing_the_web}/index.md (78%) create mode 100644 files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/search-engine.jpg create mode 100644 files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/web-page.jpg create mode 100644 files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/web-site.jpg create mode 100644 files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md rename files/en-us/{learn/tools_and_testing/understanding_client-side_tools => learn_web_development/getting_started/environment_setup}/command_line/glitch.png (100%) rename files/en-us/{learn/tools_and_testing/understanding_client-side_tools => learn_web_development/getting_started/environment_setup}/command_line/index.md (94%) rename files/en-us/{learn/tools_and_testing/understanding_client-side_tools => learn_web_development/getting_started/environment_setup}/command_line/mac-terminal.png (100%) rename files/en-us/{learn/tools_and_testing/understanding_client-side_tools => learn_web_development/getting_started/environment_setup}/command_line/mac-terminals-ls.png (100%) rename files/en-us/{learn/tools_and_testing/understanding_client-side_tools => learn_web_development/getting_started/environment_setup}/command_line/npm-install-option.png (100%) rename files/en-us/{learn/tools_and_testing/understanding_client-side_tools => learn_web_development/getting_started/environment_setup}/command_line/win-terminals-cd.png (100%) rename files/en-us/{learn/tools_and_testing/understanding_client-side_tools => learn_web_development/getting_started/environment_setup}/command_line/win-terminals.png (100%) rename files/en-us/{learn/tools_and_testing/understanding_client-side_tools => learn_web_development/getting_started/environment_setup}/command_line/wsl.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/environment_setup}/dealing_with_files/file-structure.png (100%) create mode 100644 files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/environment_setup}/dealing_with_files/website-screenshot.png (100%) create mode 100644 files/en-us/learn_web_development/getting_started/environment_setup/index.md rename files/en-us/{learn/getting_started_with_the_web/installing_basic_software => learn_web_development/getting_started/environment_setup/installing_software}/index.md (69%) create mode 100644 files/en-us/learn_web_development/getting_started/index.md rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/css_basics/box-model.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/css_basics/boxes.jpg (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/css_basics/css-declaration-small.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/css_basics/index.md (91%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/css_basics/website-screenshot-final.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/css_basics/website-screenshot-font-small.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/css_basics/website-screenshot-styled.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/how_the_web_works/index.md (98%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/how_the_web_works/road.jpg (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/how_the_web_works/simple-client-server.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/html_basics/alt-text-example.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/html_basics/finished-test-page-small.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/html_basics/grumpy-cat-attribute-small.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/html_basics/grumpy-cat-small.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/html_basics/index.md (94%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/index.md (50%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/javascript_basics/hello-world.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/javascript_basics/index.md (99%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/javascript_basics/website-screen-scripted.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/publishing_your_website/ftp.jpg (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/publishing_your_website/github-create-repo.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/publishing_your_website/index.md (98%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/publishing_your_website/jsbin-screen.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/the_web_and_web_standards/index.md (98%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/what_will_your_website_look_like/color-picker.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/what_will_your_website_look_like/index.md (80%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/what_will_your_website_look_like/updated-google-images-licensing.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/what_will_your_website_look_like/updated-google-images.png (100%) rename files/en-us/{learn/getting_started_with_the_web => learn_web_development/getting_started/your_first_website}/what_will_your_website_look_like/website-drawing-scan.png (100%) create mode 100644 files/en-us/learn_web_development/index.md diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index a5545b4e1cc5251..7ec60d768ee9bd3 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -4047,7 +4047,7 @@ /en-US/docs/JavaScript/About_JavaScript /en-US/docs/Web/JavaScript /en-US/docs/JavaScript/Data_structures /en-US/docs/Web/JavaScript/Data_structures /en-US/docs/JavaScript/DedicatedWorkerGlobalScope /en-US/docs/Web/API/DedicatedWorkerGlobalScope -/en-US/docs/JavaScript/Getting_Started /en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics +/en-US/docs/JavaScript/Getting_Started /en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics /en-US/docs/JavaScript/Glossary /en-US/docs/Glossary /en-US/docs/JavaScript/Guide /en-US/docs/Web/JavaScript/Guide /en-US/docs/JavaScript/Guide/About /en-US/docs/Web/JavaScript/Guide/Introduction @@ -4706,7 +4706,7 @@ /en-US/docs/JavaScript/Typed_arrays/Uint32Array /en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array /en-US/docs/JavaScript/Typed_arrays/Uint8Array /en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array /en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray /en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray -/en-US/docs/JavaScript:Getting_Started /en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics +/en-US/docs/JavaScript:Getting_Started /en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics /en-US/docs/JavaScriptREAPI /en-US/docs/Web /en-US/docs/JavaScript_API/navigator.mozApps.mgmt.addEventListener /en-US/docs/Web/API/EventTarget/addEventListener /en-US/docs/JavaScript_API/navigator.mozApps.mgmt.removeEventListener /en-US/docs/Web/API/EventTarget/removeEventListener @@ -4714,7 +4714,7 @@ /en-US/docs/JavaScript_Documention/A_re-introduction_to_JavaScript /en-US/docs/Web/JavaScript/Language_overview /en-US/docs/JavaScript_Documention/About_JavaScript /en-US/docs/Web/JavaScript /en-US/docs/JavaScript_Documention/Data_structures /en-US/docs/Web/JavaScript/Data_structures -/en-US/docs/JavaScript_Documention/Getting_Started /en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics +/en-US/docs/JavaScript_Documention/Getting_Started /en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics /en-US/docs/JavaScript_Documention/Glossary /en-US/docs/Glossary /en-US/docs/JavaScript_Documention/Guide /en-US/docs/Web/JavaScript/Guide /en-US/docs/JavaScript_Documention/Guide/About /en-US/docs/Web/JavaScript/Guide/Introduction @@ -5209,11 +5209,12 @@ /en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine /en-US/docs/Learn/Common_questions/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine /en-US/docs/Learn/Common_questions/How_does_the_Internet_work /en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work /en-US/docs/Learn/Common_questions/How_much_does_it_cost /en-US/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost -/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines /en-US/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines +/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web /en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment /en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server /en-US/docs/Learn/Common_questions/Thinking_before_coding /en-US/docs/Learn/Common_questions/Design_and_accessibility/Thinking_before_coding /en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server /en-US/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server /en-US/docs/Learn/Common_questions/Using_Github_pages /en-US/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages +/en-US/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web /en-US/docs/Learn/Common_questions/What_are_browser_developer_tools /en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools /en-US/docs/Learn/Common_questions/What_are_hyperlinks /en-US/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks /en-US/docs/Learn/Common_questions/What_is_a_URL /en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL @@ -5246,9 +5247,19 @@ /en-US/docs/Learn/Forms/Your_first_HTML_form/Example /en-US/docs/Learn/Forms/Your_first_form /en-US/docs/Learn/Forms/Your_first_form/Example /en-US/docs/Learn/Forms/Your_first_form /en-US/docs/Learn/Front-end_web_developer https://developer.mozilla.org/en-US/curriculum/ -/en-US/docs/Learn/Getting_started_with_the_web/How_to_set_up_your_work_environment /en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software -/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_web_site /en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website -/en-US/docs/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like /en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like +/en-US/docs/Learn/Getting_started_with_the_web /en-US/docs/Learn_web_development/Getting_started/Your_first_website +/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics /en-US/docs/Learn_web_development/Getting_started/Your_first_website/CSS_basics +/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files +/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics /en-US/docs/Learn_web_development/Getting_started/Your_first_website/HTML_basics +/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works /en-US/docs/Learn_web_development/Getting_started/Your_first_website/How_the_Web_works +/en-US/docs/Learn/Getting_started_with_the_web/How_to_set_up_your_work_environment /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software +/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software +/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics /en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics +/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_web_site /en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website +/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website /en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website +/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards /en-US/docs/Learn_web_development/Getting_started/Your_first_website/The_web_and_web_standards +/en-US/docs/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like /en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like +/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like /en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like /en-US/docs/Learn/GitHub /en-US/docs/Learn/Tools_and_testing/GitHub /en-US/docs/Learn/HTML/Element /en-US/docs/Learn/HTML/Howto /en-US/docs/Learn/HTML/Element/abbr /en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations @@ -5299,14 +5310,14 @@ /en-US/docs/Learn/HTML/Howto/abbr /en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations /en-US/docs/Learn/HTML/Introduction_to_HTML/The_HTML_head /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML /en-US/docs/Learn/HTML/Tables/Structing_planet_data /en-US/docs/Learn/HTML/Tables/Structuring_planet_data -/en-US/docs/Learn/HTML/Write_a_simple_page_in_HTML /en-US/docs/Learn/Getting_started_with_the_web +/en-US/docs/Learn/HTML/Write_a_simple_page_in_HTML /en-US/docs/Learn_web_development/Getting_started/Your_first_website /en-US/docs/Learn/HTML/XHTML /en-US/docs/Glossary/XHTML /en-US/docs/Learn/How_TCP_IP_works /en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work /en-US/docs/Learn/How_much_does_it_cost /en-US/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost /en-US/docs/Learn/How_networks_talk_with_each_other /en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work /en-US/docs/Learn/How_the_Internet_works /en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work -/en-US/docs/Learn/How_to_create_an_HTML_document /en-US/docs/Learn/Getting_started_with_the_web -/en-US/docs/Learn/How_web_pages_work /en-US/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines +/en-US/docs/Learn/How_to_create_an_HTML_document /en-US/docs/Learn_web_development/Getting_started/Your_first_website +/en-US/docs/Learn/How_web_pages_work /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web /en-US/docs/Learn/Index /en-US/docs/Learn /en-US/docs/Learn/Infrastructure /en-US/docs/Learn/Common_questions /en-US/docs/Learn/JavaScript/Asynchronous/Async_await /en-US/docs/Learn/JavaScript/Asynchronous/Promises @@ -5336,9 +5347,9 @@ /en-US/docs/Learn/JavaScript/Objects/Introduction /en-US/docs/Learn/JavaScript/Objects/Basics /en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS /en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript /en-US/docs/Learn/JavaScript/Objects/Object_building_practise /en-US/docs/Learn/JavaScript/Objects/Object_building_practice -/en-US/docs/Learn/Open_a_file_in_a_browser /en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files +/en-US/docs/Learn/Open_a_file_in_a_browser /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files /en-US/docs/Learn/Other_learning_material /en-US/docs/Learn -/en-US/docs/Learn/Pages_sites_servers_and_search_engines /en-US/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines +/en-US/docs/Learn/Pages_sites_servers_and_search_engines /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web /en-US/docs/Learn/Performance/Animation_performance_and_frame_rate /en-US/docs/Web/Performance/Animation_performance_and_frame_rate /en-US/docs/Learn/Performance/CSS_performance /en-US/docs/Learn/Performance/CSS /en-US/docs/Learn/Performance/HTML_Performance_Features /en-US/docs/Learn/Performance/HTML @@ -5364,6 +5375,7 @@ /en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs /en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL /en-US/docs/Learn/Skills/Web_Mechanics /en-US/docs/Learn/Common_questions /en-US/docs/Learn/Thinking_before_coding /en-US/docs/Learn/Common_questions/Design_and_accessibility/Thinking_before_coding +/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line /en-US/docs/Learn/Understanding_URLs /en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL /en-US/docs/Learn/Understanding_domain_names /en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name /en-US/docs/Learn/Understanding_links_on_the_web /en-US/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks @@ -5390,11 +5402,12 @@ /en-US/docs/Learn/What_is_a_web_server /en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server /en-US/docs/Learn/What_is_accessibility /en-US/docs/Learn/Common_questions/Design_and_accessibility/What_is_accessibility /en-US/docs/Learn/What_software_do_I_need /en-US/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need -/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine /en-US/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines +/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web /en-US/docs/Learn/skills /en-US/docs/Learn /en-US/docs/Learn/skills/Infrastructure/Undersanding_URLs /en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL /en-US/docs/Learn/tutorial /en-US/docs/Learn /en-US/docs/Learn/tutorial/How_to_build_a_web_site /en-US/docs/Learn +/en-US/docs/Learn_web_development/Getting_started/Basic_setup /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software /en-US/docs/Liberty!_Equality!_Validity! /en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML /en-US/docs/Link_prefetching_FAQ /en-US/docs/Glossary/Prefetch /en-US/docs/Localization /en-US/docs/Glossary/Localization @@ -12379,7 +12392,7 @@ /en-US/docs/Web/JavaScript/DedicatedWorkerGlobalScope /en-US/docs/Web/API/DedicatedWorkerGlobalScope /en-US/docs/Web/JavaScript/Equality_comparisons_and_when_to_use_them /en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness /en-US/docs/Web/JavaScript/EventLoop /en-US/docs/Web/JavaScript/Event_loop -/en-US/docs/Web/JavaScript/Getting_Started /en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics +/en-US/docs/Web/JavaScript/Getting_Started /en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics /en-US/docs/Web/JavaScript/Glossary /en-US/docs/Glossary /en-US/docs/Web/JavaScript/Guide/About /en-US/docs/Web/JavaScript/Guide/Introduction /en-US/docs/Web/JavaScript/Guide/Closures /en-US/docs/Web/JavaScript/Closures diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 62927eab5bedeb1..add9434664ad3bb 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -7152,31 +7152,6 @@ "kscarfone" ] }, - "Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines": { - "modified": "2020-07-16T22:35:39.329Z", - "contributors": [ - "lghiggino", - "mfuji09", - "mammothb", - "Nucleomante", - "Patricio_Raschetti", - "chrisdavidmills", - "Gitthuma", - "bminard", - "haiku11000", - "agnelvishal", - "Gordon-Bleu", - "jswisher", - "AVRILALEJANDRO", - "vikhyat", - "ladyNinja86", - "dagolinuxoid", - "Sheppy", - "xfq", - "Jeremie", - "Andrew_Pfeiffer" - ] - }, "Learn/Common_questions/Web_mechanics/What_are_hyperlinks": { "modified": "2020-07-16T22:35:42.757Z", "contributors": [ @@ -7804,504 +7779,71 @@ "icyfenix" ] }, - "Learn/Getting_started_with_the_web": { - "modified": "2020-12-07T11:57:48.782Z", - "contributors": [ - "SphinxKnight", - "mr.sithuaung", - "burakizmirli252", - "marismiglans8", - "jessica.kolek", - "chrisdavidmills", - "SinEstres", - "pe.minuta.78", - "iamadityashekhar", - "Javi-21", - "K-D", - "gamma.mahdii", - "maeeel968", - "hakannakliyat", - "kmavrikakis", - "harpaljadon", - "PatrickDGarvey", - "johnsmith1554", - "kakwanisiddharth", - "kenj115188", - "shilili", - "burgess25", - "EvenC", - "mfuji09", - "james-rhodus", - "smoothie1998", - "fox-lucas", - "stevedav", - "SimDrifT", - "CodeDotJS", - "dartvaneri", - "Jenna59", - "Alihoday", - "Sibiraj-S", - "hadleyel", - "wh1msy", - "kaiarifin", - "Zh1hu1", - "Jom97", - "gleidiin", - "aquddos", - "Jeremie", - "jswisher", - "pheakvoin", - "jam1985", - "EnriquePabloBarreraVega", - "BychekRU", - "rpettit686", - "jsx", - "Trontin", - "LeBasti", - "arbatskiy", - "pravinbudharap", - "dileep.ch", - "Sheppy", - "Andrew_Pfeiffer", - "klez" - ] - }, - "Learn/Getting_started_with_the_web/CSS_basics": { - "modified": "2020-11-20T01:08:35.890Z", - "contributors": [ - "schalkneethling", - "chrisdavidmills", - "thelovekesh", - "winst", - "dcompcoder", - "ohaver", - "ngaydainuocmat304", - "Azzedine2020", - "LordZarano", - "RicardsVeveris", - "naser-baig", - "forrest.lyu.it", - "zzhhbyt1", - "rachelcarmena", - "ezrinjaz", - "edprince", - "bhuvy2", - "smoothie1998", - "oyenirat", - "jdblischak", - "jswisher", - "terevele", - "102", - "lui247", - "IMLERICH", - "ry0id", - "suterj", - "q3229270", - "MohamedSalah1998", - "hadleyel", - "thanhtran92", - "Looserof7", - "Jeremie", - "MightyBranch", - "SphinxKnight", - "jackarmley", - "odsantos", - "Andrew_Pfeiffer", - "xfq" - ] - }, - "Learn/Getting_started_with_the_web/Dealing_with_files": { - "modified": "2020-12-04T18:44:16.263Z", + "Learn/HTML": { + "modified": "2020-10-13T05:26:50.329Z", "contributors": [ - "Seeeven7", - "philou", - "xandora", - "adilalsalmi2013", - "irenesmith", - "riceh3", - "msobanjo", - "smoothie1998", + "gdsimoes", "chrisdavidmills", - "dangvancuong", + "alhyrym05", + "murphychen", "SphinxKnight", - "knows1", - "qadero", + "www-wanglong", + "mikeongor693", + "RayPL", + "RafeyIqbalRahman", + "Sheppy", "stephaniehobson", - "agnelvishal", - "afishop", + "asger12345", + "TornadoIDS", "hadleyel", - "Goldfish", - "shoelaces", + "jdescottes", + "dcondrey", + "jsx", + "hui", "Jeremie", - "ifilin", - "Ojas_A", "Andrew_Pfeiffer", - "yokimbo", - "Sheppy", - "SueSmith" + "fscholz" ] }, - "Learn/Getting_started_with_the_web/HTML_basics": { - "modified": "2020-11-13T05:59:27.045Z", + "Learn/HTML/Cheatsheet": { + "modified": "2020-07-16T22:22:43.887Z", "contributors": [ - "SphinxKnight", - "mpmadhubhashana8", - "chrisdavidmills", - "advancel", + "Yel-Martinez-Consultor-Seo", "sideshowbarker", - "thelovekesh", - "dcompcoder", - "adatapost", - "donnal4", - "shilili", - "P1xt", - "a4anandsingh", - "bminard", - "Chomchaum", - "rachelcarmena", - "dwvisser", - "maria-rubina", - "thekosiguy", - "smoothie1998", - "RafeyIqbalRahman", - "thoughtbyte", - "Sheppy", - "arai", - "DragMeToProgramming", - "moslyke", - "datdathcmutrans", - "suterj", - "rajasrijanakiraman", + "verde79", + "sksankarraj", "Quantzilla", - "q3229270", + "Johanancuriel", + "SethClydesdale", + "arkanciscan", + "khalid32", "jswisher", - "explosive1111", - "Maruti-Ram", - "Sharoon_Francis", - "Mastermind9513", - "rishikant-sharma", - "hahaf313", - "jwhitlock", - "hadleyel", - "Tanvir-rahman", - "mishkadoma", - "Jeremie", - "Cameron-Riecan", - "klez", - "tcyyky", - "MightyBranch", - "Carmelina", - "manderton", - "jlin", - "karyse", - "NickPapayiannakis", - "odsantos", - "xfq", - "jsx" + "fachrulrazy", + "Andrew_Pfeiffer", + "SphinxKnight", + "dvincent", + "hbloomer", + "chadsansing", + "Jeremie" ] }, - "Learn/Getting_started_with_the_web/How_the_Web_works": { - "modified": "2020-07-17T10:00:52.022Z", + "Learn/HTML/Howto": { + "modified": "2020-07-16T22:22:27.700Z", "contributors": [ - "黄晓生", "chrisdavidmills", - "SphinxKnight", - "gepanther", - "jamesdhurd", - "ChaltinPagan", - "Ndikubwayo", - "prajwalkk", - "wilhelmtell", - "hadleyel", - "david_ross", - "AlexanderJohn", - "CommonSnowFlake", + "RafeyIqbalRahman", + "mrmowji", + "ishan123456789", "Jeremie", - "corderophilosophy", - "klez", - "marlon7", - "diogeneshamilton", - "xfq", "Andrew_Pfeiffer" ] }, - "Learn/Getting_started_with_the_web/Installing_basic_software": { - "modified": "2020-11-19T18:44:49.700Z", - "contributors": [ - "hughcrt", - "darby", - "chrisdavidmills", - "dd-pardal", - "darkwebster", - "rl2999", - "dineshram", - "SphinxKnight", - "PatrickDGarvey", - "Izzaldin", - "flexcapacitor", - "donnal4", - "robmuh", - "juanromoit", - "lol-russo", - "paszesoft", - "wi24rd", - "smoothie1998", - "bittualam.in", - "CSP-CODER", - "stevedav", - "rameezripon", - "CodeDotJS", - "Pichchayut", - "S-Dey", - "stephaniehobson", - "momdo", - "kubosho_", - "hadleyel", - "jk777", - "evaferreira", - "zizau_", - "Sheppy", - "saurabh95", - "KindRacoon", - "ownsourcing", - "alirobe", - "Jeremie", - "antoniogarcia78", - "platy11", - "goto.prototype", - "kgriff24", - "jsx", - "Jackie_Tang", - "Lisa", - "KamranMackey", - "xfq", - "pseudosavant", - "artmees", - "Andrew_Pfeiffer" - ] - }, - "Learn/Getting_started_with_the_web/JavaScript_basics": { - "modified": "2020-12-13T20:40:46.411Z", - "contributors": [ - "bershanskiy", - "Arpitgoyalgg", - "ekaradag14", - "bytensky", - "SphinxKnight", - "winst", - "chrisdavidmills", - "mrmowji", - "Vjakupi", - "blinkous", - "biglyy", - "ohaver", - "Azzedine2020", - "jewellscott", - "radiocane", - "cogpark", - "BusiPlay", - "albanafmeti", - "InfusOnWoW", - "JonDevOps", - "bukowski73", - "badcat", - "saranshgupta1995", - "snehseel", - "taoranz", - "JawnMarc", - "julianschacher", - "gam271", - "rachelcarmena", - "DhruvDh", - "wrongsyntax", - "zzhhbyt1", - "shilili", - "pcuambe", - "bittualam.in", - "akashchy1705", - "ToshitaSingh", - "mathieucaroff", - "latinatsw28", - "Afzalafu", - "sigoa", - "trannguyenhb", - "Juchuhsu", - "lokesh-krishna", - "fscholz", - "stephaniehobson", - "Pointy", - "saud12", - "scuesta", - "SHUBHAMTRIPATH", - "dipu2013", - "Greedsy", - "Master-Osaro", - "hadleyel", - "ku3nsting", - "frankfang1990", - "prakashkmrchy", - "suriyaa", - "AprilMorone", - "lol-russo", - "mishkadoma", - "Jeremie", - "david_ross", - "dagolinuxoid", - "klez", - "Radi123", - "alexbaumgertner", - "hrishikeshbarman", - "mseyne", - "stuart", - "jswisher", - "javabuddy", - "garrettgrimsley", - "verpixelt", - "xfq", - "Andrew_Pfeiffer", - "netbun", - "pbschmid", - "sunilchahal", - "brnold", - "sethmcknight", - "nahero", - "teoli", - "michaelnetbiz", - "chrisdavidmills-github" - ] - }, - "Learn/Getting_started_with_the_web/Publishing_your_website": { - "modified": "2020-10-07T04:02:16.924Z", - "contributors": [ - "Mori", - "ohaver", - "chrisdavidmills", - "Iqbalh11", - "kakwanisiddharth", - "naser-baig", - "Rick-Manarauskis", - "SphinxKnight", - "14122712", - "iamsamwilson", - "Greedsy", - "hadleyel", - "jk777", - "Jeremie", - "klez", - "ifilin", - "xfq", - "samlaf", - "markg", - "Andrew_Pfeiffer", - "manasmahodaya" - ] - }, - "Learn/Getting_started_with_the_web/The_web_and_web_standards": { - "modified": "2020-10-25T23:30:38.501Z", - "contributors": [ - "philou", - "Nachec", - "chrisdavidmills", - "chaitanya", - "onurbasturk", - "dcompcoder", - "DevForrestLyu" - ] - }, - "Learn/Getting_started_with_the_web/What_will_your_website_look_like": { - "modified": "2020-07-16T22:34:13.192Z", - "contributors": [ - "chrisdavidmills", - "NavetsArev", - "mfuji09", - "bduguma", - "ezrinjaz", - "IzaS", - "jbrandes", - "msobanjo", - "aboagyed", - "smoothie1998", - "RafeyIqbalRahman", - "Xyde", - "stephaniehobson", - "Lilmisscrafty116", - "RichardsonVJohnson", - "hadleyel", - "Jeremie", - "MashKao", - "klez", - "dvincent", - "ifilin", - "SphinxKnight", - "xfq", - "Andrew_Pfeiffer" - ] - }, - "Learn/HTML": { - "modified": "2020-10-13T05:26:50.329Z", - "contributors": [ - "gdsimoes", - "chrisdavidmills", - "alhyrym05", - "murphychen", - "SphinxKnight", - "www-wanglong", - "mikeongor693", - "RayPL", - "RafeyIqbalRahman", - "Sheppy", - "stephaniehobson", - "asger12345", - "TornadoIDS", - "hadleyel", - "jdescottes", - "dcondrey", - "jsx", - "hui", - "Jeremie", - "Andrew_Pfeiffer", - "fscholz" - ] - }, - "Learn/HTML/Cheatsheet": { - "modified": "2020-07-16T22:22:43.887Z", - "contributors": [ - "Yel-Martinez-Consultor-Seo", - "sideshowbarker", - "verde79", - "sksankarraj", - "Quantzilla", - "Johanancuriel", - "SethClydesdale", - "arkanciscan", - "khalid32", - "jswisher", - "fachrulrazy", - "Andrew_Pfeiffer", - "SphinxKnight", - "dvincent", - "hbloomer", - "chadsansing", - "Jeremie" - ] - }, - "Learn/HTML/Howto": { - "modified": "2020-07-16T22:22:27.700Z", - "contributors": [ - "chrisdavidmills", - "RafeyIqbalRahman", - "mrmowji", - "ishan123456789", - "Jeremie", - "Andrew_Pfeiffer" - ] - }, - "Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image": { - "modified": "2020-07-16T22:22:42.758Z", - "contributors": ["ezrinjaz", "hbloomer", "Andrew_Pfeiffer"] - }, - "Learn/HTML/Howto/Author_fast-loading_HTML_pages": { - "modified": "2020-07-16T22:22:31.788Z", + "Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image": { + "modified": "2020-07-16T22:22:42.758Z", + "contributors": ["ezrinjaz", "hbloomer", "Andrew_Pfeiffer"] + }, + "Learn/HTML/Howto/Author_fast-loading_HTML_pages": { + "modified": "2020-07-16T22:22:31.788Z", "contributors": [ "Sheppy", "estelle", @@ -11412,187 +10954,620 @@ "arai", "prograamer", "hadleyel", - "jpetto", - "melaniemkwon" + "jpetto", + "melaniemkwon" + ] + }, + "Learn/Tools_and_testing/Cross_browser_testing/Accessibility": { + "modified": "2020-11-20T02:03:56.749Z", + "contributors": [ + "hamishwillee", + "chrisdavidmills", + "ckashby", + "kruschk", + "eduDevCF", + "mharty", + "nackman", + "joestrouth1", + "stephaniehobson", + "conradbeach", + "joelcollinsdc", + "granttchart" + ] + }, + "Learn/Tools_and_testing/Cross_browser_testing/Automated_testing": { + "modified": "2020-09-24T05:59:58.777Z", + "contributors": [ + "Rafael_Green", + "lancespa", + "chrisdavidmills", + "avocadoras", + "kruschk", + "jochendelabie", + "pulkitsharma07", + "harshitpaul", + "wbamberg", + "ElvisZhu", + "KateSturmey", + "stephaniehobson", + "Memija", + "iigmir", + "SpikePy", + "jpetto", + "billmcgee" + ] + }, + "Learn/Tools_and_testing/Cross_browser_testing/Feature_detection": { + "modified": "2020-07-16T22:39:22.516Z", + "contributors": [ + "ckashby", + "mfuji09", + "chrisdavidmills", + "Igor-Sangin", + "kruschk", + "tkrotoff", + "jcsahnwaldt", + "stephaniehobson", + "EdwardB" + ] + }, + "Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS": { + "modified": "2020-07-16T22:39:08.959Z", + "contributors": [ + "chrisdavidmills", + "ckashby", + "kruschk", + "Sheppy", + "rahul73690", + "enejko", + "stephaniehobson", + "EdwardB", + "abenkovskii", + "qdirks" + ] + }, + "Learn/Tools_and_testing/Cross_browser_testing/Introduction": { + "modified": "2020-07-28T13:00:54.765Z", + "contributors": [ + "liviulupei", + "ckashby", + "kruschk", + "joanmdavis", + "daphnemcrossbrowser", + "chrisdavidmills", + "jochendelabie", + "sadhvisingh1", + "joaner", + "Navin77", + "stephaniehobson", + "qdirks", + "Soupedenuit", + "jainarpit", + "RyanWng", + "0000marcell", + "xfq" + ] + }, + "Learn/Tools_and_testing/Cross_browser_testing/JavaScript": { + "modified": "2020-11-23T02:24:03.962Z", + "contributors": [ + "hamishwillee", + "chrisdavidmills", + "ckashby", + "kruschk", + "stephaniehobson", + "EdwardB", + "qdirks", + "Juggernaughtt" + ] + }, + "Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies": { + "modified": "2020-09-21T04:00:14.366Z", + "contributors": [ + "Rafael_Green", + "chrisdavidmills", + "liviulupei", + "AndriiMaliuta", + "kruschk", + "agnelvishal", + "jochendelabie", + "harshitpaul", + "Navin77", + "stephaniehobson", + "aarondev8917", + "EdwardB", + "tsotetsi", + "qdirks", + "0000marcell" + ] + }, + "Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment": { + "modified": "2020-12-07T06:18:26.264Z", + "contributors": [ + "BBC-Radiance", + "Rafael_Green", + "UnorthodoxThing", + "chrisdavidmills", + "liviulupei", + "SphinxKnight", + "sjain1992", + "kruschk", + "jochendelabie", + "harshitpaul", + "mburleigh", + "gabolato", + "stephaniehobson", + "martianyi", + "paulinas" + ] + }, + "Learn/Tools_and_testing/GitHub": { + "modified": "2020-12-04T13:34:02.479Z", + "contributors": ["Arpitgoyalgg", "chrisdavidmills"] + }, + "Learn/Tools_and_testing/Understanding_client-side_tools": { + "modified": "2020-07-16T22:39:26.098Z", + "contributors": ["chrisdavidmills"] + }, + "Learn/Tools_and_testing/Understanding_client-side_tools/Deployment": { + "modified": "2020-07-16T22:39:30.122Z", + "contributors": ["chrisdavidmills"] + }, + "Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain": { + "modified": "2020-07-16T22:39:29.585Z", + "contributors": ["nicolasguasca1", "chrisdavidmills", "escattone"] + }, + "Learn/Tools_and_testing/Understanding_client-side_tools/Overview": { + "modified": "2020-07-16T22:39:26.907Z", + "contributors": ["chrisdavidmills", "edieblu", "davidshq"] + }, + "Learn/Tools_and_testing/Understanding_client-side_tools/Package_management": { + "modified": "2020-08-29T04:11:46.834Z", + "contributors": [ + "Rafael_Green", + "drklee3", + "nicolasguasca1", + "mrmowji", + "chrisdavidmills", + "ralaplines1988", + "remy" + ] + }, + "Learn_web_development/Getting_started/Environment_setup/Command_line": { + "modified": "2020-10-18T22:03:14.400Z", + "contributors": ["ralaplines1988", "Callahad", "chrisdavidmills"] + }, + "Learn_web_development/Getting_started/Environment_setup/Dealing_with_files": { + "modified": "2020-12-04T18:44:16.263Z", + "contributors": [ + "Seeeven7", + "philou", + "xandora", + "adilalsalmi2013", + "irenesmith", + "riceh3", + "msobanjo", + "smoothie1998", + "chrisdavidmills", + "dangvancuong", + "SphinxKnight", + "knows1", + "qadero", + "stephaniehobson", + "agnelvishal", + "afishop", + "hadleyel", + "Goldfish", + "shoelaces", + "Jeremie", + "ifilin", + "Ojas_A", + "Andrew_Pfeiffer", + "yokimbo", + "Sheppy", + "SueSmith" ] }, - "Learn/Tools_and_testing/Cross_browser_testing/Accessibility": { - "modified": "2020-11-20T02:03:56.749Z", + "Learn_web_development/Getting_started/Environment_setup/Installing_software": { + "modified": "2020-11-19T18:44:49.700Z", "contributors": [ - "hamishwillee", + "hughcrt", + "darby", "chrisdavidmills", - "ckashby", - "kruschk", - "eduDevCF", - "mharty", - "nackman", - "joestrouth1", + "dd-pardal", + "darkwebster", + "rl2999", + "dineshram", + "SphinxKnight", + "PatrickDGarvey", + "Izzaldin", + "flexcapacitor", + "donnal4", + "robmuh", + "juanromoit", + "lol-russo", + "paszesoft", + "wi24rd", + "smoothie1998", + "bittualam.in", + "CSP-CODER", + "stevedav", + "rameezripon", + "CodeDotJS", + "Pichchayut", + "S-Dey", "stephaniehobson", - "conradbeach", - "joelcollinsdc", - "granttchart" + "momdo", + "kubosho_", + "hadleyel", + "jk777", + "evaferreira", + "zizau_", + "Sheppy", + "saurabh95", + "KindRacoon", + "ownsourcing", + "alirobe", + "Jeremie", + "antoniogarcia78", + "platy11", + "goto.prototype", + "kgriff24", + "jsx", + "Jackie_Tang", + "Lisa", + "KamranMackey", + "xfq", + "pseudosavant", + "artmees", + "Andrew_Pfeiffer" ] }, - "Learn/Tools_and_testing/Cross_browser_testing/Automated_testing": { - "modified": "2020-09-24T05:59:58.777Z", + "Learn_web_development/Getting_started/Your_first_website": { + "modified": "2020-12-07T11:57:48.782Z", "contributors": [ - "Rafael_Green", - "lancespa", + "SphinxKnight", + "mr.sithuaung", + "burakizmirli252", + "marismiglans8", + "jessica.kolek", "chrisdavidmills", - "avocadoras", - "kruschk", - "jochendelabie", - "pulkitsharma07", - "harshitpaul", - "wbamberg", - "ElvisZhu", - "KateSturmey", - "stephaniehobson", - "Memija", - "iigmir", - "SpikePy", - "jpetto", - "billmcgee" + "SinEstres", + "pe.minuta.78", + "iamadityashekhar", + "Javi-21", + "K-D", + "gamma.mahdii", + "maeeel968", + "hakannakliyat", + "kmavrikakis", + "harpaljadon", + "PatrickDGarvey", + "johnsmith1554", + "kakwanisiddharth", + "kenj115188", + "shilili", + "burgess25", + "EvenC", + "mfuji09", + "james-rhodus", + "smoothie1998", + "fox-lucas", + "stevedav", + "SimDrifT", + "CodeDotJS", + "dartvaneri", + "Jenna59", + "Alihoday", + "Sibiraj-S", + "hadleyel", + "wh1msy", + "kaiarifin", + "Zh1hu1", + "Jom97", + "gleidiin", + "aquddos", + "Jeremie", + "jswisher", + "pheakvoin", + "jam1985", + "EnriquePabloBarreraVega", + "BychekRU", + "rpettit686", + "jsx", + "Trontin", + "LeBasti", + "arbatskiy", + "pravinbudharap", + "dileep.ch", + "Sheppy", + "Andrew_Pfeiffer", + "klez" ] }, - "Learn/Tools_and_testing/Cross_browser_testing/Feature_detection": { - "modified": "2020-07-16T22:39:22.516Z", + "Learn_web_development/Getting_started/Your_first_website/CSS_basics": { + "modified": "2020-11-20T01:08:35.890Z", "contributors": [ - "ckashby", - "mfuji09", + "schalkneethling", "chrisdavidmills", - "Igor-Sangin", - "kruschk", - "tkrotoff", - "jcsahnwaldt", - "stephaniehobson", - "EdwardB" + "thelovekesh", + "winst", + "dcompcoder", + "ohaver", + "ngaydainuocmat304", + "Azzedine2020", + "LordZarano", + "RicardsVeveris", + "naser-baig", + "forrest.lyu.it", + "zzhhbyt1", + "rachelcarmena", + "ezrinjaz", + "edprince", + "bhuvy2", + "smoothie1998", + "oyenirat", + "jdblischak", + "jswisher", + "terevele", + "102", + "lui247", + "IMLERICH", + "ry0id", + "suterj", + "q3229270", + "MohamedSalah1998", + "hadleyel", + "thanhtran92", + "Looserof7", + "Jeremie", + "MightyBranch", + "SphinxKnight", + "jackarmley", + "odsantos", + "Andrew_Pfeiffer", + "xfq" ] }, - "Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS": { - "modified": "2020-07-16T22:39:08.959Z", + "Learn_web_development/Getting_started/Your_first_website/HTML_basics": { + "modified": "2020-11-13T05:59:27.045Z", "contributors": [ + "SphinxKnight", + "mpmadhubhashana8", "chrisdavidmills", - "ckashby", - "kruschk", + "advancel", + "sideshowbarker", + "thelovekesh", + "dcompcoder", + "adatapost", + "donnal4", + "shilili", + "P1xt", + "a4anandsingh", + "bminard", + "Chomchaum", + "rachelcarmena", + "dwvisser", + "maria-rubina", + "thekosiguy", + "smoothie1998", + "RafeyIqbalRahman", + "thoughtbyte", "Sheppy", - "rahul73690", - "enejko", - "stephaniehobson", - "EdwardB", - "abenkovskii", - "qdirks" + "arai", + "DragMeToProgramming", + "moslyke", + "datdathcmutrans", + "suterj", + "rajasrijanakiraman", + "Quantzilla", + "q3229270", + "jswisher", + "explosive1111", + "Maruti-Ram", + "Sharoon_Francis", + "Mastermind9513", + "rishikant-sharma", + "hahaf313", + "jwhitlock", + "hadleyel", + "Tanvir-rahman", + "mishkadoma", + "Jeremie", + "Cameron-Riecan", + "klez", + "tcyyky", + "MightyBranch", + "Carmelina", + "manderton", + "jlin", + "karyse", + "NickPapayiannakis", + "odsantos", + "xfq", + "jsx" ] }, - "Learn/Tools_and_testing/Cross_browser_testing/Introduction": { - "modified": "2020-07-28T13:00:54.765Z", + "Learn_web_development/Getting_started/Your_first_website/How_the_Web_works": { + "modified": "2020-07-17T10:00:52.022Z", "contributors": [ - "liviulupei", - "ckashby", - "kruschk", - "joanmdavis", - "daphnemcrossbrowser", + "黄晓生", "chrisdavidmills", - "jochendelabie", - "sadhvisingh1", - "joaner", - "Navin77", - "stephaniehobson", - "qdirks", - "Soupedenuit", - "jainarpit", - "RyanWng", - "0000marcell", - "xfq" + "SphinxKnight", + "gepanther", + "jamesdhurd", + "ChaltinPagan", + "Ndikubwayo", + "prajwalkk", + "wilhelmtell", + "hadleyel", + "david_ross", + "AlexanderJohn", + "CommonSnowFlake", + "Jeremie", + "corderophilosophy", + "klez", + "marlon7", + "diogeneshamilton", + "xfq", + "Andrew_Pfeiffer" ] }, - "Learn/Tools_and_testing/Cross_browser_testing/JavaScript": { - "modified": "2020-11-23T02:24:03.962Z", + "Learn_web_development/Getting_started/Your_first_website/JavaScript_basics": { + "modified": "2020-12-13T20:40:46.411Z", "contributors": [ - "hamishwillee", + "bershanskiy", + "Arpitgoyalgg", + "ekaradag14", + "bytensky", + "SphinxKnight", + "winst", "chrisdavidmills", - "ckashby", - "kruschk", + "mrmowji", + "Vjakupi", + "blinkous", + "biglyy", + "ohaver", + "Azzedine2020", + "jewellscott", + "radiocane", + "cogpark", + "BusiPlay", + "albanafmeti", + "InfusOnWoW", + "JonDevOps", + "bukowski73", + "badcat", + "saranshgupta1995", + "snehseel", + "taoranz", + "JawnMarc", + "julianschacher", + "gam271", + "rachelcarmena", + "DhruvDh", + "wrongsyntax", + "zzhhbyt1", + "shilili", + "pcuambe", + "bittualam.in", + "akashchy1705", + "ToshitaSingh", + "mathieucaroff", + "latinatsw28", + "Afzalafu", + "sigoa", + "trannguyenhb", + "Juchuhsu", + "lokesh-krishna", + "fscholz", "stephaniehobson", - "EdwardB", - "qdirks", - "Juggernaughtt" + "Pointy", + "saud12", + "scuesta", + "SHUBHAMTRIPATH", + "dipu2013", + "Greedsy", + "Master-Osaro", + "hadleyel", + "ku3nsting", + "frankfang1990", + "prakashkmrchy", + "suriyaa", + "AprilMorone", + "lol-russo", + "mishkadoma", + "Jeremie", + "david_ross", + "dagolinuxoid", + "klez", + "Radi123", + "alexbaumgertner", + "hrishikeshbarman", + "mseyne", + "stuart", + "jswisher", + "javabuddy", + "garrettgrimsley", + "verpixelt", + "xfq", + "Andrew_Pfeiffer", + "netbun", + "pbschmid", + "sunilchahal", + "brnold", + "sethmcknight", + "nahero", + "teoli", + "michaelnetbiz", + "chrisdavidmills-github" ] }, - "Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies": { - "modified": "2020-09-21T04:00:14.366Z", + "Learn_web_development/Getting_started/Your_first_website/Publishing_your_website": { + "modified": "2020-10-07T04:02:16.924Z", "contributors": [ - "Rafael_Green", + "Mori", + "ohaver", "chrisdavidmills", - "liviulupei", - "AndriiMaliuta", - "kruschk", - "agnelvishal", - "jochendelabie", - "harshitpaul", - "Navin77", - "stephaniehobson", - "aarondev8917", - "EdwardB", - "tsotetsi", - "qdirks", - "0000marcell" + "Iqbalh11", + "kakwanisiddharth", + "naser-baig", + "Rick-Manarauskis", + "SphinxKnight", + "14122712", + "iamsamwilson", + "Greedsy", + "hadleyel", + "jk777", + "Jeremie", + "klez", + "ifilin", + "xfq", + "samlaf", + "markg", + "Andrew_Pfeiffer", + "manasmahodaya" ] }, - "Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment": { - "modified": "2020-12-07T06:18:26.264Z", + "Learn_web_development/Getting_started/Your_first_website/The_web_and_web_standards": { + "modified": "2020-10-25T23:30:38.501Z", "contributors": [ - "BBC-Radiance", - "Rafael_Green", - "UnorthodoxThing", + "philou", + "Nachec", "chrisdavidmills", - "liviulupei", - "SphinxKnight", - "sjain1992", - "kruschk", - "jochendelabie", - "harshitpaul", - "mburleigh", - "gabolato", - "stephaniehobson", - "martianyi", - "paulinas" + "chaitanya", + "onurbasturk", + "dcompcoder", + "DevForrestLyu" ] }, - "Learn/Tools_and_testing/GitHub": { - "modified": "2020-12-04T13:34:02.479Z", - "contributors": ["Arpitgoyalgg", "chrisdavidmills"] - }, - "Learn/Tools_and_testing/Understanding_client-side_tools": { - "modified": "2020-07-16T22:39:26.098Z", - "contributors": ["chrisdavidmills"] - }, - "Learn/Tools_and_testing/Understanding_client-side_tools/Command_line": { - "modified": "2020-10-18T22:03:14.400Z", - "contributors": ["ralaplines1988", "Callahad", "chrisdavidmills"] - }, - "Learn/Tools_and_testing/Understanding_client-side_tools/Deployment": { - "modified": "2020-07-16T22:39:30.122Z", - "contributors": ["chrisdavidmills"] - }, - "Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain": { - "modified": "2020-07-16T22:39:29.585Z", - "contributors": ["nicolasguasca1", "chrisdavidmills", "escattone"] - }, - "Learn/Tools_and_testing/Understanding_client-side_tools/Overview": { - "modified": "2020-07-16T22:39:26.907Z", - "contributors": ["chrisdavidmills", "edieblu", "davidshq"] - }, - "Learn/Tools_and_testing/Understanding_client-side_tools/Package_management": { - "modified": "2020-08-29T04:11:46.834Z", + "Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like": { + "modified": "2020-07-16T22:34:13.192Z", "contributors": [ - "Rafael_Green", - "drklee3", - "nicolasguasca1", - "mrmowji", "chrisdavidmills", - "ralaplines1988", - "remy" + "NavetsArev", + "mfuji09", + "bduguma", + "ezrinjaz", + "IzaS", + "jbrandes", + "msobanjo", + "aboagyed", + "smoothie1998", + "RafeyIqbalRahman", + "Xyde", + "stephaniehobson", + "Lilmisscrafty116", + "RichardsonVJohnson", + "hadleyel", + "Jeremie", + "MashKao", + "klez", + "dvincent", + "ifilin", + "SphinxKnight", + "xfq", + "Andrew_Pfeiffer" ] }, "MDN": { diff --git a/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md b/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md index 1dff3c1ff633907..c6a0f6fa4207644 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md @@ -12,7 +12,7 @@ In this step-by-step tutorial, we create a simple mobile **MDN Breakout** game w Every step has editable, live samples available to play with, so you can see what the intermediate stages should look like. You will learn the basics of using the Phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, framework-specific helper functions, animations and tweens, and winning and losing states. -To get the most out of this series of articles you should already have basic to intermediate [JavaScript](/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics) knowledge. After working through this tutorial, you should be able to build your own simple Web games with Phaser. +To get the most out of this series of articles you should already have basic to intermediate [JavaScript](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics) knowledge. After working through this tutorial, you should be able to build your own simple Web games with Phaser. ![Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives.](mdn-breakout-phaser.png) diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/index.md index 2e1957ad5353e35..b950550a13122d3 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/index.md @@ -12,7 +12,7 @@ In this step-by-step tutorial we create an **MDN Breakout** game written entirel Every step has editable, live samples available to play with so you can see what the intermediate stages should look like. You will learn the basics of using the {{htmlelement("canvas")}} element to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, and winning and losing states. -To get the most out of this series of articles you should already have basic to intermediate [JavaScript](/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics) knowledge. After working through this tutorial you should be able to build your own Web games. +To get the most out of this series of articles you should already have basic to intermediate [JavaScript](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics) knowledge. After working through this tutorial you should be able to build your own Web games. ![Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.](mdn-breakout-gameplay.png) diff --git a/files/en-us/learn/common_questions/tools_and_setup/available_text_editors/index.md b/files/en-us/learn/common_questions/tools_and_setup/available_text_editors/index.md index 5706a492ca29c8d..9ab748f494e63dc 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/available_text_editors/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/available_text_editors/index.md @@ -447,4 +447,4 @@ When you install a new text editor, your OS will probably continue to open text ## Next steps -Now that you have a good text editor, you could take some time to finalize [your basic working environment](/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server), or, if you want to play with it right away, write [your very first web page](/en-US/docs/Learn/Getting_started_with_the_web). +Now that you have a good text editor, you could take some time to finalize [your basic working environment](/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server), or, if you want to play with it right away, write [your very first web page](/en-US/docs/Learn_web_development/Getting_started/Your_first_website). diff --git a/files/en-us/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md b/files/en-us/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md index d418ea8531ddf81..1cb7b2d02c06830 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md @@ -18,7 +18,7 @@ Getting involved on the Web isn't as cheap as it looks. In this article we discu >what software you need, the difference between a webpage, a website, etc., and what set up a basic environment and how to - write a simple webpage. @@ -43,7 +43,7 @@ This article shows you how to publish your site online using file transfer tools ## Summary -If you have built a simple web page (see [HTML basics](/en-US/docs/Learn/Getting_started_with_the_web/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. +If you have built a simple web page (see [HTML basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/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. ## SFTP @@ -163,7 +163,7 @@ Again, you would have to get the connection credentials from your hosting provid GitHub allows you to publish websites via [GitHub pages](https://pages.github.com/) (gh-pages). -We've covered the basics of using this in the [Publishing your website](/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website) article from our [Getting started with the Web](/en-US/docs/Learn/Getting_started_with_the_web) guide, so we aren't going to repeat it all here. +We've covered the basics of using this in the [Publishing your website](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) article from our [Getting started with the Web](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) guide, so we aren't going to repeat it all here. However, it is worth knowing that you can also host a website on GitHub, but use a custom domain with it. See [Using a custom domain with GitHub Pages](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site) for a detailed guide. diff --git a/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md index b797dc1c3c4030c..7571646f87fadcd 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md @@ -9,7 +9,7 @@ page-type: learn-faq Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load. This article explains how to use the basic functions of your browser's devtools. > [!NOTE] -> Before you run through the examples below, open the [Beginner's example site](https://mdn.github.io/beginner-html-site-scripted/) that we built during the [Getting started with the Web](/en-US/docs/Learn/Getting_started_with_the_web) article series. You should have this open as you follow the steps below. +> Before you run through the examples below, open the [Beginner's example site](https://mdn.github.io/beginner-html-site-scripted/) that we built during the [Getting started with the Web](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) article series. You should have this open as you follow the steps below. ## How to open the devtools in your browser diff --git a/files/en-us/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md b/files/en-us/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md index 4cf5855b9b8f03f..99438f4e7b2cea2 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md @@ -15,7 +15,7 @@ In this article, we lay out which software components you need when you're editi You should already know the difference between webpages, websites, web servers, and search engines. diff --git a/files/en-us/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md b/files/en-us/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md index 5db3d515c9bb6a0..a6c4da981b4d286 100644 --- a/files/en-us/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md +++ b/files/en-us/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md @@ -110,6 +110,6 @@ They can therefore be accessed by authorized members from different physical loc ## Next steps -- [How the Web works](/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works) -- [Understanding the difference between a web page, a website, a web server and a search engine](/en-US/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines) +- [How the Web works](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/How_the_Web_works) +- [Understanding the difference between a web page, a website, a web server and a search engine](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) - [Understanding domain names](/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) diff --git a/files/en-us/learn/common_questions/web_mechanics/index.md b/files/en-us/learn/common_questions/web_mechanics/index.md index 8465d3aba9c28a7..aca5769313e0e53 100644 --- a/files/en-us/learn/common_questions/web_mechanics/index.md +++ b/files/en-us/learn/common_questions/web_mechanics/index.md @@ -12,7 +12,7 @@ This section covers questions relating to general knowledge of the web ecosystem - : The **Internet** is the backbone of the web, the technical infrastructure that makes the web possible. At its most basic, the internet is a massive network of computers communicating with each other. This article discusses how it works, in broad terms. -- [What is the difference between webpage, website, web server, and search engine?](/en-US/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines) +- [What is the difference between webpage, website, web server, and search engine?](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) - : In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often a source of confusion for newcomers to the web, or are used incorrectly. Let's discover what they actually mean! diff --git a/files/en-us/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md b/files/en-us/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md index f57d3452258a7b3..d339afd981183d1 100644 --- a/files/en-us/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md +++ b/files/en-us/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md @@ -18,7 +18,7 @@ In this article, we'll go over what hyperlinks are and why they matter. >how the Internet works and be familiar with the difference between a webpage, a website, a web server, and a search enginehow the Internet works, and understand the difference between a web page, a website, a web server, and a search engine. diff --git a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md index 5fcaf7b4fc5cb57..4d48063356a7afa 100644 --- a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md +++ b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -14,11 +14,11 @@ In this lesson, we will take a look at some of the creative things you can do wi Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Prerequisites: - Basic software installed, basic knowledge of - working with files, and HTML basics (study + Basic software installed, basic knowledge of + working with files, and HTML basics (study Introduction to HTML.) diff --git a/files/en-us/learn/css/first_steps/how_css_is_structured/index.md b/files/en-us/learn/css/first_steps/how_css_is_structured/index.md index 8efff32c9d6d0ee..7d3b76dc7ad8572 100644 --- a/files/en-us/learn/css/first_steps/how_css_is_structured/index.md +++ b/files/en-us/learn/css/first_steps/how_css_is_structured/index.md @@ -13,8 +13,8 @@ Now that you are beginning to understand the purpose and use of CSS, let's exami Prerequisites: - Basic software installed, basic knowledge of - working with files and HTML basics (study + Basic software installed, basic knowledge of + working with files and HTML basics (study Introduction to HTML). diff --git a/files/en-us/learn/css/first_steps/how_css_works/index.md b/files/en-us/learn/css/first_steps/how_css_works/index.md index ba774d84e12f79f..84c79aa5047de1e 100644 --- a/files/en-us/learn/css/first_steps/how_css_works/index.md +++ b/files/en-us/learn/css/first_steps/how_css_works/index.md @@ -14,8 +14,8 @@ We have learned the basics of CSS, what it is for and how to write simple styles Prerequisites: - Basic software installed, basic knowledge of - working with files, and HTML basics (study + Basic software installed, basic knowledge of + working with files, and HTML basics (study Introduction to HTML.) diff --git a/files/en-us/learn/css/first_steps/index.md b/files/en-us/learn/css/first_steps/index.md index af2694e29dd4623..4cc9822b3b6aee5 100644 --- a/files/en-us/learn/css/first_steps/index.md +++ b/files/en-us/learn/css/first_steps/index.md @@ -13,7 +13,7 @@ CSS (Cascading Style Sheets) is used to style and lay out web pages — for exam Before starting this module, you should have: 1. Basic familiarity with using computers and using the Web passively (i.e. looking at it, consuming the content.) -2. A basic work environment set up, as detailed in [Installing basic software](/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software), and an understanding of how to create and manage files, as detailed in [Dealing with files](/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files). +2. A basic work environment set up, as detailed in [Installing basic software](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software), and an understanding of how to create and manage files, as detailed in [Dealing with files](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files). 3. Basic familiarity with HTML, as discussed in the [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) module. > [!NOTE] diff --git a/files/en-us/learn/css/first_steps/what_is_css/index.md b/files/en-us/learn/css/first_steps/what_is_css/index.md index 87e8b75f71eb4f5..ec56faa7f92de67 100644 --- a/files/en-us/learn/css/first_steps/what_is_css/index.md +++ b/files/en-us/learn/css/first_steps/what_is_css/index.md @@ -14,11 +14,11 @@ page-type: learn-module-chapter Prerequisites: Basic software installed, basic knowledge of working with files, and HTML basics (study [!NOTE] -> On Windows computers, you might have trouble seeing the file names, because Windows has an option called **Hide extensions for known file types** turned on by default. Generally, you can turn this off by going to Windows Explorer, selecting the **Folder options…** option, unchecking the **Hide extensions for known file types** check box, then clicking **OK**. For more specific information covering your version of Windows, you can search on the web. - -## File paths - -To make files talk to one another, you have to provide a file path between them — basically a route, so one file knows where another one is. To demonstrate this, we will insert a little bit of HTML into our `index.html` file, and make it display the image you chose in the article ["What will your website look like?"](/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like) Alternatively, you can choose an existing image at your disposal, on your computer or from the Web, and use it in the following steps: - -1. Copy the image you chose earlier into your `images` folder. -2. Open up your `index.html` file, and insert the following code into the file exactly as shown. Don't worry about what it all means for now — we'll look at the structures in more detail later in the series. - - ```html - - - - - - My test page - - - My test image - - - ``` - -3. The line `My test image` is the HTML code that inserts an image into the page. We need to tell the HTML where the image is. The image is inside the _images_ directory, which is in the same directory as `index.html`. To walk down the file structure from `index.html` to our image, the file path we'd need is `images/your-image-filename`. For example, our image is called `firefox-icon.png`, so the file path is `images/firefox-icon.png`. -4. Insert the file path into your HTML code between the double quote marks of the `src=""` code. -5. Change the contents of the `alt` attribute to a [description of the image](/en-US/docs/Web/HTML/Element/img#authoring_meaningful_alternate_descriptions) you are including. In this case, `alt="Firefox logo: flaming fox wrapping the world"`. -6. Save your HTML file, then load it in your web browser (double-click the file). You should see your new webpage displaying your image! - -![A screenshot of our basic website showing just the Firefox logo - a flaming fox wrapping the world](website-screenshot.png) - -Some general rules for file paths: - -- To link to a target file in the same directory as the invoking HTML file, just use the filename, e.g. `my-image.jpg`. -- To reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g. `subdirectory/my-image.jpg`. -- To link to a target file in the directory **above** the invoking HTML file, write two dots. So for example, if `index.html` was inside a subfolder of `test-site` and `my-image.jpg` was inside `test-site`, you could reference `my-image.jpg` from `index.html` using `../my-image.jpg`. -- You can combine these as much as you like, for example `../subdirectory/another-subdirectory/my-image.jpg`. - -For now, this is about all you need to know. - -> [!NOTE] -> The Windows file system tends to use backslashes, not forward slashes, e.g. `C:\Windows`. This doesn't matter in HTML — even if you are developing your website on Windows, you should still use forward slashes in your code. - -## What else should be done? - -That is about it for now. Your folder structure should look something like this: - -![A file structure in macOS finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file](file-structure.png) - -{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}} diff --git a/files/en-us/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md b/files/en-us/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md index d1750766bcf6a3a..6dae087e36d7ea4 100644 --- a/files/en-us/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md +++ b/files/en-us/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md @@ -14,7 +14,7 @@ Here we go over how to set up an image map, and some downsides to consider first Prerequisites: - You should already know how to create a basic HTML document and how to add accessible images to a webpage. + You should already know how to create a basic HTML document and how to add accessible images to a webpage. diff --git a/files/en-us/learn/html/howto/define_terms_with_html/index.md b/files/en-us/learn/html/howto/define_terms_with_html/index.md index 18492b2c2c4dfb3..fb895ac41bc4fa1 100644 --- a/files/en-us/learn/html/howto/define_terms_with_html/index.md +++ b/files/en-us/learn/html/howto/define_terms_with_html/index.md @@ -14,7 +14,7 @@ HTML provides several ways to convey description semantics, whether inline or as Prerequisites: You need to be familiar with how to - create a basic HTML document. diff --git a/files/en-us/learn/html/howto/use_javascript_within_a_webpage/index.md b/files/en-us/learn/html/howto/use_javascript_within_a_webpage/index.md index b4115c247e0e21d..71be8c7cec1464a 100644 --- a/files/en-us/learn/html/howto/use_javascript_within_a_webpage/index.md +++ b/files/en-us/learn/html/howto/use_javascript_within_a_webpage/index.md @@ -14,7 +14,7 @@ Take your webpages to the next level by harnessing JavaScript. Learn in this art Prerequisites: You need to be familiar with how to - create a basic HTML document. @@ -34,7 +34,7 @@ Take your webpages to the next level by harnessing JavaScript. Learn in this art {{Glossary("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. > [!NOTE] -> In this article we're going over the HTML code you need to make JavaScript take effect. If you want to learn JavaScript itself, you can start with our [JavaScript basics](/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics) article. If you already know something about JavaScript or if you have a background with other programming languages, we suggest you jump directly into our [JavaScript Guide](/en-US/docs/Web/JavaScript/Guide). +> In this article we're going over the HTML code you need to make JavaScript take effect. If you want to learn JavaScript itself, you can start with our [JavaScript basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics) article. If you already know something about JavaScript or if you have a background with other programming languages, we suggest you jump directly into our [JavaScript Guide](/en-US/docs/Web/JavaScript/Guide). ## How to trigger JavaScript from HTML diff --git a/files/en-us/learn/html/index.md b/files/en-us/learn/html/index.md index a501bb5e6d744b2..66dcfad32b81a07 100644 --- a/files/en-us/learn/html/index.md +++ b/files/en-us/learn/html/index.md @@ -10,9 +10,9 @@ To build websites, you should know about {{Glossary('HTML')}} — the fundamenta ## Prerequisites -Before starting this topic, you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it, consuming the content). You should have a basic work environment set up as detailed in [Installing basic software](/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software), and understand how to create and manage files, as detailed in [Dealing with files](/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files) — both are parts of our [Getting started with the web](/en-US/docs/Learn/Getting_started_with_the_web) complete beginner's module. +Before starting this topic, you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it, consuming the content). You should have a basic work environment set up as detailed in [Installing basic software](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software), and understand how to create and manage files, as detailed in [Dealing with files](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) — both are parts of our [Getting started with the web](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) complete beginner's module. -It is recommended that you work through [Getting started with the web](/en-US/docs/Learn/Getting_started_with_the_web) before attempting this topic. However, this isn't absolutely necessary; much of what is covered in the [HTML basics](/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics) article is also covered in our [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) module, albeit in a lot more detail. +It is recommended that you work through [Getting started with the web](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) before attempting this topic. However, this isn't absolutely necessary; much of what is covered in the [HTML basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/HTML_basics) article is also covered in our [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) module, albeit in a lot more detail. After learning HTML, you can then move on to learning about more advanced topics such as: diff --git a/files/en-us/learn/html/introduction_to_html/getting_started/index.md b/files/en-us/learn/html/introduction_to_html/getting_started/index.md index 07e63ee4e9f1eae..6badaeca55574d6 100644 --- a/files/en-us/learn/html/introduction_to_html/getting_started/index.md +++ b/files/en-us/learn/html/introduction_to_html/getting_started/index.md @@ -13,7 +13,7 @@ In this article, we cover the absolute basics of HTML. To get you started, this Prerequisites: - Basic software installed, and basic knowledge of working with files. + Basic software installed, and basic knowledge of working with files. diff --git a/files/en-us/learn/html/introduction_to_html/index.md b/files/en-us/learn/html/introduction_to_html/index.md index 4e33b3d05ad2b04..c3c896d3f173f63 100644 --- a/files/en-us/learn/html/introduction_to_html/index.md +++ b/files/en-us/learn/html/introduction_to_html/index.md @@ -10,7 +10,7 @@ At its heart, {{glossary("HTML")}} is a language made up of {{Glossary("Element" ## Prerequisites -Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in [Installing basic software](/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software)), and understand how to create and manage files (as detailed in [Dealing with files](/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files)). Both are parts of our [Getting started with the web](/en-US/docs/Learn/Getting_started_with_the_web) complete beginner's module. +Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in [Installing basic software](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software)), and understand how to create and manage files (as detailed in [Dealing with files](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files)). Both are parts of our [Getting started with the web](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) complete beginner's module. > [!NOTE] > If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/). diff --git a/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md index 3fae81e66eb6aa2..9eb45199e0510e7 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md @@ -15,11 +15,11 @@ In the beginning, the Web was just text, and it was really quite boring. Fortuna Prerequisites: Basic software installed, basic knowledge of working with files, familiarity with HTML fundamentals (as covered in Prerequisites: Basic software installed, basic knowledge of working with files, familiarity with HTML fundamentals (as covered in Prerequisites: Basic software installed, basic knowledge of working with files, familiarity with HTML fundamentals (as covered in Prerequisites: Basic software installed, basic knowledge of working with files, and HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, and HTML basics (study [!NOTE] diff --git a/files/en-us/learn/mathml/first_steps/scripts/index.md b/files/en-us/learn/mathml/first_steps/scripts/index.md index 21a6a621c6b0f8a..cebeb98487adb04 100644 --- a/files/en-us/learn/mathml/first_steps/scripts/index.md +++ b/files/en-us/learn/mathml/first_steps/scripts/index.md @@ -14,11 +14,11 @@ We continue the review of basic math notations and focus on building MathML elem Prerequisites: Basic software installed, basic knowledge of working with files, and HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, and HTML basics (study Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Prerequisites: Basic knowledge of - client-side web technologies, and a basic understanding of web performance optimization. diff --git a/files/en-us/learn/performance/css/index.md b/files/en-us/learn/performance/css/index.md index 2710ae2f57bc832..d96654f2c345213 100644 --- a/files/en-us/learn/performance/css/index.md +++ b/files/en-us/learn/performance/css/index.md @@ -14,10 +14,10 @@ When developing a website, you need to consider how the browser is handling the Prerequisites: Basic software installed, and basic knowledge of - client-side web technologies. diff --git a/files/en-us/learn/performance/html/index.md b/files/en-us/learn/performance/html/index.md index 6bc06db751d6114..e0ea80007b405ae 100644 --- a/files/en-us/learn/performance/html/index.md +++ b/files/en-us/learn/performance/html/index.md @@ -14,10 +14,10 @@ HTML is by default fast and accessible. It is our job, as developers, to ensure Prerequisites: Basic software installed, and basic knowledge of - client-side web technologies. diff --git a/files/en-us/learn/performance/index.md b/files/en-us/learn/performance/index.md index 348b9c577d32172..25ffb13b0671372 100644 --- a/files/en-us/learn/performance/index.md +++ b/files/en-us/learn/performance/index.md @@ -12,7 +12,7 @@ The rest of our beginner's learning material tried to stick to web best practice ## Learning pathway -While knowing HTML, CSS, and JavaScript is needed for implementing many web performance improvement recommendations, knowing how to build applications is not a necessary pre-condition for understanding and measuring web performance. We do however recommend that before you work through this module, you at least get a basic idea of web development by working through our [Getting started with the web](/en-US/docs/Learn/Getting_started_with_the_web) module. +While knowing HTML, CSS, and JavaScript is needed for implementing many web performance improvement recommendations, knowing how to build applications is not a necessary pre-condition for understanding and measuring web performance. We do however recommend that before you work through this module, you at least get a basic idea of web development by working through our [Getting started with the web](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) module. It would also be helpful to go a bit deeper into these topics, with modules such as: diff --git a/files/en-us/learn/performance/javascript/index.md b/files/en-us/learn/performance/javascript/index.md index 05182e52eedb1e9..eb28419cdd999fb 100644 --- a/files/en-us/learn/performance/javascript/index.md +++ b/files/en-us/learn/performance/javascript/index.md @@ -14,10 +14,10 @@ It is very important to consider how you are using JavaScript on your websites a Prerequisites: Basic software installed, and basic knowledge of - client-side web technologies. diff --git a/files/en-us/learn/performance/measuring_performance/index.md b/files/en-us/learn/performance/measuring_performance/index.md index 54e11ad53b384eb..94c244b03f58847 100644 --- a/files/en-us/learn/performance/measuring_performance/index.md +++ b/files/en-us/learn/performance/measuring_performance/index.md @@ -18,10 +18,10 @@ This article introduces tools you can use to access web performance metrics, whi Prerequisites: Basic software installed, and basic knowledge of - client-side web technologies. diff --git a/files/en-us/learn/performance/multimedia/index.md b/files/en-us/learn/performance/multimedia/index.md index f07298bfbf6d54a..18afe5bf0aa1732 100644 --- a/files/en-us/learn/performance/multimedia/index.md +++ b/files/en-us/learn/performance/multimedia/index.md @@ -14,10 +14,10 @@ Media, namely images and video, account for over 70% of the bytes downloaded for Prerequisites: Basic software installed, and basic knowledge of - client-side web technologies. diff --git a/files/en-us/learn/performance/perceived_performance/index.md b/files/en-us/learn/performance/perceived_performance/index.md index 919d4c74d88c922..4cb5601d9cc9bcc 100644 --- a/files/en-us/learn/performance/perceived_performance/index.md +++ b/files/en-us/learn/performance/perceived_performance/index.md @@ -16,10 +16,10 @@ This article provides a brief introduction to the factors that affect perceived Prerequisites: Basic software installed, and basic knowledge of - client-side web technologies. diff --git a/files/en-us/learn/performance/video/index.md b/files/en-us/learn/performance/video/index.md index de4b9558a7a4280..0bdd03c65af07c4 100644 --- a/files/en-us/learn/performance/video/index.md +++ b/files/en-us/learn/performance/video/index.md @@ -14,10 +14,10 @@ As we learned in the previous section, media, namely images and video, account f Prerequisites: Basic software installed, and basic knowledge of - client-side web technologies. diff --git a/files/en-us/learn/performance/what_is_web_performance/index.md b/files/en-us/learn/performance/what_is_web_performance/index.md index af5cea6eb96b8f2..d4fa069e0e07a2b 100644 --- a/files/en-us/learn/performance/what_is_web_performance/index.md +++ b/files/en-us/learn/performance/what_is_web_performance/index.md @@ -14,10 +14,10 @@ Web performance is all about making websites fast, including making slow process Prerequisites: Basic software installed, and basic knowledge of - client-side web technologies. diff --git a/files/en-us/learn/performance/why_web_performance/index.md b/files/en-us/learn/performance/why_web_performance/index.md index 34dd873788adc08..a8e3620a033dd41 100644 --- a/files/en-us/learn/performance/why_web_performance/index.md +++ b/files/en-us/learn/performance/why_web_performance/index.md @@ -14,10 +14,10 @@ Web performance is all about making websites fast, including making slow process Prerequisites: Basic software installed, and basic knowledge of - client-side web technologies. diff --git a/files/en-us/learn/server-side/express_nodejs/index.md b/files/en-us/learn/server-side/express_nodejs/index.md index 676e0cf7a63c2e0..c62066d64dbfb10 100644 --- a/files/en-us/learn/server-side/express_nodejs/index.md +++ b/files/en-us/learn/server-side/express_nodejs/index.md @@ -13,7 +13,7 @@ Express is a popular unopinionated web framework, written in JavaScript and host Before starting this module you will need to understand what server-side web programming and web frameworks are, ideally by reading the topics in our [Server-side website programming first steps](/en-US/docs/Learn/Server-side/First_steps) module. A general knowledge of programming concepts and [JavaScript](/en-US/docs/Web/JavaScript) is highly recommended, but not essential to understanding the core concepts. > [!NOTE] -> This website has many useful resources for learning JavaScript _in the context of client-side development_: [JavaScript](/en-US/docs/Web/JavaScript), [JavaScript Guide](/en-US/docs/Web/JavaScript/Guide), [JavaScript Basics](/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics), [JavaScript](/en-US/docs/Learn/JavaScript) (learning). The core JavaScript language and concepts are the same for server-side development on Node.js and this material will be relevant. Node.js offers [additional APIs](https://nodejs.org/dist/latest-v10.x/docs/api/) for supporting functionality that is useful in browserless environments (e.g., to create HTTP servers and access the file system), but does not support JavaScript APIs for working with the browser and DOM. +> This website has many useful resources for learning JavaScript _in the context of client-side development_: [JavaScript](/en-US/docs/Web/JavaScript), [JavaScript Guide](/en-US/docs/Web/JavaScript/Guide), [JavaScript Basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics), [JavaScript](/en-US/docs/Learn/JavaScript) (learning). The core JavaScript language and concepts are the same for server-side development on Node.js and this material will be relevant. Node.js offers [additional APIs](https://nodejs.org/dist/latest-v10.x/docs/api/) for supporting functionality that is useful in browserless environments (e.g., to create HTTP servers and access the file system), but does not support JavaScript APIs for working with the browser and DOM. > > This guide will provide some information about working with Node.js and Express, and there are numerous other excellent resources on the Internet and in books — some of these linked from [How do I get started with Node.js](https://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js/5511507) (StackOverflow) and [What are the best resources for learning Node.js?](https://www.quora.com/What-is-the-greatest-resource-for-learning-Node-js-for-a-newbie) (Quora). diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.md index 1468328848a51fe..8d78925a7a665a8 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.md @@ -18,7 +18,7 @@ This final Angular article covers how to build an app ready for production, and JavaScript languages, knowledge of the terminal/command line. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering/index.md index 9648ec7a7f6b66b..5980f6e8cfd9372 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering/index.md @@ -18,7 +18,7 @@ Now let's move on to adding functionality to allow users to filter their to-do i JavaScript languages, knowledge of the terminal/command line. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md index 6b2b36e2c4e5ff7..301facb81987c83 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md @@ -21,7 +21,7 @@ It is now time to look at Google's Angular framework, another popular option tha JavaScript languages, knowledge of the terminal/command line. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.md index 0a5625bf0c0c64e..081754a70d832c8 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.md @@ -18,7 +18,7 @@ Components provide a way for you to organize your application. This article walk JavaScript languages, knowledge of the terminal/command line. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.md index 81f1585e9b3aed1..a3c20fbd1f28fb2 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.md @@ -18,7 +18,7 @@ Now that we've got our basic application structure set up and started displaying JavaScript languages, knowledge of the terminal/command line. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.md index 5ee93260f08cd12..8f4f5f116b8a215 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.md @@ -18,7 +18,7 @@ At this point, we are ready to start creating our to-do list application using A JavaScript languages, knowledge of the terminal/command line. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_conditional_footer/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_conditional_footer/index.md index 3aa14609fd7dabf..7737391adff7be5 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_conditional_footer/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_conditional_footer/index.md @@ -21,7 +21,7 @@ Now it's time to start tackling the footer functionality in our app. Here we'll JavaScript languages, and have knowledge of the terminal/command line.

diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_getting_started/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_getting_started/index.md index fb7f33f8d6ec343..0a06d525b3cd895 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_getting_started/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_getting_started/index.md @@ -20,7 +20,7 @@ In our first Ember article we will look at how Ember works and what it's useful JavaScript languages, and have knowledge of the terminal/command line.

@@ -120,7 +120,7 @@ That said, because this tutorial is a focus on the JavaScript side of making a s Ember uses a command-line interface (CLI) tool for building and scaffolding parts of your application. -1. You'll need node and npm installed before you can install ember-cli. [Go here to find out how to install node and npm](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#adding_powerups), if you haven't already got them. +1. You'll need node and npm installed before you can install ember-cli. [Go here to find out how to install node and npm](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line#adding_powerups), if you haven't already got them. 2. Now type the following into your terminal to install ember-cli: ```bash diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_interactivity_events_state/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_interactivity_events_state/index.md index 1dac18742ab95f8..73e71f35860a0bc 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_interactivity_events_state/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_interactivity_events_state/index.md @@ -21,7 +21,7 @@ At this point we'll start adding some interactivity to our app, providing the ab JavaScript languages, and have knowledge of the terminal/command line.

diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_resources/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_resources/index.md index cca27bcf353821e..241e98fd65b25e6 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_resources/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_resources/index.md @@ -21,7 +21,7 @@ Our final Ember article provides you with a list of resources that you can use t JavaScript languages, and have knowledge of the terminal/command line.

diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_routing/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_routing/index.md index dd49aa43cd1eee3..703e08c7ab237c6 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_routing/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_routing/index.md @@ -21,7 +21,7 @@ In this article we learn about **routing**, or URL-based filtering as it is some JavaScript languages, and have knowledge of the terminal/command line.

diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_structure_componentization/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_structure_componentization/index.md index 1bcf898817caeb8..a43decf48a333ba 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_structure_componentization/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_structure_componentization/index.md @@ -21,7 +21,7 @@ In this article we'll get right on with planning out the structure of our TodoMV JavaScript languages, and have knowledge of the terminal/command line.

diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility/index.md index 81c29b3516c56d3..0bb8d672df53dc6 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility/index.md @@ -19,7 +19,7 @@ In our final tutorial article, we'll focus on (pun intended) accessibility, incl JavaScript languages, knowledge of the terminal/command line.

diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md index e7382d5805cc696..ac94a2c489ae8a2 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md @@ -19,7 +19,7 @@ At this point, our app is a monolith. Before we can make it do things, we need t JavaScript languages, knowledge of the terminal/command line.

diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md index a553aa8812a4f37..420fd3aff9d62e2 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md @@ -19,7 +19,7 @@ In this article we will say hello to React. We'll discover a little bit of detai JavaScript languages, knowledge of the terminal/command line.

@@ -128,7 +128,7 @@ If Node is installed, you'll see a version number. If it isn't, you'll see an er You may use the Yarn package manager as an alternative to npm but we'll assume you're using npm in this set of tutorials. See [Package management basics](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management) for more information on npm and yarn. -If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. **Gitbash** (which comes as part of the [git for Windows toolset](https://gitforwindows.org/)) or **[Windows Subsystem for Linux](https://learn.microsoft.com/en-us/windows/wsl/about)** (**WSL**) are both suitable. See [Command line crash course](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line) for more information on these, and on terminal commands in general. +If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. **Gitbash** (which comes as part of the [git for Windows toolset](https://gitforwindows.org/)) or **[Windows Subsystem for Linux](https://learn.microsoft.com/en-us/windows/wsl/about)** (**WSL**) are both suitable. See [Command line crash course](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) for more information on these, and on terminal commands in general. Also bear in mind that React and ReactDOM produce apps that only work on a fairly modern set of browsers like Firefox, Microsoft Edge, Safari, or Chrome when working through these tutorials. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state/index.md index 2e198c6727832be..a6398e70b0aa514 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state/index.md @@ -19,7 +19,7 @@ With our component plan worked out, it's now time to start updating our app from JavaScript languages, knowledge of the terminal/command line.

diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_filtering_conditional_rendering/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_filtering_conditional_rendering/index.md index fc315c24dd32b5c..a8363bb84972141 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_filtering_conditional_rendering/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_filtering_conditional_rendering/index.md @@ -19,7 +19,7 @@ As we near the end of our React journey (for now at least), we'll add the finish JavaScript languages, knowledge of the terminal/command line.

diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_resources/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_resources/index.md index 54c84181637ab5e..fe25eecd3c22600 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_resources/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_resources/index.md @@ -19,7 +19,7 @@ Our final article provides you with a list of React resources that you can use t JavaScript languages, knowledge of the terminal/command line.

diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md index 181f07d0e2b805d..d0267f29d4499f9 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md @@ -22,7 +22,7 @@ Let's say that we've been tasked with creating a proof-of-concept in React – a JavaScript languages, knowledge of the terminal/command line.

diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md index 2a157faa5758240..065064c990427f6 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md @@ -21,7 +21,7 @@ In the last article we started developing our to-do list app. The central object JavaScript languages, and have knowledge of the terminal/command line.

diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md index 334d31a2bdd2f62..c5c31b7e4606c79 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md @@ -20,7 +20,7 @@ In the previous article we learned about Svelte's TypeScript support, and how to JavaScript languages, and have knowledge of the terminal/command line.

diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md index a71c651916b137a..f91c3a1d960cef9 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md @@ -21,7 +21,7 @@ In this article we'll provide a quick introduction to the [Svelte framework](htt JavaScript languages, and have knowledge of the terminal/command line.

@@ -89,7 +89,7 @@ Since Svelte is a compiler, you can't just add a ` ``` -3. This is doing the same job as the {{htmlelement("link")}} element for CSS. It applies the JavaScript to the page, so it can have an effect on the HTML (along with the CSS, and anything else on the page). -4. Add this code to the `scripts/main.js` file: + This is doing the same job as the {{htmlelement("link")}} element for CSS. It applies the JavaScript to the page, so it can have an effect on the HTML (along with the CSS, and anything else on the page). + +4. Add this code to your `scripts/main.js` file: ```js const myHeading = document.querySelector("h1"); myHeading.textContent = "Hello world!"; ``` -5. Make sure the HTML and JavaScript files are saved. Then load `index.html` in your browser. You should see something like this: +5. Make sure the HTML and JavaScript files are saved, then load `index.html` in your browser. You should see something like this: ![Heading "hello world" above a firefox logo](hello-world.png) > [!NOTE] -> The reason the instructions (above) place the {{htmlelement("script")}} element near the bottom of the HTML file is that **the browser reads code in the order it appears in the file**. +> The reason the above instructions place the {{htmlelement("script")}} element near the bottom of the HTML file is that **the browser reads code in the order it appears in the file**. > -> If the JavaScript loads first and it is supposed to affect the HTML that hasn't loaded yet, there could be problems. Placing JavaScript near the bottom of an HTML page is one way to accommodate this dependency. To learn more about alternative approaches, see [Script loading strategies](/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#script_loading_strategies). +> If the JavaScript loads first and it is supposed to affect the HTML that hasn't loaded yet, there could be problems. Placing JavaScript near the bottom of an HTML page is one way to accommodate this dependency. ### What happened? -The heading text changed to _Hello world!_ using JavaScript. You did this by using a function called {{domxref("Document.querySelector", "querySelector()")}} to grab a reference to your heading, and then store it in a variable called `myHeading`. This is similar to what we did using CSS selectors. When you want to do something to an element, you need to select it first. +We have used JavaScript to change the heading text to _Hello world!_. We did this by using a function called {{domxref("Document.querySelector", "querySelector()")}} to grab a reference to your heading, and then store it in a variable called `myHeading`. This is similar to what we did using CSS selectors. When you want to do something to an element, you need to select it first. Following that, the code set the value of the `myHeading` variable's {{domxref("Node.textContent", "textContent")}} property (which represents the content of the heading) to _Hello world!_. @@ -185,7 +208,7 @@ Everything in between is a comment. */ ``` -If your comment contains no line breaks, it's an option to put it behind two slashes like this: +If your comment contains no line breaks, you can put it behind two slashes like this: ```js // This is a comment @@ -303,9 +326,9 @@ let myVariable = document.querySelector("h1"); alert("hello!"); ``` -These functions, `document.querySelector` and `alert`, are built into the browser. +The `document.querySelector()` and `alert()` functions are built into the browser. -If you see something which looks like a variable name, but it's followed by parentheses— `()` —it is likely a function. Functions often take {{Glossary("Argument", "arguments")}}: bits of data they need to do their job. Arguments go inside the parentheses, separated by commas if there is more than one argument. +If you see something which looks like a variable name, but it's followed by parentheses — `()` — it is likely to be a function. Functions often take {{Glossary("Argument", "arguments")}}: bits of data they need to do their job. Arguments go inside the parentheses, separated by commas if there is more than one argument. For example, the `alert()` function makes a pop-up box appear inside the browser window, but we need to give it a string as an argument to tell the function what message to display. @@ -340,7 +363,7 @@ document.querySelector("html").addEventListener("click", function () { ``` There are a number of ways to attach an event handler to an element. -Here we select the {{htmlelement("html")}} element. We then call its [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) function, passing in the name of the event to listen to (`'click'`) and a function to run when the event happens. +Here we select the {{htmlelement("html")}} element. We then call its [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) function, passing in the name of the event to listen for (`'click'`) and a function to run when the event happens. The function we just passed to `addEventListener()` here is called an _anonymous function_, because it doesn't have a name. There's an alternative way of writing anonymous functions, which we call an _arrow function_. An arrow function uses `() =>` instead of `function ()`: @@ -353,45 +376,44 @@ document.querySelector("html").addEventListener("click", () => { ## Supercharging our example website -With this review of JavaScript basics completed (above), let's add some new features to our example site. +With our review of JavaScript basics completed, let's add some new features to our example site. Before going any further, delete the current contents of your `main.js` file — the bit you added earlier during the "Hello world!" example — and save the empty file. If you don't, the existing code will clash with the new code you are about to add. ### Adding an image changer -In this section, you will learn how to use JavaScript and DOM API features to alternate the display of one of two images. This change will happen as a user clicks the displayed image. +In this section, you will learn how to use JavaScript and DOM API features to alternate the display between two images. This change will happen as a user clicks the displayed image. -1. Choose an image you want to feature on your example site. Ideally, the image will be the same size as the image you added previously, or as close as possible. +1. Choose another image to feature on your example site. Ideally, the image will be the same size as the image you added previously, or as close as possible. 2. Save this image in your `images` folder. -3. Rename the image _firefox2.png_. -4. Add the following JavaScript code to your `main.js` file. +3. Add the following JavaScript code to your `main.js` file, making sure to replace `firefox2.png` and both instances of `firefox-icon.png` with your second and first image names, respectvely. ```js const myImage = document.querySelector("img"); - myImage.onclick = () => { + myImage.addEventListener("click", () => { const mySrc = myImage.getAttribute("src"); if (mySrc === "images/firefox-icon.png") { myImage.setAttribute("src", "images/firefox2.png"); } else { myImage.setAttribute("src", "images/firefox-icon.png"); } - }; + }); ``` -5. Save all files and load `index.html` in the browser. Now when you click the image, it should change to the other one. +4. Save all files and load `index.html` in the browser. Now when you click the image, it should change to the other one. -This is what happened. You stored a reference to your {{htmlelement("img")}} element in `myImage`. Next, you made its `onclick` event handler property equal to a function with no name (an "anonymous" function). So every time this element is clicked: +In the above code, you stored a reference to your {{htmlelement("img")}} element in `myImage`. Next, you gave it a `click` event handler function with no name (an "anonymous" function). Every time this element is clicked, the function: -1. The code retrieves the value of the image's `src` attribute. -2. The code uses a conditional to check if the `src` value is equal to the path of the original image: +1. Retrieves the value of the image's `src` attribute. +2. Uses a conditional to check if the `src` value is equal to the path of the original image: 1. If it is, the code changes the `src` value to the path of the second image, forcing the other image to be loaded inside the {{htmlelement("img")}} element. - 2. If it isn't (meaning it must already have changed), the `src` value swaps back to the original image path, to the original state. + 2. If it isn't (meaning it must already have changed), the `src` value swaps back to the original image path. ### Adding a personalized welcome message -Next, let's change the page title to a personalized welcome message when the user first visits the site. This welcome message will persist. Should the user leave the site and return later, we will save the message using the [Web Storage API](/en-US/docs/Web/API/Web_Storage_API). We will also include an option to change the user, and therefore, the welcome message. +Next, let's change the page heading to a personalized welcome message when the user first visits the site. This welcome message will persist. Should the user leave the site and return later, we will save the message using the [Web Storage API](/en-US/docs/Web/API/Web_Storage_API). We will also include an option to change the username, and therefore, the welcome message. 1. In `index.html`, add the following line just before the {{htmlelement("script")}} element: @@ -399,14 +421,14 @@ Next, let's change the page title to a personalized welcome message when the use ``` -2. In `main.js`, place the following code at the bottom of the file, exactly as it is written. This takes references to the new button and the heading, storing each inside variables: +2. In `main.js`, place the following code at the bottom of the file, exactly as it is written. This creates references to the new button and the heading, storing each inside variables: ```js let myButton = document.querySelector("button"); let myHeading = document.querySelector("h1"); ``` -3. Add the following function to set the personalized greeting. This won't do anything yet, but this will change soon. +3. Add the following function to set the personalized greeting. This won't do anything yet; we will call the function later on. ```js function setUserName() { @@ -416,7 +438,7 @@ Next, let's change the page title to a personalized welcome message when the use } ``` - The `setUserName()` function contains a [`prompt()`](/en-US/docs/Web/API/Window/prompt) function, which displays a dialog box, similar to `alert()`. This `prompt()` function does more than `alert()`, asking the user to enter data, and storing it in a variable after the user clicks _OK_. In this case, we are asking the user to enter a name. Next, the code calls on an API `localStorage`, which allows us to store data in the browser and retrieve it later. We use localStorage's `setItem()` function to create and store a data item called `'name'`, setting its value to the `myName` variable which contains the user's entry for the name. Finally, we set the `textContent` of the heading to a string, plus the user's newly stored name. + The `setUserName()` function contains a [`prompt()`](/en-US/docs/Web/API/Window/prompt) function, which displays a dialog box, similar to `alert()`. This `prompt()` function does more than `alert()`, asking the user to enter data, and storing it in a variable after the user clicks _OK_. In this case, we are asking the user to enter a name. Next, the code calls on the `localStorage` API, which allows us to store data in the browser and retrieve it later. We use localStorage's `setItem()` function to create and store a data item called `"name"`, setting its value to the `myName` variable which contains the user's entry for the name. Finally, we set the `textContent` of the heading to a string, plus the user's newly stored name. 4. Add the following condition block after the function declaration. We could call this initialization code, as it structures the app when it first loads. @@ -429,21 +451,21 @@ Next, let's change the page title to a personalized welcome message when the use } ``` - This first line of this block uses the negation operator (logical NOT, represented by the `!`) to check whether the `name` data exists. If not, the `setUserName()` function runs to create it. If it exists (that is, the user set a user name during a previous visit), we retrieve the stored name using `getItem()` and set the `textContent` of the heading to a string, plus the user's name, as we did inside `setUserName()`. + This first line of this block uses the negation operator (logical NOT, represented by the `!`) to check whether the `name` data item is already stored in in localStorage. If not, the `setUserName()` function runs to create it. If it exists (that is, the user set a user name during a previous visit), we retrieve the stored name using `getItem()` and set the `textContent` of the heading to a string, plus the user's name, as we did inside `setUserName()`. -5. Put this `onclick` event handler (below) on the button. When clicked, `setUserName()` runs. This allows the user to enter a different name by pressing the button. +5. Add a `click` event handler function to the button, as shown below. When clicked, `setUserName()` runs. This allows the user to enter a different name by pressing the button. ```js - myButton.onclick = () => { + myButton.addEventListener("click", () => { setUserName(); - }; + }); ``` ### A user name of null? -When you run the example and get the dialog box that prompts you to enter your user name, try pressing the _Cancel_ button. You should end up with a title that reads _Mozilla is cool, null_. This happens because—when you cancel the prompt—the value is set as [`null`](/en-US/docs/Web/JavaScript/Reference/Operators/null). _Null_ is a special value in JavaScript that refers to the absence of a value. +When you run the example and get the dialog box that prompts you to enter your user name, try pressing the _Cancel_ button. You should end up with a title that reads _Mozilla is cool, null_. This happens because the value is set as [`null`](/en-US/docs/Web/JavaScript/Reference/Operators/null) when you cancel the prompt. _null_ is a special value in JavaScript that refers to the absence of a value. -Also, try clicking _OK_ without entering a name. You should end up with a title that reads _Mozilla is cool,_ for fairly obvious reasons. +Also, try clicking _OK_ without entering a name. You should end up with a title that reads _Mozilla is cool,_ because you've set `myName` to an empty string. To avoid these problems, you could check that the user hasn't entered a blank name. Update your `setUserName()` function to this: @@ -469,13 +491,11 @@ If you have followed all the instructions in this article, you should end up wit If you get stuck, you can compare your work with our [finished example code on GitHub](https://github.com/mdn/beginner-html-site-scripted/blob/main/scripts/main.js). -We have just scratched the surface of JavaScript. If you enjoyed playing, and wish to go further, take advantage of the resources listed below. +We have just scratched the surface of JavaScript. You'll find a lot more JavaScript in our [Core modules](/en-US/docs/Learn_web_development/Core). ## See also -- [Dynamic client-side scripting with JavaScript](/en-US/docs/Learn/JavaScript) - - : Dive into JavaScript in much more detail. - [Learn JavaScript](https://learnjavascript.online/) - : This is an excellent resource for aspiring web developers! Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by an automated assessment. The first 40 lessons are free. The complete course is available for a small one-time payment. -{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}} +{{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/Styling_the_content", "Learn_web_development/Getting_started/Your_first_website/Publishing_your_website", "Learn_web_development/Getting_started/Your_first_website")}} diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/javascript_basics/website-screen-scripted.png b/files/en-us/learn_web_development/getting_started/your_first_website/adding_interactivity/website-screen-scripted.png similarity index 100% rename from files/en-us/learn_web_development/getting_started/your_first_website/javascript_basics/website-screen-scripted.png rename to files/en-us/learn_web_development/getting_started/your_first_website/adding_interactivity/website-screen-scripted.png diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/html_basics/alt-text-example.png b/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/alt-text-example.png similarity index 100% rename from files/en-us/learn_web_development/getting_started/your_first_website/html_basics/alt-text-example.png rename to files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/alt-text-example.png diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/html_basics/finished-test-page-small.png b/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/finished-test-page-small.png similarity index 100% rename from files/en-us/learn_web_development/getting_started/your_first_website/html_basics/finished-test-page-small.png rename to files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/finished-test-page-small.png diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/html_basics/grumpy-cat-attribute-small.png b/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/grumpy-cat-attribute-small.png similarity index 100% rename from files/en-us/learn_web_development/getting_started/your_first_website/html_basics/grumpy-cat-attribute-small.png rename to files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/grumpy-cat-attribute-small.png diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/html_basics/grumpy-cat-small.png b/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/grumpy-cat-small.png similarity index 100% rename from files/en-us/learn_web_development/getting_started/your_first_website/html_basics/grumpy-cat-small.png rename to files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/grumpy-cat-small.png diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/html_basics/index.md b/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/index.md similarity index 73% rename from files/en-us/learn_web_development/getting_started/your_first_website/html_basics/index.md rename to files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/index.md index 4e878dd75524cb1..36fe6607563db29 100644 --- a/files/en-us/learn_web_development/getting_started/your_first_website/html_basics/index.md +++ b/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/index.md @@ -1,12 +1,35 @@ --- -title: HTML basics -slug: Learn_web_development/Getting_started/Your_first_website/HTML_basics +title: Creating the content +slug: Learn_web_development/Getting_started/Your_first_website/Creating_the_content page-type: tutorial-chapter --- -{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}} - -HTML (**H**yper**T**ext **M**arkup **L**anguage) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions. + + +{{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like", "Learn_web_development/Getting_started/Your_first_website/Styling_the_content", "Learn_web_development/Getting_started/Your_first_website")}} + +HTML (**H**yper**T**ext **M**arkup **L**anguage) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. This article provides a basic understanding of HTML and its functions, and shows you how to create the basic content for your first website. + + + + + + + + + + + + +
Prerequisites: + Basic familiarity with your computer operating system, the basic software you will use to build a website, and file systems. +
Learning outcomes: +
    +
  • The purpose and function of HTML.
    • +
  • The basic parts of HTML syntax — opening and closing tags, elements, attributes, head, body.
    • +
  • Common HTML elements including paragraphs, headings, images, lists, and links.
    • +
+
## So what is HTML? @@ -77,9 +100,12 @@ Some elements have no content and are called **{{glossary("void element", "void This contains two attributes, but there is no closing `` tag and no inner content. This is because an image element doesn't wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears. -### Anatomy of an HTML document +## Creating your first HTML document + +That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's create a basic HTML file, and have a look at what it is made up of: -That wraps up the basics of individual HTML elements, but they aren't handy on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's revisit the code we put into our `index.html` example (which we first met in the [Dealing with files](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) article): +1. Inside your `web-projects` folder, create another new folder called `first-website`. +2. Inside `first-website`, Create a new file called `index.html`, and insert the following code into the file exactly as shown: ```html @@ -90,14 +116,14 @@ That wraps up the basics of individual HTML elements, but they aren't handy on t My test page - My test image + My test image ``` Here, we have the following: -- `` — [doctype](/en-US/docs/Glossary/Doctype). It is a required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days, they don't do much and are basically just needed to make sure your document behaves correctly. That's all you need to know for now. +- `` — The [doctype](/en-US/docs/Glossary/Doctype) is a required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days, they don't do much and are basically just needed to make sure your document behaves correctly. That's all you need to know for now. - `` — the {{htmlelement("html")}} element. This element wraps all the content on the entire page and is sometimes known as the root element. It also includes the `lang` attribute, setting the primary language of the document. - `` — the {{htmlelement("head")}} element. This element acts as a container for all the stuff you want to include on the HTML page that _isn't_ the content you are showing to your page's viewers. This includes things like {{Glossary("keyword", "keywords")}} and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more. - `` — This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on. @@ -107,28 +133,36 @@ Here, we have the following: ## Images -Let's turn our attention to the {{htmlelement("img")}} element again: +Let's turn our attention to the {{htmlelement("img")}} element: ```html -My test image +My test image ``` -As we said before, it embeds an image into our page in the position it appears. It does this via the `src` (source) attribute, which contains the path to our image file. +This embeds an image into our page in the position it appears. It does this via the `src` (source) attribute, which contains the path to our image file. We have also included an `alt` (alternative) attribute. In the [`alt` attribute](/en-US/docs/Web/HTML/Element/img#authoring_meaningful_alternate_descriptions), you specify descriptive text for users who cannot see the image, possibly because of the following reasons: 1. They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them. -2. Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your `src` attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image: +2. Something has gone wrong causing the image not to display. If the `src` attribute does not contain a valid path to an image, the alt text will be displayed instead: ![The words: my test image](alt-text-example.png) The keywords for alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth." -Try coming up with some better alt text for your image now. - > [!NOTE] > Find out more about accessibility in our [accessibility learning module](/en-US/docs/Learn/Accessibility). +Let's get your image displaying now. + +1. Inside the `first-website` folder, Create a new folder called `images`, and put the image you chose in the previous example inside this folder. +2. Inside the `` tag's `alt` attribute value, enter the path to your image. It is inside a folder called `images`, which is inside the same directory as your `index.html` file, therefore the path will be `images/` plus the name of your image. For example, if your image was called `firefox-icon.png`, your `src` attribute would look like this: `src="images/firefox-icon.png"`. +3. replace the `alt` attribute value — `My test image` — with some text that better describes your image. +4. Open your `index.html` file inside a web browser. You should see your image displayed. If not, check your `` element against our code above; make sure it is not missing any of the syntax, such as the quote marks. Make sure the image filename is correct. + +> [!NOTE] +> If the image is really large and therefore doesn't fit on the screen, don't worry about this. We'll fix this issue in the next article. + ## Marking up text This section will cover some essential HTML elements you'll use for marking up the text. @@ -148,7 +182,7 @@ Heading elements allow you to specify that certain parts of your content are hea > [!NOTE] > Anything in HTML between `` is an **HTML comment**. The browser ignores comments as it renders the code. In other words, they are not visible on the page - just in the code. HTML comments are a way for you to write helpful notes about your code or logic. -Now try adding a suitable title to your HTML page just above your {{htmlelement("img")}} element. +Now try adding a suitable main title to your HTML page just above your {{htmlelement("img")}} element. Save the file and view it in a browser to see the effect. > [!NOTE] > You'll see that your heading level 1 has an implicit style. Don't use heading elements to make text bigger or bold, because they are used for [accessibility](/en-US/docs/Learn/Accessibility/HTML#text_content) and [other reasons such as SEO](/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure). Try to create a meaningful sequence of headings on your pages, without skipping levels. @@ -161,14 +195,14 @@ As explained above, {{htmlelement("p")}} elements are for containing paragraphs

This is a single paragraph

``` -Add your sample text (you should have it from [_What will your website look like?_](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like)) into one or a few paragraphs, placed directly below your {{htmlelement("img")}} element. +Add your sample text from the previous article into one or a few paragraphs, placed directly below your {{htmlelement("img")}} element. Save it and look at your page in a browser. ### Lists A lot of the web's content is lists and HTML has special elements for these. Marking up lists always consists of at least 2 elements. The most common list types are ordered and unordered lists: 1. **Unordered lists** are for lists where the order of the items doesn't matter, such as a shopping list. These are wrapped in a {{htmlelement("ul")}} element. -2. **Ordered lists** are for lists where the order of the items does matter, such as a recipe. These are wrapped in an {{htmlelement("ol")}} element. +2. **Ordered lists** are for lists where the order of the items does matter, such as a list of cooking instructions in a recipe. These are wrapped in an {{htmlelement("ol")}} element. Each item inside the lists is put inside an {{htmlelement("li")}} (list item) element. @@ -195,11 +229,11 @@ We could modify the markup to this

working together…

``` -Try adding an ordered or unordered list to your example page. +Try adding an ordered or unordered list to your example page, and view the result in a browser. ## Links -Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — {{htmlelement("a")}} — "a" being the short form for "anchor". To make text within your paragraph into a link, follow these steps: +Links are very important — they are what makes the web a web! To add a link, we need to use a specific element — {{htmlelement("a")}} — "a" being the short form for "anchor". To make text within your paragraph into a link, follow these steps: 1. Choose some text. We chose the text "Mozilla Manifesto". 2. Wrap the text in an {{htmlelement("a")}} element, as shown below: @@ -236,6 +270,6 @@ If you have followed all the instructions in this article, you should end up wit If you get stuck, you can always compare your work with our [finished example code](https://github.com/mdn/beginner-html-site/blob/main/index.html) on GitHub. -Here, we have only really scratched the surface of HTML. To find out more, go to our [Learning HTML](/en-US/docs/Learn/HTML) topic. +Here, we have only really scratched the surface of HTML. You'll learn a lot more in our [Core modules](/en-US/docs/Learn_web_development/Core). -{{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}} +{{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like", "Learn_web_development/Getting_started/Your_first_website/Styling_the_content", "Learn_web_development/Getting_started/Your_first_website")}} diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/index.md b/files/en-us/learn_web_development/getting_started/your_first_website/index.md index 67d7a394862a95d..4ea42bd07ef972a 100644 --- a/files/en-us/learn_web_development/getting_started/your_first_website/index.md +++ b/files/en-us/learn_web_development/getting_started/your_first_website/index.md @@ -24,24 +24,21 @@ If this is not the case, we'd suggest that you run through the [Environment setu - : Before you start writing the code for your website, you should plan it first. What information are you showcasing? What fonts and colors are you using? Here we'll outline a simple method that you can follow to plan out your site's content and design. -- [HTML basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/HTML_basics) +- [Creating the content](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) - - : HyperText Markup Language (HTML) is the code that you use to structure your web content and give it meaning and purpose. For example, is my content a set of paragraphs or a list of bullet points? Do I have images inserted on my page? Do I have a data table? Without overwhelming you, this article will provide enough information to make you familiar with HTML. + - : HTML (**H**yper**T**ext **M**arkup **L**anguage) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. This article provides a basic understanding of HTML and its functions, and shows you how to create the basic content for your first website. -- [CSS basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/CSS_basics) +- [Styling the content](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) - - : Cascading Style Sheets (CSS) is the code that you use to style your website. For example, do you want the text to be black or red? Where should content be drawn on the screen? What background images and colors should be used to decorate your website? In this article, we'll take you through what you need to get started. + - : CSS (Cascading Style Sheets) is the code that styles web content. _Styling the content_ walks through what you need to get started. We'll answer questions like: How do I make text red? How do I make content display at a certain location in the (webpage) layout? How do I decorate my webpage with background images and colors? -- [JavaScript basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics) +- [Adding interactivity](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) - - : JavaScript is the programming language that you use to add interactive features to your website. Some examples could be games, things that happen when buttons are pressed or data is entered in forms, dynamic styling effects, animation, and much more. In this article, we'll give you an idea of what is possible with this exciting language, and how to get started. + - : JavaScript is a programming language that adds interactivity to websites. This happens in games, in the behavior of responses when buttons are pressed or with data entry on forms, with dynamic styling, with animation, etc. This article helps you get started with JavaScript and furthers your understanding of what is possible. -- [Publishing your sample code](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) +- [Publishing your webaite](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) - - : Once you have finished writing the code and organizing the files that make up your website, you need to put it all online so people can find it. This article describes how to get your simple sample code online with minimum effort. - -- [How the web works](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/How_the_Web_works) - - : When you access your favorite website, a lot of complicated things happen in the background that you may not know about. Here we will outline what happens when you view a webpage on your computer. + - : Once you finish writing the code and organizing the files that make up your website, you need to put it all online so people can find it. This article explains how to get your sample website online with little effort. {{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Command_line", "Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like", "Learn_web_development/Getting_started")}} diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md b/files/en-us/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md index c63662465365d0b..92a2640aa86a756 100644 --- a/files/en-us/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md +++ b/files/en-us/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md @@ -4,9 +4,34 @@ slug: Learn_web_development/Getting_started/Your_first_website/Publishing_your_w page-type: tutorial-chapter --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}} - -Once you finish writing the code and organizing the files that make up your website, you need to put it all online so people can find it. This article explains how to get your simple sample code online with little effort. + + +{{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/Adding_interactivity", "Learn_web_development/Getting_started/Web_standards", "Learn_web_development/Getting_started/Your_first_website")}} + +Once you finish writing the code and organizing the files that make up your website, you need to put it all online so people can find it. This article explains how to get your sample website online with little effort. + + + + + + + + + + + + +
Prerequisites: + Basic familiarity with your computer operating system, the basic software you will use to build a website, and file systems. +
Learning outcomes: +
    +
  • The basic tools and concepts involved in publishing a website — hosting, domains, FTP programs.
    • +
  • What alternative hosting options are available, for example, Google App Engine, GitHub, and CodePen.
    • +
  • Publishing a website using GitHub Pages.
    • +
  • Hosting, how to purchase it, and how to put a website online.
    • +
  • TLDs and how to register a domain.
    • +
+
## What are the options? @@ -81,4 +106,4 @@ To learn more, see [GitHub Pages Help](https://docs.github.com/en/pages/getting- - [How much does it cost to do something on the web?](/en-US/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost) - [Deploy a Website](https://www.codecademy.com/learn/deploy-a-website): A nice tutorial from Codecademy that goes a bit further and shows some additional techniques. -{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}} +{{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/Adding_interactivity", "Learn_web_development/Getting_started/Web_standards", "Learn_web_development/Getting_started/Your_first_website")}} diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/css_basics/box-model.png b/files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/box-model.png similarity index 100% rename from files/en-us/learn_web_development/getting_started/your_first_website/css_basics/box-model.png rename to files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/box-model.png diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/css_basics/boxes.jpg b/files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/boxes.jpg similarity index 100% rename from files/en-us/learn_web_development/getting_started/your_first_website/css_basics/boxes.jpg rename to files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/boxes.jpg diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/css_basics/css-declaration-small.png b/files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/css-declaration-small.png similarity index 100% rename from files/en-us/learn_web_development/getting_started/your_first_website/css_basics/css-declaration-small.png rename to files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/css-declaration-small.png diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/css_basics/index.md b/files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/index.md similarity index 79% rename from files/en-us/learn_web_development/getting_started/your_first_website/css_basics/index.md rename to files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/index.md index a5aa00f52aef6bb..e8a704cdae2e8e7 100644 --- a/files/en-us/learn_web_development/getting_started/your_first_website/css_basics/index.md +++ b/files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/index.md @@ -1,12 +1,35 @@ --- -title: CSS basics -slug: Learn_web_development/Getting_started/Your_first_website/CSS_basics +title: Styling the content +slug: Learn_web_development/Getting_started/Your_first_website/Styling_the_content page-type: tutorial-chapter --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}} + -CSS (Cascading Style Sheets) is the code that styles web content. _CSS basics_ walks through what you need to get started. We'll answer questions like: How do I make text red? How do I make content display at a certain location in the (webpage) layout? How do I decorate my webpage with background images and colors? +{{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/Creating_the_content", "Learn_web_development/Getting_started/Your_first_website/Adding_interactivity", "Learn_web_development/Getting_started/Your_first_website")}} + +CSS (Cascading Style Sheets) is the code that styles web content. _Styling the content_ walks through what you need to get started. We'll answer questions like: How do I make text red? How do I make content display at a certain location in the (webpage) layout? How do I decorate my webpage with background images and colors? + + + + + + + + + + + + +
Prerequisites: + Basic familiarity with your computer operating system, the basic software you will use to build a website, and file systems. +
Learning outcomes: +
    +
  • The purpose and function of CSS.
    • +
  • The basic parts of CSS syntax — rulesets, selectors, declarations, properties, property values.
    • +
  • Common CSS functionality including box model, changing colors and fonts, and positioning HTML elements.
    • +
+
## What is CSS? @@ -18,11 +41,15 @@ p { } ``` -Let's try it out! Using a text editor, paste the three lines of CSS (above) into a new file. Save the file as `style.css` in a directory named `styles`. +Let's try it out! + +1. Inside your `first-website` folder, create another new folder called `styles`. +2. Using a text editor, paste the three lines of CSS shown above into a new file. +3. Save the file inside your `styles` folder with a filename of `style.css`. -To make the code work, we still need to apply this CSS (above) to your HTML document. Otherwise, the styling won't change the appearance of the HTML. (If you haven't been following our project, pause here to read [Dealing with files](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) and [HTML basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/HTML_basics).) +To make the code work, we still need to apply this CSS (above) to your HTML document. Otherwise, the styling won't change the appearance of the HTML. -1. Open your `index.html` file. Paste the following line in the head (between the {{HTMLElement("head")}} and `` tags): +1. Open your `index.html` file. Paste the following line inside the HTML head (between the {{HTMLElement("head")}} and `` tags): ```html @@ -34,7 +61,7 @@ To make the code work, we still need to apply this CSS (above) to your HTML docu If your paragraph text is red, congratulations! Your CSS is working. -### Anatomy of a CSS ruleset +## Anatomy of a CSS ruleset Let's dissect the CSS code for red paragraph text to understand how it works: @@ -47,7 +74,7 @@ The whole structure is called a **ruleset**. (The term _ruleset_ is often referr - Declaration - : This is a single rule like `color: red;`. It specifies which of the element's **properties** you want to style. - Properties - - : These are ways in which you can style an HTML element. (In this example, `color` is a property of the {{htmlelement("p")}} elements.) In CSS, you choose which properties you want to affect in the rule. + - : These are features of an HTML element that you can change the values of, to make it styled differently. (In this example, `color` is a property of the {{htmlelement("p")}} elements.) In CSS, you choose which properties you want to affect in the rule. - Property value - : To the right of the property—after the colon—there is the **property value**. This chooses one out of many possible appearances for a given property. (For example, there are many `color` values in addition to `red`.) @@ -194,7 +221,7 @@ Adjust the `px` values as you like. Your work-in-progress should look similar to ## CSS: all about boxes -Something you'll notice about writing CSS: a lot of it is about boxes. This includes setting size, color, and position. Most HTML elements on your page can be thought of as boxes sitting on top of other boxes. +Something you'll notice about CSS as you use it more: a lot of it is about boxes. This includes setting size, color, and position. Most HTML elements on your page can be thought of as boxes sitting on top of other boxes. ![A big stack of boxes or crates sat on top of one another](boxes.jpg) @@ -240,7 +267,7 @@ body { } ``` -There are several declarations for the {{htmlelement("body")}} element. Let's go through these line-by-line: +The above code sets new values for several properties of the {{htmlelement("body")}} element. Let's go through these line-by-line: - `width: 600px;` This forces the body to always be 600 pixels wide. - `margin: 0 auto;` When you set two values on a property like `margin` or `padding`, the first value affects the element's top _and_ bottom side (setting it to `0` in this case); the second value affects the left _and_ right side. (Here, `auto` is a special value that divides the available horizontal space evenly between left and right). You can also use one, two, three, or four values, as documented in [Margin Syntax](/en-US/docs/Web/CSS/margin#syntax). @@ -280,18 +307,18 @@ Try experimenting with different values to see how it changes the appearance. img { display: block; margin: 0 auto; + max-width: 100%; } ``` -Next, we center the image to make it look better. We could use the `margin: 0 auto` trick again as we did for the body. But there are differences that require an additional setting to make the CSS work. +Next, we center the image to make it look better. We could use the same `margin: 0 auto` trick as we did for the body. But there are differences that require an additional setting to make the CSS work. -The {{htmlelement("body")}} is a **block** element, meaning it takes up space on the page. The margin applied to a block element will be respected by other elements on the page. In contrast, images are **inline** elements, for the auto margin trick to work on this image, we must give it block-level behavior using `display: block;`. +The {{htmlelement("body")}} is a **block** element, meaning it takes up space on the page. The margin applied to a block element will be respected by other elements on the page. In contrast, images are **inline** elements; for the auto margin trick to work on this image, we must give it block-level behavior using `display: block;`. -> [!NOTE] -> The instructions above assume that you're using an image smaller than the width set on the body. (600 pixels) If your image is larger, it will overflow the body, spilling into the rest of the page. To fix this, you can either: 1) reduce the image width using a [graphics editor](https://en.wikipedia.org/wiki/Raster_graphics_editor), or 2) use CSS to size the image by setting the {{cssxref("width")}} property on the `` element with a smaller value. +Finally, we include `max-width: 100%;` to make sure that, if the image is larger than the `width` set on the body (600 pixels), it will be displayed at this width, and no biger. > [!NOTE] -> Don't be too concerned if you don't completely understand `display: block;` or the differences between a block element and an inline element. It will make more sense as you continue your study of CSS. You can find more information about different display values on MDN's [display reference page](/en-US/docs/Web/CSS/display). +> Don't be too concerned if you don't completely understand `display: block;` and the differences between a block element and an inline element, or `max-width: 100%;`. They will make more sense as you continue your study of CSS. You can find more information about these propeties on MDN's {{cssxref("display")}} and {{cssxref("max-width")}} reference pages. ## Conclusion @@ -301,6 +328,6 @@ If you followed all the instructions in this article, you should have a page tha (You can [view our version here](https://mdn.github.io/beginner-html-site-styled/).) If you get stuck, you can always compare your work with our [finished example code on GitHub](https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css). -In this exercise, we have just scratched the surface of CSS. To go further, see [Learning to style HTML using CSS](/en-US/docs/Learn/CSS). +In this exercise, we have just scratched the surface of CSS. Our [Core modules](/en-US/docs/Learn_web_development/Core) will cover it in a lot more detail. -{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}} +{{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/Creating_the_content", "Learn_web_development/Getting_started/Your_first_website/Adding_interactivity", "Learn_web_development/Getting_started/Your_first_website")}} diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/css_basics/website-screenshot-final.png b/files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/website-screenshot-final.png similarity index 100% rename from files/en-us/learn_web_development/getting_started/your_first_website/css_basics/website-screenshot-final.png rename to files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/website-screenshot-final.png diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/css_basics/website-screenshot-font-small.png b/files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/website-screenshot-font-small.png similarity index 100% rename from files/en-us/learn_web_development/getting_started/your_first_website/css_basics/website-screenshot-font-small.png rename to files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/website-screenshot-font-small.png diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/css_basics/website-screenshot-styled.png b/files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/website-screenshot-styled.png similarity index 100% rename from files/en-us/learn_web_development/getting_started/your_first_website/css_basics/website-screenshot-styled.png rename to files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/website-screenshot-styled.png diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md b/files/en-us/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md index 3013ba8ba00c89a..b187ea9daa93efc 100644 --- a/files/en-us/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md +++ b/files/en-us/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md @@ -68,7 +68,7 @@ To choose a color, go to [the Color Picker](/en-US/docs/Web/CSS/CSS_colors/Color To choose an image, go to [Google Images](https://www.google.com/imghp) and search for something suitable. 1. When you find the image you want, click on the image to get an enlarged view of it. -2. Right-click the image (Ctrl + click on a Mac), choose _Save Image As…_, and choose a safe place to save your image. Alternatively, copy the image's web address from your browser's address bar for later use. +2. Right-click the image (Ctrl + click on a Mac), choose _Save Image As…_, and choose a safe place to save your image. ![Search results for a search term on Google Images](updated-google-images.png) From 8ee01acb8e629ebf17fc3c5ef413c8e60cfce246 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Wed, 30 Oct 2024 12:24:18 +0000 Subject: [PATCH 03/85] more changes --- files/en-us/games/tutorials/2d_breakout_game_phaser/index.md | 2 +- .../games/tutorials/2d_breakout_game_pure_javascript/index.md | 2 +- .../tools_and_setup/upload_files_to_a_web_server/index.md | 2 +- .../web_mechanics/how_does_the_internet_work/index.md | 2 +- .../css/css_layout/practical_positioning_examples/index.md | 2 +- files/en-us/learn/css/index.md | 2 +- .../learn/html/howto/use_javascript_within_a_webpage/index.md | 2 +- files/en-us/learn/html/index.md | 2 +- files/en-us/learn/javascript/first_steps/index.md | 2 +- files/en-us/learn/server-side/express_nodejs/index.md | 2 +- files/en-us/related/imsc/basics/index.md | 2 +- files/en-us/web/css/index.md | 2 +- files/en-us/web/css/tutorials/index.md | 2 +- files/en-us/web/guide/index.md | 2 +- files/en-us/web/html/index.md | 2 +- .../tutorials/cycletracker/html_and_css/index.md | 2 +- files/en-us/web/tutorials/index.md | 4 ++-- 17 files changed, 18 insertions(+), 18 deletions(-) diff --git a/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md b/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md index 992652fff723c7f..502a79ed08d6799 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md @@ -12,7 +12,7 @@ In this step-by-step tutorial, we create a simple mobile **MDN Breakout** game w Every step has editable, live samples available to play with, so you can see what the intermediate stages should look like. You will learn the basics of using the Phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, framework-specific helper functions, animations and tweens, and winning and losing states. -To get the most out of this series of articles you should already have basic to intermediate [JavaScript](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics) knowledge. After working through this tutorial, you should be able to build your own simple Web games with Phaser. +To get the most out of this series of articles you should already have basic to intermediate [JavaScript](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) knowledge. After working through this tutorial, you should be able to build your own simple Web games with Phaser. ![Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives.](mdn-breakout-phaser.png) diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/index.md index b950550a13122d3..b751409e3563482 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/index.md @@ -12,7 +12,7 @@ In this step-by-step tutorial we create an **MDN Breakout** game written entirel Every step has editable, live samples available to play with so you can see what the intermediate stages should look like. You will learn the basics of using the {{htmlelement("canvas")}} element to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, and winning and losing states. -To get the most out of this series of articles you should already have basic to intermediate [JavaScript](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics) knowledge. After working through this tutorial you should be able to build your own Web games. +To get the most out of this series of articles you should already have basic to intermediate [JavaScript](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) knowledge. After working through this tutorial you should be able to build your own Web games. ![Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.](mdn-breakout-gameplay.png) diff --git a/files/en-us/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md b/files/en-us/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md index 9a8d6a57fc8c721..5d231111663ff5c 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md @@ -43,7 +43,7 @@ This article shows you how to publish your site online using file transfer tools ## Summary -If you have built a simple web page (see [HTML basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/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. +If you have built a simple web page (see [HTML basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 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. ## SFTP diff --git a/files/en-us/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md b/files/en-us/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md index a6c4da981b4d286..35f0a85b1941a6e 100644 --- a/files/en-us/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md +++ b/files/en-us/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md @@ -110,6 +110,6 @@ They can therefore be accessed by authorized members from different physical loc ## Next steps -- [How the Web works](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/How_the_Web_works) +- [How the Web works](/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) - [Understanding the difference between a web page, a website, a web server and a search engine](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) - [Understanding domain names](/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) diff --git a/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md b/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md index 00008b68c68886c..b9baa22cdb77b1a 100644 --- a/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md +++ b/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md @@ -111,7 +111,7 @@ To start with, we'd like you to make a local copy of the starting files — [tab So here we've got a {{htmlelement("section")}} element with a `class` of `info-box`, which contains two {{htmlelement("div")}}s. The first div contains three buttons, which will become the actual tabs to click on for displaying our content panels. The second div contains three {{htmlelement("article")}} elements, which will make up the content panels that correspond to each tab. Each panel contains some sample content. -The idea here is that we will style the tabs to look like a standard horizontal navigation menu and style the panels to sit on top of one another using absolute positioning. We'll also give you a bit of JavaScript to include on your page to display the corresponding panel when a tab is pressed, and style the tab itself. You won't need to understand the JavaScript code itself at this stage, but you should think about learning some basic [JavaScript](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics) as soon as possible — the more complex your UI features become, the more likely it is that you'll need some JavaScript to implement your desired functionality. +The idea here is that we will style the tabs to look like a standard horizontal navigation menu and style the panels to sit on top of one another using absolute positioning. We'll also give you a bit of JavaScript to include on your page to display the corresponding panel when a tab is pressed, and style the tab itself. You won't need to understand the JavaScript code itself at this stage, but you should think about learning some basic [JavaScript](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) as soon as possible — the more complex your UI features become, the more likely it is that you'll need some JavaScript to implement your desired functionality. ### General setup diff --git a/files/en-us/learn/css/index.md b/files/en-us/learn/css/index.md index e5934a301d29c4c..a9f2400aadd5986 100644 --- a/files/en-us/learn/css/index.md +++ b/files/en-us/learn/css/index.md @@ -16,7 +16,7 @@ Once you understand the fundamentals of HTML, we recommend that you learn furthe Before starting this topic, you should also be familiar with using computers and using the web passively (i.e., just looking at it, consuming the content). You should have a basic work environment set up, as detailed in [Installing basic software](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software), and understand how to create and manage files, as detailed in [Dealing with files](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) — both of which are parts of our [Getting started with the web](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) complete beginner's module. -It is also recommended that you work through [Getting started with the web](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) before proceeding with this topic, especially if you are completely new to web development. However, much of what is covered in its [CSS basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/CSS_basics) article is also covered in our [CSS first steps](/en-US/docs/Learn/CSS/First_steps) module, albeit in a lot more detail. +It is also recommended that you work through [Getting started with the web](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) before proceeding with this topic, especially if you are completely new to web development. However, much of what is covered in its [CSS basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) article is also covered in our [CSS first steps](/en-US/docs/Learn/CSS/First_steps) module, albeit in a lot more detail. ## Modules diff --git a/files/en-us/learn/html/howto/use_javascript_within_a_webpage/index.md b/files/en-us/learn/html/howto/use_javascript_within_a_webpage/index.md index 71be8c7cec1464a..9a3d0a86c9f7c3e 100644 --- a/files/en-us/learn/html/howto/use_javascript_within_a_webpage/index.md +++ b/files/en-us/learn/html/howto/use_javascript_within_a_webpage/index.md @@ -34,7 +34,7 @@ Take your webpages to the next level by harnessing JavaScript. Learn in this art {{Glossary("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. > [!NOTE] -> In this article we're going over the HTML code you need to make JavaScript take effect. If you want to learn JavaScript itself, you can start with our [JavaScript basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics) article. If you already know something about JavaScript or if you have a background with other programming languages, we suggest you jump directly into our [JavaScript Guide](/en-US/docs/Web/JavaScript/Guide). +> In this article we're going over the HTML code you need to make JavaScript take effect. If you want to learn JavaScript itself, you can start with our [JavaScript basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) article. If you already know something about JavaScript or if you have a background with other programming languages, we suggest you jump directly into our [JavaScript Guide](/en-US/docs/Web/JavaScript/Guide). ## How to trigger JavaScript from HTML diff --git a/files/en-us/learn/html/index.md b/files/en-us/learn/html/index.md index 66dcfad32b81a07..f25a7206266ccde 100644 --- a/files/en-us/learn/html/index.md +++ b/files/en-us/learn/html/index.md @@ -12,7 +12,7 @@ To build websites, you should know about {{Glossary('HTML')}} — the fundamenta Before starting this topic, you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it, consuming the content). You should have a basic work environment set up as detailed in [Installing basic software](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software), and understand how to create and manage files, as detailed in [Dealing with files](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) — both are parts of our [Getting started with the web](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) complete beginner's module. -It is recommended that you work through [Getting started with the web](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) before attempting this topic. However, this isn't absolutely necessary; much of what is covered in the [HTML basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/HTML_basics) article is also covered in our [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) module, albeit in a lot more detail. +It is recommended that you work through [Getting started with the web](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) before attempting this topic. However, this isn't absolutely necessary; much of what is covered in the [HTML basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) article is also covered in our [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) module, albeit in a lot more detail. After learning HTML, you can then move on to learning about more advanced topics such as: diff --git a/files/en-us/learn/javascript/first_steps/index.md b/files/en-us/learn/javascript/first_steps/index.md index ad6af31dc74764f..d4a3712ac816216 100644 --- a/files/en-us/learn/javascript/first_steps/index.md +++ b/files/en-us/learn/javascript/first_steps/index.md @@ -12,7 +12,7 @@ In our first JavaScript module, we first answer some fundamental questions such Before starting this module, you don't need any previous JavaScript knowledge, but you should have some familiarity with HTML and CSS. You are advised to work through the following modules before starting on JavaScript: -- [Getting started with the Web](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) (which includes a really [basic JavaScript introduction](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics)). +- [Getting started with the Web](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) (which includes a really [basic JavaScript introduction](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity)). - [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML). - [Introduction to CSS](/en-US/docs/Learn/CSS/First_steps). diff --git a/files/en-us/learn/server-side/express_nodejs/index.md b/files/en-us/learn/server-side/express_nodejs/index.md index c62066d64dbfb10..ebc0c02b627f10d 100644 --- a/files/en-us/learn/server-side/express_nodejs/index.md +++ b/files/en-us/learn/server-side/express_nodejs/index.md @@ -13,7 +13,7 @@ Express is a popular unopinionated web framework, written in JavaScript and host Before starting this module you will need to understand what server-side web programming and web frameworks are, ideally by reading the topics in our [Server-side website programming first steps](/en-US/docs/Learn/Server-side/First_steps) module. A general knowledge of programming concepts and [JavaScript](/en-US/docs/Web/JavaScript) is highly recommended, but not essential to understanding the core concepts. > [!NOTE] -> This website has many useful resources for learning JavaScript _in the context of client-side development_: [JavaScript](/en-US/docs/Web/JavaScript), [JavaScript Guide](/en-US/docs/Web/JavaScript/Guide), [JavaScript Basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics), [JavaScript](/en-US/docs/Learn/JavaScript) (learning). The core JavaScript language and concepts are the same for server-side development on Node.js and this material will be relevant. Node.js offers [additional APIs](https://nodejs.org/dist/latest-v10.x/docs/api/) for supporting functionality that is useful in browserless environments (e.g., to create HTTP servers and access the file system), but does not support JavaScript APIs for working with the browser and DOM. +> This website has many useful resources for learning JavaScript _in the context of client-side development_: [JavaScript](/en-US/docs/Web/JavaScript), [JavaScript Guide](/en-US/docs/Web/JavaScript/Guide), [JavaScript Basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity), [JavaScript](/en-US/docs/Learn/JavaScript) (learning). The core JavaScript language and concepts are the same for server-side development on Node.js and this material will be relevant. Node.js offers [additional APIs](https://nodejs.org/dist/latest-v10.x/docs/api/) for supporting functionality that is useful in browserless environments (e.g., to create HTTP servers and access the file system), but does not support JavaScript APIs for working with the browser and DOM. > > This guide will provide some information about working with Node.js and Express, and there are numerous other excellent resources on the Internet and in books — some of these linked from [How do I get started with Node.js](https://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js/5511507) (StackOverflow) and [What are the best resources for learning Node.js?](https://www.quora.com/What-is-the-greatest-resource-for-learning-Node-js-for-a-newbie) (Quora). diff --git a/files/en-us/related/imsc/basics/index.md b/files/en-us/related/imsc/basics/index.md index 265e3fede896203..e28877aef7dba25 100644 --- a/files/en-us/related/imsc/basics/index.md +++ b/files/en-us/related/imsc/basics/index.md @@ -16,7 +16,7 @@ IMSC is a markup language you can use to define timed text for adding subtitles If you are not already familiar with XML or HTML, read up on them first and then come back here: - [XML Introduction](/en-US/docs/Web/XML/XML_introduction) -- [HTML Basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/HTML_basics) +- [HTML Basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) > [!NOTE] > If you want to know what you can do with IMSC in real-world scenarios have a look at the expanded example at the end of this tutorial. diff --git a/files/en-us/web/css/index.md b/files/en-us/web/css/index.md index 71116fe052d661f..247ce0cd8157902 100644 --- a/files/en-us/web/css/index.md +++ b/files/en-us/web/css/index.md @@ -15,7 +15,7 @@ After CSS 2.1, the scope of the specification increased significantly and the pr ## Key resources - CSS Introduction - - : If you're new to web development, be sure to read our [CSS basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/CSS_basics) article to learn what CSS is and how to use it. + - : If you're new to web development, be sure to read our [CSS basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) article to learn what CSS is and how to use it. - CSS Tutorials - : Our [CSS learning area](/en-US/docs/Learn/CSS) contains a wealth of tutorials to take you from beginner level to proficiency, covering all the fundamentals. - CSS Reference diff --git a/files/en-us/web/css/tutorials/index.md b/files/en-us/web/css/tutorials/index.md index 01550b14cdf28a9..b00d3772b8b7f98 100644 --- a/files/en-us/web/css/tutorials/index.md +++ b/files/en-us/web/css/tutorials/index.md @@ -15,7 +15,7 @@ They are grouped by complexity so that you can choose the most appropriate for y ## Beginner-level CSS tutorials -- [CSS basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/CSS_basics) +- [CSS basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) - : This guide is aimed at complete beginners: You haven't written one single line of CSS? — this is for you. It explains the fundamental concepts of the language and guides you in writing basic stylesheets. - [Using multiple backgrounds](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds) diff --git a/files/en-us/web/guide/index.md b/files/en-us/web/guide/index.md index 13195c5c7928710..4deaa6ff4ba2ccc 100644 --- a/files/en-us/web/guide/index.md +++ b/files/en-us/web/guide/index.md @@ -14,7 +14,7 @@ There are a number of guides within MDN docs. These articles aim to add addition - [Structuring the web with HTML](/en-US/docs/Learn/HTML) - : The HTML learning area offers tutorials to help you learn HTML from the ground up. -- [HTML basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/HTML_basics) +- [HTML basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) - : This article will give you a basic understanding of HTML. After following this guide, you can further explore the material in the HTML Learning Area. ## CSS diff --git a/files/en-us/web/html/index.md b/files/en-us/web/html/index.md index a023d017ea0cd55..0d408772e93c6b7 100644 --- a/files/en-us/web/html/index.md +++ b/files/en-us/web/html/index.md @@ -20,7 +20,7 @@ The articles below can help you learn more about HTML. ## Key resources - HTML Introduction - - : If you're new to web development, be sure to read our [HTML Basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/HTML_basics) article to learn what HTML is and how to use it. + - : If you're new to web development, be sure to read our [HTML Basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) article to learn what HTML is and how to use it. - HTML Tutorials - : For articles about how to use HTML, as well as tutorials and complete examples, check out our [HTML Learning Area](/en-US/docs/Learn/HTML). - HTML Reference diff --git a/files/en-us/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md b/files/en-us/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md index 5579a1c04e8da7a..f9edc2d588c06ba 100644 --- a/files/en-us/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md +++ b/files/en-us/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md @@ -16,7 +16,7 @@ The first step in this introductory [PWA tutorial](/en-US/docs/Web/Progressive_w We create an HTML file, with meta data in the head and a static web page containing a form and a placeholder to display user inputted data. We'll then add an external CSS stylesheet to improve the site's appearance. -To complete this tutorial, it is helpful to have a basic level of understanding of [HTML](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/HTML_basics), [CSS](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/CSS_basics), and [JavaScript](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics). If you're not familiar with these, MDN is the home of [Getting Started](/en-US/docs/Learn_web_development/Getting_started/Your_first_website), an introduction to web development series. +To complete this tutorial, it is helpful to have a basic level of understanding of [HTML](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content), [CSS](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content), and [JavaScript](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity). If you're not familiar with these, MDN is the home of [Getting Started](/en-US/docs/Learn_web_development/Getting_started/Your_first_website), an introduction to web development series. In the next sections, we'll set up a [local development environment](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection) and take a look at our progress before adding [JavaScript functionality](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality) to convert the static content created in this section into a functional web application. Once we have a functioning app we will have something that we can progressively enhance into a PWA that is installable and works offline. diff --git a/files/en-us/web/tutorials/index.md b/files/en-us/web/tutorials/index.md index 7d76532ee6a4865..8759e28de59ea28 100644 --- a/files/en-us/web/tutorials/index.md +++ b/files/en-us/web/tutorials/index.md @@ -44,7 +44,7 @@ These resources are created by forward-thinking companies and web developers who ### Introductory level -- [CSS basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/CSS_basics) +- [CSS basics](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) - : CSS (Cascading Style Sheets) is the code you use to style your webpage. _CSS Basics_ takes you through what you need to get started. We'll answer questions like: How do I make my text black or red? How do I make my content show up in such-and-such a place on the screen? How do I decorate my webpage with background images and colors? - [CSS first steps](/en-US/docs/Learn/CSS/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 toward 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. @@ -99,7 +99,7 @@ These resources are created by forward-thinking companies and web developers who - : 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 JavaScript features in detail, such as variables, strings, numbers and arrays. - [JavaScript building blocks](/en-US/docs/Learn/JavaScript/Building_blocks) - : 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. -- [Getting started with JavaScript](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics) +- [Getting started with JavaScript](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) - : What is JavaScript and how can it help you? - [Codecademy](https://www.codecademy.com/) - : Codecademy is an easy way to learn how to code JavaScript. It's interactive and you can do it with your friends. From 86adf94b5ef4778cce9d0b49d506e7b713ba48a4 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Wed, 6 Nov 2024 14:33:07 +0000 Subject: [PATCH 04/85] finish structuring content module --- files/en-us/_redirects.txt | 128 +- files/en-us/_wikihistory.json | 3037 ++++++++--------- files/en-us/learn/accessibility/html/index.md | 2 +- .../building_blocks/styling_tables/index.md | 6 +- files/en-us/learn/html/howto/index.md | 4 +- files/en-us/learn/html/index.md | 2 +- .../html_text_fundamentals/index.md | 1034 ------ .../learn/html/introduction_to_html/index.md | 49 - files/en-us/learn/html/tables/index.md | 32 - .../learn/mathml/first_steps/tables/index.md | 6 +- .../en-us/learn_web_development/core/index.md | 18 +- .../advanced_text_features}/index.md | 248 +- .../grumpy-cat-attribute-small.png | Bin .../basic_html_syntax}/grumpy-cat-small.png | Bin .../basic_html_syntax}/index.md | 24 +- .../template-screenshot.png | Bin .../creating_links}/index.md | 54 +- .../creating_links}/mdn_logo.svg | 0 .../creating_links}/navigation-example.png | Bin .../creating_links}/simple-directory.png | Bin .../creating_links}/updated-bbc-website.png | Bin .../debugging_html/badly-formed-html.png | Bin .../debugging_html/error-message.png | Bin .../debugging_html/html-inspector.png | Bin .../debugging_html/index.md | 45 +- .../debugging_html/valid-html-banner.png | Bin .../debugging_html/validation-results.png | Bin .../debugging_html/validator.png | Bin .../emphasis_and_importance/index.md | 269 ++ .../headings_and_paragraphs/index.md | 275 ++ .../newspaper_small.jpg | Bin .../screen_shot_2017-03-29_at_09.20.35.png | Bin .../structuring_content/html_forms/index.md | 89 + .../html_images}/alt-text.png | Bin .../html_images}/basic-image.png | Bin .../html_images}/image-with-title.png | Bin .../structuring_content/html_images}/index.md | 70 +- .../html_images}/no-size.png | Bin .../structuring_content/html_images}/size.png | Bin .../index.md | 2 +- .../html_table_basics}/1800-census.jpg | Bin .../html_table_basics}/index.md | 136 +- .../html_table_basics}/numbers-table.png | Bin .../html_table_basics}/swimming-timetable.png | Bin .../html_video_and_audio}/audio-player.png | Bin .../containersandtracks.png | Bin .../html_video_and_audio}/index.md | 54 +- .../poster_screenshot_updated.png | Bin .../html_video_and_audio}/simple-video.png | Bin .../index.md | 2 +- .../video-player-with-captions.png | Bin .../core/structuring_content/index.md | 65 + .../core/structuring_content/lists/index.md | 778 +++++ .../marking_up_a_letter/index.md | 51 +- .../marking_up_a_letter/letter-update.png | Bin .../mozilla_splash_page/index.md | 57 +- .../mozilla_splash_page/narrow-shot.png | Bin .../mozilla_splash_page/wide-shot.png | Bin .../planet_data_table}/assessment-table.png | Bin .../planet_data_table}/index.md | 32 +- .../example-page.png | Bin .../structuring_a_page_of_content/index.md | 43 +- .../structuring_documents}/card-sorting.png | Bin .../common-features.png | Bin .../structuring_documents}/feature-list.png | Bin .../structuring_documents}/index.md | 58 +- .../structuring_documents}/sample-website.png | Bin .../structuring_documents}/site-map.png | Bin .../structuring_documents}/site-structure.png | Bin .../table_accessibility}/index.md | 249 +- .../index.md | 2 +- .../index.md | 2 +- .../test_your_skills_colon__links/index.md | 2 +- .../webpage_metadata}/bad-encoding.png | Bin .../webpage_metadata}/bookmark-example.png | Bin .../webpage_metadata}/bookmark-favicon.png | Bin .../webpage_metadata}/correct-encoding.png | Bin .../webpage_metadata}/facebook-output.png | Bin .../webpage_metadata}/index.md | 37 +- .../webpage_metadata}/js-and-css.png | Bin .../webpage_metadata}/mdn-search-result.png | Bin .../webpage_metadata}/title-example.png | Bin .../getting_started/index.md | 4 +- .../mozilla/firefox/releases/59/index.md | 2 +- .../aria/roles/cell_role/index.md | 6 +- .../aria/roles/rowheader_role/index.md | 4 +- .../aria/roles/table_role/index.md | 4 +- .../understanding_wcag/perceivable/index.md | 4 +- files/en-us/web/css/css_table/index.md | 6 +- files/en-us/web/html/element/caption/index.md | 2 +- files/en-us/web/html/element/col/index.md | 1 - .../en-us/web/html/element/colgroup/index.md | 2 +- files/en-us/web/html/element/table/index.md | 10 +- files/en-us/web/html/element/tbody/index.md | 2 +- files/en-us/web/html/element/td/index.md | 2 +- files/en-us/web/html/element/tfoot/index.md | 2 +- files/en-us/web/html/element/th/index.md | 2 +- files/en-us/web/html/element/thead/index.md | 2 +- files/en-us/web/html/element/tr/index.md | 2 +- files/en-us/web/html/index.md | 15 +- files/en-us/web/tutorials/index.md | 13 +- 101 files changed, 3495 insertions(+), 3552 deletions(-) delete mode 100644 files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md delete mode 100644 files/en-us/learn/html/introduction_to_html/index.md delete mode 100644 files/en-us/learn/html/tables/index.md rename files/en-us/{learn/html/introduction_to_html/advanced_text_formatting => learn_web_development/core/structuring_content/advanced_text_features}/index.md (68%) rename files/en-us/{learn/html/introduction_to_html/getting_started => learn_web_development/core/structuring_content/basic_html_syntax}/grumpy-cat-attribute-small.png (100%) rename files/en-us/{learn/html/introduction_to_html/getting_started => learn_web_development/core/structuring_content/basic_html_syntax}/grumpy-cat-small.png (100%) rename files/en-us/{learn/html/introduction_to_html/getting_started => learn_web_development/core/structuring_content/basic_html_syntax}/index.md (96%) rename files/en-us/{learn/html/introduction_to_html/getting_started => learn_web_development/core/structuring_content/basic_html_syntax}/template-screenshot.png (100%) rename files/en-us/{learn/html/introduction_to_html/creating_hyperlinks => learn_web_development/core/structuring_content/creating_links}/index.md (88%) rename files/en-us/{learn/html/introduction_to_html/creating_hyperlinks => learn_web_development/core/structuring_content/creating_links}/mdn_logo.svg (100%) rename files/en-us/{learn/html/introduction_to_html/creating_hyperlinks => learn_web_development/core/structuring_content/creating_links}/navigation-example.png (100%) rename files/en-us/{learn/html/introduction_to_html/creating_hyperlinks => learn_web_development/core/structuring_content/creating_links}/simple-directory.png (100%) rename files/en-us/{learn/html/introduction_to_html/creating_hyperlinks => learn_web_development/core/structuring_content/creating_links}/updated-bbc-website.png (100%) rename files/en-us/{learn/html/introduction_to_html => learn_web_development/core/structuring_content}/debugging_html/badly-formed-html.png (100%) rename files/en-us/{learn/html/introduction_to_html => learn_web_development/core/structuring_content}/debugging_html/error-message.png (100%) rename files/en-us/{learn/html/introduction_to_html => learn_web_development/core/structuring_content}/debugging_html/html-inspector.png (100%) rename files/en-us/{learn/html/introduction_to_html => learn_web_development/core/structuring_content}/debugging_html/index.md (89%) rename files/en-us/{learn/html/introduction_to_html => learn_web_development/core/structuring_content}/debugging_html/valid-html-banner.png (100%) rename files/en-us/{learn/html/introduction_to_html => learn_web_development/core/structuring_content}/debugging_html/validation-results.png (100%) rename files/en-us/{learn/html/introduction_to_html => learn_web_development/core/structuring_content}/debugging_html/validator.png (100%) create mode 100644 files/en-us/learn_web_development/core/structuring_content/emphasis_and_importance/index.md create mode 100644 files/en-us/learn_web_development/core/structuring_content/headings_and_paragraphs/index.md rename files/en-us/{learn/html/introduction_to_html/html_text_fundamentals => learn_web_development/core/structuring_content/headings_and_paragraphs}/newspaper_small.jpg (100%) rename files/en-us/{learn/html/introduction_to_html/html_text_fundamentals => learn_web_development/core/structuring_content/headings_and_paragraphs}/screen_shot_2017-03-29_at_09.20.35.png (100%) create mode 100644 files/en-us/learn_web_development/core/structuring_content/html_forms/index.md rename files/en-us/{learn/html/multimedia_and_embedding/images_in_html => learn_web_development/core/structuring_content/html_images}/alt-text.png (100%) rename files/en-us/{learn/html/multimedia_and_embedding/images_in_html => learn_web_development/core/structuring_content/html_images}/basic-image.png (100%) rename files/en-us/{learn/html/multimedia_and_embedding/images_in_html => learn_web_development/core/structuring_content/html_images}/image-with-title.png (100%) rename files/en-us/{learn/html/multimedia_and_embedding/images_in_html => learn_web_development/core/structuring_content/html_images}/index.md (89%) rename files/en-us/{learn/html/multimedia_and_embedding/images_in_html => learn_web_development/core/structuring_content/html_images}/no-size.png (100%) rename files/en-us/{learn/html/multimedia_and_embedding/images_in_html => learn_web_development/core/structuring_content/html_images}/size.png (100%) rename files/en-us/{learn/html/multimedia_and_embedding/images_in_html => learn_web_development/core/structuring_content/html_images}/test_your_skills_colon__html_images/index.md (96%) rename files/en-us/{learn/html/tables/basics => learn_web_development/core/structuring_content/html_table_basics}/1800-census.jpg (100%) rename files/en-us/{learn/html/tables/basics => learn_web_development/core/structuring_content/html_table_basics}/index.md (73%) rename files/en-us/{learn/html/tables/basics => learn_web_development/core/structuring_content/html_table_basics}/numbers-table.png (100%) rename files/en-us/{learn/html/tables/basics => learn_web_development/core/structuring_content/html_table_basics}/swimming-timetable.png (100%) rename files/en-us/{learn/html/multimedia_and_embedding/video_and_audio_content => learn_web_development/core/structuring_content/html_video_and_audio}/audio-player.png (100%) rename files/en-us/{learn/html/multimedia_and_embedding/video_and_audio_content => learn_web_development/core/structuring_content/html_video_and_audio}/containersandtracks.png (100%) rename files/en-us/{learn/html/multimedia_and_embedding/video_and_audio_content => learn_web_development/core/structuring_content/html_video_and_audio}/index.md (90%) rename files/en-us/{learn/html/multimedia_and_embedding/video_and_audio_content => learn_web_development/core/structuring_content/html_video_and_audio}/poster_screenshot_updated.png (100%) rename files/en-us/{learn/html/multimedia_and_embedding/video_and_audio_content => learn_web_development/core/structuring_content/html_video_and_audio}/simple-video.png (100%) rename files/en-us/{learn/html/multimedia_and_embedding/video_and_audio_content => learn_web_development/core/structuring_content/html_video_and_audio}/test_your_skills_colon__multimedia_and_embedding/index.md (97%) rename files/en-us/{learn/html/multimedia_and_embedding/video_and_audio_content => learn_web_development/core/structuring_content/html_video_and_audio}/video-player-with-captions.png (100%) create mode 100644 files/en-us/learn_web_development/core/structuring_content/index.md create mode 100644 files/en-us/learn_web_development/core/structuring_content/lists/index.md rename files/en-us/{learn/html/introduction_to_html => learn_web_development/core/structuring_content}/marking_up_a_letter/index.md (66%) rename files/en-us/{learn/html/introduction_to_html => learn_web_development/core/structuring_content}/marking_up_a_letter/letter-update.png (100%) rename files/en-us/{learn/html/multimedia_and_embedding => learn_web_development/core/structuring_content}/mozilla_splash_page/index.md (60%) rename files/en-us/{learn/html/multimedia_and_embedding => learn_web_development/core/structuring_content}/mozilla_splash_page/narrow-shot.png (100%) rename files/en-us/{learn/html/multimedia_and_embedding => learn_web_development/core/structuring_content}/mozilla_splash_page/wide-shot.png (100%) rename files/en-us/{learn/html/tables/structuring_planet_data => learn_web_development/core/structuring_content/planet_data_table}/assessment-table.png (100%) rename files/en-us/{learn/html/tables/structuring_planet_data => learn_web_development/core/structuring_content/planet_data_table}/index.md (80%) rename files/en-us/{learn/html/introduction_to_html => learn_web_development/core/structuring_content}/structuring_a_page_of_content/example-page.png (100%) rename files/en-us/{learn/html/introduction_to_html => learn_web_development/core/structuring_content}/structuring_a_page_of_content/index.md (56%) rename files/en-us/{learn/html/introduction_to_html/document_and_website_structure => learn_web_development/core/structuring_content/structuring_documents}/card-sorting.png (100%) rename files/en-us/{learn/html/introduction_to_html/document_and_website_structure => learn_web_development/core/structuring_content/structuring_documents}/common-features.png (100%) rename files/en-us/{learn/html/introduction_to_html/document_and_website_structure => learn_web_development/core/structuring_content/structuring_documents}/feature-list.png (100%) rename files/en-us/{learn/html/introduction_to_html/document_and_website_structure => learn_web_development/core/structuring_content/structuring_documents}/index.md (87%) rename files/en-us/{learn/html/introduction_to_html/document_and_website_structure => learn_web_development/core/structuring_content/structuring_documents}/sample-website.png (100%) rename files/en-us/{learn/html/introduction_to_html/document_and_website_structure => learn_web_development/core/structuring_content/structuring_documents}/site-map.png (100%) rename files/en-us/{learn/html/introduction_to_html/document_and_website_structure => learn_web_development/core/structuring_content/structuring_documents}/site-structure.png (100%) rename files/en-us/{learn/html/tables/advanced => learn_web_development/core/structuring_content/table_accessibility}/index.md (78%) rename files/en-us/{learn/html/introduction_to_html => learn_web_development/core/structuring_content}/test_your_skills_colon__advanced_html_text/index.md (96%) rename files/en-us/{learn/html/introduction_to_html => learn_web_development/core/structuring_content}/test_your_skills_colon__html_text_basics/index.md (96%) rename files/en-us/{learn/html/introduction_to_html => learn_web_development/core/structuring_content}/test_your_skills_colon__links/index.md (98%) rename files/en-us/{learn/html/introduction_to_html/the_head_metadata_in_html => learn_web_development/core/structuring_content/webpage_metadata}/bad-encoding.png (100%) rename files/en-us/{learn/html/introduction_to_html/the_head_metadata_in_html => learn_web_development/core/structuring_content/webpage_metadata}/bookmark-example.png (100%) rename files/en-us/{learn/html/introduction_to_html/the_head_metadata_in_html => learn_web_development/core/structuring_content/webpage_metadata}/bookmark-favicon.png (100%) rename files/en-us/{learn/html/introduction_to_html/the_head_metadata_in_html => learn_web_development/core/structuring_content/webpage_metadata}/correct-encoding.png (100%) rename files/en-us/{learn/html/introduction_to_html/the_head_metadata_in_html => learn_web_development/core/structuring_content/webpage_metadata}/facebook-output.png (100%) rename files/en-us/{learn/html/introduction_to_html/the_head_metadata_in_html => learn_web_development/core/structuring_content/webpage_metadata}/index.md (90%) rename files/en-us/{learn/html/introduction_to_html/the_head_metadata_in_html => learn_web_development/core/structuring_content/webpage_metadata}/js-and-css.png (100%) rename files/en-us/{learn/html/introduction_to_html/the_head_metadata_in_html => learn_web_development/core/structuring_content/webpage_metadata}/mdn-search-result.png (100%) rename files/en-us/{learn/html/introduction_to_html/the_head_metadata_in_html => learn_web_development/core/structuring_content/webpage_metadata}/title-example.png (100%) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index aa32d6ad0df552d..6b706857ef447a7 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -3480,7 +3480,7 @@ /en-US/docs/Firefox_9_for_developers /en-US/docs/Mozilla/Firefox/Releases/9 /en-US/docs/Firefox_User_Agent_String_Reference /en-US/docs/Web/HTTP/Headers/User-Agent/Firefox /en-US/docs/Firefox_for_developers /en-US/docs/Mozilla/Firefox/Releases/20 -/en-US/docs/Fixing_common_validation_problems /en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML +/en-US/docs/Fixing_common_validation_problems /en-US/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML /en-US/docs/Flexible_Box /en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox /en-US/docs/Focus_management_in_HTML /en-US/docs/Web/API/Document/hasFocus /en-US/docs/Full_page_zoom /en-US/docs/Mozilla/Firefox/Releases/3/Full_page_zoom @@ -3630,7 +3630,7 @@ /en-US/docs/HTM/Attribute /en-US/docs/Web/HTML/Attributes /en-US/docs/HTML /en-US/docs/Web/HTML /en-US/docs/HTML/Attributes /en-US/docs/Web/HTML/Attributes -/en-US/docs/HTML/Bad_copy_pasting_habits /en-US/docs/Learn/HTML/Introduction_to_HTML +/en-US/docs/HTML/Bad_copy_pasting_habits /en-US/docs/Learn_web_development/Core/Structuring_content /en-US/docs/HTML/Block-level_elements /en-US/docs/Glossary/Block-level_content /en-US/docs/HTML/CORS_Enabled_Image /en-US/docs/Web/HTML/CORS_enabled_image /en-US/docs/HTML/CORS_settings_attributes /en-US/docs/Web/HTML/Attributes/crossorigin @@ -3901,18 +3901,18 @@ /en-US/docs/HTML/HTML_Elements/title /en-US/docs/Web/HTML/Element/title /en-US/docs/HTML/HTML_Elements/tr /en-US/docs/Web/HTML/Element/tr /en-US/docs/HTML/HTML_Elements/track /en-US/docs/Web/HTML/Element/track -/en-US/docs/HTML/Historical_artifacts_to_avoid /en-US/docs/Learn/HTML/Introduction_to_HTML +/en-US/docs/HTML/Historical_artifacts_to_avoid /en-US/docs/Learn_web_development/Core/Structuring_content /en-US/docs/HTML/Inline_elements /en-US/docs/Glossary/Inline-level_content -/en-US/docs/HTML/Intro /en-US/docs/Learn/HTML/Introduction_to_HTML -/en-US/docs/HTML/Introduction /en-US/docs/Learn/HTML/Introduction_to_HTML +/en-US/docs/HTML/Intro /en-US/docs/Learn_web_development/Core/Structuring_content +/en-US/docs/HTML/Introduction /en-US/docs/Learn_web_development/Core/Structuring_content /en-US/docs/HTML/Introduction_to_HTML5 /en-US/docs/Learn/HTML /en-US/docs/HTML/Link_types /en-US/docs/Web/HTML/Attributes/rel /en-US/docs/HTML/Manipulating_video_using_canvas /en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas /en-US/docs/HTML/Optimizing_Your_Pages_for_Speculative_Parsing /en-US/docs/Glossary/speculative_parsing /en-US/docs/HTML/Supported_media_formats /en-US/docs/Web/Media/Formats -/en-US/docs/HTML/The_Importance_of_Correct_Commenting /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments +/en-US/docs/HTML/The_Importance_of_Correct_Commenting /en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax#HTML_comments /en-US/docs/HTML/Tips_for_authoring_fast-loading_HTML_pages /en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages -/en-US/docs/HTML/Using_HTML5_audio_and_video /en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +/en-US/docs/HTML/Using_HTML5_audio_and_video /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio /en-US/docs/HTML/WebVTT /en-US/docs/Web/API/WebVTT_API /en-US/docs/HTML/aside /en-US/docs/Web/HTML/Element/aside /en-US/docs/HTML/tag /en-US/docs/Web/HTML/Element @@ -3962,7 +3962,7 @@ /en-US/docs/HTML:Element:tt /en-US/docs/Web/HTML/Element/tt /en-US/docs/HTML:Element:ul /en-US/docs/Web/HTML/Element/ul /en-US/docs/HTML:Inline_elements /en-US/docs/Glossary/Inline-level_content -/en-US/docs/HTML:The_Importance_of_Correct_Commenting /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments +/en-US/docs/HTML:The_Importance_of_Correct_Commenting /en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax#HTML_comments /en-US/docs/HTML:tag /en-US/docs/Web/HTML/Element /en-US/docs/HTMLElement.forceSpellCheck /en-US/docs/Web/HTML/Global_attributes/spellcheck /en-US/docs/HTMLObjectElement.type /en-US/docs/Web/API/HTMLObjectElement/type @@ -3970,9 +3970,9 @@ /en-US/docs/HTMLSpanElemen /en-US/docs/Web/API/HTMLSpanElement /en-US/docs/HTMLSpanElement /en-US/docs/Web/API/HTMLSpanElement /en-US/docs/HTMLSpanElement_interface /en-US/docs/Web/API/HTMLSpanElement -/en-US/docs/HTML_Intro2 /en-US/docs/Learn/HTML/Introduction_to_HTML +/en-US/docs/HTML_Intro2 /en-US/docs/Learn_web_development/Core/Structuring_content /en-US/docs/HTML_in_XMLHttpRequest /en-US/docs/Web/API/XMLHttpRequest_API/HTML_in_XMLHttpRequest -/en-US/docs/HTML_intro /en-US/docs/Learn/HTML/Introduction_to_HTML +/en-US/docs/HTML_intro /en-US/docs/Learn_web_development/Core/Structuring_content /en-US/docs/HTTP /en-US/docs/Web/HTTP /en-US/docs/HTTP/Access_control_CORS /en-US/docs/Web/HTTP/CORS /en-US/docs/HTTP/Content_negotiation /en-US/docs/Web/HTTP/Content_negotiation @@ -4026,10 +4026,10 @@ /en-US/docs/IndexedDB_Primer /en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB /en-US/docs/Infinity /en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity /en-US/docs/Installing_extensions https://extensionworkshop.com/documentation/publish/signing-and-distribution-overview/ -/en-US/docs/IntroHTML6 /en-US/docs/Learn/HTML/Introduction_to_HTML -/en-US/docs/Intro_HTML3 /en-US/docs/Learn/HTML/Introduction_to_HTML -/en-US/docs/Intro_HTML4 /en-US/docs/Learn/HTML/Introduction_to_HTML -/en-US/docs/Intro_HTML5 /en-US/docs/Learn/HTML/Introduction_to_HTML +/en-US/docs/IntroHTML6 /en-US/docs/Learn_web_development/Core/Structuring_content +/en-US/docs/Intro_HTML3 /en-US/docs/Learn_web_development/Core/Structuring_content +/en-US/docs/Intro_HTML4 /en-US/docs/Learn_web_development/Core/Structuring_content +/en-US/docs/Intro_HTML5 /en-US/docs/Learn_web_development/Core/Structuring_content /en-US/docs/Introducing_Content_Security_Policy /en-US/docs/Web/HTTP/CSP /en-US/docs/Introduction_to_Object-Oriented_JavaScript /en-US/docs/Learn/JavaScript/Objects /en-US/docs/Introduction_to_using_XPath_in_JavaScript /en-US/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript @@ -5262,7 +5262,7 @@ /en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like /en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like /en-US/docs/Learn/GitHub /en-US/docs/Learn/Tools_and_testing/GitHub /en-US/docs/Learn/HTML/Element /en-US/docs/Learn/HTML/Howto -/en-US/docs/Learn/HTML/Element/abbr /en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations +/en-US/docs/Learn/HTML/Element/abbr /en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#Abbreviations /en-US/docs/Learn/HTML/Forms /en-US/docs/Learn/Forms /en-US/docs/Learn/HTML/Forms/Additional_form_controls /en-US/docs/Learn/Forms/Other_form_controls /en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms /en-US/docs/Learn/Forms/Advanced_form_styling @@ -5290,26 +5290,48 @@ /en-US/docs/Learn/HTML/Forms/UI_pseudo-classes /en-US/docs/Learn/Forms/UI_pseudo-classes /en-US/docs/Learn/HTML/Forms/Your_first_HTML_form /en-US/docs/Learn/Forms/Your_first_form /en-US/docs/Learn/HTML/Forms/Your_first_HTML_form/Example /en-US/docs/Learn/Forms/Your_first_form -/en-US/docs/Learn/HTML/HTML_tags /en-US/docs/Learn/HTML/Introduction_to_HTML +/en-US/docs/Learn/HTML/HTML_tags /en-US/docs/Learn_web_development/Core/Structuring_content /en-US/docs/Learn/HTML/Howto/Add_Flash_content_within_a_webpage /en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The__and__elements -/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage /en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -/en-US/docs/Learn/HTML/Howto/Add_citations_to_webpages /en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations -/en-US/docs/Learn/HTML/Howto/Add_images_to_a_webpage /en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage +/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio +/en-US/docs/Learn/HTML/Howto/Add_citations_to_webpages /en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#Quotations +/en-US/docs/Learn/HTML/Howto/Add_images_to_a_webpage /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images#How_do_we_put_an_image_on_a_webpage /en-US/docs/Learn/HTML/Howto/Add_responsive_image_to_a_webpage /en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images /en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage /en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web -/en-US/docs/Learn/HTML/Howto/Annotate_images_and_graphics /en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions -/en-US/docs/Learn/HTML/Howto/Create_a_basic_HTML_document /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started -/en-US/docs/Learn/HTML/Howto/Create_a_hyperlink /en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks -/en-US/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML /en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists -/en-US/docs/Learn/HTML/Howto/Display_computer_code_with_HTML /en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code -/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections /en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure +/en-US/docs/Learn/HTML/Howto/Annotate_images_and_graphics /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images#Annotating_images_with_figures_and_figure_captions +/en-US/docs/Learn/HTML/Howto/Create_a_basic_HTML_document /en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax +/en-US/docs/Learn/HTML/Howto/Create_a_hyperlink /en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links +/en-US/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML /en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs#Lists +/en-US/docs/Learn/HTML/Howto/Display_computer_code_with_HTML /en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#Representing_computer_code +/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections /en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents /en-US/docs/Learn/HTML/Howto/Embed_a_webpage_within_another_webpage /en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies -/en-US/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important /en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance -/en-US/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable /en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations -/en-US/docs/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy /en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals -/en-US/docs/Learn/HTML/Howto/abbr /en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations -/en-US/docs/Learn/HTML/Introduction_to_HTML/The_HTML_head /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -/en-US/docs/Learn/HTML/Tables/Structing_planet_data /en-US/docs/Learn/HTML/Tables/Structuring_planet_data +/en-US/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important /en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs#Emphasis_and_importance +/en-US/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable /en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#Abbreviations +/en-US/docs/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy /en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs +/en-US/docs/Learn/HTML/Howto/abbr /en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#Abbreviations +/en-US/docs/Learn/HTML/Introduction_to_HTML /en-US/docs/Learn_web_development/Core/Structuring_content +/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting /en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features +/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks /en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links +/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML /en-US/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML +/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure /en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents +/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started /en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax +/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals /en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs +/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter /en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter +/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content /en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content +/en-US/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text /en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills:_Advanced_HTML_text +/en-US/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics /en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills:_HTML_text_basics +/en-US/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links /en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills:_Links +/en-US/docs/Learn/HTML/Introduction_to_HTML/The_HTML_head /en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata +/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML /en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata +/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images +/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images/Test_your_skills:_HTML_images +/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page /en-US/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page +/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio +/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio/Test_your_skills:_Multimedia_and_embedding +/en-US/docs/Learn/HTML/Tables /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics +/en-US/docs/Learn/HTML/Tables/Advanced /en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility +/en-US/docs/Learn/HTML/Tables/Basics /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics +/en-US/docs/Learn/HTML/Tables/Structing_planet_data /en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table +/en-US/docs/Learn/HTML/Tables/Structuring_planet_data /en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table /en-US/docs/Learn/HTML/Write_a_simple_page_in_HTML /en-US/docs/Learn_web_development/Getting_started/Your_first_website /en-US/docs/Learn/HTML/XHTML /en-US/docs/Glossary/XHTML /en-US/docs/Learn/How_TCP_IP_works /en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work @@ -5407,13 +5429,19 @@ /en-US/docs/Learn/skills/Infrastructure/Undersanding_URLs /en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL /en-US/docs/Learn/tutorial /en-US/docs/Learn /en-US/docs/Learn/tutorial/How_to_build_a_web_site /en-US/docs/Learn +/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_formatting /en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features +/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_hyperlinks /en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links +/en-US/docs/Learn_web_development/Core/Structuring_content/Document_and_website_structure /en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents +/en-US/docs/Learn_web_development/Core/Structuring_content/Getting_started /en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax +/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_text_fundamentals /en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs +/en-US/docs/Learn_web_development/Core/Structuring_content/The_head_metadata_in_HTML /en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata /en-US/docs/Learn_web_development/Getting_started/Basic_setup /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software /en-US/docs/Learn_web_development/Getting_started/Your_first_website/CSS_basics /en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content /en-US/docs/Learn_web_development/Getting_started/Your_first_website/HTML_basics /en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content /en-US/docs/Learn_web_development/Getting_started/Your_first_website/How_the_Web_works /en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works /en-US/docs/Learn_web_development/Getting_started/Your_first_website/JavaScript_basics /en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity /en-US/docs/Learn_web_development/Getting_started/Your_first_website/The_web_and_web_standards /en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model -/en-US/docs/Liberty!_Equality!_Validity! /en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML +/en-US/docs/Liberty!_Equality!_Validity! /en-US/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML /en-US/docs/Link_prefetching_FAQ /en-US/docs/Glossary/Prefetch /en-US/docs/Localization /en-US/docs/Glossary/Localization /en-US/docs/MDC:How_to_Help /en-US/docs/MDN/Community/Contributing @@ -6855,8 +6883,8 @@ /en-US/docs/The_Do_Not_Track_Field_Guide/Tutorials/2_Displaying_DNT_status_with_caching /en-US/docs/Web/HTTP/Headers/DNT /en-US/docs/The_Do_Not_Track_Field_Guide/Tutorials/3_Collecting_aggregate_data_based_on_DNT /en-US/docs/Web/HTTP/Headers/DNT /en-US/docs/The_Do_Not_Track_Field_Guide/Tutorials/Additional_resources /en-US/docs/Web/HTTP/Headers/DNT -/en-US/docs/The_Importance_of_Correct_Commenting /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments -/en-US/docs/The_Importance_of_Correct_HTML_Commenting /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments +/en-US/docs/The_Importance_of_Correct_Commenting /en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax#HTML_comments +/en-US/docs/The_Importance_of_Correct_HTML_Commenting /en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax#HTML_comments /en-US/docs/The_X-FRAME-OPTIONS_response_header /en-US/docs/Web/HTTP/Headers/X-Frame-Options /en-US/docs/The_XSLT /en-US/docs/Web/XSLT /en-US/docs/The_XSLT/JavaScript_Interface_in_Gecko /en-US/docs/Web/API/XSLTProcessor @@ -7354,16 +7382,16 @@ /en-US/docs/Using_DOM_workers /en-US/docs/Web/API/Web_Workers_API/Using_web_workers /en-US/docs/Using_Deviceorientation_In_3D_Transforms /en-US/docs/Web/API/Device_orientation_events/Using_device_orientation_with_3D_transforms /en-US/docs/Using_Firefox_1.5_caching /en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching -/en-US/docs/Using_HTML5_audio_and_video /en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +/en-US/docs/Using_HTML5_audio_and_video /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio /en-US/docs/Using_JSON_in_Firefox /en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON -/en-US/docs/Using_Web_Standards_in_your_Web_Pages/Making_your_page_using_web_standards_-_how_to /en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML +/en-US/docs/Using_Web_Standards_in_your_Web_Pages/Making_your_page_using_web_standards_-_how_to /en-US/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML /en-US/docs/Using_Web_Standards_in_your_Web_Pages/Using_XMLHttpRequest /en-US/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest -/en-US/docs/Using_Web_Standards_in_your_Web_Pages:Making_your_page_using_web_standards_-_how_to /en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML +/en-US/docs/Using_Web_Standards_in_your_Web_Pages:Making_your_page_using_web_standards_-_how_to /en-US/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML /en-US/docs/Using_Web_Standards_in_your_Web_Pages:Using_XMLHttpRequest /en-US/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest /en-US/docs/Using_XMLHttpRequest /en-US/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest /en-US/docs/Using_XPath /en-US/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript /en-US/docs/Using_an_External_Spell-checker /en-US/docs/Mozilla/Firefox/Releases/3/Using_an_external_spell_checker -/en-US/docs/Using_audio_and_video_in_Firefox /en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +/en-US/docs/Using_audio_and_video_in_Firefox /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio /en-US/docs/Using_files_from_web_applications /en-US/docs/Web/API/File_API/Using_files_from_web_applications /en-US/docs/Using_flexbox /en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox /en-US/docs/Using_geolocation /en-US/docs/Web/API/Geolocation_API @@ -12128,7 +12156,7 @@ /en-US/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms /en-US/docs/Web/API/Device_orientation_events/Using_device_orientation_with_3D_transforms /en-US/docs/Web/Guide/File_System_API /en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction /en-US/docs/Web/Guide/File_System_API/Introduction /en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction -/en-US/docs/Web/Guide/Graphics /en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML +/en-US/docs/Web/Guide/Graphics /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images /en-US/docs/Web/Guide/Graphics/Drawing_graphics_with_canvas /en-US/docs/Web/API/Canvas_API/Tutorial /en-US/docs/Web/Guide/HTML /en-US/docs/Learn/HTML /en-US/docs/Web/Guide/HTML/Canvas_tutorial /en-US/docs/Web/API/Canvas_API/Tutorial @@ -12148,8 +12176,8 @@ /en-US/docs/Web/Guide/HTML/Drag_and_drop /en-US/docs/Web/API/HTML_Drag_and_Drop_API /en-US/docs/Web/Guide/HTML/Drag_operations /en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations /en-US/docs/Web/Guide/HTML/Editable_content /en-US/docs/Web/HTML/Global_attributes/contenteditable -/en-US/docs/Web/Guide/HTML/Element /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started -/en-US/docs/Web/Guide/HTML/Email_links /en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#email_links +/en-US/docs/Web/Guide/HTML/Element /en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax +/en-US/docs/Web/Guide/HTML/Email_links /en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links#email_links /en-US/docs/Web/Guide/HTML/Event_attributes /en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_—_don't_use_these /en-US/docs/Web/Guide/HTML/Forms /en-US/docs/Learn/Forms /en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms /en-US/docs/Learn/Forms/Advanced_form_styling @@ -12178,14 +12206,14 @@ /en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list /en-US/docs/Web/HTML/Element /en-US/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /en-US/docs/Learn/HTML /en-US/docs/Web/Guide/HTML/HTML5/Optimizing_Your_Pages_for_Speculative_Parsing /en-US/docs/Glossary/speculative_parsing -/en-US/docs/Web/Guide/HTML/Hyperlink /en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +/en-US/docs/Web/Guide/HTML/Hyperlink /en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links /en-US/docs/Web/Guide/HTML/Inline_event_handler /en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_—_don't_use_these -/en-US/docs/Web/Guide/HTML/Introduction /en-US/docs/Learn/HTML/Introduction_to_HTML -/en-US/docs/Web/Guide/HTML/Obsolete_things_to_avoid /en-US/docs/Learn/HTML/Introduction_to_HTML +/en-US/docs/Web/Guide/HTML/Introduction /en-US/docs/Learn_web_development/Core/Structuring_content +/en-US/docs/Web/Guide/HTML/Obsolete_things_to_avoid /en-US/docs/Learn_web_development/Core/Structuring_content /en-US/docs/Web/Guide/HTML/Recommended_Drag_Types /en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types -/en-US/docs/Web/Guide/HTML/The_Importance_of_Correct_HTML_Commenting /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments +/en-US/docs/Web/Guide/HTML/The_Importance_of_Correct_HTML_Commenting /en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax#HTML_comments /en-US/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages /en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages -/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video /en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio /en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /en-US/docs/Web/HTML/Element/Heading_Elements /en-US/docs/Web/Guide/HTML/Using_data_attributes /en-US/docs/Learn/HTML/Howto/Use_data_attributes /en-US/docs/Web/Guide/HTML/XHTML /en-US/docs/Glossary/XHTML @@ -12273,7 +12301,7 @@ /en-US/docs/Web/HTML/Inline_elemente /en-US/docs/Glossary/Inline-level_content /en-US/docs/Web/HTML/Inline_elements /en-US/docs/Glossary/Inline-level_content /en-US/docs/Web/HTML/Inline_elmements /en-US/docs/Glossary/Inline-level_content -/en-US/docs/Web/HTML/Introduction /en-US/docs/Learn/HTML/Introduction_to_HTML +/en-US/docs/Web/HTML/Introduction /en-US/docs/Learn_web_development/Core/Structuring_content /en-US/docs/Web/HTML/Kinds_of_HTML_content /en-US/docs/Web/HTML/Content_categories /en-US/docs/Web/HTML/Link_types /en-US/docs/Web/HTML/Attributes/rel /en-US/docs/Web/HTML/Link_types/Link_types:_noopener /en-US/docs/Web/HTML/Attributes/rel/noopener @@ -12291,8 +12319,8 @@ /en-US/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /en-US/docs/Glossary/speculative_parsing /en-US/docs/Web/HTML/Preloading_content /en-US/docs/Web/HTML/Attributes/rel/preload /en-US/docs/Web/HTML/Supported_media_formats /en-US/docs/Web/Media/Formats -/en-US/docs/Web/HTML/The_Importance_of_Correct_HTML_Commenting /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments -/en-US/docs/Web/HTML/Using_HTML5_audio_and_video /en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +/en-US/docs/Web/HTML/The_Importance_of_Correct_HTML_Commenting /en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax#HTML_comments +/en-US/docs/Web/HTML/Using_HTML5_audio_and_video /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio /en-US/docs/Web/HTML/element/content /en-US/docs/Web/HTML/element/slot /en-US/docs/Web/HTTP/Access_control_CORS /en-US/docs/Web/HTTP/CORS /en-US/docs/Web/HTTP/Basic_access_authentication /en-US/docs/Web/HTTP/Authentication @@ -13290,7 +13318,7 @@ /en-US/docs/Web_Development/Responsive_design /en-US/docs/Web/Progressive_web_apps /en-US/docs/Web_Development/Responsive_design/Responsive_design_references /en-US/docs/Web/Progressive_web_apps /en-US/docs/Web_Development2/Introduction_to_Web_development /en-US/docs/Learn -/en-US/docs/Web_development/Historical_artifacts_to_avoid /en-US/docs/Learn/HTML/Introduction_to_HTML +/en-US/docs/Web_development/Historical_artifacts_to_avoid /en-US/docs/Learn_web_development/Core/Structuring_content /en-US/docs/Web_development/Writing_Forward_Compatible_Websites /en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript /en-US/docs/Web_development/Writing_forward-compatible_websites /en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript /en-US/docs/What's_New_in_Deer_Park_Alpha /en-US/docs/Mozilla/Firefox/Releases/1.5/What_s_new_in_1.5_alpha diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index b73dc63c7c7cab4..297505ed8279723 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -7945,1702 +7945,1212 @@ "groovecoder" ] }, - "Learn/HTML/Introduction_to_HTML": { - "modified": "2020-12-03T08:31:03.862Z", + "Learn/HTML/Multimedia_and_embedding": { + "modified": "2020-09-06T18:42:31.145Z", "contributors": [ + "theRealJennie", "chrisdavidmills", - "vlnsubmit", - "onurbasturk", - "sideshowbarker", - "animeansiklopedisi", - "CodeDotJS", + "PatientLearner", "tayyabalishan", - "DevForrestLyu", - "kakwanisiddharth", - "shilili", - "boxa6", - "weisan0616", - "Koavf", - "Beatheat", - "PanayiotisPaschalides", - "JuanRomoDev", - "mjibrower", - "federico71", - "Avinash028", - "Jeffrey_Yang", - "Alihoday", - "hadleyel", - "jk777", - "shashishekhar333", - "LostLucidity" + "choudh70", + "ezrinjaz", + "aboagyed", + "oyenirat", + "tamowicz", + "sideshowbarker", + "xiaofei86", + "david_ross", + "Looserof7", + "yarochewsky", + "richardzacur" ] }, - "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting": { - "modified": "2020-08-29T01:56:34.668Z", + "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web": { + "modified": "2020-10-19T00:06:33.919Z", "contributors": [ - "SnakeWhisperer", - "ZO14", - "vodov", - "mrmurtazaabbasi", - "vgiffin", - "avivmu", - "onurbasturk", + "gdsimoes", + "ralaplines1988", + "dd-pardal", "chrisdavidmills", - "tayyabalishan", "choudh70", - "SphinxKnight", - "famees", - "markwood87", - "Yachi_Huang", - "Jesssie", - "imi-tating", - "suterj", - "stephaniehobson", - "Nintendao", + "tayyabalishan", + "Zectbumo", + "danialtaherifar", + "imba-tjd", + "mfuji09", + "bdeloeste", + "deacon", "agnelvishal", - "rarevans", - "vkweb", - "wilhelmtell", - "flash4syth", - "GowthamPrakaash", - "Wispring", - "CatalinMengheris", - "waldr", - "robinfromsps", - "AmazingJamesLee", - "goto.prototype", - "amins", - "richardzacur" + "stephaniehobson", + "potmpark", + "richardzacur", + "Andrew_Pfeiffer", + "hbloomer" ] }, - "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks": { - "modified": "2020-12-02T15:56:05.660Z", + "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies": { + "modified": "2020-10-19T05:59:20.512Z", "contributors": [ "chrisdavidmills", - "asad_mozilla", - "codejayant", "gdsimoes", - "techdocswriter", - "josh.591536", - "onurbasturk", - "sideshowbarker", - "deepaksenguttuvan", - "santimirandarp", + "Sichen-Wang", + "TheMageKing", "choudh70", "Elched", + "darby", "eremis101", - "noorfathima11", - "MNizam0802", - "Jozefi87", - "mfuji09", - "mbuc", - "DrewGeisler", + "Wind1808", + "RafeyIqbalRahman", + "Jesssie", + "pradeeprajr93", + "juandesouza", "stephaniehobson", - "bgrayland", - "Hiroshivam", - "vkweb", - "potmpark", - "scottaohara", - "svmartin", - "rebelstatus", - "NurudeenPopoola", + "NilSocket", + "flash4syth", + "BaderSur", "richardzacur" ] }, - "Learn/HTML/Introduction_to_HTML/Debugging_HTML": { - "modified": "2020-08-09T17:31:16.592Z", + "Learn/HTML/Multimedia_and_embedding/Responsive_images": { + "modified": "2020-10-19T20:26:21.787Z", "contributors": [ - "anewton", - "avivmu", + "hamishwillee", + "sideshowbarker", + "thjbd", "chrisdavidmills", + "atd30", + "jpfkd", + "ramiy", + "JonDevOps", + "choudh70", "tayyabalishan", - "sideshowbarker", - "frezier", + "Blacktodreamlight", + "Koavf", + "clairealyssa", + "eremis101", + "MNizam0802", + "oyenirat", + "Flimm", + "thenoelman", + "chelBot", + "dharkness", + "demont93", + "akshat12", + "imi-tating", + "msufa", + "Audaciter", "stephaniehobson", - "stefanocbl", - "johnjago", - "mustak", - "breno785au", + "dtrueman", + "goto.prototype", "richardzacur", - "sockofleas" + "Sheppy", + "Jeremie", + "hbloomer", + "Andrew_Pfeiffer" ] }, - "Learn/HTML/Introduction_to_HTML/Document_and_website_structure": { - "modified": "2020-11-03T08:36:09.820Z", + "Learn/JavaScript": { + "modified": "2020-11-22T08:19:35.982Z", "contributors": [ + "mansurdoank0", + "ARYAAB-rgb", "chrisdavidmills", - "philou", - "onurbasturk", - "arvin_fr", - "jzunigacoayla", - "choudh70", "tayyabalishan", - "sharma86hub", - "taoranz", + "kruschk", + "frezier", + "Koavf", + "bestinterviewquestion", + "svarlamov", "SphinxKnight", - "famees", - "Jerami76", - "loretta-arineva", - "eremis101", - "bminard", - "c-herrewijn", - "jswisher", - "surigangula", - "ajhsu", - "bripmccann", - "jeremiah-shore", - "stephaniehobson", - "potmpark", - "kevinAlbs", - "kalch", - "geraldchan", - "jk777", - "Jedeu", - "bmwadforth", - "aquaplanet", - "richardzacur", - "sockofleas", - "rmauge" + "jonasholbech", + "rileym7", + "wbamberg", + "ts9111", + "RayannTedds", + "BrijeshWawdhane", + "TornadoIDS", + "mrmsoares", + "rain1992", + "rmateus", + "OrthoLearner", + "Jeremie", + "Sebastianz", + "bbstudio03", + "atymchuk", + "Andrew_Pfeiffer", + "fscholz" ] }, - "Learn/HTML/Introduction_to_HTML/Getting_started": { - "modified": "2020-12-05T12:24:44.561Z", + "Learn/JavaScript/Asynchronous": { + "modified": "2020-07-16T22:33:12.530Z", "contributors": [ - "Seeeven7", "chrisdavidmills", - "philou", - "alurodriguez", - "gdsimoes", - "sxnaprkhr", - "ohaver", - "RogueDynamite", - "lucida959595", - "grzim", - "sideshowbarker", - "girlref", - "abbasalamin12", - "tayyabalishan", - "SphinxKnight", - "LittleMissS", - "MrPodu", - "exercism-1", + "wwags33", + "82ba10b5e8dc", + "Sheppy", + "AllenChong" + ] + }, + "Learn/JavaScript/Asynchronous/Introducing": { + "modified": "2020-11-05T06:58:50.627Z", + "contributors": [ + "chrisdavidmills", + "SpartaSixZero", + "ptk", + "Rafael_Green", + "Jmnsrg92", + "mariusmucenicu", "tywmick", - "JacobRuigrok", - "thanhvt1984", - "imba-tjd", - "bminard", - "Chomchaum", - "mat-bi", - "madmadi", - "Sunit41557077", - "sdkiko", - "flow2k", - "irenesmith", - "formatkaka", - "bripmccann", - "sasigit7", - "Sheppy", - "Avinash028", - "SelenIT", - "MexieAndCo", - "hamasaki", - "suterj", - "Manisha0605", - "stephaniehobson", - "agnelvishal", - "MiltonAkash", - "KadirTopal", - "ameridan", - "mondaya", - "wilhelmtell", - "hadleyel", - "psylone", - "jorgeclesio", - "abdusalah", - "Bryzzle", - "Cameron-Riecan", + "mahrr", + "ZhenWang-Jen", + "pmurzin", + "horstmannd", + "Sheppy" + ] + }, + "Learn/JavaScript/Asynchronous/Promises": { + "modified": "2020-09-22T14:49:51.114Z", + "contributors": [ "jswisher", - "KevinDonnelly", - "richardzacur", - "mauney" + "manoelbjr", + "chrisdavidmills", + "A.Faturechi", + "jaypatel3998", + "ckashby", + "Iqbalh11", + "tywmick", + "SphinxKnight", + "sukhbatth", + "BIT-zhaoyang", + "Sheppy" ] }, - "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals": { - "modified": "2020-10-29T23:24:18.960Z", + "Learn/JavaScript/Building_blocks": { + "modified": "2020-07-16T22:31:06.092Z", "contributors": [ - "philou", "chrisdavidmills", - "theRealJennie", - "trebuchet", - "emckean", - "onurbasturk", - "choudh70", - "cadorej", - "WindLo", - "eremis101", - "xubres", - "bminard", - "Chomchaum", - "quixx", - "Manisha0605", - "WikiMarc", + "ckashby", + "Zearin_Galaurum", + "jswisher", + "baustinfry", + "nunarokapp", "stephaniehobson", - "cknapp92", - "mientje", - "Wispring", - "sideshowbarker", - "phorgan1", - "abdusalah", - "NurudeenPopoola", - "monooran1", - "PushpitaPikuDey", - "rolfedh" + "FishinginaSombrero8", + "ArchieAtOrigins", + "Jeremie", + "SnoopyRules", + "Cameron-Riecan" ] }, - "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter": { - "modified": "2020-07-16T22:23:10.729Z", + "Learn/JavaScript/Building_blocks/Build_your_own_function": { + "modified": "2020-07-16T22:31:28.317Z", "contributors": [ + "A.Faturechi", "chrisdavidmills", - "avivmu", - "ohaver", - "tayyabalishan", - "sideshowbarker", - "r_arpeet82", - "fazl", - "soppa91", - "bripmccann", - "jswisher", - "jk777", - "mishkadoma" + "mariusmucenicu", + "docrob0t", + "sambgordon", + "thenoelman", + "wazz", + "kan199041", + "stephaniehobson", + "FishinginaSombrero8", + "cPlayIt", + "nmve", + "rteliczan", + "Jeremie" ] }, - "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content": { - "modified": "2020-07-16T22:24:17.251Z", + "Learn/JavaScript/Building_blocks/Events": { + "modified": "2020-08-19T17:34:16.897Z", "contributors": [ - "yolo.kimc", + "Aaron228", + "owolagbadavid", "chrisdavidmills", + "ankerok-dingdong", + "muhammadghazali", "tayyabalishan", - "sideshowbarker", - "markwood87", "jswisher", - "diveshuttam", - "SoftwareRVG", - "richardzacur" + "VijayKumarKTG", + "FZs", + "imchriskitchens", + "mariusmucenicu", + "4R53N", + "sideshowbarker", + "christopherwilson1", + "bubzy34", + "wobedi", + "anton-mladenov", + "selrond", + "andyprickett", + "stephaniehobson", + "seasmith", + "Saabbir", + "qdirks", + "Arecius", + "Bogdancev", + "kirkins", + "cPlayIt", + "dsujeeun", + "shalvasvanidze", + "nmve", + "Jeremie", + "BaderSur", + "sngv" ] }, - "Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text": { - "modified": "2020-08-29T02:34:36.621Z", - "contributors": ["SnakeWhisperer", "onurbasturk", "chrisdavidmills"] - }, - "Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics": { - "modified": "2020-08-27T05:38:52.761Z", - "contributors": ["SnakeWhisperer", "chrisdavidmills"] - }, - "Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links": { - "modified": "2020-08-28T04:26:18.208Z", - "contributors": ["SnakeWhisperer", "chrisdavidmills", "onurbasturk"] - }, - "Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML": { - "modified": "2020-09-28T22:06:13.983Z", + "Learn/JavaScript/Building_blocks/Functions": { + "modified": "2020-09-29T10:01:24.142Z", "contributors": [ - "boptilop", + "bhushangoel", + "JohnnyMu-Cn", "chrisdavidmills", - "RogueDynamite", - "zlamma", - "arjenlgill", - "jasonsbarr", - "CrypterSr", + "ahmaazouzi", + "gerfolder", "choudh70", - "SphinxKnight", - "fazl", - "khendrikse", - "Calerid", - "Sheppy", - "peterschussheim", - "jecook", + "tayyabalishan", + "cadorej", + "karlhorky", + "loretta-arineva", + "mariusmucenicu", + "riyaz", + "dan-nix", + "MachineShot", "thenoelman", - "IMLERICH", - "rakeshkatti", - "jeremymouzin", + "redrambles", + "jruota", "stephaniehobson", - "prajwalkk", - "mertdemo", - "NilSocket", - "hadleyel", - "CarlosJose", - "sideshowbarker", - "Wispring", - "aculnaig", - "chibby0ne", - "Roboe", - "richardzacur" + "FishinginaSombrero8", + "gabiaad", + "Anonymous", + "GKilyar", + "stockcj", + "nmve", + "Jeremie", + "Cameron-Riecan", + "husain100b", + "fscholz" ] }, - "Learn/HTML/Multimedia_and_embedding": { - "modified": "2020-09-06T18:42:31.145Z", + "Learn/JavaScript/Building_blocks/Image_gallery": { + "modified": "2020-07-31T18:38:47.870Z", "contributors": [ - "theRealJennie", + "Rafael_Green", "chrisdavidmills", - "PatientLearner", - "tayyabalishan", - "choudh70", - "ezrinjaz", - "aboagyed", - "oyenirat", - "tamowicz", - "sideshowbarker", - "xiaofei86", - "david_ross", - "Looserof7", - "yarochewsky", - "richardzacur" + "jswisher", + "csarami", + "jxhdev", + "jyjz2008", + "Jeremie" ] }, - "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web": { - "modified": "2020-10-19T00:06:33.919Z", + "Learn/JavaScript/Building_blocks/Looping_code": { + "modified": "2020-09-15T14:47:05.302Z", "contributors": [ - "gdsimoes", - "ralaplines1988", - "dd-pardal", + "theRealJennie", + "SphinxKnight", + "Rafael_Green", + "mrmowji", "chrisdavidmills", - "choudh70", + "The-UCS-Variable", + "sideshowbarker", + "hhimanshu", + "naser-baig", "tayyabalishan", - "Zectbumo", - "danialtaherifar", - "imba-tjd", - "mfuji09", - "bdeloeste", - "deacon", - "agnelvishal", + "muhammadghazali", + "loretta-arineva", + "mariusmucenicu", + "walonge", + "eremis101", + "keshav1245", + "4EPTAKA", + "Erramyne", + "li3097", + "sumnercommajohn", + "thenoelman", + "csarami", + "SebastianMaciel", + "RundongZou", + "FloraFauna", "stephaniehobson", - "potmpark", - "richardzacur", - "Andrew_Pfeiffer", - "hbloomer" + "GowthamPrakaash", + "JackZL", + "BrunkBeard", + "nmve", + "Jeremie", + "BaderSur", + "fscholz" ] }, - "Learn/HTML/Multimedia_and_embedding/Images_in_HTML": { - "modified": "2020-11-06T07:13:32.741Z", + "Learn/JavaScript/Building_blocks/Return_values": { + "modified": "2020-08-19T08:02:22.451Z", "contributors": [ + "wlt", + "Rafael_Green", "chrisdavidmills", - "philou", - "atd30", + "xuchunyang", + "ppusher", + "feeko", "abbasalamin12", - "RicardsVeveris", "choudh70", - "LeonFrempong", - "Mahdi_Karimi_Asl", - "sudipbhandari126", - "Sheppy", - "cinephile85", - "eremis101", - "MNizam0802", - "oyenirat", - "adyavanapalli", - "bripmccann", - "sideshowbarker", - "Ajimi", + "tayyabalishan", + "muhammadghazali", + "Zearin_Galaurum", + "loretta-arineva", + "anton-mladenov", "stephaniehobson", - "Potch", - "andrealaw", - "tedmetaltns", - "david_ross", - "Looserof7", - "jamalss", - "mishkadoma", - "jswisher", - "rishianand", - "richardzacur" + "nmve", + "rteliczan", + "Jeremie", + "fscholz" ] }, - "Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images": { - "modified": "2020-10-18T19:47:17.929Z", - "contributors": ["gdsimoes", "chrisdavidmills"] + "Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals": { + "modified": "2020-07-16T22:31:45.710Z", + "contributors": ["jpfkd", "jmliu", "chrisdavidmills"] }, - "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page": { - "modified": "2020-07-16T22:25:05.240Z", - "contributors": [ - "chrisdavidmills", - "FoxDie12x", - "MNizam0802", - "jswisher", - "goto.prototype", - "richardzacur" - ] + "Learn/JavaScript/Building_blocks/Test_your_skills:_Events": { + "modified": "2020-07-16T22:31:46.881Z", + "contributors": ["chrisdavidmills"] }, - "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies": { - "modified": "2020-10-19T05:59:20.512Z", - "contributors": [ - "chrisdavidmills", - "gdsimoes", - "Sichen-Wang", - "TheMageKing", - "choudh70", - "Elched", - "darby", - "eremis101", - "Wind1808", - "RafeyIqbalRahman", - "Jesssie", - "pradeeprajr93", - "juandesouza", - "stephaniehobson", - "NilSocket", - "flash4syth", - "BaderSur", - "richardzacur" - ] + "Learn/JavaScript/Building_blocks/Test_your_skills:_Functions": { + "modified": "2020-07-16T22:31:46.557Z", + "contributors": ["chrisdavidmills"] }, - "Learn/HTML/Multimedia_and_embedding/Responsive_images": { - "modified": "2020-10-19T20:26:21.787Z", + "Learn/JavaScript/Building_blocks/Test_your_skills:_Loops": { + "modified": "2020-07-16T22:31:46.034Z", + "contributors": ["neuroptera", "chrisdavidmills"] + }, + "Learn/JavaScript/Building_blocks/conditionals": { + "modified": "2020-07-16T22:31:11.893Z", "contributors": [ - "hamishwillee", - "sideshowbarker", - "thjbd", "chrisdavidmills", - "atd30", - "jpfkd", - "ramiy", - "JonDevOps", "choudh70", "tayyabalishan", - "Blacktodreamlight", - "Koavf", - "clairealyssa", - "eremis101", - "MNizam0802", - "oyenirat", - "Flimm", - "thenoelman", - "chelBot", - "dharkness", - "demont93", - "akshat12", - "imi-tating", - "msufa", - "Audaciter", + "jswisher", + "keshav1245", + "RafeyIqbalRahman", + "Czl.Lebleu", + "smccrindle", + "OxyDesign", "stephaniehobson", - "dtrueman", - "goto.prototype", - "richardzacur", - "Sheppy", + "qdirks", + "drozycki", + "BrunkBeard", + "akshayjumbade", + "nmve", + "Rohit25negi", "Jeremie", - "hbloomer", - "Andrew_Pfeiffer" + "Cameron-Riecan", + "husain100b", + "fscholz", + "Sebastianz" ] }, - "Learn/HTML/Multimedia_and_embedding/Video_and_audio_content": { - "modified": "2020-11-20T14:06:53.297Z", + "Learn/JavaScript/Client-side_web_APIs": { + "modified": "2020-07-16T22:32:38.327Z", "contributors": [ - "philou", "chrisdavidmills", - "mohammad92asghari", - "pabdani", - "avivmu", - "atd30", - "295805950zhang", - "Sichen-Wang", - "valgrimm", - "choudh70", - "mukhtar-github", - "pzrq", - "LeonFrempong", - "darby", - "kerusasu", - "Sheppy", - "Elched", - "6truvian", + "xuxintao", + "thenoelman", + "chirag7145", + "dvincent", + "david_ross", "sideshowbarker", - "thet002", - "eremis101", - "sbkrish", - "christopherwilson1", - "Devendra0110", - "imi-tating", - "stephaniehobson", - "adelyoussif", - "vkweb", - "ferjm", - "fachalo1996", - "jk777", - "jayantsarkar", - "sashaburchuk", - "waldr", - "rishianand", - "goto.prototype", - "richardzacur" + "utkarshbhatt12" ] }, - "Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding": { - "modified": "2020-11-20T14:20:14.413Z", - "contributors": ["philou", "gdsimoes", "chrisdavidmills"] - }, - "Learn/HTML/Tables": { - "modified": "2020-07-16T22:25:09.229Z", + "Learn/JavaScript/Client-side_web_APIs/Client-side_storage": { + "modified": "2020-09-16T10:15:50.995Z", "contributors": [ "chrisdavidmills", - "abbasalamin12", - "tayyabalishan", - "MNizam0802", + "JohnnyMu-Cn", + "stevemasta34", + "ckashby", + "SphinxKnight", + "VincentHead", + "kruschk", + "nsangwan", "sideshowbarker", - "oyenirat", - "goddlts", - "jalbertbowden" + "Milind-Gawande", + "Eduardo06sp", + "reddraggone9", + "Ilphrin", + "Sheppy", + "TheHumbleGhost" ] }, - "Learn/HTML/Tables/Advanced": { - "modified": "2020-07-16T22:25:24.257Z", + "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics": { + "modified": "2020-09-16T07:38:44.679Z", "contributors": [ - "tayyabalishan", "chrisdavidmills", - "santiago-rodrig", - "darman12", - "irajsuhail", - "haarabi", - "surigangula", - "stephaniehobson", - "Sheppy", - "ImtiazeA", - "serratusmagnus", - "pranay2063", - "Sebastianz", - "npusr" + "Rafael_Green", + "kim.tranberg", + "ckashby", + "kruschk", + "imchriskitchens", + "ionicpanda", + "2alin", + "shivansh11", + "stephaniehobson", + "TheHumbleGhost", + "Sheppy" ] }, - "Learn/HTML/Tables/Basics": { - "modified": "2020-07-16T22:25:17.858Z", + "Learn/JavaScript/Client-side_web_APIs/Fetching_data": { + "modified": "2020-09-12T22:58:21.536Z", "contributors": [ - "avivmu", + "JohnnyMu-Cn", + "wlt", + "timandes", "chrisdavidmills", - "radiocane", - "Sichen-Wang", - "choudh70", - "tayyabalishan", - "santiago-rodrig", - "Octopinky", - "ratbeard", - "irenesmith", - "Sheppy", - "nrebhun", - "surigangula", + "joanvalis", + "thekosiguy", + "sideshowbarker", + "ezrinjaz", + "aboagyed", + "smoothie1998", + "stepharr", + "JoshApos", + "dlwagner", "stephaniehobson", - "yanlee26", - "qdirks", - "Sebastianz", - "mientje" + "kriminals", + "SphinxKnight", + "li-shasha", + "fireattack", + "marcusgenrich", + "Sheppy" ] }, - "Learn/HTML/Tables/Structuring_planet_data": { - "modified": "2020-07-16T22:25:28.525Z", + "Learn/JavaScript/Client-side_web_APIs/Introduction": { + "modified": "2020-07-16T22:32:43.814Z", "contributors": [ "chrisdavidmills", - "tayyabalishan", - "jswisher", - "Sebastianz" + "A.Faturechi", + "ckashby", + "CodeDotJS", + "kruschk", + "syntaxval", + "MariCastell", + "agnelvishal", + "pontusdevelopment", + "sideshowbarker", + "DToDelete", + "peterschussheim", + "thenoelman", + "McFarJ", + "rmorabia", + "Serioth", + "utkarshbhatt12", + "RayannTedds", + "stephaniehobson", + "Sheppy", + "BrunkBeard", + "psy054duck", + "vaibhav.vgc", + "sngv" ] }, - "Learn/JavaScript": { - "modified": "2020-11-22T08:19:35.982Z", + "Learn/JavaScript/Client-side_web_APIs/Manipulating_documents": { + "modified": "2020-08-23T02:38:31.029Z", "contributors": [ - "mansurdoank0", - "ARYAAB-rgb", + "wlt", + "herrieii", "chrisdavidmills", - "tayyabalishan", "kruschk", - "frezier", - "Koavf", - "bestinterviewquestion", - "svarlamov", - "SphinxKnight", - "jonasholbech", - "rileym7", - "wbamberg", - "ts9111", - "RayannTedds", - "BrijeshWawdhane", - "TornadoIDS", - "mrmsoares", - "rain1992", - "rmateus", - "OrthoLearner", - "Jeremie", - "Sebastianz", - "bbstudio03", - "atymchuk", - "Andrew_Pfeiffer", - "fscholz" + "HARARCA", + "Aternus", + "ajhsu", + "jlafica", + "sourav2706", + "francescm", + "jwq1", + "stephaniehobson", + "Bogdan.G", + "JideLambo", + "lybrendan", + "mientje" ] }, - "Learn/JavaScript/Asynchronous": { - "modified": "2020-07-16T22:33:12.530Z", + "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs": { + "modified": "2020-07-16T22:32:53.676Z", "contributors": [ + "UnorthodoxThing", "chrisdavidmills", - "wwags33", - "82ba10b5e8dc", - "Sheppy", - "AllenChong" + "kruschk", + "ZrSiO4", + "markdudevad", + "wbamberg", + "MPDSilva", + "smoothie1998", + "sideshowbarker", + "RafeyIqbalRahman", + "markalanrichards", + "SteviBee", + "championshuttler", + "dlwagner", + "minguoITnan", + "stephaniehobson" ] }, - "Learn/JavaScript/Asynchronous/Introducing": { - "modified": "2020-11-05T06:58:50.627Z", + "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs": { + "modified": "2020-09-03T10:37:16.888Z", "contributors": [ - "chrisdavidmills", - "SpartaSixZero", - "ptk", + "wlt", "Rafael_Green", - "Jmnsrg92", - "mariusmucenicu", - "tywmick", - "mahrr", - "ZhenWang-Jen", - "pmurzin", - "horstmannd", - "Sheppy" + "nigelbpeck", + "chrisdavidmills", + "kruschk", + "Sheppy", + "roy-vanegas", + "kenjwho", + "2alin", + "dreamerll", + "stephaniehobson", + "david_ross", + "BrunkBeard" ] }, - "Learn/JavaScript/Asynchronous/Promises": { - "modified": "2020-09-22T14:49:51.114Z", + "Learn/JavaScript/First_steps": { + "modified": "2020-07-16T22:29:47.255Z", "contributors": [ - "jswisher", - "manoelbjr", "chrisdavidmills", - "A.Faturechi", - "jaypatel3998", - "ckashby", - "Iqbalh11", - "tywmick", + "kruschk", + "Andriy-K", + "adnankammes", "SphinxKnight", - "sukhbatth", - "BIT-zhaoyang", + "billaparker", + "Elllenn", + "dartvaneri", + "kunleris", + "gotoark", + "Jeremie", "Sheppy" ] }, - "Learn/JavaScript/Building_blocks": { - "modified": "2020-07-16T22:31:06.092Z", + "Learn/JavaScript/First_steps/A_first_splash": { + "modified": "2020-12-05T16:30:27.992Z", "contributors": [ + "mfuji09", "chrisdavidmills", + "mrmowji", + "blinkous", + "ghaffar_jr.codes", + "hisbvdis", + "Rohitkrops", "ckashby", - "Zearin_Galaurum", + "tayyabalishan", + "Waqas-Ali-Azhar", + "kruschk", + "Sarthak23khatana", "jswisher", - "baustinfry", - "nunarokapp", + "loretta-arineva", + "jshado1", + "eremis101", + "Mei-Giyanto22", + "BogdanSorin", + "nahamshabun", + "gusmally", + "RafeyIqbalRahman", + "ehrnd21mdn", + "Polcat000", + "redrambles", + "bripmccann", + "jjen9", "stephaniehobson", - "FishinginaSombrero8", - "ArchieAtOrigins", + "SumitKosta", + "yuvarajakm", + "vyaspranjal33", + "chrispincharles", + "Zmk55", + "Kongklakker", + "nmve", + "PawelRokosz", "Jeremie", - "SnoopyRules", - "Cameron-Riecan" + "beardedpayton", + "Sebastianz" ] }, - "Learn/JavaScript/Building_blocks/Build_your_own_function": { - "modified": "2020-07-16T22:31:28.317Z", + "Learn/JavaScript/First_steps/Arrays": { + "modified": "2020-07-16T22:30:52.384Z", "contributors": [ - "A.Faturechi", "chrisdavidmills", - "mariusmucenicu", - "docrob0t", - "sambgordon", - "thenoelman", - "wazz", - "kan199041", - "stephaniehobson", - "FishinginaSombrero8", - "cPlayIt", - "nmve", - "rteliczan", - "Jeremie" - ] - }, - "Learn/JavaScript/Building_blocks/Events": { - "modified": "2020-08-19T17:34:16.897Z", - "contributors": [ - "Aaron228", - "owolagbadavid", - "chrisdavidmills", - "ankerok-dingdong", - "muhammadghazali", + "choudh70", "tayyabalishan", "jswisher", - "VijayKumarKTG", - "FZs", - "imchriskitchens", - "mariusmucenicu", - "4R53N", - "sideshowbarker", - "christopherwilson1", - "bubzy34", - "wobedi", - "anton-mladenov", - "selrond", - "andyprickett", + "denise_", + "Majek", + "keshav1245", + "mfuji09", + "dq82elo", + "TasosPoursaitides", + "johnnyvalles", + "pbbob1", + "bripmccann", "stephaniehobson", - "seasmith", - "Saabbir", + "AnnaCheba", "qdirks", - "Arecius", - "Bogdancev", - "kirkins", - "cPlayIt", - "dsujeeun", - "shalvasvanidze", + "hadleyel", + "RobWheadon", + "faroukcharkas", + "sushobhana", + "cloverharvest", "nmve", + "TimHandy", + "PawelRokosz", "Jeremie", "BaderSur", - "sngv" + "Sebastianz", + "BenCrab", + "fscholz" ] }, - "Learn/JavaScript/Building_blocks/Functions": { - "modified": "2020-09-29T10:01:24.142Z", + "Learn/JavaScript/First_steps/Math": { + "modified": "2020-07-16T22:30:23.656Z", "contributors": [ - "bhushangoel", - "JohnnyMu-Cn", + "mrmowji", + "asavageiv", + "A.Faturechi", "chrisdavidmills", - "ahmaazouzi", - "gerfolder", "choudh70", "tayyabalishan", - "cadorej", - "karlhorky", - "loretta-arineva", - "mariusmucenicu", - "riyaz", - "dan-nix", - "MachineShot", - "thenoelman", - "redrambles", - "jruota", + "kruschk", + "jswisher", + "cinephile85", + "amitch38", + "alepsys", + "vitaliyterziev", + "caraya", + "Uemmra3", + "bripmccann", + "dlwagner", "stephaniehobson", - "FishinginaSombrero8", + "Saabbir", "gabiaad", - "Anonymous", - "GKilyar", - "stockcj", + "BadTudou", + "hadleyel", + "FIJN", + "hungvt0301", + "vatz88", + "kiley0", "nmve", + "brendenseidel", "Jeremie", - "Cameron-Riecan", - "husain100b", - "fscholz" + "BaderSur", + "sngv", + "Sheppy", + "Sebastianz" ] }, - "Learn/JavaScript/Building_blocks/Image_gallery": { - "modified": "2020-07-31T18:38:47.870Z", + "Learn/JavaScript/First_steps/Silly_story_generator": { + "modified": "2020-07-16T22:30:59.670Z", "contributors": [ - "Rafael_Green", + "neuroptera", "chrisdavidmills", - "jswisher", + "nsangwan", + "rendner", "csarami", - "jxhdev", - "jyjz2008", + "2alin", + "jswisher", + "ctroupin", + "keshavmahajan", + "pranay2063", + "MrMaxMeranda", "Jeremie" ] }, - "Learn/JavaScript/Building_blocks/Looping_code": { - "modified": "2020-09-15T14:47:05.302Z", + "Learn/JavaScript/First_steps/Strings": { + "modified": "2020-07-16T22:30:38.291Z", "contributors": [ - "theRealJennie", - "SphinxKnight", - "Rafael_Green", - "mrmowji", + "chinmaykunkikar", "chrisdavidmills", - "The-UCS-Variable", - "sideshowbarker", - "hhimanshu", - "naser-baig", "tayyabalishan", - "muhammadghazali", - "loretta-arineva", - "mariusmucenicu", - "walonge", + "kruschk", + "jswisher", + "alepsys", "eremis101", - "keshav1245", - "4EPTAKA", - "Erramyne", - "li3097", - "sumnercommajohn", - "thenoelman", - "csarami", - "SebastianMaciel", - "RundongZou", - "FloraFauna", - "stephaniehobson", - "GowthamPrakaash", - "JackZL", - "BrunkBeard", - "nmve", - "Jeremie", - "BaderSur", - "fscholz" - ] - }, - "Learn/JavaScript/Building_blocks/Return_values": { - "modified": "2020-08-19T08:02:22.451Z", - "contributors": [ - "wlt", - "Rafael_Green", - "chrisdavidmills", - "xuchunyang", - "ppusher", - "feeko", - "abbasalamin12", - "choudh70", - "tayyabalishan", - "muhammadghazali", - "Zearin_Galaurum", - "loretta-arineva", - "anton-mladenov", + "gerganzh", + "grumBit", + "RafeyIqbalRahman", + "sahilwasan000", + "hello-ajayrawat", + "bripmccann", + "rileym7", "stephaniehobson", - "nmve", - "rteliczan", + "hadleyel", + "shoelaces", "Jeremie", + "Sebastianz", "fscholz" ] }, - "Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals": { - "modified": "2020-07-16T22:31:45.710Z", - "contributors": ["jpfkd", "jmliu", "chrisdavidmills"] + "Learn/JavaScript/First_steps/Test_your_skills:_Arrays": { + "modified": "2020-07-16T22:31:05.831Z", + "contributors": ["vgiffin", "chrisdavidmills"] }, - "Learn/JavaScript/Building_blocks/Test_your_skills:_Events": { - "modified": "2020-07-16T22:31:46.881Z", - "contributors": ["chrisdavidmills"] + "Learn/JavaScript/First_steps/Test_your_skills:_Math": { + "modified": "2020-07-31T08:15:10.749Z", + "contributors": ["chrisdavidmills", "AJMcDee"] }, - "Learn/JavaScript/Building_blocks/Test_your_skills:_Functions": { - "modified": "2020-07-16T22:31:46.557Z", + "Learn/JavaScript/First_steps/Test_your_skills:_Strings": { + "modified": "2020-07-16T22:31:05.493Z", "contributors": ["chrisdavidmills"] }, - "Learn/JavaScript/Building_blocks/Test_your_skills:_Loops": { - "modified": "2020-07-16T22:31:46.034Z", + "Learn/JavaScript/First_steps/Test_your_skills:_variables": { + "modified": "2020-07-16T22:31:04.800Z", "contributors": ["neuroptera", "chrisdavidmills"] }, - "Learn/JavaScript/Building_blocks/conditionals": { - "modified": "2020-07-16T22:31:11.893Z", + "Learn/JavaScript/First_steps/Useful_string_methods": { + "modified": "2020-10-19T12:57:52.630Z", "contributors": [ "chrisdavidmills", + "jpfkd", + "epirnat", + "A.Faturechi", "choudh70", "tayyabalishan", "jswisher", - "keshav1245", - "RafeyIqbalRahman", - "Czl.Lebleu", - "smccrindle", - "OxyDesign", + "alepsys", + "Asimov4", + "v8sagar", + "bkucey", + "bripmccann", "stephaniehobson", - "qdirks", - "drozycki", - "BrunkBeard", - "akshayjumbade", + "hadleyel", + "RobWheadon", + "sushobhana", "nmve", - "Rohit25negi", + "brenseid", "Jeremie", - "Cameron-Riecan", - "husain100b", - "fscholz", - "Sebastianz" + "BaderSur", + "sngv", + "Sebastianz", + "BenCrab", + "fscholz" ] }, - "Learn/JavaScript/Client-side_web_APIs": { - "modified": "2020-07-16T22:32:38.327Z", + "Learn/JavaScript/First_steps/Variables": { + "modified": "2020-09-28T12:52:31.401Z", "contributors": [ + "mohammad92asghari", "chrisdavidmills", - "xuxintao", - "thenoelman", - "chirag7145", - "dvincent", - "david_ross", - "sideshowbarker", - "utkarshbhatt12" - ] - }, - "Learn/JavaScript/Client-side_web_APIs/Client-side_storage": { - "modified": "2020-09-16T10:15:50.995Z", - "contributors": [ - "chrisdavidmills", - "JohnnyMu-Cn", - "stevemasta34", - "ckashby", + "Nachec", + "choudh70", + "tayyabalishan", + "jswisher", + "JawnMarc", + "inikolaesku", + "cinephile85", + "alepsys", "SphinxKnight", - "VincentHead", - "kruschk", - "nsangwan", - "sideshowbarker", - "Milind-Gawande", - "Eduardo06sp", - "reddraggone9", - "Ilphrin", + "blimp", + "msobanjo", + "TasosPoursaitides", + "RafeyIqbalRahman", + "aswaniprakash", + "felipe-lee", + "sxnaprkhr", + "alexandr-osprey", + "Uemmra3", + "martian2049", + "bripmccann", + "jruota", + "stephaniehobson", + "rmdobservations", + "shoelaces", + "stockcj", + "Jeremie", + "razouckt", + "Sebastianz", "Sheppy", - "TheHumbleGhost" + "salman-shah" ] }, - "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics": { - "modified": "2020-09-16T07:38:44.679Z", + "Learn/JavaScript/First_steps/What_is_JavaScript": { + "modified": "2020-12-05T16:30:59.604Z", "contributors": [ + "mfuji09", + "dcompcoder", + "jpfkd", + "rajatsan", "chrisdavidmills", - "Rafael_Green", - "kim.tranberg", + "ibnlanre", "ckashby", - "kruschk", - "imchriskitchens", - "ionicpanda", - "2alin", - "shivansh11", + "tayyabalishan", + "JawnMarc", + "inikolaesku", + "Sheppy", + "nitramrelpmur", + "eremis101", + "agnelvishal", + "rachelcarmena", + "jk777", + "massood", + "riceh3", + "KirankumarAmbati", + "caraya", + "nceresole", + "MelissaNg", + "kevinlmadison", + "hackernewslibrary", + "MadEmperorYuri", + "Wenfang_Du", + "Anonymous", + "alanfeld", + "championshuttler", + "bripmccann", + "baustinfry", + "sumankisku", + "JonathanBrownCFA", + "1rjun", "stephaniehobson", - "TheHumbleGhost", - "Sheppy" + "morfioce", + "whiteheat2019", + "hadleyel", + "SarahSakura1990", + "rmateus", + "nmve", + "OrthoLearner", + "Jeremie", + "ObroAhmed", + "hamishwillee", + "Sebastianz" ] }, - "Learn/JavaScript/Client-side_web_APIs/Fetching_data": { - "modified": "2020-09-12T22:58:21.536Z", + "Learn/JavaScript/First_steps/What_went_wrong": { + "modified": "2020-09-04T06:06:17.140Z", "contributors": [ - "JohnnyMu-Cn", - "wlt", - "timandes", "chrisdavidmills", - "joanvalis", - "thekosiguy", - "sideshowbarker", - "ezrinjaz", - "aboagyed", - "smoothie1998", - "stepharr", - "JoshApos", - "dlwagner", + "jswisher", + "manideep39", + "tayyabalishan", + "inikolaesku", + "Alek2077", + "wbreakell", + "redrambles", + "bripmccann", + "MiaD", "stephaniehobson", - "kriminals", - "SphinxKnight", - "li-shasha", - "fireattack", - "marcusgenrich", - "Sheppy" + "kewinsousa", + "hadleyel", + "nmaksymchuk", + "Tony-Thomas", + "rsidorov", + "stockcj", + "niklasholm", + "nmve", + "DeboraG", + "BrianCsection", + "Jeremie", + "Sebastianz" ] }, - "Learn/JavaScript/Client-side_web_APIs/Introduction": { - "modified": "2020-07-16T22:32:43.814Z", + "Learn/JavaScript/Howto": { + "modified": "2020-07-16T22:33:08.616Z", "contributors": [ - "chrisdavidmills", - "A.Faturechi", - "ckashby", - "CodeDotJS", "kruschk", - "syntaxval", - "MariCastell", - "agnelvishal", - "pontusdevelopment", - "sideshowbarker", - "DToDelete", - "peterschussheim", - "thenoelman", - "McFarJ", - "rmorabia", - "Serioth", - "utkarshbhatt12", - "RayannTedds", + "sywsyw", + "jmstfv", "stephaniehobson", - "Sheppy", - "BrunkBeard", - "psy054duck", - "vaibhav.vgc", - "sngv" - ] - }, - "Learn/JavaScript/Client-side_web_APIs/Manipulating_documents": { - "modified": "2020-08-23T02:38:31.029Z", - "contributors": [ - "wlt", - "herrieii", "chrisdavidmills", - "kruschk", - "HARARCA", - "Aternus", - "ajhsu", - "jlafica", - "sourav2706", - "francescm", - "jwq1", - "stephaniehobson", - "Bogdan.G", - "JideLambo", - "lybrendan", - "mientje" + "Maxim79", + "tedmarynicz", + "adekoyejo" ] }, - "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs": { - "modified": "2020-07-16T22:32:53.676Z", + "Learn/JavaScript/Objects": { + "modified": "2020-08-18T09:29:11.749Z", "contributors": [ - "UnorthodoxThing", + "owdown", "chrisdavidmills", - "kruschk", - "ZrSiO4", - "markdudevad", - "wbamberg", - "MPDSilva", - "smoothie1998", - "sideshowbarker", - "RafeyIqbalRahman", - "markalanrichards", - "SteviBee", - "championshuttler", - "dlwagner", - "minguoITnan", - "stephaniehobson" + "CodeDotJS", + "bripmccann", + "shi_zi_", + "Ch0coL8te", + "omeid", + "torazaburo", + "MashKao", + "fscholz" ] }, - "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs": { - "modified": "2020-09-03T10:37:16.888Z", + "Learn/JavaScript/Objects/Adding_bouncing_balls_features": { + "modified": "2020-10-28T23:14:36.083Z", "contributors": [ - "wlt", - "Rafael_Green", - "nigelbpeck", + "krankj", "chrisdavidmills", - "kruschk", - "Sheppy", - "roy-vanegas", - "kenjwho", - "2alin", - "dreamerll", - "stephaniehobson", - "david_ross", - "BrunkBeard" + "jswisher", + "wwags33", + "rmdobservations", + "edsonmendieta", + "nmve", + "Jeremie", + "fscholz" ] }, - "Learn/JavaScript/First_steps": { - "modified": "2020-07-16T22:29:47.255Z", + "Learn/JavaScript/Objects/Basics": { + "modified": "2020-07-16T22:31:55.445Z", "contributors": [ "chrisdavidmills", - "kruschk", - "Andriy-K", - "adnankammes", - "SphinxKnight", - "billaparker", - "Elllenn", - "dartvaneri", - "kunleris", - "gotoark", - "Jeremie", - "Sheppy" - ] - }, - "Learn/JavaScript/First_steps/A_first_splash": { - "modified": "2020-12-05T16:30:27.992Z", - "contributors": [ - "mfuji09", - "chrisdavidmills", - "mrmowji", - "blinkous", - "ghaffar_jr.codes", - "hisbvdis", - "Rohitkrops", - "ckashby", "tayyabalishan", - "Waqas-Ali-Azhar", - "kruschk", - "Sarthak23khatana", "jswisher", - "loretta-arineva", - "jshado1", - "eremis101", - "Mei-Giyanto22", - "BogdanSorin", - "nahamshabun", - "gusmally", - "RafeyIqbalRahman", - "ehrnd21mdn", - "Polcat000", - "redrambles", + "FishinginaSombrero8", + "nhsz", + "gumbol", + "rayrojas", "bripmccann", - "jjen9", + "Battlesquid", + "Abhro", + "FeruzOripov", + "snakecase", + "vcastrejont", + "muhammadghazali", + "MarckK", + "RockyAZ", + "rajasrijanakiraman", "stephaniehobson", - "SumitKosta", - "yuvarajakm", - "vyaspranjal33", - "chrispincharles", - "Zmk55", - "Kongklakker", + "JonathanPool", + "systematis", + "dsujeeun", "nmve", - "PawelRokosz", + "BaderSur", "Jeremie", - "beardedpayton", - "Sebastianz" + "fscholz" ] }, - "Learn/JavaScript/First_steps/Arrays": { - "modified": "2020-07-16T22:30:52.384Z", + "Learn/JavaScript/Objects/JSON": { + "modified": "2020-10-31T11:57:03.706Z", "contributors": [ + "randycasburn", "chrisdavidmills", - "choudh70", - "tayyabalishan", "jswisher", - "denise_", - "Majek", - "keshav1245", - "mfuji09", - "dq82elo", - "TasosPoursaitides", - "johnnyvalles", - "pbbob1", + "mariusmucenicu", + "thebearingedge", "bripmccann", + "shilili", + "thekosiguy", + "TasosPoursaitides", + "dvsgnr", "stephaniehobson", - "AnnaCheba", + "torazaburo", + "DipperP", "qdirks", - "hadleyel", - "RobWheadon", - "faroukcharkas", - "sushobhana", - "cloverharvest", + "systematis", + "mememachine666", "nmve", - "TimHandy", - "PawelRokosz", "Jeremie", - "BaderSur", - "Sebastianz", - "BenCrab", "fscholz" ] }, - "Learn/JavaScript/First_steps/Math": { - "modified": "2020-07-16T22:30:23.656Z", + "Learn/JavaScript/Objects/Object_building_practice": { + "modified": "2020-07-16T22:32:30.497Z", "contributors": [ - "mrmowji", - "asavageiv", - "A.Faturechi", "chrisdavidmills", - "choudh70", - "tayyabalishan", - "kruschk", "jswisher", - "cinephile85", - "amitch38", - "alepsys", - "vitaliyterziev", - "caraya", - "Uemmra3", - "bripmccann", - "dlwagner", + "IamLegendChamp", + "rohitarondekar", "stephaniehobson", - "Saabbir", - "gabiaad", - "BadTudou", - "hadleyel", - "FIJN", - "hungvt0301", - "vatz88", - "kiley0", + "qdirks", + "RobWheadon", + "khamer1410", + "edsonmendieta", + "crueschenberg", "nmve", - "brendenseidel", - "Jeremie", + "wetlife", "BaderSur", - "sngv", - "Sheppy", - "Sebastianz" + "Jeremie", + "fscholz" ] }, - "Learn/JavaScript/First_steps/Silly_story_generator": { - "modified": "2020-07-16T22:30:59.670Z", + "Learn/JavaScript/Objects/Object_prototypes": { + "modified": "2020-11-29T09:12:53.165Z", "contributors": [ - "neuroptera", "chrisdavidmills", + "loretta-arineva", + "JohnnyMu-Cn", + "krankj", + "jgabrielpro", + "amit.gangaur", + "MrPodu", + "Zearin_Galaurum", + "ckashby", + "Bushwazi", + "ricardoorellana", + "hhimanshu", "nsangwan", - "rendner", - "csarami", - "2alin", - "jswisher", - "ctroupin", - "keshavmahajan", - "pranay2063", - "MrMaxMeranda", - "Jeremie" - ] - }, - "Learn/JavaScript/First_steps/Strings": { - "modified": "2020-07-16T22:30:38.291Z", - "contributors": [ - "chinmaykunkikar", - "chrisdavidmills", - "tayyabalishan", - "kruschk", - "jswisher", - "alepsys", - "eremis101", - "gerganzh", - "grumBit", - "RafeyIqbalRahman", - "sahilwasan000", - "hello-ajayrawat", - "bripmccann", - "rileym7", + "moneysharma1010", + "sappusaketh", + "Aerodium", + "collin", + "aniketkudale", + "LuoYun", + "anonyco", + "WeiyiChen", + "Univream", + "JonathanPool", + "COV", + "shateelahmed", + "MoTTs", + "deasydoesit", + "martian2049", + "theomjones", + "linasmnew", + "elWombator", "stephaniehobson", - "hadleyel", - "shoelaces", + "iAziz786", + "lfzy", + "systematis", + "tcsc", + "giorgiobeggiora", + "zziccardi", + "rht19932", + "crueschenberg", + "sportnak", + "nmve", + "BrunkBeard", "Jeremie", - "Sebastianz", - "fscholz" + "fscholz", + "ZeroUnderscoreOu" ] }, - "Learn/JavaScript/First_steps/Test_your_skills:_Arrays": { - "modified": "2020-07-16T22:31:05.831Z", - "contributors": ["vgiffin", "chrisdavidmills"] - }, - "Learn/JavaScript/First_steps/Test_your_skills:_Math": { - "modified": "2020-07-31T08:15:10.749Z", - "contributors": ["chrisdavidmills", "AJMcDee"] + "Learn/JavaScript/Objects/Test_your_skills:_JSON": { + "modified": "2020-07-16T22:32:38.003Z", + "contributors": ["chrisdavidmills", "blueblots"] }, - "Learn/JavaScript/First_steps/Test_your_skills:_Strings": { - "modified": "2020-07-16T22:31:05.493Z", - "contributors": ["chrisdavidmills"] + "Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript": { + "modified": "2020-08-12T12:48:24.778Z", + "contributors": ["A.Faturechi", "abinashLin", "chrisdavidmills"] }, - "Learn/JavaScript/First_steps/Test_your_skills:_variables": { - "modified": "2020-07-16T22:31:04.800Z", - "contributors": ["neuroptera", "chrisdavidmills"] + "Learn/JavaScript/Objects/Test_your_skills:_Object_basics": { + "modified": "2020-12-11T06:18:00.445Z", + "contributors": ["chrisdavidmills", "iJacKP", "neuroptera"] }, - "Learn/JavaScript/First_steps/Useful_string_methods": { - "modified": "2020-10-19T12:57:52.630Z", + "Learn/Learning_and_getting_help": { + "modified": "2020-10-12T05:38:01.632Z", "contributors": [ "chrisdavidmills", - "jpfkd", - "epirnat", - "A.Faturechi", - "choudh70", - "tayyabalishan", - "jswisher", - "alepsys", - "Asimov4", - "v8sagar", - "bkucey", - "bripmccann", - "stephaniehobson", - "hadleyel", - "RobWheadon", - "sushobhana", - "nmve", - "brenseid", - "Jeremie", - "BaderSur", - "sngv", - "Sebastianz", - "BenCrab", - "fscholz" + "simö", + "theRealJennie", + "srabatin", + "SphinxKnight", + "akhila", + "Nachec", + "mohibk", + "dheerajmalik", + "mAsterEihaB", + "ankit625", + "emckean", + "vishal.jv1511" ] }, - "Learn/JavaScript/First_steps/Variables": { - "modified": "2020-09-28T12:52:31.401Z", + "Learn/Performance": { + "modified": "2020-11-10T10:19:10.117Z", "contributors": [ - "mohammad92asghari", "chrisdavidmills", - "Nachec", - "choudh70", - "tayyabalishan", - "jswisher", - "JawnMarc", - "inikolaesku", - "cinephile85", - "alepsys", - "SphinxKnight", - "blimp", - "msobanjo", - "TasosPoursaitides", - "RafeyIqbalRahman", - "aswaniprakash", - "felipe-lee", - "sxnaprkhr", - "alexandr-osprey", - "Uemmra3", - "martian2049", - "bripmccann", - "jruota", - "stephaniehobson", - "rmdobservations", - "shoelaces", - "stockcj", - "Jeremie", - "razouckt", - "Sebastianz", + "Voulto", + "estelle", + "dkreitschmann", + "roelfjan", "Sheppy", - "salman-shah" + "spencercorwin", + "riceh3", + "malchata" ] }, - "Learn/JavaScript/First_steps/What_is_JavaScript": { - "modified": "2020-12-05T16:30:59.604Z", + "Learn/Performance/CSS": { + "modified": "2020-11-11T15:16:18.377Z", + "contributors": ["chrisdavidmills", "estelle"] + }, + "Learn/Performance/HTML": { + "modified": "2020-07-16T22:40:41.921Z", "contributors": [ - "mfuji09", - "dcompcoder", - "jpfkd", - "rajatsan", + "mfranzke", + "arjenlgill", + "estelle", "chrisdavidmills", - "ibnlanre", - "ckashby", - "tayyabalishan", - "JawnMarc", - "inikolaesku", - "Sheppy", - "nitramrelpmur", - "eremis101", - "agnelvishal", - "rachelcarmena", - "jk777", - "massood", - "riceh3", - "KirankumarAmbati", - "caraya", - "nceresole", - "MelissaNg", - "kevinlmadison", - "hackernewslibrary", - "MadEmperorYuri", - "Wenfang_Du", - "Anonymous", - "alanfeld", - "championshuttler", - "bripmccann", - "baustinfry", - "sumankisku", - "JonathanBrownCFA", - "1rjun", - "stephaniehobson", - "morfioce", - "whiteheat2019", - "hadleyel", - "SarahSakura1990", - "rmateus", - "nmve", - "OrthoLearner", - "Jeremie", - "ObroAhmed", - "hamishwillee", - "Sebastianz" + "mikeblume", + "ElliotHawkins" ] }, - "Learn/JavaScript/First_steps/What_went_wrong": { - "modified": "2020-09-04T06:06:17.140Z", + "Learn/Performance/JavaScript": { + "modified": "2020-08-13T09:15:49.386Z", + "contributors": ["bsphair", "estelle"] + }, + "Learn/Performance/Measuring_performance": { + "modified": "2020-08-09T18:29:59.520Z", + "contributors": ["leslitagordita", "blueblots", "estelle"] + }, + "Learn/Performance/Multimedia": { + "modified": "2020-09-28T11:10:56.616Z", "contributors": [ - "chrisdavidmills", - "jswisher", - "manideep39", - "tayyabalishan", - "inikolaesku", - "Alek2077", - "wbreakell", - "redrambles", - "bripmccann", - "MiaD", - "stephaniehobson", - "kewinsousa", - "hadleyel", - "nmaksymchuk", - "Tony-Thomas", - "rsidorov", - "stockcj", - "niklasholm", - "nmve", - "DeboraG", - "BrianCsection", - "Jeremie", - "Sebastianz" + "Software202", + "estelle", + "Schepp", + "jennyevans", + "rein", + "dougsillars", + "ryantownsend" ] }, - "Learn/JavaScript/Howto": { - "modified": "2020-07-16T22:33:08.616Z", + "Learn/Performance/Perceived_performance": { + "modified": "2020-07-16T22:40:43.307Z", + "contributors": ["wilsotobianco", "estelle", "mhilko", "ottoetc"] + }, + "Learn/Performance/Web_Performance_Basics": { + "modified": "2020-07-16T22:40:42.703Z", "contributors": [ - "kruschk", - "sywsyw", - "jmstfv", - "stephaniehobson", - "chrisdavidmills", - "Maxim79", - "tedmarynicz", - "adekoyejo" + "Sheppy", + "estelle", + "jdmerriman", + "verde79", + "PickensC", + "santoshjoseph99" ] }, - "Learn/JavaScript/Objects": { - "modified": "2020-08-18T09:29:11.749Z", + "Learn/Performance/What_is_web_performance": { + "modified": "2020-07-16T22:40:40.542Z", "contributors": [ - "owdown", + "estelle", "chrisdavidmills", - "CodeDotJS", - "bripmccann", - "shi_zi_", - "Ch0coL8te", - "omeid", - "torazaburo", - "MashKao", - "fscholz" + "kiyayo", + "walonge", + "anthoniaocc", + "minas1", + "spencercorwin", + "sanunes" ] }, - "Learn/JavaScript/Objects/Adding_bouncing_balls_features": { - "modified": "2020-10-28T23:14:36.083Z", + "Learn/Performance/business_case_for_performance": { + "modified": "2020-10-31T03:19:13.511Z", + "contributors": [ + "sourabhramsingh", + "webfelipemaia", + "estelle", + "anthoniaocc" + ] + }, + "Learn/Performance/video": { + "modified": "2020-07-16T22:40:45.501Z", + "contributors": ["ohaver", "estelle"] + }, + "Learn/Performance/why_web_performance": { + "modified": "2020-11-10T07:30:44.012Z", + "contributors": ["Voulto", "ohaver", "estelle"] + }, + "Learn/Server-side": { + "modified": "2020-07-16T22:35:54.561Z", "contributors": [ - "krankj", - "chrisdavidmills", "jswisher", - "wwags33", - "rmdobservations", - "edsonmendieta", - "nmve", - "Jeremie", - "fscholz" + "chrisdavidmills", + "kruschk", + "monila23", + "a4anandsingh", + "sakthikanth", + "rsidorov", + "hamishwillee" ] }, - "Learn/JavaScript/Objects/Basics": { - "modified": "2020-07-16T22:31:55.445Z", - "contributors": [ - "chrisdavidmills", - "tayyabalishan", - "jswisher", - "FishinginaSombrero8", - "nhsz", - "gumbol", - "rayrojas", - "bripmccann", - "Battlesquid", - "Abhro", - "FeruzOripov", - "snakecase", - "vcastrejont", - "muhammadghazali", - "MarckK", - "RockyAZ", - "rajasrijanakiraman", - "stephaniehobson", - "JonathanPool", - "systematis", - "dsujeeun", - "nmve", - "BaderSur", - "Jeremie", - "fscholz" - ] - }, - "Learn/JavaScript/Objects/JSON": { - "modified": "2020-10-31T11:57:03.706Z", - "contributors": [ - "randycasburn", - "chrisdavidmills", - "jswisher", - "mariusmucenicu", - "thebearingedge", - "bripmccann", - "shilili", - "thekosiguy", - "TasosPoursaitides", - "dvsgnr", - "stephaniehobson", - "torazaburo", - "DipperP", - "qdirks", - "systematis", - "mememachine666", - "nmve", - "Jeremie", - "fscholz" - ] - }, - "Learn/JavaScript/Objects/Object_building_practice": { - "modified": "2020-07-16T22:32:30.497Z", - "contributors": [ - "chrisdavidmills", - "jswisher", - "IamLegendChamp", - "rohitarondekar", - "stephaniehobson", - "qdirks", - "RobWheadon", - "khamer1410", - "edsonmendieta", - "crueschenberg", - "nmve", - "wetlife", - "BaderSur", - "Jeremie", - "fscholz" - ] - }, - "Learn/JavaScript/Objects/Object_prototypes": { - "modified": "2020-11-29T09:12:53.165Z", - "contributors": [ - "chrisdavidmills", - "loretta-arineva", - "JohnnyMu-Cn", - "krankj", - "jgabrielpro", - "amit.gangaur", - "MrPodu", - "Zearin_Galaurum", - "ckashby", - "Bushwazi", - "ricardoorellana", - "hhimanshu", - "nsangwan", - "moneysharma1010", - "sappusaketh", - "Aerodium", - "collin", - "aniketkudale", - "LuoYun", - "anonyco", - "WeiyiChen", - "Univream", - "JonathanPool", - "COV", - "shateelahmed", - "MoTTs", - "deasydoesit", - "martian2049", - "theomjones", - "linasmnew", - "elWombator", - "stephaniehobson", - "iAziz786", - "lfzy", - "systematis", - "tcsc", - "giorgiobeggiora", - "zziccardi", - "rht19932", - "crueschenberg", - "sportnak", - "nmve", - "BrunkBeard", - "Jeremie", - "fscholz", - "ZeroUnderscoreOu" - ] - }, - "Learn/JavaScript/Objects/Test_your_skills:_JSON": { - "modified": "2020-07-16T22:32:38.003Z", - "contributors": ["chrisdavidmills", "blueblots"] - }, - "Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript": { - "modified": "2020-08-12T12:48:24.778Z", - "contributors": ["A.Faturechi", "abinashLin", "chrisdavidmills"] - }, - "Learn/JavaScript/Objects/Test_your_skills:_Object_basics": { - "modified": "2020-12-11T06:18:00.445Z", - "contributors": ["chrisdavidmills", "iJacKP", "neuroptera"] - }, - "Learn/Learning_and_getting_help": { - "modified": "2020-10-12T05:38:01.632Z", - "contributors": [ - "chrisdavidmills", - "simö", - "theRealJennie", - "srabatin", - "SphinxKnight", - "akhila", - "Nachec", - "mohibk", - "dheerajmalik", - "mAsterEihaB", - "ankit625", - "emckean", - "vishal.jv1511" - ] - }, - "Learn/Performance": { - "modified": "2020-11-10T10:19:10.117Z", - "contributors": [ - "chrisdavidmills", - "Voulto", - "estelle", - "dkreitschmann", - "roelfjan", - "Sheppy", - "spencercorwin", - "riceh3", - "malchata" - ] - }, - "Learn/Performance/CSS": { - "modified": "2020-11-11T15:16:18.377Z", - "contributors": ["chrisdavidmills", "estelle"] - }, - "Learn/Performance/HTML": { - "modified": "2020-07-16T22:40:41.921Z", - "contributors": [ - "mfranzke", - "arjenlgill", - "estelle", - "chrisdavidmills", - "mikeblume", - "ElliotHawkins" - ] - }, - "Learn/Performance/JavaScript": { - "modified": "2020-08-13T09:15:49.386Z", - "contributors": ["bsphair", "estelle"] - }, - "Learn/Performance/Measuring_performance": { - "modified": "2020-08-09T18:29:59.520Z", - "contributors": ["leslitagordita", "blueblots", "estelle"] - }, - "Learn/Performance/Multimedia": { - "modified": "2020-09-28T11:10:56.616Z", - "contributors": [ - "Software202", - "estelle", - "Schepp", - "jennyevans", - "rein", - "dougsillars", - "ryantownsend" - ] - }, - "Learn/Performance/Perceived_performance": { - "modified": "2020-07-16T22:40:43.307Z", - "contributors": ["wilsotobianco", "estelle", "mhilko", "ottoetc"] - }, - "Learn/Performance/Web_Performance_Basics": { - "modified": "2020-07-16T22:40:42.703Z", - "contributors": [ - "Sheppy", - "estelle", - "jdmerriman", - "verde79", - "PickensC", - "santoshjoseph99" - ] - }, - "Learn/Performance/What_is_web_performance": { - "modified": "2020-07-16T22:40:40.542Z", - "contributors": [ - "estelle", - "chrisdavidmills", - "kiyayo", - "walonge", - "anthoniaocc", - "minas1", - "spencercorwin", - "sanunes" - ] - }, - "Learn/Performance/business_case_for_performance": { - "modified": "2020-10-31T03:19:13.511Z", - "contributors": [ - "sourabhramsingh", - "webfelipemaia", - "estelle", - "anthoniaocc" - ] - }, - "Learn/Performance/video": { - "modified": "2020-07-16T22:40:45.501Z", - "contributors": ["ohaver", "estelle"] - }, - "Learn/Performance/why_web_performance": { - "modified": "2020-11-10T07:30:44.012Z", - "contributors": ["Voulto", "ohaver", "estelle"] - }, - "Learn/Server-side": { - "modified": "2020-07-16T22:35:54.561Z", - "contributors": [ - "jswisher", - "chrisdavidmills", - "kruschk", - "monila23", - "a4anandsingh", - "sakthikanth", - "rsidorov", - "hamishwillee" - ] - }, - "Learn/Server-side/Apache_Configuration_htaccess": { - "modified": "2020-11-17T06:09:09.583Z", + "Learn/Server-side/Apache_Configuration_htaccess": { + "modified": "2020-11-17T06:09:09.583Z", "contributors": [ "chrisdavidmills", "caraya", @@ -10978,159 +10488,636 @@ "Learn/Tools_and_testing/Cross_browser_testing/Automated_testing": { "modified": "2020-09-24T05:59:58.777Z", "contributors": [ - "Rafael_Green", - "lancespa", + "Rafael_Green", + "lancespa", + "chrisdavidmills", + "avocadoras", + "kruschk", + "jochendelabie", + "pulkitsharma07", + "harshitpaul", + "wbamberg", + "ElvisZhu", + "KateSturmey", + "stephaniehobson", + "Memija", + "iigmir", + "SpikePy", + "jpetto", + "billmcgee" + ] + }, + "Learn/Tools_and_testing/Cross_browser_testing/Feature_detection": { + "modified": "2020-07-16T22:39:22.516Z", + "contributors": [ + "ckashby", + "mfuji09", + "chrisdavidmills", + "Igor-Sangin", + "kruschk", + "tkrotoff", + "jcsahnwaldt", + "stephaniehobson", + "EdwardB" + ] + }, + "Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS": { + "modified": "2020-07-16T22:39:08.959Z", + "contributors": [ + "chrisdavidmills", + "ckashby", + "kruschk", + "Sheppy", + "rahul73690", + "enejko", + "stephaniehobson", + "EdwardB", + "abenkovskii", + "qdirks" + ] + }, + "Learn/Tools_and_testing/Cross_browser_testing/Introduction": { + "modified": "2020-07-28T13:00:54.765Z", + "contributors": [ + "liviulupei", + "ckashby", + "kruschk", + "joanmdavis", + "daphnemcrossbrowser", + "chrisdavidmills", + "jochendelabie", + "sadhvisingh1", + "joaner", + "Navin77", + "stephaniehobson", + "qdirks", + "Soupedenuit", + "jainarpit", + "RyanWng", + "0000marcell", + "xfq" + ] + }, + "Learn/Tools_and_testing/Cross_browser_testing/JavaScript": { + "modified": "2020-11-23T02:24:03.962Z", + "contributors": [ + "hamishwillee", + "chrisdavidmills", + "ckashby", + "kruschk", + "stephaniehobson", + "EdwardB", + "qdirks", + "Juggernaughtt" + ] + }, + "Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies": { + "modified": "2020-09-21T04:00:14.366Z", + "contributors": [ + "Rafael_Green", + "chrisdavidmills", + "liviulupei", + "AndriiMaliuta", + "kruschk", + "agnelvishal", + "jochendelabie", + "harshitpaul", + "Navin77", + "stephaniehobson", + "aarondev8917", + "EdwardB", + "tsotetsi", + "qdirks", + "0000marcell" + ] + }, + "Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment": { + "modified": "2020-12-07T06:18:26.264Z", + "contributors": [ + "BBC-Radiance", + "Rafael_Green", + "UnorthodoxThing", + "chrisdavidmills", + "liviulupei", + "SphinxKnight", + "sjain1992", + "kruschk", + "jochendelabie", + "harshitpaul", + "mburleigh", + "gabolato", + "stephaniehobson", + "martianyi", + "paulinas" + ] + }, + "Learn/Tools_and_testing/GitHub": { + "modified": "2020-12-04T13:34:02.479Z", + "contributors": ["Arpitgoyalgg", "chrisdavidmills"] + }, + "Learn/Tools_and_testing/Understanding_client-side_tools": { + "modified": "2020-07-16T22:39:26.098Z", + "contributors": ["chrisdavidmills"] + }, + "Learn/Tools_and_testing/Understanding_client-side_tools/Deployment": { + "modified": "2020-07-16T22:39:30.122Z", + "contributors": ["chrisdavidmills"] + }, + "Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain": { + "modified": "2020-07-16T22:39:29.585Z", + "contributors": ["nicolasguasca1", "chrisdavidmills", "escattone"] + }, + "Learn/Tools_and_testing/Understanding_client-side_tools/Overview": { + "modified": "2020-07-16T22:39:26.907Z", + "contributors": ["chrisdavidmills", "edieblu", "davidshq"] + }, + "Learn/Tools_and_testing/Understanding_client-side_tools/Package_management": { + "modified": "2020-08-29T04:11:46.834Z", + "contributors": [ + "Rafael_Green", + "drklee3", + "nicolasguasca1", + "mrmowji", + "chrisdavidmills", + "ralaplines1988", + "remy" + ] + }, + "Learn_web_development/Core/Structuring_content": { + "modified": "2020-12-03T08:31:03.862Z", + "contributors": [ + "chrisdavidmills", + "vlnsubmit", + "onurbasturk", + "sideshowbarker", + "animeansiklopedisi", + "CodeDotJS", + "tayyabalishan", + "DevForrestLyu", + "kakwanisiddharth", + "shilili", + "boxa6", + "weisan0616", + "Koavf", + "Beatheat", + "PanayiotisPaschalides", + "JuanRomoDev", + "mjibrower", + "federico71", + "Avinash028", + "Jeffrey_Yang", + "Alihoday", + "hadleyel", + "jk777", + "shashishekhar333", + "LostLucidity" + ] + }, + "Learn_web_development/Core/Structuring_content/Advanced_text_features": { + "modified": "2020-08-29T01:56:34.668Z", + "contributors": [ + "SnakeWhisperer", + "ZO14", + "vodov", + "mrmurtazaabbasi", + "vgiffin", + "avivmu", + "onurbasturk", + "chrisdavidmills", + "tayyabalishan", + "choudh70", + "SphinxKnight", + "famees", + "markwood87", + "Yachi_Huang", + "Jesssie", + "imi-tating", + "suterj", + "stephaniehobson", + "Nintendao", + "agnelvishal", + "rarevans", + "vkweb", + "wilhelmtell", + "flash4syth", + "GowthamPrakaash", + "Wispring", + "CatalinMengheris", + "waldr", + "robinfromsps", + "AmazingJamesLee", + "goto.prototype", + "amins", + "richardzacur" + ] + }, + "Learn_web_development/Core/Structuring_content/Basic_HTML_syntax": { + "modified": "2020-12-05T12:24:44.561Z", + "contributors": [ + "Seeeven7", + "chrisdavidmills", + "philou", + "alurodriguez", + "gdsimoes", + "sxnaprkhr", + "ohaver", + "RogueDynamite", + "lucida959595", + "grzim", + "sideshowbarker", + "girlref", + "abbasalamin12", + "tayyabalishan", + "SphinxKnight", + "LittleMissS", + "MrPodu", + "exercism-1", + "tywmick", + "JacobRuigrok", + "thanhvt1984", + "imba-tjd", + "bminard", + "Chomchaum", + "mat-bi", + "madmadi", + "Sunit41557077", + "sdkiko", + "flow2k", + "irenesmith", + "formatkaka", + "bripmccann", + "sasigit7", + "Sheppy", + "Avinash028", + "SelenIT", + "MexieAndCo", + "hamasaki", + "suterj", + "Manisha0605", + "stephaniehobson", + "agnelvishal", + "MiltonAkash", + "KadirTopal", + "ameridan", + "mondaya", + "wilhelmtell", + "hadleyel", + "psylone", + "jorgeclesio", + "abdusalah", + "Bryzzle", + "Cameron-Riecan", + "jswisher", + "KevinDonnelly", + "richardzacur", + "mauney" + ] + }, + "Learn_web_development/Core/Structuring_content/Creating_links": { + "modified": "2020-12-02T15:56:05.660Z", + "contributors": [ + "chrisdavidmills", + "asad_mozilla", + "codejayant", + "gdsimoes", + "techdocswriter", + "josh.591536", + "onurbasturk", + "sideshowbarker", + "deepaksenguttuvan", + "santimirandarp", + "choudh70", + "Elched", + "eremis101", + "noorfathima11", + "MNizam0802", + "Jozefi87", + "mfuji09", + "mbuc", + "DrewGeisler", + "stephaniehobson", + "bgrayland", + "Hiroshivam", + "vkweb", + "potmpark", + "scottaohara", + "svmartin", + "rebelstatus", + "NurudeenPopoola", + "richardzacur" + ] + }, + "Learn_web_development/Core/Structuring_content/Debugging_HTML": { + "modified": "2020-08-09T17:31:16.592Z", + "contributors": [ + "anewton", + "avivmu", + "chrisdavidmills", + "tayyabalishan", + "sideshowbarker", + "frezier", + "stephaniehobson", + "stefanocbl", + "johnjago", + "mustak", + "breno785au", + "richardzacur", + "sockofleas" + ] + }, + "Learn_web_development/Core/Structuring_content/HTML_images": { + "modified": "2020-11-06T07:13:32.741Z", + "contributors": [ + "chrisdavidmills", + "philou", + "atd30", + "abbasalamin12", + "RicardsVeveris", + "choudh70", + "LeonFrempong", + "Mahdi_Karimi_Asl", + "sudipbhandari126", + "Sheppy", + "cinephile85", + "eremis101", + "MNizam0802", + "oyenirat", + "adyavanapalli", + "bripmccann", + "sideshowbarker", + "Ajimi", + "stephaniehobson", + "Potch", + "andrealaw", + "tedmetaltns", + "david_ross", + "Looserof7", + "jamalss", + "mishkadoma", + "jswisher", + "rishianand", + "richardzacur" + ] + }, + "Learn_web_development/Core/Structuring_content/HTML_images/Test_your_skills:_HTML_images": { + "modified": "2020-10-18T19:47:17.929Z", + "contributors": ["gdsimoes", "chrisdavidmills"] + }, + "Learn_web_development/Core/Structuring_content/HTML_table_basics": { + "modified": "2020-07-16T22:25:17.858Z", + "contributors": [ + "avivmu", + "chrisdavidmills", + "radiocane", + "Sichen-Wang", + "choudh70", + "tayyabalishan", + "santiago-rodrig", + "Octopinky", + "ratbeard", + "irenesmith", + "Sheppy", + "nrebhun", + "surigangula", + "stephaniehobson", + "yanlee26", + "qdirks", + "Sebastianz", + "mientje" + ] + }, + "Learn_web_development/Core/Structuring_content/HTML_video_and_audio": { + "modified": "2020-11-20T14:06:53.297Z", + "contributors": [ + "philou", + "chrisdavidmills", + "mohammad92asghari", + "pabdani", + "avivmu", + "atd30", + "295805950zhang", + "Sichen-Wang", + "valgrimm", + "choudh70", + "mukhtar-github", + "pzrq", + "LeonFrempong", + "darby", + "kerusasu", + "Sheppy", + "Elched", + "6truvian", + "sideshowbarker", + "thet002", + "eremis101", + "sbkrish", + "christopherwilson1", + "Devendra0110", + "imi-tating", + "stephaniehobson", + "adelyoussif", + "vkweb", + "ferjm", + "fachalo1996", + "jk777", + "jayantsarkar", + "sashaburchuk", + "waldr", + "rishianand", + "goto.prototype", + "richardzacur" + ] + }, + "Learn_web_development/Core/Structuring_content/HTML_video_and_audio/Test_your_skills:_Multimedia_and_embedding": { + "modified": "2020-11-20T14:20:14.413Z", + "contributors": ["philou", "gdsimoes", "chrisdavidmills"] + }, + "Learn_web_development/Core/Structuring_content/Headings_and_paragraphs": { + "modified": "2020-10-29T23:24:18.960Z", + "contributors": [ + "philou", "chrisdavidmills", - "avocadoras", - "kruschk", - "jochendelabie", - "pulkitsharma07", - "harshitpaul", - "wbamberg", - "ElvisZhu", - "KateSturmey", + "theRealJennie", + "trebuchet", + "emckean", + "onurbasturk", + "choudh70", + "cadorej", + "WindLo", + "eremis101", + "xubres", + "bminard", + "Chomchaum", + "quixx", + "Manisha0605", + "WikiMarc", "stephaniehobson", - "Memija", - "iigmir", - "SpikePy", - "jpetto", - "billmcgee" + "cknapp92", + "mientje", + "Wispring", + "sideshowbarker", + "phorgan1", + "abdusalah", + "NurudeenPopoola", + "monooran1", + "PushpitaPikuDey", + "rolfedh" ] }, - "Learn/Tools_and_testing/Cross_browser_testing/Feature_detection": { - "modified": "2020-07-16T22:39:22.516Z", + "Learn_web_development/Core/Structuring_content/Marking_up_a_letter": { + "modified": "2020-07-16T22:23:10.729Z", "contributors": [ - "ckashby", - "mfuji09", "chrisdavidmills", - "Igor-Sangin", - "kruschk", - "tkrotoff", - "jcsahnwaldt", - "stephaniehobson", - "EdwardB" + "avivmu", + "ohaver", + "tayyabalishan", + "sideshowbarker", + "r_arpeet82", + "fazl", + "soppa91", + "bripmccann", + "jswisher", + "jk777", + "mishkadoma" ] }, - "Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS": { - "modified": "2020-07-16T22:39:08.959Z", + "Learn_web_development/Core/Structuring_content/Mozilla_splash_page": { + "modified": "2020-07-16T22:25:05.240Z", "contributors": [ "chrisdavidmills", - "ckashby", - "kruschk", - "Sheppy", - "rahul73690", - "enejko", - "stephaniehobson", - "EdwardB", - "abenkovskii", - "qdirks" + "FoxDie12x", + "MNizam0802", + "jswisher", + "goto.prototype", + "richardzacur" ] }, - "Learn/Tools_and_testing/Cross_browser_testing/Introduction": { - "modified": "2020-07-28T13:00:54.765Z", + "Learn_web_development/Core/Structuring_content/Planet_data_table": { + "modified": "2020-07-16T22:25:28.525Z", "contributors": [ - "liviulupei", - "ckashby", - "kruschk", - "joanmdavis", - "daphnemcrossbrowser", "chrisdavidmills", - "jochendelabie", - "sadhvisingh1", - "joaner", - "Navin77", - "stephaniehobson", - "qdirks", - "Soupedenuit", - "jainarpit", - "RyanWng", - "0000marcell", - "xfq" + "tayyabalishan", + "jswisher", + "Sebastianz" ] }, - "Learn/Tools_and_testing/Cross_browser_testing/JavaScript": { - "modified": "2020-11-23T02:24:03.962Z", + "Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content": { + "modified": "2020-07-16T22:24:17.251Z", "contributors": [ - "hamishwillee", + "yolo.kimc", "chrisdavidmills", - "ckashby", - "kruschk", - "stephaniehobson", - "EdwardB", - "qdirks", - "Juggernaughtt" + "tayyabalishan", + "sideshowbarker", + "markwood87", + "jswisher", + "diveshuttam", + "SoftwareRVG", + "richardzacur" ] }, - "Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies": { - "modified": "2020-09-21T04:00:14.366Z", + "Learn_web_development/Core/Structuring_content/Structuring_documents": { + "modified": "2020-11-03T08:36:09.820Z", "contributors": [ - "Rafael_Green", "chrisdavidmills", - "liviulupei", - "AndriiMaliuta", - "kruschk", - "agnelvishal", - "jochendelabie", - "harshitpaul", - "Navin77", + "philou", + "onurbasturk", + "arvin_fr", + "jzunigacoayla", + "choudh70", + "tayyabalishan", + "sharma86hub", + "taoranz", + "SphinxKnight", + "famees", + "Jerami76", + "loretta-arineva", + "eremis101", + "bminard", + "c-herrewijn", + "jswisher", + "surigangula", + "ajhsu", + "bripmccann", + "jeremiah-shore", "stephaniehobson", - "aarondev8917", - "EdwardB", - "tsotetsi", - "qdirks", - "0000marcell" + "potmpark", + "kevinAlbs", + "kalch", + "geraldchan", + "jk777", + "Jedeu", + "bmwadforth", + "aquaplanet", + "richardzacur", + "sockofleas", + "rmauge" ] }, - "Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment": { - "modified": "2020-12-07T06:18:26.264Z", + "Learn_web_development/Core/Structuring_content/Table_accessibility": { + "modified": "2020-07-16T22:25:24.257Z", "contributors": [ - "BBC-Radiance", - "Rafael_Green", - "UnorthodoxThing", + "tayyabalishan", "chrisdavidmills", - "liviulupei", - "SphinxKnight", - "sjain1992", - "kruschk", - "jochendelabie", - "harshitpaul", - "mburleigh", - "gabolato", + "santiago-rodrig", + "darman12", + "irajsuhail", + "haarabi", + "surigangula", "stephaniehobson", - "martianyi", - "paulinas" + "Sheppy", + "ImtiazeA", + "serratusmagnus", + "pranay2063", + "Sebastianz", + "npusr" ] }, - "Learn/Tools_and_testing/GitHub": { - "modified": "2020-12-04T13:34:02.479Z", - "contributors": ["Arpitgoyalgg", "chrisdavidmills"] - }, - "Learn/Tools_and_testing/Understanding_client-side_tools": { - "modified": "2020-07-16T22:39:26.098Z", - "contributors": ["chrisdavidmills"] - }, - "Learn/Tools_and_testing/Understanding_client-side_tools/Deployment": { - "modified": "2020-07-16T22:39:30.122Z", - "contributors": ["chrisdavidmills"] + "Learn_web_development/Core/Structuring_content/Test_your_skills:_Advanced_HTML_text": { + "modified": "2020-08-29T02:34:36.621Z", + "contributors": ["SnakeWhisperer", "onurbasturk", "chrisdavidmills"] }, - "Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain": { - "modified": "2020-07-16T22:39:29.585Z", - "contributors": ["nicolasguasca1", "chrisdavidmills", "escattone"] + "Learn_web_development/Core/Structuring_content/Test_your_skills:_HTML_text_basics": { + "modified": "2020-08-27T05:38:52.761Z", + "contributors": ["SnakeWhisperer", "chrisdavidmills"] }, - "Learn/Tools_and_testing/Understanding_client-side_tools/Overview": { - "modified": "2020-07-16T22:39:26.907Z", - "contributors": ["chrisdavidmills", "edieblu", "davidshq"] + "Learn_web_development/Core/Structuring_content/Test_your_skills:_Links": { + "modified": "2020-08-28T04:26:18.208Z", + "contributors": ["SnakeWhisperer", "chrisdavidmills", "onurbasturk"] }, - "Learn/Tools_and_testing/Understanding_client-side_tools/Package_management": { - "modified": "2020-08-29T04:11:46.834Z", + "Learn_web_development/Core/Structuring_content/Webpage_metadata": { + "modified": "2020-09-28T22:06:13.983Z", "contributors": [ - "Rafael_Green", - "drklee3", - "nicolasguasca1", - "mrmowji", + "boptilop", "chrisdavidmills", - "ralaplines1988", - "remy" + "RogueDynamite", + "zlamma", + "arjenlgill", + "jasonsbarr", + "CrypterSr", + "choudh70", + "SphinxKnight", + "fazl", + "khendrikse", + "Calerid", + "Sheppy", + "peterschussheim", + "jecook", + "thenoelman", + "IMLERICH", + "rakeshkatti", + "jeremymouzin", + "stephaniehobson", + "prajwalkk", + "mertdemo", + "NilSocket", + "hadleyel", + "CarlosJose", + "sideshowbarker", + "Wispring", + "aculnaig", + "chibby0ne", + "Roboe", + "richardzacur" ] }, "Learn_web_development/Getting_started/Environment_setup/Command_line": { diff --git a/files/en-us/learn/accessibility/html/index.md b/files/en-us/learn/accessibility/html/index.md index 2a4b2a9fec3e85d..33155c5d20e8cce 100644 --- a/files/en-us/learn/accessibility/html/index.md +++ b/files/en-us/learn/accessibility/html/index.md @@ -465,7 +465,7 @@ Now have a look at our [punk bands table example](https://github.com/mdn/learnin - The {{htmlelement("caption")}} element and the `` element's `summary` attribute both do similar jobs — they act as alt text for a table, giving a screen reader user a useful quick summary of the table's contents. The ` diff --git a/files/en-us/learn/html/howto/index.md b/files/en-us/learn/html/howto/index.md index 9d75ac553f10892..5749ef0d4c3b6bf 100644 --- a/files/en-us/learn/html/howto/index.md +++ b/files/en-us/learn/html/howto/index.md @@ -67,8 +67,8 @@ Forms are a complex HTML structure made to send data from a webpage to a web ser Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy: -- [How to create a data table](/en-US/docs/Learn/HTML/Tables/Basics) -- [How to make HTML tables accessible](/en-US/docs/Learn/HTML/Tables/Advanced) +- [How to create a data table](/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics) +- [How to make HTML tables accessible](/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility) ### Data representation diff --git a/files/en-us/learn/html/index.md b/files/en-us/learn/html/index.md index f25a7206266ccde..b086525bdcdb5c1 100644 --- a/files/en-us/learn/html/index.md +++ b/files/en-us/learn/html/index.md @@ -27,7 +27,7 @@ This topic contains the following modules, in a suggested order for working thro - : This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage. - [Multimedia and embedding](/en-US/docs/Learn/HTML/Multimedia_and_embedding) - : 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 other webpages. -- [HTML tables](/en-US/docs/Learn/HTML/Tables) +- [HTML tables](Learn_web_development/Core/Structuring_content/HTML_table_basics) - : Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries. ## Solving common HTML problems diff --git a/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md deleted file mode 100644 index 098010eb8b8aef4..000000000000000 --- a/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md +++ /dev/null @@ -1,1034 +0,0 @@ ---- -title: HTML text fundamentals -slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals -page-type: learn-module-chapter ---- - -{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}} - -One of HTML's main jobs is to give text structure so that a browser can display an HTML document the way its developer intends. This article explains the way {{glossary("HTML")}} can be used to structure a page of text by adding headings and paragraphs, emphasizing words, creating lists, and more. - -
` element is generally preferred as it makes it's content accessible to sighted users too, who might also find it useful. You don't really need both. > [!NOTE] -> See our [HTML table advanced features and accessibility](/en-US/docs/Learn/HTML/Tables/Advanced) article for more details about accessible data tables. +> See our [HTML table accessibility](/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility) article for more details about accessible data tables. ## Text alternatives diff --git a/files/en-us/learn/css/building_blocks/styling_tables/index.md b/files/en-us/learn/css/building_blocks/styling_tables/index.md index 16a8d3419a894c8..2fcd46afefa97c5 100644 --- a/files/en-us/learn/css/building_blocks/styling_tables/index.md +++ b/files/en-us/learn/css/building_blocks/styling_tables/index.md @@ -14,10 +14,10 @@ Styling an HTML table isn't the most glamorous job in the world, but sometimes w
Prerequisites: HTML basics (study - Introduction to HTMLBasic HTML syntax), knowledge of - HTML tables, and an idea of + HTML tables, and an idea of how CSS works (study CSS first steps.)
- - - - - - - - - - -
Prerequisites: - Basic HTML familiarity, as covered in - Getting started with HTML. -
Objective: - Learn how to mark up a basic page of text to give it structure and - meaning — including paragraphs, headings, lists, emphasis, and quotations. -
- -## The basics: headings and paragraphs - -Most structured text consists of headings and paragraphs, whether you are reading a story, a newspaper, a college textbook, a magazine, etc. - -![An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.](newspaper_small.jpg) - -Structured content makes the reading experience easier and more enjoyable. - -In HTML, each paragraph has to be wrapped in a {{htmlelement("p")}} element, like so: - -```html -

I am a paragraph, oh yes I am.

-``` - -Each heading has to be wrapped in a heading element: - -```html -

I am the title of the story.

-``` - -There are six heading elements: {{htmlelement("Heading_Elements", "h1")}}, {{htmlelement("Heading_Elements", "h2")}}, {{htmlelement("Heading_Elements", "h3")}}, {{htmlelement("Heading_Elements", "h4")}}, {{htmlelement("Heading_Elements", "h5")}}, and {{htmlelement("Heading_Elements", "h6")}}. Each element represents a different level of content in the document; `

` represents the main heading, `

` represents subheadings, `

` represents sub-subheadings, and so on. - -### Implementing structural hierarchy - -For example, in this story, the `

` element represents the title of the story, the `

` elements represent the title of each chapter, and the `

` elements represent subsections of each chapter: - -```html -

The Crushing Bore

- -

By Chris Mills

- -

Chapter 1: The dark night

- -

- It was a dark night. Somewhere, an owl hooted. The rain lashed down on the… -

- -

Chapter 2: The eternal silence

- -

Our protagonist could not so much as a whisper out of the shadowy figure…

- -

The specter speaks

- -

- Several more hours had passed, when all of a sudden the specter sat bolt - upright and exclaimed, "Please have mercy on my soul!" -

-``` - -It's really up to you what the elements involved represent, as long as the hierarchy makes sense. You just need to bear in mind a few best practices as you create such structures: - -- Preferably, you should use a single `

` per page—this is the top level heading, and all others sit below this in the hierarchy. -- Make sure you use the headings in the correct order in the hierarchy. Don't use `

` elements to represent subheadings, followed by `

` elements to represent sub-subheadings—that doesn't make sense and will lead to weird results. -- Of the six heading levels available, you should aim to use no more than three per page, unless you feel it is necessary. Documents with many levels (for example, a deep heading hierarchy) become unwieldy and difficult to navigate. On such occasions, it is advisable to spread the content over multiple pages if possible. - -### Why do we need structure? - -To answer this question, let's take a look at [text-start.html](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/html-text-formatting/text-start.html)—the starting point of our running example for this article (a nice hummus recipe). You should save a copy of this file on your local machine, as you'll need it for the exercises later on. This document's body currently contains multiple pieces of content. They aren't marked up in any way, but they are separated with line breaks (Enter/Return pressed to go onto the next line). - -However, when you open the document in your browser, you'll see that the text appears as a big chunk! - -![A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.](screen_shot_2017-03-29_at_09.20.35.png) - -This is because there are no elements to give the content structure, so the browser does not know what is a heading and what is a paragraph. Furthermore: - -- Users looking at a web page tend to scan quickly to find relevant content, often just reading the headings, to begin with. (We usually [spend a very short time on a web page](https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/).) If they can't see anything useful within a few seconds, they'll likely get frustrated and go somewhere else. -- Search engines indexing your page consider the contents of headings as important keywords for influencing the page's search rankings. Without headings, your page will perform poorly in terms of {{glossary("SEO")}} (Search Engine Optimization). -- Severely visually impaired people often don't read web pages; they listen to them instead. This is done with software called a [screen reader](https://en.wikipedia.org/wiki/Screen_reader). This software provides ways to get fast access to given text content. Among the various techniques used, they provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly. If headings are not available, they will be forced to listen to the whole document read out loud. -- To style content with {{glossary("CSS")}}, or make it do interesting things with {{glossary("JavaScript")}}, you need to have elements wrapping the relevant content, so CSS/JavaScript can effectively target it. - -Therefore, we need to give our content structural markup. - -### Active learning: Giving our content structure - -Let's jump straight in with a live example. In the example below, add elements to the raw text in the _Input_ field so that it appears as a heading and two paragraphs in the _Output_ field. - -If you make a mistake, you can always reset it using the _Reset_ button. If you get stuck, press the _Show solution_ button to see the answer. - -```html hidden -

Live output

- -
- -

Editable code

-

- Press Esc to move focus away from the code area (Tab inserts a tab character). -

- - - -
- - -
-``` - -```css hidden -html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -} -``` - -```js hidden -const textarea = document.getElementById("code"); -const reset = document.getElementById("reset"); -const solution = document.getElementById("solution"); -const output = document.querySelector(".output"); -const code = textarea.value; -let userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -const htmlSolution = `

My short story

-

- I am a statistician and my name is Trish. -

-

- My legs are made of cardboard and I am married to a fish. -

`; - -let solutionEntry = htmlSolution; - -reset.addEventListener("click", () => { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = "Show solution"; - updateCode(); -}); - -solution.addEventListener("click", () => { - if (solution.value === "Show solution") { - textarea.value = solutionEntry; - solution.value = "Hide solution"; - } else { - textarea.value = userEntry; - solution.value = "Show solution"; - } - updateCode(); -}); - -textarea.addEventListener("input", updateCode); -window.addEventListener("load", updateCode); - -// Stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead -textarea.onkeydown = (e) => { - if (e.code === "Tab") { - e.preventDefault(); - insertAtCaret("\t"); - } - - if (e.code === "Escape") { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - const scrollPos = textarea.scrollTop; - let caretPos = textarea.selectionStart; - - const front = textarea.value.substring(0, caretPos); - const back = textarea.value.substring( - textarea.selectionEnd, - textarea.value.length, - ); - textarea.value = front + text + back; - caretPos += text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code -textarea.onkeyup = function () { - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if (solution.value === "Show solution") { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -}; -``` - -{{ EmbedLiveSample('Active_learning_Giving_our_content_structure', 700, 400, "", "") }} - -### Why do we need semantics? - -Semantics are relied on everywhere around us—we rely on previous experience to tell us what the function of an everyday object is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop," and a green traffic light to mean "go." Things can get tricky very quickly if the wrong semantics are applied. (Do any countries use red to mean "go"? We hope not.) - -In a similar way, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context, the {{htmlelement("Heading_Elements", "h1")}} element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page." - -```html -

This is a top level heading

-``` - -By default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above). - -On the other hand, you could make any element _look_ like a top level heading. Consider the following: - -```html - - Is this a top level heading? - -``` - -This is a {{htmlelement("span")}} element. It has no semantics. You use it to wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning. (You'll find out more about these later on in the course.) We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea to use the relevant HTML element for the job. - -## Lists - -Now let's turn our attention to lists. Lists are everywhere in life—from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! On the web, we have three types of lists: unordered, ordered, and description. - -Unordered and ordered lists are very common, and they're covered in this section. Description lists are less common, and we'll cover them in [Advanced text formatting](/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting). - -### Unordered - -Unordered lists are used to mark up lists of items for which the order of the items doesn't matter. Let's take a shopping list as an example: - -```plain -milk -eggs -bread -hummus -``` - -Every unordered list starts off with a {{htmlelement("ul")}} element—this wraps around all the list items: - -```html-nolint -
    - milk - eggs - bread - hummus -
-``` - -The last step is to wrap each list item in a {{htmlelement("li")}} (list item) element: - -```html -
    -
  • milk
    • -
  • eggs
    • -
  • bread
    • -
  • hummus
    • -
-``` - -#### Active learning: Marking up an unordered list - -Try editing the live sample below to create your very own HTML unordered list. - -```html hidden -

Live output

- -
- -

Editable code

-

- Press Esc to move focus away from the code area (Tab inserts a tab character). -

- - - -
- - -
-``` - -```css hidden -html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -} -``` - -```js hidden -const textarea = document.getElementById("code"); -const reset = document.getElementById("reset"); -const solution = document.getElementById("solution"); -const output = document.querySelector(".output"); -const code = textarea.value; -let userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -const htmlSolution = - "
    \n
  • milk
    • \n
  • eggs
    • \n
  • bread
    • \n
  • hummus
    • \n
"; -let solutionEntry = htmlSolution; - -reset.addEventListener("click", () => { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = "Show solution"; - updateCode(); -}); - -solution.addEventListener("click", () => { - if (solution.value === "Show solution") { - textarea.value = solutionEntry; - solution.value = "Hide solution"; - } else { - textarea.value = userEntry; - solution.value = "Show solution"; - } - updateCode(); -}); - -textarea.addEventListener("input", updateCode); -window.addEventListener("load", updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = (e) => { - if (e.code === "Tab") { - e.preventDefault(); - insertAtCaret("\t"); - } - - if (e.code === "Escape") { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - const scrollPos = textarea.scrollTop; - let caretPos = textarea.selectionStart; - - const front = textarea.value.substring(0, caretPos); - const back = textarea.value.substring( - textarea.selectionEnd, - textarea.value.length, - ); - textarea.value = front + text + back; - caretPos += text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code -textarea.onkeyup = () => { - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if (solution.value === "Show solution") { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -}; -``` - -{{ EmbedLiveSample('Active_learning_Marking_up_an_unordered_list', 700, 400, "", "") }} - -### Ordered - -Ordered lists are lists in which the order of the items _does_ matter. Let's take a set of directions as an example: - -```plain -Drive to the end of the road -Turn right -Go straight across the first two roundabouts -Turn left at the third roundabout -The school is on your right, 300 meters up the road -``` - -The markup structure is the same as for unordered lists, except that you have to wrap the list items in an {{htmlelement("ol")}} element, rather than `
    `: - -```html -
      -
    1. Drive to the end of the road
      2. -
    2. Turn right
      3. -
    3. Go straight across the first two roundabouts
      4. -
    4. Turn left at the third roundabout
      5. -
    5. The school is on your right, 300 meters up the road
      6. -
    -``` - -#### Active learning: Marking up an ordered list - -Try editing the live sample below to create your very own HTML ordered list. - -```html hidden -

    Live output

    - -
    - -

    Editable code

    -

    - Press Esc to move focus away from the code area (Tab inserts a tab character). -

    - - - -
    - - -
    -``` - -```css hidden -html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -} -``` - -```js hidden -const textarea = document.getElementById("code"); -const reset = document.getElementById("reset"); -const solution = document.getElementById("solution"); -const output = document.querySelector(".output"); -const code = textarea.value; -let userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -const htmlSolution = - "
      \n
    1. Drive to the end of the road
      2. \n
    2. Turn right
      3. \n
    3. Go straight across the first two roundabouts
      4. \n
    4. Turn left at the third roundabout
      5. \n
    5. The school is on your right, 300 meters up the road
      6. \n
    "; -let solutionEntry = htmlSolution; - -reset.addEventListener("click", () => { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = "Show solution"; - updateCode(); -}); - -solution.addEventListener("click", () => { - if (solution.value === "Show solution") { - textarea.value = solutionEntry; - solution.value = "Hide solution"; - } else { - textarea.value = userEntry; - solution.value = "Show solution"; - } - updateCode(); -}); - -textarea.addEventListener("input", updateCode); -window.addEventListener("load", updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = (e) => { - if (e.code === "Tab") { - e.preventDefault(); - insertAtCaret("\t"); - } - - if (e.code === "Escape") { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - const scrollPos = textarea.scrollTop; - let caretPos = textarea.selectionStart; - - const front = textarea.value.substring(0, caretPos); - const back = textarea.value.substring( - textarea.selectionEnd, - textarea.value.length, - ); - textarea.value = front + text + back; - caretPos += text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code -textarea.onkeyup = () => { - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if (solution.value === "Show solution") { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -}; -``` - -{{ EmbedLiveSample('Active_learning_Marking_up_an_ordered_list', 700, 500, "", "") }} - -### Active learning: Marking up our recipe page - -So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our [text-start.html](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/html-text-formatting/text-start.html) starting file and do the work there or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons. - -```html hidden -

    Live output

    - -
    - -

    Editable code

    -

    - Press Esc to move focus away from the code area (Tab inserts a tab character). -

    - - - -
    - - -
    -``` - -```css hidden -html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -} -``` - -```js hidden -const textarea = document.getElementById("code"); -const reset = document.getElementById("reset"); -const solution = document.getElementById("solution"); -const output = document.querySelector(".output"); -const code = textarea.value; -let userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -const htmlSolution = - '

    Quick hummus recipe

    \n\n

    This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.

    \n\n

    Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.

    \n\n

    Ingredients

    \n\n
      \n
    • 1 can (400g) of chick peas (garbanzo beans)
      • \n
    • 175g of tahini
      • \n
    • 6 sundried tomatoes
      • \n
    • Half a red pepper
      • \n
    • A pinch of cayenne pepper
      • \n
    • 1 clove of garlic
      • \n
    • A dash of olive oil
      • \n
    \n\n

    Instructions

    \n\n
      \n
    1. Remove the skin from the garlic, and chop coarsely.
      2. \n
    2. Remove all the seeds and stalk from the pepper, and chop coarsely.
      3. \n
    3. Add all the ingredients into a food processor.
      4. \n
    4. Process all the ingredients into a paste.
      5. \n
    5. If you want a coarse "chunky" hummus, process it for a short time.
      6. \n
    6. If you want a smooth hummus, process it for a longer time.
      7. \n
    \n\n

    For a different flavor, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.

    \n\n

    Storage

    \n\n

    Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.

    \n\n

    Hummus is suitable for freezing; you should thaw it and use it within a couple of months.

    '; -let solutionEntry = htmlSolution; - -reset.addEventListener("click", () => { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = "Show solution"; - updateCode(); -}); - -solution.addEventListener("click", () => { - if (solution.value === "Show solution") { - textarea.value = solutionEntry; - solution.value = "Hide solution"; - } else { - textarea.value = userEntry; - solution.value = "Show solution"; - } - updateCode(); -}); - -textarea.addEventListener("input", updateCode); -window.addEventListener("load", updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = (e) => { - if (e.code === "Tab") { - e.preventDefault(); - insertAtCaret("\t"); - } - - if (e.code === "Escape") { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - const scrollPos = textarea.scrollTop; - let caretPos = textarea.selectionStart; - - const front = textarea.value.substring(0, caretPos); - const back = textarea.value.substring( - textarea.selectionEnd, - textarea.value.length, - ); - textarea.value = front + text + back; - caretPos += text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code -textarea.onkeyup = () => { - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if (solution.value === "Show solution") { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -}; -``` - -{{ EmbedLiveSample('Active_learning_Marking_up_our_recipe_page', 900, 620, "", "") }} - -If you get stuck, you can always press the _Show solution_ button, or check out our [text-complete.html](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/html-text-formatting/text-complete.html) example on our GitHub repo. - -### Nesting lists - -It is perfectly OK to nest one list inside another one. You might want to have some sub-bullets sitting below a top-level bullet. Let's take the second list from our recipe example: - -```html -
      -
    1. Remove the skin from the garlic, and chop coarsely.
      2. -
    2. Remove all the seeds and stalk from the pepper, and chop coarsely.
      3. -
    3. Add all the ingredients into a food processor.
      4. -
    4. Process all the ingredients into a paste.
      5. -
    5. If you want a coarse "chunky" hummus, process it for a short time.
      6. -
    6. If you want a smooth hummus, process it for a longer time.
      7. -
    -``` - -Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list and put that list inside the current fourth bullet. This would look like so: - -```html -
      -
    1. Remove the skin from the garlic, and chop coarsely.
      2. -
    2. Remove all the seeds and stalk from the pepper, and chop coarsely.
      3. -
    3. Add all the ingredients into a food processor.
      4. -
    4. - Process all the ingredients into a paste. -
        -
      • - If you want a coarse "chunky" hummus, process it for a short time. -
        • -
      • If you want a smooth hummus, process it for a longer time.
        • -
      -
      5. -
    -``` - -Try going back to the previous active learning example and updating the second list like this. - -## Emphasis and importance - -In human language, we often emphasize certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones. - -### Emphasis - -When we want to add emphasis in spoken language, we _stress_ certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings. - -> I am glad you weren't late. -> -> I am _glad_ you weren't _late_. - -The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one, with both the words "glad" and "late" in italics, sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late. - -In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognized by screen readers, which can be configured to speak them in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below). - -```html -

    I am glad you weren't late.

    -``` - -### Strong importance - -To emphasize important words, we tend to stress them in spoken language and **bold** them in written language. For example: - -> This liquid is **highly toxic**. -> -> I am counting on you. **Do not** be late! - -In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers, which can be configured to speak them in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below). - -```html -

    This liquid is highly toxic.

    - -

    I am counting on you. Do not be late!

    -``` - -You can nest strong and emphasis inside one another if desired: - -```html-nolint -

    This liquid is highly toxic — if you drink it, you may die.

    -``` - -{{EmbedLiveSample('Strong importance')}} - -### Active learning: Let's be important - -In this active learning section, we've provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice. - -```html hidden -

    Live output

    - -
    - -

    Editable code

    -

    - Press Esc to move focus away from the code area (Tab inserts a tab character). -

    - - - -
    - - -
    -``` - -```css hidden -html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -} -``` - -```js hidden -const textarea = document.getElementById("code"); -const reset = document.getElementById("reset"); -const solution = document.getElementById("solution"); -const output = document.querySelector(".output"); -const code = textarea.value; -let userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -const htmlSolution = - "

    Important notice

    \n

    On Sunday January 9th 2010, a gang of goths were spotted stealing several garden gnomes from a shopping center in downtown Milwaukee. They were all wearing green jumpsuits and silly hats, and seemed to be having a whale of a time. If anyone has any information about this incident, please contact the police now.

    "; -let solutionEntry = htmlSolution; - -reset.addEventListener("click", () => { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = "Show solution"; - updateCode(); -}); - -solution.addEventListener("click", () => { - if (solution.value === "Show solution") { - textarea.value = solutionEntry; - solution.value = "Hide solution"; - } else { - textarea.value = userEntry; - solution.value = "Show solution"; - } - updateCode(); -}); - -textarea.addEventListener("input", updateCode); -window.addEventListener("load", updateCode); - -// Stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead -textarea.onkeydown = (e) => { - if (e.code === "Tab") { - e.preventDefault(); - insertAtCaret("\t"); - } - - if (e.code === "Escape") { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - const scrollPos = textarea.scrollTop; - let caretPos = textarea.selectionStart; - - const front = textarea.value.substring(0, caretPos); - const back = textarea.value.substring( - textarea.selectionEnd, - textarea.value.length, - ); - textarea.value = front + text + back; - caretPos += text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code -textarea.onkeyup = () => { - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if (solution.value === "Show solution") { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -}; -``` - -{{ EmbedLiveSample('Active_learning_Lets_be_important', 700, 520, "", "") }} - -### Italic, bold, underline… - -The elements we've discussed so far have clear-cut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as **presentational elements** and should no longer be used because, as we've seen before, semantics is so important to accessibility, SEO, etc. - -HTML5 redefined ``, ``, and `` with new, somewhat confusing, semantic roles. - -Here's the best rule you can remember: It's only appropriate to use ``, ``, or `` to convey a meaning traditionally conveyed with bold, italics, or underline when there isn't a more suitable element; and there usually is. Consider whether ``, ``, ``, or `` might be more appropriate. - -Always keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet. - -- {{HTMLElement('i')}} is used to convey a meaning traditionally conveyed by italic: foreign words, taxonomic designation, technical terms, a thought… -- {{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: keywords, product names, lead sentence… -- {{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: proper name, misspelling… - -> [!NOTE] -> People strongly associate underlining with hyperlinks. Therefore, on the web, it's best to only underline links. Use the `` element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the web. The example below illustrates how it can be done. - - - -```html - -

    - The Ruby-throated Hummingbird (Archilochus colubris) is the most common - hummingbird in Eastern North America. -

    - - -

    - The menu was a sea of exotic words like vatrushka, - nasi goreng and soupe à l'oignon. -

    - - -

    Someday I'll learn how to spel better.

    - - -
    -
    Semantic HTML
    -
    - Use the elements based on their semantic meaning, not their - appearance. -
    -
    -``` - -{{EmbedLiveSample('Italic, bold, underline…','100%','270')}} - -## Test your skills! - -You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: HTML text basics](/en-US/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics). - -## Summary - -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](/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) article later on in the course. In the next article, we'll be looking in detail at how to [create hyperlinks](/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks), possibly the most important element on the web. - -{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}} diff --git a/files/en-us/learn/html/introduction_to_html/index.md b/files/en-us/learn/html/introduction_to_html/index.md deleted file mode 100644 index c3c896d3f173f63..000000000000000 --- a/files/en-us/learn/html/introduction_to_html/index.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Introduction to HTML -slug: Learn/HTML/Introduction_to_HTML -page-type: learn-module ---- - -{{LearnSidebar}} - -At its heart, {{glossary("HTML")}} is a language made up of {{Glossary("Element","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. - -## Prerequisites - -Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in [Installing basic software](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software)), and understand how to create and manage files (as detailed in [Dealing with files](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files)). Both are parts of our [Getting started with the web](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) complete beginner's module. - -> [!NOTE] -> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/). - -## Guides - -This module contains the following articles, which will take you through all the basic theory of HTML and provide ample opportunity for you to test out some skills. - -- [Getting started with HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started) - - : Covers the absolute basics of HTML, to get you started — we define elements, attributes, and other important terms, and show where they fit in the language. We also show how a typical HTML page is structured and how an HTML element is structured, and explain other important basic language features. Along the way, we'll play with some HTML to get you interested! -- [What's in the head? Metadata in HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) - - : The {{Glossary("Head","head")}} of an HTML document is the part that **is not** displayed in the web browser when the page is loaded. It contains information such as the page {{htmlelement("title")}}, links to {{glossary("CSS")}} (if you want to style your HTML content with CSS), links to custom favicons, and metadata (data about the HTML, such as who wrote it, and important keywords that describe the document). -- [HTML text fundamentals](/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) - - : One of HTML's main jobs is to give text meaning (also known as {{Glossary("Semantics","semantics")}}), so that the browser knows how to display it correctly. This article looks at how to use HTML to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more. -- [Creating hyperlinks](/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) - - : Hyperlinks are really important — they are what makes the web a web. This article shows the syntax required to make a link and discusses best practices for links. -- [Advanced text formatting](/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) - - : There are many other elements in HTML for formatting text that we didn't get to in the [HTML text fundamentals](/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) article. The elements here are less well-known, but still useful to know about. In this article, you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more. -- [Document and website structure](/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) - - : As well as defining individual parts of your page (such as "a paragraph" or "an image"), HTML is also used to define areas of your website (such as "the header", "the navigation menu", or "the main content column"). This article looks into how to plan a basic website structure and how to write the HTML to represent this structure. -- [Debugging HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) - - : Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help. - -## Assessments - -The following assessments will test your understanding of the HTML basics covered in the guides above. - -- [Marking up a letter](/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) - - : We all learn to write a letter sooner or later; it is also a useful example to test out text formatting skills. In this assessment, you'll be given a letter to mark up. -- [Structuring a page of content](/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) - - : This assessment tests your ability to use HTML to structure a simple page of content, containing a header, a footer, a navigation menu, main content, and a sidebar. - -## See also - -- [Learn HTML and CSS](https://v2.scrimba.com/learn-html-and-css-c0p?via=mdn) _MDN Curriculum partner_ - - : [Scrimba's](https://scrimba.com?via=mdn) _Learn HTML and CSS_ course teaches you HTML and CSS through building and deploying five awesome projects, with fun interactive lessons and challenges taught by knowledgeable teachers. diff --git a/files/en-us/learn/html/tables/index.md b/files/en-us/learn/html/tables/index.md deleted file mode 100644 index d36a56c4cc2528a..000000000000000 --- a/files/en-us/learn/html/tables/index.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: HTML tables -slug: Learn/HTML/Tables -page-type: learn-module ---- - -{{LearnSidebar}} - -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](/en-US/docs/Learn/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. - -## Prerequisites - -Before starting this module, you should already have covered the basics of HTML — see [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML). - -> [!NOTE] -> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/). - -## Guides - -This module contains the following articles, which will take you through all the fundamentals of creating tables in HTML. - -- [HTML table basics](/en-US/docs/Learn/HTML/Tables/Basics) - - : This article gets you started with HTML tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes. -- [HTML table advanced features and accessibility](/en-US/docs/Learn/HTML/Tables/Advanced) - - : This article looks at some more advanced features of HTML tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users. - -## Assessments - -The following assessment will test your understanding of the HTML table techniques covered in the guides above. - -- [Structuring planet data](/en-US/docs/Learn/HTML/Tables/Structuring_planet_data) - - : 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. diff --git a/files/en-us/learn/mathml/first_steps/tables/index.md b/files/en-us/learn/mathml/first_steps/tables/index.md index 0209123c7baabf7..1eef39f09265f7d 100644 --- a/files/en-us/learn/mathml/first_steps/tables/index.md +++ b/files/en-us/learn/mathml/first_steps/tables/index.md @@ -21,9 +21,9 @@ Once all basic math notations are known, it remains to consider tabular layout w href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files" >working with files, and HTML basics (study - Introduction to HTML. and Basic HTML syntax. and HTML tables) diff --git a/files/en-us/learn_web_development/core/index.md b/files/en-us/learn_web_development/core/index.md index d3e98bc71b2c315..087c1db7ce7c065 100644 --- a/files/en-us/learn_web_development/core/index.md +++ b/files/en-us/learn_web_development/core/index.md @@ -6,4 +6,20 @@ page-type: landing-page -Core landing page +Our **Core modules** cover topics that we feel every web developer should have a good grounding in. This includes all the information they need to design and build a basic, accessible web app that follows modern best practices, and manage and deploy their code using appropriate tools. + +## Prerequisites + +While there is no prequisite knowledge for starting this set of modules, we would recommend that you familiarize yourself with your computer, make sure you've got a basic set of required applications installed (such as web browsers and a code editor), and do some background reading on the web and web technologies, if you have no already done so. All these topics are covered in our [Getting started modules](/en-US/docs/Learn_web_development/Getting_started). + +In particular, if you've never done any coding before, we'd recommend the [Your first website](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) module, which introduces you web technologies very gently and takes you through the process of building a simple website. + +## Modules + +- [Structuring content with HTML](/en-US/docs/Learn_web_development/Core/Structuring_content) + - : To build a high-quality, usable, accessible website, you need to understand how to define your content structure using semantic HTML. This module covers the basics of the HTML language, before looking at key areas such as document structure, links, lists, images, forms, and more. + +## See also + +- [The Frontend Developer Career Path](https://v2.scrimba.com/the-frontend-developer-career-path-c0j?via=mdn) _MDN Curriculum partner_ + - : [Scrimba's](https://scrimba.com?via=mdn) _Frontend Developer Career Path_ teaches all you need to know to be a competent front-end web developer, with fun interactive lessons and challenges, knowledgeable teachers, and a supportive community. Go from zero to landing your first front-end job! Many of the course components are available as standalone free versions. diff --git a/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/en-us/learn_web_development/core/structuring_content/advanced_text_features/index.md similarity index 68% rename from files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md rename to files/en-us/learn_web_development/core/structuring_content/advanced_text_features/index.md index 1c0b7be75eb18ff..0d1a70fe12d8b3a 100644 --- a/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/advanced_text_features/index.md @@ -1,12 +1,14 @@ --- -title: Advanced text formatting -slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting -page-type: learn-module-chapter +title: Advanced text features +slug: Learn_web_development/Core/Structuring_content/Advanced_text_features +page-type: tutorial-chapter --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}} + -There are many other elements in HTML for formatting text, which we didn't get to in the [HTML text fundamentals](/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) article. The elements described in this article are less known, but still useful to know about (and this is still not a complete list by any means). Here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more. +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Structuring_documents", "Learn_web_development/Core/Structuring_content/Creating_links", "Learn_web_development/Core/Structuring_content")}} + +There are many other elements in HTML for defining text semantics, which we didn't get to in the [Emphasis and importance](/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) article. The elements described in this article are less known, but still useful to know about (and this is still not a complete list by any means). Here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more. @@ -14,235 +16,33 @@ There are many other elements in HTML for formatting text, which we didn't get t - +
    Prerequisites: Basic HTML familiarity, as covered in - Getting started with HTML. HTML text formatting, as covered in - HTML text fundamentalsBasic HTML Syntax. Text-level semantics such as headings and paragraphs and lists.
    Objective:Learning outcomes: - To learn how to use lesser-known HTML elements to mark up advanced - semantic features. +
      +
    • Quotations.
      • +
    • Abbreviations and acronyms.
      • +
    • Addresses.
      • +
    • Times and dates.
      • +
    • Superscript and subscript.
      • +
    -## Description lists - -In HTML text fundamentals, we walked through how to [mark up basic lists](/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lists) in HTML, and we mentioned the third type of list you'll occasionally come across — **description lists**. The purpose of these lists is to mark up a set of items and their associated descriptions, such as terms and definitions, or questions and answers. Let's look at an example of a set of terms and definitions: - -```plain -soliloquy -In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.) -monologue -In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present. -aside -In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information -``` - -Description lists use a different wrapper than the other list types — {{htmlelement("dl")}}; in addition each term is wrapped in a {{htmlelement("dt")}} (description term) element, and each description is wrapped in a {{htmlelement("dd")}} (description definition) element. - -### Description list example - -Let's finish marking up our example: - -```html -
    -
    soliloquy
    -
    - In drama, where a character speaks to themselves, representing their inner - thoughts or feelings and in the process relaying them to the audience (but - not to other characters.) -
    -
    monologue
    -
    - In drama, where a character speaks their thoughts out loud to share them - with the audience and any other characters present. -
    -
    aside
    -
    - In drama, where a character shares a comment only with the audience for - humorous or dramatic effect. This is usually a feeling, thought, or piece of - additional background information. -
    -
    -``` - -The browser default styles will display description lists with the descriptions indented somewhat from the terms. - -{{EmbedLiveSample('Description_list_example', '100%', '285px')}} - -### Multiple descriptions for one term - -Note that it is permitted to have a single term with multiple descriptions, for example: - -```html -
    -
    aside
    -
    - In drama, where a character shares a comment only with the audience for - humorous or dramatic effect. This is usually a feeling, thought, or piece of - additional background information. -
    -
    - In writing, a section of content that is related to the current topic, but - doesn't fit directly into the main flow of content so is presented nearby - (often in a box off to the side.) -
    -
    -``` - -{{EmbedLiveSample('Multiple_descriptions_for_one_term', '100%', '193px')}} - -### Active learning: Marking up a set of definitions - -It's time to try your hand at description lists; add elements to the raw text in the _Input_ field so that it appears as a description list in the _Output_ field. You could try using your own terms and descriptions if you like. - -If you make a mistake, you can always reset it using the _Reset_ button. If you get really stuck, press the _Show solution_ button to see the answer. - -```html hidden -

    Live output

    - -
    - -

    Editable code

    -

    - Press Esc to move focus away from the code area (Tab inserts a tab character). -

    - - - -
    - - -
    -``` - -```css hidden -html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -} -``` - -```js hidden -const textarea = document.getElementById("code"); -const reset = document.getElementById("reset"); -const solution = document.getElementById("solution"); -const output = document.querySelector(".output"); -const code = textarea.value; -let userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -const htmlSolution = - "
    \n
    Bacon
    \n
    The glue that binds the world together.
    \n
    Eggs
    \n
    The glue that binds the cake together.
    \n
    Coffee
    \n
    The drink that gets the world running in the morning.
    \n
    A light brown color.
    \n
    "; -let solutionEntry = htmlSolution; - -reset.addEventListener("click", () => { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = "Show solution"; - updateCode(); -}); - -solution.addEventListener("click", () => { - if (solution.value === "Show solution") { - textarea.value = solutionEntry; - solution.value = "Hide solution"; - } else { - textarea.value = userEntry; - solution.value = "Show solution"; - } - updateCode(); -}); - -textarea.addEventListener("input", updateCode); -window.addEventListener("load", updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = (e) => { - if (e.code === "Tab") { - e.preventDefault(); - insertAtCaret("\t"); - } - - if (e.code === "Escape") { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - const scrollPos = textarea.scrollTop; - let caretPos = textarea.selectionStart; - - const front = textarea.value.substring(0, caretPos); - const back = textarea.value.substring( - textarea.selectionEnd, - textarea.value.length, - ); - textarea.value = front + text + back; - caretPos += text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = () => { - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if (solution.value === "Show solution") { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -}; -``` - -{{ EmbedLiveSample('Active_learning_Marking_up_a_set_of_definitions', 700, 350) }} - ## Quotations -HTML also has features available for marking up quotations; which element you use depends on whether you are marking up a block or inline quotation. +HTML contains features available for marking up quotations; which element you use depends on whether you are marking up a block or inline quotation. ### Blockquotes @@ -781,6 +581,6 @@ You've reached the end of this article, but can you remember the most important ## Summary -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](/en-US/docs/Web/HTML/Element) (the [Inline text semantics](/en-US/docs/Web/HTML/Element#inline_text_semantics) section would be a great place to start). In the next article, we'll look at the HTML elements you'd use to [structure the different parts of an HTML document](/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure). +That marks the end of our study of less-common HTML text semantics. 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. Next up, we'll look at links, one of the most important features of the web. -{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Structuring_documents", "Learn_web_development/Core/Structuring_content/Creating_links", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn/html/introduction_to_html/getting_started/grumpy-cat-attribute-small.png b/files/en-us/learn_web_development/core/structuring_content/basic_html_syntax/grumpy-cat-attribute-small.png similarity index 100% rename from files/en-us/learn/html/introduction_to_html/getting_started/grumpy-cat-attribute-small.png rename to files/en-us/learn_web_development/core/structuring_content/basic_html_syntax/grumpy-cat-attribute-small.png diff --git a/files/en-us/learn/html/introduction_to_html/getting_started/grumpy-cat-small.png b/files/en-us/learn_web_development/core/structuring_content/basic_html_syntax/grumpy-cat-small.png similarity index 100% rename from files/en-us/learn/html/introduction_to_html/getting_started/grumpy-cat-small.png rename to files/en-us/learn_web_development/core/structuring_content/basic_html_syntax/grumpy-cat-small.png diff --git a/files/en-us/learn/html/introduction_to_html/getting_started/index.md b/files/en-us/learn_web_development/core/structuring_content/basic_html_syntax/index.md similarity index 96% rename from files/en-us/learn/html/introduction_to_html/getting_started/index.md rename to files/en-us/learn_web_development/core/structuring_content/basic_html_syntax/index.md index 6badaeca55574d6..b70260a0027b394 100644 --- a/files/en-us/learn/html/introduction_to_html/getting_started/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/basic_html_syntax/index.md @@ -1,10 +1,12 @@ --- -title: Getting started with HTML -slug: Learn/HTML/Introduction_to_HTML/Getting_started -page-type: learn-module-chapter +title: Basic HTML syntax +slug: Learn_web_development/Core/Structuring_content/Basic_HTML_syntax +page-type: tutorial-chapter --- -{{LearnSidebar}}{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}} + + +{{NextMenu("Learn_web_development/Core/Structuring_content/Webpage_metadata", "Learn_web_development/Core/Structuring_content")}} In this article, we cover the absolute basics of HTML. To get you started, this article defines elements, attributes, and all the other important terms you may have heard. It also explains where these fit into HTML. You will learn how HTML elements are structured, how a typical HTML page is structured, and other important basic language features. Along the way, there will be an opportunity to play with HTML too! @@ -17,9 +19,15 @@ In this article, we cover the absolute basics of HTML. To get you started, this - Objective: + Learning outcomes: - To gain basic familiarity with HTML, and practice writing a few HTML elements. +
      +
    • The anatomy of an HTML element — element, opening tag, content, closing tag, attributes.
      • +
    • The HTML body and its purpose as a container for the page content.
      • +
    • What void elements (also known as empty elements) are, and how they differ from other elements.
      • +
    • The need for a doctype at the top of HTML documents. Its original intended purpose, and the fact that now it is somewhat of a historical artifact.
      • +
    • Understanding that HTML needs to be correctly nested.
      • +
    @@ -726,7 +734,7 @@ In the live output below, you can see that the first paragraph has gone wrong. T {{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "") }} > [!NOTE] -> You don't need to use entity references for any other symbols, as modern browsers will handle the actual symbols just fine as long as your HTML's [character encoding is set to UTF-8](/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#specifying_your_documents_character_encoding). +> You don't need to use entity references for any other symbols, as modern browsers will handle the actual symbols just fine as long as your HTML's [character encoding is set to UTF-8](/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#specifying_your_documents_character_encoding). ## HTML comments @@ -756,4 +764,4 @@ At this point, you should understand what HTML looks like, and how it works at a - [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_colors/Applying_color) -{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}} +{{NextMenu("Learn/HTML/Introduction_to_HTML/Webpage_metadata", "Learn/HTML/Introduction_to_HTML/Structuring_content")}} diff --git a/files/en-us/learn/html/introduction_to_html/getting_started/template-screenshot.png b/files/en-us/learn_web_development/core/structuring_content/basic_html_syntax/template-screenshot.png similarity index 100% rename from files/en-us/learn/html/introduction_to_html/getting_started/template-screenshot.png rename to files/en-us/learn_web_development/core/structuring_content/basic_html_syntax/template-screenshot.png diff --git a/files/en-us/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/en-us/learn_web_development/core/structuring_content/creating_links/index.md similarity index 88% rename from files/en-us/learn/html/introduction_to_html/creating_hyperlinks/index.md rename to files/en-us/learn_web_development/core/structuring_content/creating_links/index.md index a62cb22591ee9cd..39ff6e5eae24611 100644 --- a/files/en-us/learn/html/introduction_to_html/creating_hyperlinks/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/creating_links/index.md @@ -1,12 +1,14 @@ --- -title: Creating hyperlinks -slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks -page-type: learn-module-chapter +title: Creating links +slug: Learn_web_development/Core/Structuring_content/Creating_links +page-type: tutorial-chapter --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}} + -Hyperlinks are really important — they are what makes the Web _a web_. +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content/Marking_up_a_letter", "Learn_web_development/Core/Structuring_content")}} + +Links (also known as hyperlinks) are really important — they are what makes the Web _a web_. This article shows the syntax required to make a link, and discusses link best practices. @@ -15,20 +17,27 @@ This article shows the syntax required to make a link, and discusses link best p - + @@ -60,7 +69,8 @@ A basic link is created by wrapping the text or other content inside an {{htmlel

    ``` -This gives us the following result:\ +This gives us the following result: + I'm creating a link to [the Mozilla homepage](https://www.mozilla.org/en-US/). ### Block level links @@ -142,7 +152,7 @@ To fully understand link targets, you need to understand URLs and file paths. Th A URL, or Uniform Resource Locator is a string of text that defines where something is located on the Web. For example, Mozilla's English homepage is located at `https://www.mozilla.org/en-US/`. -URLs use paths to find files. Paths specify where the file you're interested in is located in the filesystem. Let's look at an example of a directory structure, see the [creating-hyperlinks](https://github.com/mdn/learning-area/tree/main/html/introduction-to-html/creating-hyperlinks) directory. +URLs use paths to find files. Paths specify where the file you're interested in is located in the filesystem. Let's look at an example of a directory structure, see the `creating-hyperlinks` directory structure shown below: ![A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively](simple-directory.png) @@ -150,6 +160,8 @@ The **root** of this directory structure is called `creating-hyperlinks`. When w There are also two directories inside our root — `pdfs` and `projects`. These each have a single file inside them — a PDF (`project-brief.pdf`) and an `index.html` file, respectively. Note that you can have two `index.html` files in one project, as long as they're in different filesystem locations. The second `index.html` would perhaps be the main landing page for project-related information. +Let's look at some examples of links between some different files in this directory structure to demonstrate different link types: + - **Same directory**: If you wanted to include a hyperlink inside `index.html` (the top level `index.html`) pointing to `contacts.html`, you would specify the filename that you want to link to, because it's in the same directory as the current file. The URL you would use is `contacts.html`: ```html @@ -206,14 +218,14 @@ You can even use the document fragment reference on its own to link to _another ### Absolute versus relative URLs -Two terms you'll come across on the Web are **absolute URL** and **relative URL:** +Two terms you'll come across on the web are **absolute URL** and **relative URL:** -**absolute URL**: Points to a location defined by its absolute location on the web, including {{glossary("protocol")}} and {{glossary("domain name")}}. +**Absolute URL**: Points to a location defined by its absolute location on the web, including {{glossary("protocol")}} and {{glossary("domain name")}}. For example, if an `index.html` page is uploaded to a directory called `projects` that sits inside the **root** of a web server, and the website's domain is `https://www.example.com`, the page would be available at `https://www.example.com/projects/index.html` (or even just `https://www.example.com/projects/`, as most web servers just look for a landing page such as `index.html` to load if it isn't specified in the URL.) An absolute URL will always point to the same location, no matter where it's used. -**relative URL**: Points to a location that is _relative_ to the file you are linking from, more like what we looked at in the previous section. +**Relative URL**: Points to a location that is _relative_ to the file you are linking from, more like what we looked at in the previous section. For example, if we wanted to link from our example file at `https://www.example.com/projects/index.html` to a PDF file in the same directory, the URL would just be the filename — `project-brief.pdf` — no extra information needed. If the PDF was available in a subdirectory inside `projects` called `pdfs`, the relative link would be `pdfs/project-brief.pdf` (the equivalent absolute URL would be `https://www.example.com/projects/pdfs/project-brief.pdf`.) A relative URL will point to different places depending on the actual location of the file you refer from — for example if we moved our `index.html` file out of the `projects` directory and into the **root** of the website (the top level, not in any directories), the `pdfs/project-brief.pdf` relative URL link inside it would now point to a file located at `https://www.example.com/pdfs/project-brief.pdf`, not a file located at `https://www.example.com/projects/pdfs/project-brief.pdf`. @@ -372,6 +384,6 @@ You've reached the end of this article, but can you remember the most important ## Summary -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](/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) is your next stop. +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, you're going to work through a couple of challenges that will test your comprehension of the topics you've covered so far. -{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content/Marking_up_a_letter", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn/html/introduction_to_html/creating_hyperlinks/mdn_logo.svg b/files/en-us/learn_web_development/core/structuring_content/creating_links/mdn_logo.svg similarity index 100% rename from files/en-us/learn/html/introduction_to_html/creating_hyperlinks/mdn_logo.svg rename to files/en-us/learn_web_development/core/structuring_content/creating_links/mdn_logo.svg diff --git a/files/en-us/learn/html/introduction_to_html/creating_hyperlinks/navigation-example.png b/files/en-us/learn_web_development/core/structuring_content/creating_links/navigation-example.png similarity index 100% rename from files/en-us/learn/html/introduction_to_html/creating_hyperlinks/navigation-example.png rename to files/en-us/learn_web_development/core/structuring_content/creating_links/navigation-example.png diff --git a/files/en-us/learn/html/introduction_to_html/creating_hyperlinks/simple-directory.png b/files/en-us/learn_web_development/core/structuring_content/creating_links/simple-directory.png similarity index 100% rename from files/en-us/learn/html/introduction_to_html/creating_hyperlinks/simple-directory.png rename to files/en-us/learn_web_development/core/structuring_content/creating_links/simple-directory.png diff --git a/files/en-us/learn/html/introduction_to_html/creating_hyperlinks/updated-bbc-website.png b/files/en-us/learn_web_development/core/structuring_content/creating_links/updated-bbc-website.png similarity index 100% rename from files/en-us/learn/html/introduction_to_html/creating_hyperlinks/updated-bbc-website.png rename to files/en-us/learn_web_development/core/structuring_content/creating_links/updated-bbc-website.png diff --git a/files/en-us/learn/html/introduction_to_html/debugging_html/badly-formed-html.png b/files/en-us/learn_web_development/core/structuring_content/debugging_html/badly-formed-html.png similarity index 100% rename from files/en-us/learn/html/introduction_to_html/debugging_html/badly-formed-html.png rename to files/en-us/learn_web_development/core/structuring_content/debugging_html/badly-formed-html.png diff --git a/files/en-us/learn/html/introduction_to_html/debugging_html/error-message.png b/files/en-us/learn_web_development/core/structuring_content/debugging_html/error-message.png similarity index 100% rename from files/en-us/learn/html/introduction_to_html/debugging_html/error-message.png rename to files/en-us/learn_web_development/core/structuring_content/debugging_html/error-message.png diff --git a/files/en-us/learn/html/introduction_to_html/debugging_html/html-inspector.png b/files/en-us/learn_web_development/core/structuring_content/debugging_html/html-inspector.png similarity index 100% rename from files/en-us/learn/html/introduction_to_html/debugging_html/html-inspector.png rename to files/en-us/learn_web_development/core/structuring_content/debugging_html/html-inspector.png diff --git a/files/en-us/learn/html/introduction_to_html/debugging_html/index.md b/files/en-us/learn_web_development/core/structuring_content/debugging_html/index.md similarity index 89% rename from files/en-us/learn/html/introduction_to_html/debugging_html/index.md rename to files/en-us/learn_web_development/core/structuring_content/debugging_html/index.md index 6021bbe62df525e..0f579e513ba1de0 100644 --- a/files/en-us/learn/html/introduction_to_html/debugging_html/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/debugging_html/index.md @@ -1,10 +1,12 @@ --- title: Debugging HTML -slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML +slug: Learn_web_development/Core/Structuring_content/Debugging_HTML page-type: learn-module-chapter --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}} + + +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_forms", "Learn/CSS/Building_blocks", "Learn_web_development/Core/Structuring_content")}} Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help you find and fix errors in HTML. @@ -13,24 +15,25 @@ Writing HTML is fine, but what if something goes wrong, and you can't work out w @@ -50,7 +53,7 @@ Debugging doesn't have to be scary though — the key to being comfortable with HTML is not as complicated to understand as Rust. HTML is not compiled into a different form before the browser parses it and shows the result (it is _interpreted_, not _compiled_). And HTML's {{glossary("element")}} syntax is arguably a lot easier to understand than a "real programming language" like Rust, {{glossary("JavaScript")}}, or {{glossary("Python")}}. The way that browsers parse HTML is a lot more **permissive** than how programming languages are run, which is both a good and a bad thing. -### Permissive code +## Permissive code So what do we mean by permissive? Well, generally when you do something wrong in code, there are two main types of error that you'll come across: @@ -62,7 +65,7 @@ HTML itself doesn't suffer from syntax errors because browsers parse it permissi > [!NOTE] > HTML is parsed permissively because when the web was first created, it was decided that allowing people to get their content published was more important than making sure the syntax was absolutely correct. The web would probably not be as popular as it is today, if it had been more strict from the very beginning. -### Active learning: Studying permissive code +## Active learning: Studying permissive code It's time to study the permissive nature of HTML code. @@ -123,7 +126,7 @@ It's time to study the permissive nature of HTML code. ``` -### HTML validation +## HTML validation So you can see from the above example that you really want to make sure your HTML is well-formed! But how? In a small example like the one seen above, it is easy to search through the lines and find the errors, but what about a huge, complex HTML document? @@ -133,7 +136,7 @@ The best strategy is to start by running your HTML page through the [Markup Vali To specify the HTML to validate, you can provide a web address, upload an HTML file, or directly input some HTML code. -### Active learning: Validating an HTML document +## Active learning: Validating an HTML document Let's try this with our [sample document](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/debugging-html/debug-example.html). @@ -146,7 +149,7 @@ This should give you a list of errors and other information. ![A list of HTML validation results from the W3C markup validation service](validation-results.png) -#### Interpreting the error messages +### Interpreting the error messages The error messages are usually helpful, but sometimes they are not so helpful; with a bit of practice you can work out how to interpret these to fix your code. Let's go through the error messages and see what they mean. You'll see that each message comes with a line and column number to help you to locate the error easily. @@ -175,4 +178,4 @@ You will know when all your errors are fixed when you see the following banner i 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. -{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_forms", "Learn/CSS/Building_blocks", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn/html/introduction_to_html/debugging_html/valid-html-banner.png b/files/en-us/learn_web_development/core/structuring_content/debugging_html/valid-html-banner.png similarity index 100% rename from files/en-us/learn/html/introduction_to_html/debugging_html/valid-html-banner.png rename to files/en-us/learn_web_development/core/structuring_content/debugging_html/valid-html-banner.png diff --git a/files/en-us/learn/html/introduction_to_html/debugging_html/validation-results.png b/files/en-us/learn_web_development/core/structuring_content/debugging_html/validation-results.png similarity index 100% rename from files/en-us/learn/html/introduction_to_html/debugging_html/validation-results.png rename to files/en-us/learn_web_development/core/structuring_content/debugging_html/validation-results.png diff --git a/files/en-us/learn/html/introduction_to_html/debugging_html/validator.png b/files/en-us/learn_web_development/core/structuring_content/debugging_html/validator.png similarity index 100% rename from files/en-us/learn/html/introduction_to_html/debugging_html/validator.png rename to files/en-us/learn_web_development/core/structuring_content/debugging_html/validator.png diff --git a/files/en-us/learn_web_development/core/structuring_content/emphasis_and_importance/index.md b/files/en-us/learn_web_development/core/structuring_content/emphasis_and_importance/index.md new file mode 100644 index 000000000000000..0721bcee370e041 --- /dev/null +++ b/files/en-us/learn_web_development/core/structuring_content/emphasis_and_importance/index.md @@ -0,0 +1,269 @@ +--- +title: Emphasis and importance +slug: Learn_web_development/Core/Structuring_content/Emphasis_and_importance +page-type: tutorial-chapter +--- + + + +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Headings_and_paragraphs", "Learn_web_development/Core/Structuring_content/Lists", "Learn_web_development/Core/Structuring_content")}} + +The previous article looked at why semantics are important in HTML, and focused on headings and paragraphs. This article continues on the theme of semantics, looking at HTML elements that apply emphasis and importance to text (parallel to italics and bold text in print media). + +
    Prerequisites: Basic HTML familiarity, as covered in - Getting started with HTML. HTML text formatting, as covered in - HTML text fundamentalsBasic HTML Syntax. Text-level semantics such as headings and paragraphs and lists.
    Objective:Learning outcomes: - To learn how to implement a hyperlink effectively, and link multiple - files together. +
      +
    • Understand why links are the fundamental feature of the web. There is no web without links.
      • +
    • The href attribute.
      • +
    • Absolute and relative paths, and when to use them.
      • +
    • Path syntax in detail — slashes, single dot, and double dot.
      • +
    • Link states and why they are important — :hover, :focus, :visited, and :active.
      • +
    • Inline and block-level links.
      • +
    • Understanding the benefits of writing good link text, such as better accessibility for screenreader users, and potential positive SEO effects.
      • +
    Prerequisites: - HTML familiarity, as covered in, for example, Getting started with HTML, - HTML text fundamentals, and - Creating hyperlinks. + Basic HTML familiarity, as covered in + Basic HTML Syntax. Text-level semantics such as headings and paragraphs and lists. Structural HTML.
    Objective: - Learn the basics of using debugging tools to find problems in HTML. +
      +
    • Using the [HTML validator](https://validator.w3.org/) to detect markup errors.
      • +
    • Using View source for getting a quick look at the source markup of a page.
    • +
    • Using the DOM inspector in your browser DevTools to dive deeper into your markup.
      • +
    + + + + + + + + + + +
    Prerequisites: + Basic HTML familiarity, as covered in + Basic HTML Syntax. +
    Learning outcomes: +
      +
    • The meaning of emphasis and importance, and the basic elements that apply them in HTML, such as <em> and <strong>.
      • +
    • Identify presentational markup that should no longer be used at all (e.g. <big> and <font>); it is deprecated.
      • +
    • Identify presentational markup that has been repurposed to have new semantic meaning (e.g. <i> and <b>).
      • +
    +
    + +## What are emphasis and importance? + +In human language, we often emphasize certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones. + +### Emphasis + +When we want to add emphasis in spoken language, we _stress_ certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings. + +> I am glad you weren't late. +> +> I am _glad_ you weren't _late_. + +The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one, with both the words "glad" and "late" in italics, sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late. + +In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognized by screen readers, which can be configured to speak them in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below). + +```html +

    I am glad you weren't late.

    +``` + +### Strong importance + +To emphasize important words, we tend to stress them in spoken language and **bold** them in written language. For example: + +> This liquid is **highly toxic**. +> +> I am counting on you. **Do not** be late! + +In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers, which can be configured to speak them in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below). + +```html +

    This liquid is highly toxic.

    + +

    I am counting on you. Do not be late!

    +``` + +You can nest strong and emphasis inside one another if desired: + +```html-nolint +

    This liquid is highly toxic — if you drink it, you may die.

    +``` + +{{EmbedLiveSample('Strong importance')}} + +## Active learning: Let's be important + +In this active learning section, we've provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice. + +```html hidden +

    Live output

    + +
    + +

    Editable code

    +

    + Press Esc to move focus away from the code area (Tab inserts a tab character). +

    + + + +
    + + +
    +``` + +```css hidden +html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +``` + +```js hidden +const textarea = document.getElementById("code"); +const reset = document.getElementById("reset"); +const solution = document.getElementById("solution"); +const output = document.querySelector(".output"); +const code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +const htmlSolution = + "

    Important notice

    \n

    On Sunday January 9th 2010, a gang of goths were spotted stealing several garden gnomes from a shopping center in downtown Milwaukee. They were all wearing green jumpsuits and silly hats, and seemed to be having a whale of a time. If anyone has any information about this incident, please contact the police now.

    "; +let solutionEntry = htmlSolution; + +reset.addEventListener("click", () => { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = "Show solution"; + updateCode(); +}); + +solution.addEventListener("click", () => { + if (solution.value === "Show solution") { + textarea.value = solutionEntry; + solution.value = "Hide solution"; + } else { + textarea.value = userEntry; + solution.value = "Show solution"; + } + updateCode(); +}); + +textarea.addEventListener("input", updateCode); +window.addEventListener("load", updateCode); + +// Stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead +textarea.onkeydown = (e) => { + if (e.code === "Tab") { + e.preventDefault(); + insertAtCaret("\t"); + } + + if (e.code === "Escape") { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + let caretPos = textarea.selectionStart; + + const front = textarea.value.substring(0, caretPos); + const back = textarea.value.substring( + textarea.selectionEnd, + textarea.value.length, + ); + textarea.value = front + text + back; + caretPos += text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code +textarea.onkeyup = () => { + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if (solution.value === "Show solution") { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +}; +``` + +{{ EmbedLiveSample('Active_learning_Lets_be_important', 700, 520, "", "") }} + +## Italic, bold, underline… + +The elements we've discussed so far have clear-cut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as **presentational elements** and should no longer be used because, as we've seen before, semantics is so important to accessibility, SEO, etc. + +HTML5 redefined ``, ``, and `` with new, somewhat confusing, semantic roles. + +Here's the best rule you can remember: It's only appropriate to use ``, ``, or `` to convey a meaning traditionally conveyed with bold, italics, or underline when there isn't a more suitable element; and there usually is. Consider whether ``, ``, ``, or `` might be more appropriate. + +Always keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet. + +- {{HTMLElement('i')}} is used to convey a meaning traditionally conveyed by italic: foreign words, taxonomic designation, technical terms, a thought… +- {{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: keywords, product names, lead sentence… +- {{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: proper name, misspelling… + +> [!NOTE] +> People strongly associate underlining with hyperlinks. Therefore, on the web, it's best to only underline links. Use the `` element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the web. The example below illustrates how it can be done. + + + +```html + +

    + The Ruby-throated Hummingbird (Archilochus colubris) is the most common + hummingbird in Eastern North America. +

    + + +

    + The menu was a sea of exotic words like vatrushka, + nasi goreng and soupe à l'oignon. +

    + + +

    Someday I'll learn how to spel better.

    + + +
    +
    Semantic HTML
    +
    + Use the elements based on their semantic meaning, not their + appearance. +
    +
    +``` + +{{EmbedLiveSample('Italic, bold, underline…','100%','270')}} + +## Summary + +We are done looking at emphasis and importance for the moment. Let's move on to looking at how we represent lists in HTML. + +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Headings_and_paragraphs", "Learn_web_development/Core/Structuring_content/Lists", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/headings_and_paragraphs/index.md b/files/en-us/learn_web_development/core/structuring_content/headings_and_paragraphs/index.md new file mode 100644 index 000000000000000..b0236caa933a7b3 --- /dev/null +++ b/files/en-us/learn_web_development/core/structuring_content/headings_and_paragraphs/index.md @@ -0,0 +1,275 @@ +--- +title: Headings and paragraphs in HTML +slug: Learn_web_development/Core/Structuring_content/Headings_and_paragraphs +page-type: tutorial-chapter +--- + + + +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Webpage_metadata", "Learn_web_development/Core/Structuring_content/Emphasis_and_importance", "Learn_web_development/Core/Structuring_content")}} + +One of HTML's main jobs is to give text structure so that a browser can display an HTML document the way its developer intends. This article explains how {{glossary("HTML")}} can be used to provide fundamental page structure by defining headings and paragraphs. + + + + + + + + + + + + +
    Prerequisites: + Basic HTML familiarity, as covered in + Basic HTML Syntax. +
    Learning outcomes: +
  • How to create a good document structure with headings and content beneath those headings.
    • +
  • Using semantic HTML rather than presentational HTML, and why this is important.
    • +
  • The need for heading levels to be used logically, i.e. no skipping levels or using them arbitrarily because you want to achieve a certain font size (that's a job for CSS).
    • +
  • SEO benefits: for example, keywords are boosted in headings.
    • +
  • Accessibility benefits: Assistive technology (AT) such as screen readers use headings (and other landmarks) as signposts to navigate content. HTML documents are very difficult for AT users to use without headings.
    • +
    + +## Headings and paragraphs + +Most structured text consists of headings and paragraphs, whether you are reading a story, a newspaper, a college textbook, a magazine, etc. + +![An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.](newspaper_small.jpg) + +Structured content makes the reading experience easier and more enjoyable. + +In HTML, each paragraph has to be wrapped in a {{htmlelement("p")}} element, like so: + +```html +

    I am a paragraph, oh yes I am.

    +``` + +Each heading has to be wrapped in a heading element: + +```html +

    I am the title of the story.

    +``` + +There are six heading elements: {{htmlelement("Heading_Elements", "h1")}}, {{htmlelement("Heading_Elements", "h2")}}, {{htmlelement("Heading_Elements", "h3")}}, {{htmlelement("Heading_Elements", "h4")}}, {{htmlelement("Heading_Elements", "h5")}}, and {{htmlelement("Heading_Elements", "h6")}}. Each element represents a different level of content in the document; `

    ` represents the main heading, `

    ` represents subheadings, `

    ` represents sub-subheadings, and so on. + +## Implementing structural hierarchy + +For example, in this story, the `

    ` element represents the title of the story, the `

    ` elements represent the title of each chapter, and the `

    ` elements represent subsections of each chapter: + +```html +

    The Crushing Bore

    + +

    By Chris Mills

    + +

    Chapter 1: The dark night

    + +

    + It was a dark night. Somewhere, an owl hooted. The rain lashed down on the… +

    + +

    Chapter 2: The eternal silence

    + +

    Our protagonist could not so much as a whisper out of the shadowy figure…

    + +

    The specter speaks

    + +

    + Several more hours had passed, when all of a sudden the specter sat bolt + upright and exclaimed, "Please have mercy on my soul!" +

    +``` + +It's really up to you what the elements involved represent, as long as the hierarchy makes sense. You just need to bear in mind a few best practices as you create such structures: + +- Preferably, you should use a single `

    ` per page—this is the top level heading, and all others sit below this in the hierarchy. +- Make sure you use the headings in the correct order in the hierarchy. Don't use `

    ` elements to represent subheadings, followed by `

    ` elements to represent sub-subheadings—that doesn't make sense and will lead to weird results. +- Of the six heading levels available, you should aim to use no more than three per page, unless you feel it is necessary. Documents with many levels (for example, a deep heading hierarchy) become unwieldy and difficult to navigate. On such occasions, it is advisable to spread the content over multiple pages if possible. + +## Why do we need structure? + +To answer this question, let's take a look at [text-start.html](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/html-text-formatting/text-start.html)—the starting point of our running example for this article (a nice hummus recipe). You should save a copy of this file on your local machine, as you'll need it for exercises in subsequent lessons. This document's body currently contains multiple pieces of content. They aren't marked up in any way, but they are separated with line breaks (Enter/Return pressed to go onto the next line). + +However, when you open the document in your browser, you'll see that the text appears as a big chunk! + +![A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.](screen_shot_2017-03-29_at_09.20.35.png) + +This is because there are no elements to give the content structure, so the browser does not know what is a heading and what is a paragraph. Furthermore: + +- Users looking at a web page tend to scan quickly to find relevant content, often just reading the headings, to begin with. (We usually [spend a very short time on a web page](https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/).) If they can't see anything useful within a few seconds, they'll likely get frustrated and go somewhere else. +- Search engines indexing your page consider the contents of headings as important keywords for influencing the page's search rankings. Without headings, your page will perform poorly in terms of {{glossary("SEO")}} (Search Engine Optimization). +- Severely visually impaired people often don't read web pages; they listen to them instead. This is done with software called a [screen reader](https://en.wikipedia.org/wiki/Screen_reader). This software provides ways to get fast access to given text content. Among the various techniques used, they provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly. If headings are not available, they will be forced to listen to the whole document read out loud. +- To style content with {{glossary("CSS")}}, or make it do interesting things with {{glossary("JavaScript")}}, you need to have elements wrapping the relevant content, so CSS/JavaScript can effectively target it. + +Therefore, we need to give our content structural markup. + +## Active learning: Giving our content structure + +Let's jump straight in with a live example. In the example below, add elements to the raw text in the _Input_ field so that it appears as a heading and two paragraphs in the _Output_ field. + +If you make a mistake, you can always reset it using the _Reset_ button. If you get stuck, press the _Show solution_ button to see the answer. + +```html hidden +

    Live output

    + +
    + +

    Editable code

    +

    + Press Esc to move focus away from the code area (Tab inserts a tab character). +

    + + + +
    + + +
    +``` + +```css hidden +html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +``` + +```js hidden +const textarea = document.getElementById("code"); +const reset = document.getElementById("reset"); +const solution = document.getElementById("solution"); +const output = document.querySelector(".output"); +const code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +const htmlSolution = `

    My short story

    +

    + I am a statistician and my name is Trish. +

    +

    + My legs are made of cardboard and I am married to a fish. +

    `; + +let solutionEntry = htmlSolution; + +reset.addEventListener("click", () => { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = "Show solution"; + updateCode(); +}); + +solution.addEventListener("click", () => { + if (solution.value === "Show solution") { + textarea.value = solutionEntry; + solution.value = "Hide solution"; + } else { + textarea.value = userEntry; + solution.value = "Show solution"; + } + updateCode(); +}); + +textarea.addEventListener("input", updateCode); +window.addEventListener("load", updateCode); + +// Stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead +textarea.onkeydown = (e) => { + if (e.code === "Tab") { + e.preventDefault(); + insertAtCaret("\t"); + } + + if (e.code === "Escape") { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + let caretPos = textarea.selectionStart; + + const front = textarea.value.substring(0, caretPos); + const back = textarea.value.substring( + textarea.selectionEnd, + textarea.value.length, + ); + textarea.value = front + text + back; + caretPos += text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code +textarea.onkeyup = function () { + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if (solution.value === "Show solution") { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +}; +``` + +{{ EmbedLiveSample('Active_learning_Giving_our_content_structure', 700, 400, "", "") }} + +## Why do we need semantics? + +Semantics are relied on everywhere around us—we rely on previous experience to tell us what the function of an everyday object is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop," and a green traffic light to mean "go." Things can get tricky very quickly if the wrong semantics are applied. (Do any countries use red to mean "go"? We hope not.) + +In a similar way, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context, the {{htmlelement("Heading_Elements", "h1")}} element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page." + +```html +

    This is a top level heading

    +``` + +By default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above). + +On the other hand, you could make any element _look_ like a top level heading. Consider the following: + +```html + + Is this a top level heading? + +``` + +This is a {{htmlelement("span")}} element. It has no semantics. You use it to wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning. (You'll find out more about these later on in the course.) We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea to use the relevant HTML element for the job. + +## Summary + +This concludes our study of HTML headings and paragraphs. Next, we will look at more aspects of semantic HTML: giving words emphasis. + +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Webpage_metadata", "Learn_web_development/Core/Structuring_content/Emphasis_and_importance", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/newspaper_small.jpg b/files/en-us/learn_web_development/core/structuring_content/headings_and_paragraphs/newspaper_small.jpg similarity index 100% rename from files/en-us/learn/html/introduction_to_html/html_text_fundamentals/newspaper_small.jpg rename to files/en-us/learn_web_development/core/structuring_content/headings_and_paragraphs/newspaper_small.jpg diff --git a/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/screen_shot_2017-03-29_at_09.20.35.png b/files/en-us/learn_web_development/core/structuring_content/headings_and_paragraphs/screen_shot_2017-03-29_at_09.20.35.png similarity index 100% rename from files/en-us/learn/html/introduction_to_html/html_text_fundamentals/screen_shot_2017-03-29_at_09.20.35.png rename to files/en-us/learn_web_development/core/structuring_content/headings_and_paragraphs/screen_shot_2017-03-29_at_09.20.35.png diff --git a/files/en-us/learn_web_development/core/structuring_content/html_forms/index.md b/files/en-us/learn_web_development/core/structuring_content/html_forms/index.md new file mode 100644 index 000000000000000..ecd93ea630cabd7 --- /dev/null +++ b/files/en-us/learn_web_development/core/structuring_content/html_forms/index.md @@ -0,0 +1,89 @@ +--- +title: Forms and buttons in HTML +slug: Learn_web_development/Core/Structuring_content/HTML_forms +page-type: tutorial-chapter +--- + + + +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Planet_data_table", "Learn_web_development/Core/Structuring_content/Debugging_HTML", "Learn_web_development/Core/Structuring_content")}} + +HTML forms and buttons are powerful tools for interacting with users — most commonly they are used for collecting data from users or allowing them to control a user interface. In this article we provide an introduction to the basics of forms and buttons. + + + + + + + + + + + + +
    Prerequisites: + Basic HTML familiarity, as covered in + Basic HTML Syntax. Text-level semantics such as headings and paragraphs and lists. Structural HTML. +
    Learning outcomes: +
      +
    • An appreciation that forms and buttons are the main tools for users to interact with a website, along with links.
      • +
    • The common types of <button>: button, submit, and reset.
      • +
    • Common <input> types: text, number, file, checkbox, radio, password, and search.
      • +
    • Common attributes such as name and value.
      • +
    • Making forms accessible — Correct semantics, the <label> element, and the for attribute.
      • +
    • Other control types: <textarea>, <select>, and <option>.
      • +
    • Client-side validation basics — required, min, max, minlength, maxlength, and pattern.
      • +
    • The <form> element, and the basics of form submission.
      • +
    +
    + +>[!NOTE] +> There are a lot of input types and form features not explicitly mentioned here; the purpose is to get a good general introduction to buttons and form elements, and learn the most common cases. The advanced/specialized cases can be studied on a need-to-know basis, as part of a web developer's constant learning throughout their career. + +## Buttons + +xx + +## Common input types + +xx + +## Accessible forms + + +- Going back to the argument for semantic HTML (see also 2.2 Good document structure), you should understand why it is important to use the right element for the right job. For example, use a `