From 26e2f9883e0e73def04c0e86fec6da3ec42e66b3 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Tue, 5 Mar 2024 14:49:38 +0000 Subject: [PATCH] Redirect pathway to MDN Curriculum and remove links to it (#32513) * redirect pathway and remove links to it * Add content update that includes single link to MDN curriculum * Tweak beginning paragraph --- files/en-us/_redirects.txt | 1 + files/en-us/_wikihistory.json | 14 -- files/en-us/learn/accessibility/index.md | 9 - .../en-us/learn/css/building_blocks/index.md | 9 - files/en-us/learn/css/css_layout/index.md | 9 - files/en-us/learn/css/first_steps/index.md | 9 - files/en-us/learn/css/index.md | 9 - files/en-us/learn/css/styling_text/index.md | 9 - files/en-us/learn/forms/index.md | 9 - .../learn/front-end_web_developer/index.md | 170 ------------------ files/en-us/learn/html/index.md | 9 - .../learn/html/introduction_to_html/index.md | 9 - .../html/multimedia_and_embedding/index.md | 9 - files/en-us/learn/html/tables/index.md | 9 - files/en-us/learn/index.md | 35 ++-- .../learn/javascript/asynchronous/index.md | 9 - .../learn/javascript/building_blocks/index.md | 9 - .../javascript/client-side_web_apis/index.md | 9 - .../learn/javascript/first_steps/index.md | 9 - files/en-us/learn/javascript/index.md | 9 - files/en-us/learn/javascript/objects/index.md | 9 - files/en-us/learn/mathml/first_steps/index.md | 8 - files/en-us/learn/mathml/index.md | 8 - .../index.md | 9 - .../cross_browser_testing/index.md | 9 - .../learn/tools_and_testing/github/index.md | 9 - files/en-us/learn/tools_and_testing/index.md | 9 - .../understanding_client-side_tools/index.md | 9 - files/en-us/web/css/index.md | 9 - files/en-us/web/html/index.md | 9 - files/en-us/web/javascript/index.md | 7 - 31 files changed, 17 insertions(+), 442 deletions(-) delete mode 100644 files/en-us/learn/front-end_web_developer/index.md diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 6515be632c13fa5..ca9faa544fc88cf 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -5246,6 +5246,7 @@ /en-US/docs/Learn/Forms/Your_first_HTML_form /en-US/docs/Learn/Forms/Your_first_form /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 diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index aa012a36a163352..dea675b47878283 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -7844,20 +7844,6 @@ "icyfenix" ] }, - "Learn/Front-end_web_developer": { - "modified": "2020-11-18T06:45:07.853Z", - "contributors": [ - "SphinxKnight", - "iamkiing2000", - "gammlerfranz", - "niceby.collectvibe", - "thewebsolinterns", - "chrisdavidmills", - "ohaver", - "davidmichaelgregg", - "roshan0708" - ] - }, "Learn/Getting_started_with_the_web": { "modified": "2020-12-07T11:57:48.782Z", "contributors": [ diff --git a/files/en-us/learn/accessibility/index.md b/files/en-us/learn/accessibility/index.md index 02d5847e5b8cf13..4122c8e227c2dbd 100644 --- a/files/en-us/learn/accessibility/index.md +++ b/files/en-us/learn/accessibility/index.md @@ -22,15 +22,6 @@ The Firefox Accessibility Inspector is a very useful tool for checking out acces {{EmbedYouTube("7mqqgIxX_NU")}} -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites To get the most out of this module, it would be a good idea to either work through at least the first two modules of the [HTML](/en-US/docs/Learn/HTML), [CSS](/en-US/docs/Learn/CSS), and [JavaScript](/en-US/docs/Learn/JavaScript) topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics. diff --git a/files/en-us/learn/css/building_blocks/index.md b/files/en-us/learn/css/building_blocks/index.md index 9a755ae2fac0b94..27c8e32ce219bc6 100644 --- a/files/en-us/learn/css/building_blocks/index.md +++ b/files/en-us/learn/css/building_blocks/index.md @@ -10,15 +10,6 @@ This module carries on where [CSS first steps](/en-US/docs/Learn/CSS/First_steps The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like [text styling](/en-US/docs/Learn/CSS/Styling_text) and [CSS layout](/en-US/docs/Learn/CSS/CSS_layout). -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites Before starting this module, you should have: diff --git a/files/en-us/learn/css/css_layout/index.md b/files/en-us/learn/css/css_layout/index.md index c49d3ad78ea9971..10ee6dbbcdbb3a7 100644 --- a/files/en-us/learn/css/css_layout/index.md +++ b/files/en-us/learn/css/css_layout/index.md @@ -8,15 +8,6 @@ page-type: learn-module At this point, we've looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to correctly arrange your boxes in relation to the viewport as well as to one another. We've covered the necessary prerequisites, so let's dive deep into CSS layout, looking at such various features as: different display settings, positioning, modern layout tools like flexbox and CSS grid, and some of the legacy techniques you might still want to know about. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites Before starting this module, you should already: diff --git a/files/en-us/learn/css/first_steps/index.md b/files/en-us/learn/css/first_steps/index.md index 7529f53b5271309..812312e0027b9fd 100644 --- a/files/en-us/learn/css/first_steps/index.md +++ b/files/en-us/learn/css/first_steps/index.md @@ -8,15 +8,6 @@ page-type: learn-module CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites Before starting this module, you should have: diff --git a/files/en-us/learn/css/index.md b/files/en-us/learn/css/index.md index d6d8526ceba420f..dc10e267136f247 100644 --- a/files/en-us/learn/css/index.md +++ b/files/en-us/learn/css/index.md @@ -8,15 +8,6 @@ page-type: learn-topic Cascading Style Sheets — or {{glossary("CSS")}} — is the first technology you should start learning after {{glossary("HTML")}}. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites You should learn the basics of HTML before attempting any CSS. We recommend that you work through our [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) module first. diff --git a/files/en-us/learn/css/styling_text/index.md b/files/en-us/learn/css/styling_text/index.md index d1af7fff5343350..4e3a700c680f8d6 100644 --- a/files/en-us/learn/css/styling_text/index.md +++ b/files/en-us/learn/css/styling_text/index.md @@ -8,15 +8,6 @@ page-type: learn-module With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites Before starting this module, you should already have basic familiarity with HTML, as discussed in the [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) module, and be comfortable with CSS fundamentals, as discussed in [Introduction to CSS](/en-US/docs/Learn/CSS/First_steps). diff --git a/files/en-us/learn/forms/index.md b/files/en-us/learn/forms/index.md index 86e4c6d30d3f9e7..15546aef52a65d9 100644 --- a/files/en-us/learn/forms/index.md +++ b/files/en-us/learn/forms/index.md @@ -8,15 +8,6 @@ page-type: learn-module This module provides a series of articles that will help you master the essentials of web forms. Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface. However, for historical and technical reasons, it's not always obvious how to use them to their full potential. In the articles listed below, we'll cover all the essential aspects of Web forms including marking up their HTML structure, styling form controls, validating form data, and submitting data to the server. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites Before starting this module, you should at least work through our [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML). At this point you should find the [Introductory guides](#introductory_guides) easy to understand, and also be able to make use of our [Basic native form controls](/en-US/docs/Learn/Forms/Basic_native_form_controls) guide. diff --git a/files/en-us/learn/front-end_web_developer/index.md b/files/en-us/learn/front-end_web_developer/index.md deleted file mode 100644 index 648572a4c1185b2..000000000000000 --- a/files/en-us/learn/front-end_web_developer/index.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: Front-end web developer -slug: Learn/Front-end_web_developer -page-type: learn-topic ---- - -{{learnsidebar}} - -Welcome to our front-end web developer learning pathway! - -Here we provide you with a structured course that will teach you all you need to know to become a front-end web developer. Work through each section, learning new skills (or improving existing ones) as you go along. Each section includes exercises and assessments to test your understanding before you move forward. - -## Subjects covered - -The subjects covered are: - -- Basic setup and learning how to learn -- Web standards and best practices (such as accessibility and cross-browser compatibility) -- HTML, the language that gives web content structure and meaning -- CSS, the language used to style web pages -- JavaScript, the scripting language used to create dynamic functionality on the web -- Tooling that is used to facilitate modern client-side web development. - -You can work through sections in order, but each one is also self-contained. For example, if you already know HTML, you can skip ahead to the CSS section. - -## Prerequisites - -You don't need any previous knowledge to start this course. All you need is a computer that can run modern web browsers, an internet connection, and a willingness to learn. - -If you are not sure if front-end web development is for you, and/or you want a gentle introduction before starting a longer and more complete course, work through our [Getting started with the web](/en-US/docs/Learn/Getting_started_with_the_web) module first. - -## Getting help - -We have tried to make learning front-end web development as comfortable as possible, but you will probably still get stuck because you don't understand something, or some code is just not working. - -Don't panic. We all get stuck, whether we are beginner or professional web developers. The [Learning and getting help](/en-US/docs/Learn/Learning_and_getting_help) article provides you with a series of tips for looking up information and helping yourself. If you are still stuck, feel free to post a question on our [Discourse forums](/en-US/docs/MDN/Community/Communication_channels#forums). - -Let's get started. Good luck! - -## The learning pathway - -### Getting started - -Time to complete: 1.5–2 hours - -#### Prerequisites - -Nothing except basic computer literacy. - -#### How will I know I'm ready to move on? - -There are no assessments in this part of the course. But make sure you don't skip. It is important to get you set up and ready to do work for exercises later on in the course. - -#### Guides - -- [Installing basic software](/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software) — basic tool setup (15 min read) -- [Background on the web and web standards](/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards) (45 min read) -- [Learning and getting help](/en-US/docs/Learn/Learning_and_getting_help) (45 min read) - -### Semantics and structure with HTML - -Time to complete: 35–50 hours - -#### Prerequisites - -A basic web development environment. - -#### How will I know I'm ready to move on? - -The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module. - -#### Modules - -- [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) (15–20 hour read/exercises) -- [Multimedia and embedding](/en-US/docs/Learn/HTML/Multimedia_and_embedding) (15–20 hour read/exercises) -- [HTML tables](/en-US/docs/Learn/HTML/Tables) (5–10 hour read/exercises) - -### Styling and layout with CSS - -Time to complete: 90–120 hours - -#### Prerequisites - -It is recommended that you have basic HTML knowledge before starting to learn CSS. You should at least study [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) first. - -#### How will I know I'm ready to move on? - -The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module. - -#### Modules - -- [CSS first steps](/en-US/docs/Learn/CSS/First_steps) (10–15 hour read/exercises) -- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks) (35–45 hour read/exercises) -- [CSS styling text](/en-US/docs/Learn/CSS/Styling_text) (15–20 hour read/exercises) -- [CSS layout](/en-US/docs/Learn/CSS/CSS_layout) (30–40 hour read/exercises) - -#### Additional resources - -- [CSS layout cookbook](/en-US/docs/Web/CSS/Layout_cookbook) - -### Interactivity with JavaScript - -Time to complete: 135–185 hours - -#### Prerequisites - -It is recommended that you have basic HTML knowledge before starting to learn JavaScript. You should at least study [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) first. - -#### How will I know I'm ready to move on? - -The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module. - -#### Modules - -- [JavaScript first steps](/en-US/docs/Learn/JavaScript/First_steps) (30–40 hour read/exercises) -- [JavaScript building blocks](/en-US/docs/Learn/JavaScript/Building_blocks) (25–35 hour read/exercises) -- [Introducing JavaScript objects](/en-US/docs/Learn/JavaScript/Objects) (25–35 hour read/exercises) -- [Client-side web APIs](/en-US/docs/Learn/JavaScript/Client-side_web_APIs) (30–40 hour read/exercises) -- [Asynchronous JavaScript](/en-US/docs/Learn/JavaScript/Asynchronous) (25–35 hour read/exercises) - -### Web forms — Working with user data - -Time to complete: 40–50 hours - -#### Prerequisites - -Forms require HTML, CSS, and JavaScript knowledge. Given the complexity of working with forms, it is a dedicated topic. - -#### How will I know I'm ready to move on? - -The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module. - -#### Modules - -- [Web forms](/en-US/docs/Learn/Forms) (40–50 hours) - -### Making the web work for everyone - -Time to complete: 45–55 hours - -#### Prerequisites - -It is good to know HTML, CSS, and JavaScript before working through this section. Many of the techniques and best practices touch on multiple technologies. - -#### How will I know I'm ready to move on? - -The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module. - -#### Modules - -- [Cross-browser testing](/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing) (25–30 hour read/exercises) -- [Accessibility](/en-US/docs/Learn/Accessibility) (20–25 hour read/exercises) - -### Modern tooling - -Time to complete: 55–90 hours - -#### Prerequisites - -It is good to know HTML, CSS, and JavaScript before working through this section, as the tools discussed work alongside many of these technologies. - -#### How will I know I'm ready to move on? - -There are no specific assessment articles in this set of modules. The case study tutorials at the end of the second and third modules prepare you for grasping the essentials of modern tooling. - -#### Modules - -- [Git and GitHub](/en-US/docs/Learn/Tools_and_testing/GitHub) (5 hour read) -- [Understanding client-side web development tools](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools) (20–25 hour read) -- [Understanding client-side JavaScript frameworks](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks) (30-60 hour read/exercises) diff --git a/files/en-us/learn/html/index.md b/files/en-us/learn/html/index.md index 477a95e0e09bda8..a501bb5e6d744b2 100644 --- a/files/en-us/learn/html/index.md +++ b/files/en-us/learn/html/index.md @@ -8,15 +8,6 @@ page-type: learn-topic To build websites, you should know about {{Glossary('HTML')}} — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## 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. 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 6198b6fb714de12..958d1fb3a864e4e 100644 --- a/files/en-us/learn/html/introduction_to_html/index.md +++ b/files/en-us/learn/html/introduction_to_html/index.md @@ -8,15 +8,6 @@ page-type: learn-module 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. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## 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. diff --git a/files/en-us/learn/html/multimedia_and_embedding/index.md b/files/en-us/learn/html/multimedia_and_embedding/index.md index d8a772c7ef8944f..8daa4e326fa031c 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/index.md @@ -8,15 +8,6 @@ page-type: learn-module We've looked at a lot of text so far in this course, but the web would be really boring only using text. Let's start looking at how to make the web come alive with more interesting content! This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites Before starting this module, you should have a reasonable understanding of the basics of HTML, as previously covered in [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML). If you have not worked through this module (or something similar), work through it first, then come back! diff --git a/files/en-us/learn/html/tables/index.md b/files/en-us/learn/html/tables/index.md index 2edcb6bf47d2c11..df407d55b3bf1a4 100644 --- a/files/en-us/learn/html/tables/index.md +++ b/files/en-us/learn/html/tables/index.md @@ -8,15 +8,6 @@ page-type: learn-module 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. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## 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). diff --git a/files/en-us/learn/index.md b/files/en-us/learn/index.md index 44da79d90e36d23..3d0e191656a4992 100644 --- a/files/en-us/learn/index.md +++ b/files/en-us/learn/index.md @@ -6,34 +6,31 @@ page-type: landing-page {{LearnSidebar}} -Welcome to the MDN learning area. This set of articles aims to guide complete beginners to web development with all that they need to start coding websites. - -The aim of this area of MDN is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfortable." From there, you should be able to start making your way, learning from [the rest of MDN](/en-US/), and other intermediate to advanced resources that assume a lot of previous knowledge. +Welcome to the MDN learning area. This set of articles aims to provide complete beginners to web development with fundamental skills for coding websites. The aim is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfortable." From there, you should be able to start making your way, learning from [the rest of MDN](/en-US/), and other intermediate to advanced resources that assume a lot of previous knowledge. If you are a complete beginner, web development can be challenging — we will hold your hand and provide enough detail for you to feel comfortable and learn the topics properly. You should feel at home whether you are a student learning web development (on your own or as part of a class), a teacher looking for class materials, a hobbyist, or someone who just wants to understand more about how web technologies work. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Where to start -- Complete beginner - - : If you are a complete beginner to web development, we'd recommend that you start by working through our [Getting started with the web](/en-US/docs/Learn/Getting_started_with_the_web) module, which provides a practical introduction to web development. -- Beyond the basics - - : If you have a bit of knowledge already, the next step is to learn {{glossary("HTML")}} and {{glossary("CSS")}} in detail: start with our [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) module and move on to our [CSS first steps](/en-US/docs/Learn/CSS/First_steps) module. -- Moving onto scripting - - : If you are comfortable with HTML and CSS already, or you are mainly interested in coding, you'll want to move on to {{glossary("JavaScript")}} or server-side development. Begin with our [JavaScript first steps](/en-US/docs/Learn/JavaScript/First_steps) and [Server-side first steps](/en-US/docs/Learn/Server-side/First_steps) modules. +If you are not sure about committing to learning web development in-depth and want to begin with a taster session, we'd recommend that you start by working through our [Getting started with the web](/en-US/docs/Learn/Getting_started_with_the_web) guides. Beyond that, you should start by learning the following topics: + +- HTML and CSS + - : HTML provides structure for web content, whereas CSS provides instructions to style and lay out that content. See [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) and [CSS first steps](/en-US/docs/Learn/CSS/First_steps) for essential starter information. +- JavaScript + - : JavaScript allows you to code interactive functionality on websites. Begin with [JavaScript first steps](/en-US/docs/Learn/JavaScript/First_steps). - Frameworks and tooling - - : After mastering the essentials of vanilla HTML, CSS, and JavaScript, you should learn about [client-side web development tools](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools), and then consider digging into [client-side JavaScript frameworks](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks), and [server-side website programming](/en-US/docs/Learn/Server-side). + - : After mastering the essentials of vanilla HTML, CSS, and JavaScript, you should learn about [client-side web development tools](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools), and then consider digging into [client-side JavaScript frameworks](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks). You should also consider learning the basic concepts of [server-side website programming](/en-US/docs/Learn/Server-side). > **Note:** Our [glossary](/en-US/docs/Glossary) provides terminology definitions. Besides, if you have a specific question about web development, our [Common questions](/en-US/docs/Learn/Common_questions) section may have something to help you. +> **Callout:** +> +> #### Looking to become a front-end web developer? +> +> If you want to become a front-end web developer and are not sure what to learn first, we'd suggest using the [MDN Curriculum](/en-US/curriculum/) to plan your learning. It provides a structured learning pathway covering the essential skills and practices for being a successful front-end developer, along with recommended learning resources. +> +> [**Get started**](/en-US/curriculum/) + ## Topics covered The following is a list of all the topics we cover in the MDN learning area. diff --git a/files/en-us/learn/javascript/asynchronous/index.md b/files/en-us/learn/javascript/asynchronous/index.md index 28c02ee9aa62cb3..9eed42e5e19b4fb 100644 --- a/files/en-us/learn/javascript/asynchronous/index.md +++ b/files/en-us/learn/javascript/asynchronous/index.md @@ -8,15 +8,6 @@ page-type: learn-module In this module, we take a look at {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}, why it is important, and how it can be used to effectively handle potential blocking operations, such as fetching resources from a server. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites Asynchronous JavaScript is a fairly advanced topic, and you are advised to work through [JavaScript first steps](/en-US/docs/Learn/JavaScript/First_steps) and [JavaScript building blocks](/en-US/docs/Learn/JavaScript/Building_blocks) modules before attempting this. diff --git a/files/en-us/learn/javascript/building_blocks/index.md b/files/en-us/learn/javascript/building_blocks/index.md index 3fa54fe00ea9dfa..4ffa7df19e903bc 100644 --- a/files/en-us/learn/javascript/building_blocks/index.md +++ b/files/en-us/learn/javascript/building_blocks/index.md @@ -8,15 +8,6 @@ page-type: learn-module 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. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites Before starting this module, you should have some familiarity with the basics of [HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) and [CSS](/en-US/docs/Learn/CSS/First_steps), and you should have also worked through our previous module, [JavaScript first steps](/en-US/docs/Learn/JavaScript/First_steps). diff --git a/files/en-us/learn/javascript/client-side_web_apis/index.md b/files/en-us/learn/javascript/client-side_web_apis/index.md index 78d1a6bb6b1b7be..ef3dd22d9b8ec20 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/index.md +++ b/files/en-us/learn/javascript/client-side_web_apis/index.md @@ -8,15 +8,6 @@ page-type: learn-module When writing client-side JavaScript for websites or applications, you will quickly encounter **Application Programming Interfaces** (**APIs**). APIs are programming features for manipulating different aspects of the browser and operating system the site is running on, or manipulating data from other websites or services. In this module, we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites To get the most out of this module, you should have worked your way through the previous JavaScript modules in the series ([First steps](/en-US/docs/Learn/JavaScript/First_steps), [Building blocks](/en-US/docs/Learn/JavaScript/Building_blocks), and [JavaScript objects](/en-US/docs/Learn/JavaScript/Objects)). Those modules typically involve simple API usage, as it is often difficult to write client-side JavaScript examples without them. For this tutorial, we will assume that you are knowledgeable about the core JavaScript language, and we will explore common Web APIs in a bit more detail. diff --git a/files/en-us/learn/javascript/first_steps/index.md b/files/en-us/learn/javascript/first_steps/index.md index fb1a22667c4870d..7f8b6c7178f8412 100644 --- a/files/en-us/learn/javascript/first_steps/index.md +++ b/files/en-us/learn/javascript/first_steps/index.md @@ -8,15 +8,6 @@ page-type: learn-module In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key building blocks in detail, such as variables, strings, numbers and arrays. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites 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: diff --git a/files/en-us/learn/javascript/index.md b/files/en-us/learn/javascript/index.md index 6d30ae644a97aab..32c3c9376d5bdc0 100644 --- a/files/en-us/learn/javascript/index.md +++ b/files/en-us/learn/javascript/index.md @@ -8,15 +8,6 @@ page-type: learn-topic {{Glossary("JavaScript")}} is a programming language that allows you to implement complex functionalities on web pages. Every time a web page does more than just sit there and display static information for you to look at—displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, or more—you can bet that JavaScript is probably involved. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites JavaScript is arguably more difficult to learn than related technologies such as [HTML](/en-US/docs/Learn/HTML) and [CSS](/en-US/docs/Learn/CSS). Before attempting to learn JavaScript, you are strongly advised to get familiar with at least these two technologies first, and perhaps others as well. Start by working through the following modules: diff --git a/files/en-us/learn/javascript/objects/index.md b/files/en-us/learn/javascript/objects/index.md index 52f0f7b43baec35..48dca362185fb04 100644 --- a/files/en-us/learn/javascript/objects/index.md +++ b/files/en-us/learn/javascript/objects/index.md @@ -8,15 +8,6 @@ page-type: learn-module In JavaScript, most things are objects, from core JavaScript features like arrays to the browser {{Glossary("API", "APIs")}} built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages and act as handy data containers. The object-based nature of JavaScript is important to understand if you want to go further with your knowledge of the language, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, then look at how to create your own objects. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites Before starting this module, you should have some familiarity with {{Glossary("HTML")}} and {{Glossary("CSS")}}. You are advised to work through the [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) and [Introduction to CSS](/en-US/docs/Learn/CSS/First_steps) modules before starting on JavaScript. diff --git a/files/en-us/learn/mathml/first_steps/index.md b/files/en-us/learn/mathml/first_steps/index.md index 67f902e6e1a4069..85cf9778b4ef05d 100644 --- a/files/en-us/learn/mathml/first_steps/index.md +++ b/files/en-us/learn/mathml/first_steps/index.md @@ -8,14 +8,6 @@ page-type: learn-module MathML is the markup language used to write mathematical formulas in web pages. This module provides a gentle beginning to your path towards MathML mastery with the basics of how it works, what the syntax looks like, and how you can start using it inside HTML. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites Before starting this module, you should have: diff --git a/files/en-us/learn/mathml/index.md b/files/en-us/learn/mathml/index.md index c06ffa0d249bcf3..de45c289757a17a 100644 --- a/files/en-us/learn/mathml/index.md +++ b/files/en-us/learn/mathml/index.md @@ -10,14 +10,6 @@ Mathematical Markup Language — or {{glossary("MathML")}} — is the markup lan > **Warning:** In practice, MathML content is generated from [lightweight markup languages](https://en.wikipedia.org/wiki/Lightweight_markup_language) (e.g. [LaTeX](https://en.wikipedia.org/wiki/LaTeX)) or using [graphical user interface](https://en.wikipedia.org/wiki/Graphical_user_interface): if you just need to integrate mathematical formulas in your web pages, the tips from the [Authoring MathML](/en-US/docs/Web/MathML/Authoring) page should be enough. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites Before attempting to learn MathML, it is assumed that you have some basic knowledge of [HTML](/en-US/docs/Learn/HTML) and [CSS](/en-US/docs/Learn/CSS). Consequently, you are strongly advised to get familiar with at least these two technologies first. Start by working through the following modules: diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/index.md index 3afc5bb20a32521..6bd8ed37aea4f0a 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/index.md @@ -27,15 +27,6 @@ You should really learn the basics of the core web languages first before attemp Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Introductory guides - [1. Introduction to client-side frameworks](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction) diff --git a/files/en-us/learn/tools_and_testing/cross_browser_testing/index.md b/files/en-us/learn/tools_and_testing/cross_browser_testing/index.md index 64f0c1a712ca780..8028dab927a1241 100644 --- a/files/en-us/learn/tools_and_testing/cross_browser_testing/index.md +++ b/files/en-us/learn/tools_and_testing/cross_browser_testing/index.md @@ -8,15 +8,6 @@ page-type: learn-module This module focuses on testing web projects across different browsers. We look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites You should really learn the basics of the core [HTML](/en-US/docs/Learn/HTML), [CSS](/en-US/docs/Learn/CSS), and [JavaScript](/en-US/docs/Learn/JavaScript) languages first before attempting to use the tools detailed here. diff --git a/files/en-us/learn/tools_and_testing/github/index.md b/files/en-us/learn/tools_and_testing/github/index.md index 8727da93597362b..1c42beb3b789911 100644 --- a/files/en-us/learn/tools_and_testing/github/index.md +++ b/files/en-us/learn/tools_and_testing/github/index.md @@ -21,15 +21,6 @@ VCSes provide tools to meet the above needs. [Git](https://git-scm.com/) is an e > **Note:** Git is actually a _distributed_ version control system, meaning that a complete copy of the repository containing the codebase is made on your computer (and everyone else's). You make changes to your own copy and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites To use Git and GitHub, you need: diff --git a/files/en-us/learn/tools_and_testing/index.md b/files/en-us/learn/tools_and_testing/index.md index 51326cc0c7fcc19..1da827989119b61 100644 --- a/files/en-us/learn/tools_and_testing/index.md +++ b/files/en-us/learn/tools_and_testing/index.md @@ -14,15 +14,6 @@ Working out what tools you should be using can be a difficult process, so we hav > **Note:** We have referenced a number of tools in this topic, not because we endorse them or think they are the best, but because we know they work and have good industry support. In most cases there are other tools available, old ones will go out of fashion, and new ones will no doubt appear. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Prerequisites You should really learn the basics of the core [HTML](/en-US/docs/Learn/HTML), [CSS](/en-US/docs/Learn/CSS), and [JavaScript](/en-US/docs/Learn/JavaScript) languages first before attempting to use many of the tools detailed here. For example, you'll need to know the fundamentals of these languages before you start debugging problems in complex web code, making effective use of JavaScript frameworks, or writing tests and running them against your code using test runners. diff --git a/files/en-us/learn/tools_and_testing/understanding_client-side_tools/index.md b/files/en-us/learn/tools_and_testing/understanding_client-side_tools/index.md index 1264985bfb9a034..ca7b822f9d066d1 100644 --- a/files/en-us/learn/tools_and_testing/understanding_client-side_tools/index.md +++ b/files/en-us/learn/tools_and_testing/understanding_client-side_tools/index.md @@ -12,15 +12,6 @@ Client-side tooling can be intimidating, but this series of articles aims to ill You should really learn the basics of the core [HTML](/en-US/docs/Learn/HTML), [CSS](/en-US/docs/Learn/CSS), and [JavaScript](/en-US/docs/Learn/JavaScript) languages first before attempting to use the tools detailed here. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Guides - [1. Client-side tooling overview](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) diff --git a/files/en-us/web/css/index.md b/files/en-us/web/css/index.md index bf7842f09e06756..96d47d7dfa1bb10 100644 --- a/files/en-us/web/css/index.md +++ b/files/en-us/web/css/index.md @@ -21,15 +21,6 @@ After CSS 2.1, the scope of the specification increased significantly and the pr - CSS Reference - : Our [exhaustive CSS reference](/en-US/docs/Web/CSS/Reference) for seasoned Web developers describes every property and concept of CSS. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Tutorials Our [CSS Learning Area](/en-US/docs/Learn/CSS) features multiple modules that teach CSS from the ground up — no previous knowledge required. diff --git a/files/en-us/web/html/index.md b/files/en-us/web/html/index.md index 79f97c691193815..f2eb2e168d3394b 100644 --- a/files/en-us/web/html/index.md +++ b/files/en-us/web/html/index.md @@ -25,15 +25,6 @@ The articles below can help you learn more about HTML. - HTML Reference - : In our extensive [HTML reference](/en-US/docs/Web/HTML/Reference) section, you'll find the details about every element and attribute in HTML. -> **Callout:** -> -> #### Looking to become a front-end web developer? -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Beginner's tutorials Our [HTML Learning Area](/en-US/docs/Learn/HTML) features multiple modules that teach HTML from the ground up — no previous knowledge required. diff --git a/files/en-us/web/javascript/index.md b/files/en-us/web/javascript/index.md index 99edaa7df11ab22..fe55b4591f2e0ca 100644 --- a/files/en-us/web/javascript/index.md +++ b/files/en-us/web/javascript/index.md @@ -23,13 +23,6 @@ JavaScript documentation of core language features (pure [ECMAScript](/en-US/doc For more information about JavaScript specifications and related technologies, see [JavaScript technologies overview](/en-US/docs/Web/JavaScript/JavaScript_technologies_overview). -> **Callout:** **Looking to become a front-end web developer?** -> -> We have put together a course that includes all the essential information you need to -> work towards your goal. -> -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) - ## Tutorials Learn how to program in JavaScript with guides and tutorials.