diff --git a/files/en-us/learn_web_development/core/version_control/index.md b/files/en-us/learn_web_development/core/version_control/index.md index 774f30545c5a9f1..8fb838923b3c330 100644 --- a/files/en-us/learn_web_development/core/version_control/index.md +++ b/files/en-us/learn_web_development/core/version_control/index.md @@ -8,33 +8,33 @@ page-type: learn-module {{PreviousMenu("Learn_web_development/Core/Design_for_developers", "Learn_web_development/Core")}} -Version control tools are an essential part of modern workflows, for backing up and collaborating on codebases. This module takes you through the essentials of version control using Git and GitHub. +Version control tools (often called **Version Control Systems**, or **VCS**) are an essential part of modern workflows, for backing up and collaborating on codebases. This module takes you through the essentials of version control using Git and GitHub. ## Overview -VCSes are essential for software development: +Version control tools are essential for software development: - It is rare that you will work on a project completely on your own, and as soon as you start working with other people you start to run the risk of conflicting with each other's work — this is when both of you try to update the same piece of code at the same time. You need to have some kind of mechanism in place to manage the occurrences, and help avoid loss of work as a result. - When working on a project on your own or with others, you'll want to be able to back up the code in a central place, so it is not lost if your computer breaks. - You will also want to be able to roll back to earlier versions if a problem is later discovered. You might have started doing this in your own work by creating different versions of the same file, e.g. `myCode.js`, `myCode_v2.js`, `myCode_v3.js`, `myCode_final.js`, `myCode_really_really_final.js`, etc., but this is really error-prone and unreliable. - Different team members will commonly want to create their own separate versions of the code (called **branches** in Git), work on a new feature in that version, and then get it merged in a controlled manner (in GitHub we use **pull requests**) with the master version when they are done with it. -VCSes provide tools to meet the above needs. [Git](https://git-scm.com/) is an example of a VCS, and [GitHub](https://github.com/) is a website + infrastructure that provides a Git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more. +Version control tools meet the above needs. [Git](https://git-scm.com/) is an example of a version control tool, and [GitHub](https://github.com/) is a website + infrastructure that provides a Git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more. > [!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. +> Git is actually a _distributed_ version control tools, 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. ## Prerequisites To use Git and GitHub, you need: - A desktop computer with Git installed on it (see the [Git downloads page](https://git-scm.com/downloads)). -- A tool to use Git. Depending on how you like to work, you could use a [Git GUI client](https://git-scm.com/downloads/guis/) (we'd recommend GitHub Desktop, SourceTree or Git Kraken) or just stick to using a terminal window. In fact, it is probably useful for you to get to know at least the basics of git terminal commands, even if you intend to use a GUI. +- A tool to use Git. Depending on how you like to work, you could use a [Git GUI client](https://git-scm.com/downloads/guis/) (we'd recommend [GitHub Desktop](https://desktop.github.com/download/), [SourceTree](https://www.sourcetreeapp.com/) or [Git Kraken](https://www.gitkraken.com/)) or just stick to using a terminal window. In fact, it is probably useful for you to get to know at least the basics of git terminal commands, even if you intend to use a GUI. - A [GitHub account](https://github.com/signup). If you haven't already got one, sign up now using the provided link. -In terms of prerequisite knowledge, you don't need to know anything about web development, Git/GitHub, or VCSes to start this module. However, it is recommended that you know some coding so that you have reasonable computer literacy, and some code to store in your repositories! +In terms of prerequisite knowledge, you don't need to know anything about web development, Git/GitHub, or version control to start this module. However, it is recommended that you know some coding so that you have reasonable computer literacy, and some code to store in your repositories! -It is also preferable that you have some basic terminal knowledge, so for example moving between directories, creating files, and modifying the system `PATH`. +It is also preferable that you have some basic terminal knowledge, so for example moving between directories and creating files. You can find out all the basics in our [Command line crash course](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line). > [!NOTE] > GitHub is not the only site/toolset you can use with Git. There are other alternatives such as [GitLab](https://about.gitlab.com/) that you could try, and you could also try setting your own Git server up and using it instead of GitHub. We've only stuck with GitHub in this course to provide a single way that works. @@ -61,7 +61,7 @@ Note that the links below take you to resources on external sites. Eventually, w - [Hello, World (from GitHub)](https://docs.github.com/en/get-started/start-your-journey/hello-world) - : This is a good place to start — this practical guide gets you to jump right into using GitHub, learning the basics of Git such as creating repositories and branches, making commits, and opening and merging pull requests. - [Git Handbook (from GitHub)](https://docs.github.com/en/get-started/using-git/about-git) - - : This Git Handbook goes into a little more depth, explaining what a VCS is, what a repository is, how the basic GitHub model works, Git commands and examples, and more. + - : This Git Handbook goes into a little more depth, explaining what a version control tool is, what a repository is, how the basic GitHub model works, Git commands and examples, and more. - [Forking Projects (from GitHub)](https://docs.github.com/en/get-started/exploring-projects-on-github/contributing-to-a-project) - : Forking projects is essential when you want to contribute to someone else's code. This guide explains how. - [About Pull Requests (from GitHub)](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests) diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md index 10798da468ff001..87574b2d746f829 100644 --- a/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md +++ b/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md @@ -8,13 +8,12 @@ page-type: tutorial-chapter {{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Installing_software", "Learn_web_development/Getting_started/Environment_setup/Code_editors", "Learn_web_development/Getting_started/Environment_setup")}} -> [!NOTE] -> The content in this article is currently incomplete, sorry about that! We are working hard to improve the MDN Learn Web Development section, and we will have places marked as incomplete ("TODO") finished soon. - -By this point in the module, you should have at least two web browsers installed on your computer. This article goes a little deeper into using browsers, looking at how a web browser works, the difference between some of the common items you'll interact with, and how to search for information. +By this point in the module, you should have multiple modern web browsers installed on your computer or other available devices. This article goes deeper into using browsers, looking at how a web browser works, the difference between some of the everyday things you'll interact with, and how to search for information. > [!NOTE] -> If you don't have any browsers installed beyond the default one that came with your device, get some more installed. See [Installing modern web browsers](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software#installing_modern_web_browsers). +> If you don't have any browsers installed beyond the default ones that came with your devices, install some others. See [Modern web browsers](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software#modern_web_browsers) for more information. + +As with any area of knowledge, the web comes with a lot of jargon and technical terminology. Don't worry: We won't overwhelm you with all of it upfront (you can check the [glossary](/en-US/docs/Glossary) if you're curious). However, there are some basic terms you need to understand from the beginning since you'll hear these expressions all the time. We introduce some important terms below. @@ -28,8 +27,8 @@ By this point in the module, you should have at least two web browsers installed @@ -37,26 +36,18 @@ By this point in the module, you should have at least two web browsers installed
Learning outcomes:
    -
  • How a web browser works at a basic level
  • The difference between a web browser, a website, and a search engine.
  • +
  • How a web browser works at a basic level.
  • Searching for information.
-## How the web works: the basics - -TODO - ## The difference between web page, website, web server, and search engine -In this section, we describe various web-related concepts: web pages, websites, web servers, and search engines. These terms are often confused by newcomers to the web or are incorrectly used. Let's make sure you know what they each mean! - -As with any area of knowledge, the web comes with a lot of jargon. Don't worry. We won't overwhelm you with all of it (we have a [glossary](/en-US/docs/Glossary) if you're curious). However, there are a few basic terms you need to understand at the outset since you'll hear these expressions all the time as you read on. It's easy to mix these terms since they refer to related but different functionalities. You'll sometimes see these terms misused in news reports and elsewhere, so getting them mixed up is understandable. - -We'll cover these terms and technologies in more detail as we explore further, but these quick definitions will be a great start for you: +We will start by describing various web-related concepts: web pages, websites, web servers, and search engines. These terms are often confused by newcomers to the web or are incorrectly used. Let's make sure you know what they each mean! Let's start with some definitions: -- web page - - : A document which can be displayed in a web browser such as Firefox, Google Chrome, Opera, Microsoft Edge, or Apple Safari. These are also often called just "pages." -- website - - : A collection of web pages which are grouped together and usually connected together in various ways. Often called a "website" or a "site." -- web server +- **Web page** + - : A document that can be displayed in a web {{Glossary("browser")}}. These are also often called just "pages". Such documents are written in the {{Glossary("HTML")}} language (which we look at in more detail later on). +- **Website** + - : A collection of web pages grouped together into a single resourse, with links connecting them together. Often called a "site". +- **Web server** - : A computer that hosts a website on the Internet. -- search engine - - : A web service that helps you find other web pages, such as Google, Bing, Yahoo, or DuckDuckGo. Search engines are normally accessed through a web browser (e.g. you can perform search engine searches directly in the address bar of Firefox, Chrome, etc.) or through a web page (e.g. [bing.com](https://www.bing.com/) or [duckduckgo.com](https://duckduckgo.com/)). +- **Search engine** + - : A web service that helps you find other web pages, such as Google, Bing, Yahoo, or DuckDuckGo. Search engines are normally accessed through a web browser (for example, you can perform search engine searches directly in the address bar of Firefox, Chrome, etc.) or through a web page (for example, [bing.com](https://www.bing.com/) or [duckduckgo.com](https://duckduckgo.com/)). Let's look at an analogy — a public library. This is what you would generally do when visiting a library: @@ -64,41 +55,56 @@ Let's look at an analogy — a public library. This is what you would generally 2. Make a note of the catalog number of the book. 3. Go to the particular section containing the book, find the right catalog number, and get the book. -Let's compare the library with a web server: +Let's compare a public library with the web: - The library is like a web server. It has several sections, which is similar to a web server hosting multiple websites. - The different sections (science, math, history, etc.) in the library are like websites. Each section is like a unique website (two sections do not contain the same books). -- The books in each section are like webpages. One website may have several webpages, e.g., the Science section (the website) will have books on heat, sound, thermodynamics, statics, etc. (the webpages). Webpages can each be found at a unique location (URL). +- The books in each section are like web pages. One website may have several web pages, for example, the Science section (the website) will have books on heat, sound, thermodynamics, statics, etc. - The search index is like the search engine. Each book has its own unique location in the library (two books cannot be kept at the same place) which is specified by the catalog number. +Let's now take the time to look at each term in a little bit more detail. + ### Web page -A **web page** is a simple document displayable by a {{Glossary("browser")}}. Such documents are written in the {{Glossary("HTML")}} language (which we look into in more detail in [other articles](/en-US/docs/Web/HTML)). A web page can embed a variety of different types of resources such as: +A **web page** is a simple document displayable by a browser. A web page can embed a variety of different types of resources such as: -- _style information_ — controlling a page's look-and-feel -- _scripts_ — which add interactivity to the page -- _media_ — images, sounds, and videos. +- _Style information_ — controlling a page's look-and-feel. +- _Scripts_ — which add interactivity to the page. +- _Media_ — images, sounds, and videos. > [!NOTE] -> Browsers can also display other documents such as {{Glossary("PDF")}} files or images, but the term **web page** specifically refers to HTML documents. Otherwise, we only use the term **document**. +> Browsers can also display other documents such as {{Glossary("PDF")}} files and other resources such as images or videos, but the term **web page** specifically refers to HTML documents. -All web pages available on the web are reachable through a unique address. To access a page, just type its address in your browser address bar: +All web pages can each be found at a unique location (web address, also called a [URL](/en-US/docs/Glossary/URL)). To access a page, just type its address in your browser address bar: ![Example of a web page address in the browser address bar](web-page.jpg) +> [!CALLOUT] +> +> **Try it out** +> +> Try loading one of your favorite websites in a browser now. + ### Website -A _website_ is a collection of linked web pages (plus their associated resources) that share a unique domain name. Each web page of a given website provides explicit links—most of the time in the form of clickable portions of text—that allow the user to move from one page of the website to another. +A _website_ is a collection of linked web pages (plus their associated resources) that share a unique [domain name](/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name). Each web page of a given website provides explicit links—most of the time in the form of clickable portions of text—that allow the user to move from one page of the website to another. -To access a website, type its domain name in your browser address bar, and the browser will display the website's main web page, or _homepage_ (casually referred as "the home"): +When you load your favourite website in a browser, it tends to first display the website's main web page, or _homepage_ (casually referred to as "home"): ![Example of a website domain name in the browser address bar](web-site.jpg) -Note that it is also possible to have a _single-page website_: a site that consists of a single web page which is dynamically updated with new content when needed. +> [!CALLOUT] +> +> **Try it out** +> +> Try clicking some menu items or links to look at some different pages on your favourite website. + +> [!NOTE] +> It is also possible to have a [_single-page app_](/en-US/docs/Glossary/SPA): a website that consists of a single web page that is dynamically updated with new content when needed. ### Web server -A _web server_ is a computer hosting one or more _websites_. "Hosting" means that all the _web pages_ and their supporting files are available on that computer. The _web server_ will send any _web page_ from the _website_ it is hosting to any user's browser, per user request. +A _web server_ is a computer hosting one or more _websites_. "Hosting" means that all the _web pages_ and their associated files are available on that computer. The _web server_ will send web page files it is hosting to a user's browser when they attempt to load it. Don't confuse _websites_ and _web servers_. For example, if you hear someone say, "My website is not responding", it actually means that the _web server_ is not responding and therefore the _website_ is not available. More importantly, since a web server can host multiple websites, the term _web server_ is never used to designate a website, as it could cause great confusion. In our previous example, if we said, "My web server is not responding", it means that multiple websites on that web server are not available. @@ -106,16 +112,106 @@ Don't confuse _websites_ and _web servers_. For example, if you hear someone say Search engines are a common source of confusion on the web. A search engine is a special kind of website that helps users find web pages from _other_ websites. -There are plenty out there: [Google](https://www.google.com/), [Bing](https://www.bing.com/), [Yandex](https://yandex.com/), [DuckDuckGo](https://duckduckgo.com/), and many more. Some are generic, some are specialized about certain topics. +There are plenty out there: [Google](https://www.google.com/), [Bing](https://www.bing.com/), [Yandex](https://yandex.com/), [DuckDuckGo](https://duckduckgo.com/), and many more. Some are generic, some are specialized around certain topics. + +Many beginners on the web confuse search engines and browsers. Let's make it clear: A _browser_ is a piece of software that retrieves and displays web pages; a _search engine_ is a website that helps people find web pages from other websites. The confusion arises because, the first time someone launches a browser, the browser often displays a search engine's homepage or a search box allowing them to search for a term using that search engine. Most browsers also allow their users to use a search engine by typing search terms directly into the browser address bar. -Many beginners on the web confuse search engines and browsers. Let's make it clear: A **_browser_** is a piece of software that retrieves and displays web pages; a **_search engine_** is a website that helps people find web pages from other websites. The confusion arises because, the first time someone launches a browser, the browser displays a search engine's homepage. This makes sense, because, obviously, the first thing you want to do with a browser is to find a web page to display. Don't confuse the infrastructure (e.g., the browser) with the service (e.g., the search engine). The distinction will help you quite a bit, but even some professionals speak loosely, so don't feel anxious about it. +This all makes sense because the first thing people tend to want to do with a browser is find a web page to display. Don't confuse the software (the browser) with the service (the search engine). Here is an instance of Firefox showing a Google search box as its default startup page: ![Example of Firefox nightly displaying a custom Google page as default](search-engine.jpg) +> [!CALLOUT] +> +> **Try it out** +> +> Do a search in a search engine by: +> +> - Going to a search engine homepage and entering a search term. +> - Entering a search term into the browser address bar. + +## How the web works: the basics + +In many parts of the world, the web has become just as essential a tool to our everyday lives as cutlery, bicycles and cars, or toothbrushes. If that sounds unrealistic to you, just think about how often you use a website or mobile phone app each day! Even if you are not typing a web address into a web browser to access content or services, the chances are that the app you are making use of is probably using web technology behind the scenes to grab data to present to you. + +When you access the web, quite a lot happens between your first interaction (for example, typing a web address (URL) into a browser and pressing Enter/Return) and the result of your action being presented to you (for example, the website appearing in your web browser): + +1. The web browser requests the resource (for example, a web page, some data, or an image or video) you want to access from the web server it is stored on. Such requests (and the resulting responses) are made using a technology called [HTTP](/en-US/docs/Glossary/HTTP) (Hypertext Transfer Protocol), which uses a language of verbs (such as **GET**) to describe what should happen. +2. If the request is successful, the web server sends an HTTP response back to the web browser containing the requested resource. +3. In some cases, the requested resource will then fire off more HTTP requests, which will result in more responses. For example: + 1. When a website is loaded, initially the main index HTML file of the site's home page is requested. + 2. When that file is received by the browser, it will start to parse it, and will probably find instructions to make more requests. As discussed above, these might be for files to embed such as images, style information, scripts, and so on. +4. When all of the resources have been requested, the web browser parses and renders them as required, before displaying the result to the user. + +This description of how the web works is heavily simplified, but it is all you really need to know at this point. You will find a more detailed account of how web pages and requested and rendered by a web browser in our [Web standards](/en-US/docs/Learn_web_development/Getting_started/Web_standards) module, slightly later on. + +For now, try opening a web browser and loading up a couple of your favourite sites, thinking about the above steps as you do so. + ## Searching for information -TODO +As a web developer, you will spend a lot of time searching for information, from syntax you can't remember to solutions to specific problems. It is therefore a good idea to learn how to effecively search the web. + +If you are looking for general information about a specific web technology feature, you should type the name of the feature into the MDN search box. For example, try typing `box model`, `fetch()` or `video element` into the the search box and see what comes up. If you don't find the information you need, try expanding your search — try your search term in a search engine. + +If you are looking for a solution to a specific problem, such as `how to print out the fibonacci sequence with JavaScript` or `how to calculate whether a number is a prime number with JavaScript`, it is a good idea to search on a website such as [StackOverflow](https://stackoverflow.com), which is a community dedicated to answering programming problems. Again, try using a general search engine if a specific site doesn't give you a helpful answer. + +> [!CALLOUT] +> +> **Try it out** +> +> Try some searches, as indicated above: +> +> - Begin by searching for the exact terms we've included above. +> - Next, move on to searching for some topics of your own that you'd like to learn about. Try using more and less specific searches and different related terms to see what works best. +> - See our [Search tips](#search_tips) for more things to try. + +### Using AI + +AI-generated search results are a very popular way of receiving information. They basically provide a superpowered search: they do a lot of searching in the background, before compiling the results into a single, easily-digestible answer. Common choices are [ChatGPT](https://chatgpt.com), [Google Gemini](https://gemini.google.com/app), and [Microsoft Copilot](https://copilot.microsoft.com), accessed either directly in a chat format, or via AI-powered in-app help or automation systems. + +When learning to code, AI chat prompts can be useful in a variety of ways: + +- Doing conventional searches, like the examples above. +- Figuring out bugs in a block of code. If you are getting frustrated because your code is not working, you can paste your code into an AI chat prompt, preceeded by a question such as `Where is the mistake in this code?` +- Generating an optimized version of a specific block of code. This can be useful when you've written a block of code that works, but you want to find out how it could be done more efficiently, or in a more robust way that solves more use cases. +- Providing advice on how to do something. For example, if you don't just want to know where the bug is in a block of code, but instead you want advice on what strategy to use to debug it. + +> [!CALLOUT] +> +> **Try it out** +> +> Try using a couple of AI tools to do some searches. + +### A cautionary tale + +In truth, AI can do so much that you may start to wonder why you need to learn to code. + +But wait! The following is important: **You still need to understand what you are trying to do at a high level, what the code is doing, and where each piece of code needs to be used**. If you don't, you won't be very useful when trying to solve real-world problems. This means that you still need to learn to code. AI can be a really useful tool to help you find answers more quickly, but if you just type every question you are asked into an AI prompt, you won't understand how anything works. + +In addition: + +- AI tools present their answers in a confident, authoritative voice, but they can often be misleading or just plain wrong. Some of the errors they make can be very subtle. They don't have any innate intelligence of their own — they are basically advanced pattern matching tools. AI tools compile their answers from other sources out there, so will hoover up wrong information as well as correct information. Even two correct sources can be combined to create an answer that is incorrect. +- Newer information may not be available, or answers may be skewed to older and more prevalent documentation, so "how to do X in JS" might give you outdated guidance. + +As a result, you need to be careful to check the answers they give you, and not just trust everything without question. + +**When you are learning, spend time trying to solve the problem yourself before searching for an answer, whether you are using AI or a conventional search engine. It will make you a better developer.** + +### Search tips + +- You should include the language you are using in the search term, as shown in the examples above. If you just typed in `how to print out the fibonacci sequence`, you would likely end up with several solutions in Python, C++, Java, Ruby, or other languages — not quite as helpful when you are trying to learn JavaScript! +- When you find a useful answer, bookmark or make a copy of it somewhere so you can find it again later. You'll be amazed how many times you run into the same problem. +- If your code is returning a specific error message, try entering the error into a search engine or AI prompt. Other people will probably have already tackled the same error in the past and recorded solutions publicly somewhere. +- If possible, stick with recommended sites like MDN and [StackOverflow](https://stackoverflow.com). +- There are many advanced search techniques you can use in search engines that will give you better results than just typing a plain search term. Typing in a plain search term such as `ant fish cheese` will return results that contain any combination of those words. However, most search engines support variations of the following formats: + + - Typing in `"ant fish cheese"` (with the quotes) will only return results that contain that exact phrase. + - `"ant cheese" -fish` will return results that contain `ant` and/or `cheese` but not `fish`. + - `and OR cheese` will only return results with one term or the other, not both. From our testing, this one only seemed to work effectively in Google. + - `intitle:cheese` will only return results that have "cheese" in the main title of the page. + + > [!NOTE] + > There are many other techniques you can use in various different search engines. Try seeing what others you can find — some useful resources are [Refine Google Searches](https://support.google.com/websearch/answer/2466433?hl=en), [How to use advanced syntax on DuckDuckGo Search](https://duckduckgo.com/duckduckgo-help-pages/results/syntax/), and [Microsoft: Advanced search options](https://support.microsoft.com/en-us/topic/advanced-search-options-b92e25f1-0085-4271-bdf9-14aaea720930). {{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Installing_software", "Learn_web_development/Getting_started/Environment_setup/Code_editors", "Learn_web_development/Getting_started/Environment_setup")}} diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md index 14ca4772b0e78f9..6cdca7db034bdf3 100644 --- a/files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md +++ b/files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md @@ -38,11 +38,14 @@ Previously, we told you to install a code editor, as you'll need one to work thr Binary file editors like Microsoft Word are unsuitable for editing code. You need something that cleanly handles and outputs plain text. -Default OS plain text editors can be OK, for example, TextEdit on macOS, or Notepad on Windows, but they also have limitations. +You probably already have a basic text editor on your computer. By default Windows includes [Notepad](https://en.wikipedia.org/wiki/Microsoft_Notepad) and macOS comes with [TextEdit](https://en.wikipedia.org/wiki/TextEdit). Linux distros vary; the Ubuntu 22.04 LTS release comes with [GNOME Text Editor](https://en.wikipedia.org/wiki/GNOME_Text_Editor) by default. Default OS plain text editors can be OK, but they also have limitations: They don't come with much of the functionality described below. -You are better off with a fully-fledged code editor like [Visual Studio Code](https://code.visualstudio.com/) (multiplatform, free), Sublime Text (multiplatform, not free) or Notepad++ (Windows, free). We would recommend Visual Studio Code, as it is the editor we mostly use. If you want to use another code editor, that's fine. It won't work exactly the same way as Visual Studio Code, but many of the core features will probably be similar. +You are better off with a fully-fledged code editor like [Visual Studio Code](https://code.visualstudio.com/) (multiplatform, free), [Sublime Text](https://www.sublimetext.com/) (multiplatform, not free) or [Notepad++](https://notepad-plus-plus.org/) (Windows, free). -Integrated Development Environments (IDEs) such as Visual Studio (Windows, not free), NetBeans (multiplatform, free), and WebStorm (multiplatform, not free) tend to have more features than simple code editors but tend to be more complex than what you need at this stage in your learning journey. +We would recommend Visual Studio Code, as it is the editor we mostly use. If you do not already have Visual Studio Code (or another code editor) installed, [install it now](https://code.visualstudio.com/). + +> [!NOTE] +> Integrated Development Environments (IDEs) such as [NetBeans](https://netbeans.apache.org/front/main/index.html) (multiplatform, free), and [WebStorm](https://www.jetbrains.com/webstorm/) (multiplatform, not free) tend to have more features than simple code editors but tend to be more complex than what you need at this stage in your learning journey. ## Basic code editor functionality diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/installing_software/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/installing_software/index.md index 598913442e2f506..b0bd5f27e6779ab 100644 --- a/files/en-us/learn_web_development/getting_started/environment_setup/installing_software/index.md +++ b/files/en-us/learn_web_development/getting_started/environment_setup/installing_software/index.md @@ -8,7 +8,7 @@ page-type: tutorial-chapter {{NextMenu("Learn_web_development/Getting_started/Environment_setup/Browsing_the_web", "Learn_web_development/Getting_started/Environment_setup")}} -In this article, we show you what tools you need to do simple web development and how to install them properly. We'll set you up with the bare minimum of tools for now, including a code editor and some modern web browsers. +In this article, we discuss what software you need to do simple web development and what you need to install now, including a code editor and some modern web browsers. @@ -23,42 +23,86 @@ In this article, we show you what tools you need to do simple web development an
  • Understand what software you need to get started.
  • -
  • Install basic software.
  • -
  • Understand in general what software professional web developers use.
  • +
  • Install a code editor, some modern browsers, and a local testing server.
  • +
  • Explore options for other common types of apps.
-## Installing a code editor +## Code editors -You probably already have a basic text editor on your computer. By default Windows includes [Notepad](https://en.wikipedia.org/wiki/Microsoft_Notepad) and macOS comes with [TextEdit](https://en.wikipedia.org/wiki/TextEdit). Linux distros vary; the Ubuntu 22.04 LTS release comes with [GNOME Text Editor](https://en.wikipedia.org/wiki/GNOME_Text_Editor) by default. +A decent code editor is one of the most important things for any developer to have available on their machine. As well as being the place where you write your code, code editors have a whole host of other functionality available. We have dedicated an entire article to code editors later on in the series. -For web development, you can probably do better than Notepad or TextEdit. We recommend starting with [Visual Studio Code](https://code.visualstudio.com/), which is a free editor that offers live previews, code hints, and many other features. +For now, we would recommend that you install [Visual Studio Code](https://code.visualstudio.com/), as it is available across different platforms, has a great feature set and support, and is the editor we mostly use. You should install this now to follow along with the rest of this article. -## Installing modern web browsers +## Modern web browsers -For now, we'll install a couple of desktop web browsers to test our code in. If possible, make sure you have one browser from each line installed and available to test on (so you don't just test in multiple browsers based on the same rendering engine): +Having modern web browsers available to you is essential for web development so that you can test your websites or apps on the browsers your visitors use to access them. You also need to keep your web browsers up-to-date so that they support the latest web technologies and have the latest security fixes applied. -- Chromium: [Chrome](https://www.google.com/chrome/), [Opera](https://www.opera.com/), [Brave](https://brave.com/), [Microsoft Edge](https://www.microsoft.com/en-us/edge) -- Gecko: [Firefox](https://www.mozilla.org/en-US/firefox/new/) -- WebKit: [Safari](https://www.apple.com/safari/) (macOS and iOS only) +> [!NOTE] +> Most browswers tend to install updates automatically, applying the changes when they are restarted. You can usually check for updates on the browser "About" page, for example available in the menu at _Firefox_ > _About Firefox_ or _Chrome_ > _About Google Chrome_ on Firefox/Chrome for macOS, or the menu icon > _Help_ > _About Firefox_ or menu icon > _Help_ > _About Google Chrome_ on Firefox/Chrome for Windows. -## Installing a local web server +For now, you should install a couple of desktop and mobile/alternative device browsers to test your code in. You'll most commonly come across web browsers on desktop, laptop, and mobile devices, but you will also come across web browsers on other devices such as tablets, watches, and TVs. If possible, make sure you have one browser from each line installed and available to test on (so you don't just test in multiple browsers based on the same rendering engine): -Some examples will need to be run by a web server to work successfully. You can find out how to do this in [How do you set up a local testing server?](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server) +- Desktop browsers: + - Chromium: [Google Chrome](https://www.google.com/chrome/), [Opera](https://www.opera.com/browsers/opera), [Brave](https://brave.com/download/), [Microsoft Edge](https://www.microsoft.com/en-us/edge), [Vivaldi](https://vivaldi.com/). + - Gecko: [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/). + - WebKit: [Apple Safari](https://www.apple.com/safari/). +- Mobile/alternative device browsers: + - Chromium (Android): [Google Chrome](https://www.google.com/chrome/go-mobile/), [Opera](https://www.opera.com/browsers/opera), [Brave](https://brave.com/download/), [Microsoft Edge](https://www.microsoft.com/en-us/edge/mobile), [Samsung Internet](https://www.samsung.com/us/support/owners/app/samsung-internet), [Vivaldi](https://vivaldi.com/android/). + - Gecko (Android): [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/browsers/mobile/android/). + - WebKit (iOS): [Apple Safari](https://www.apple.com/safari/). + > [!NOTE] + > Most of the Android browsers listed above have iOS versions, but these were historically all powered by Apple's WebKit engine under the hood due to Apple's App Store rules. At the of writing, browsers are starting to create versions of their iOS browsers based on their own rendering engines, due to regulatory changes. See [Apple is finally allowing full versions of Chrome and Firefox to run on the iPhone](https://www.theverge.com/2024/1/25/24050478/apple-ios-17-4-browser-engines-eu). -## What tools do the professionals use? +## Local web servers -The following looks like a scary list, but fortunately, you can get started in web development without knowing anything about most of these. +Normally, when you type in a web address in a browser to load a website, the files that are combined to render that site by your browser are fetched from a remote web server hosted on a server computer somewhere else in the world. You'll learn more about how this works in the next article in the series. -- **A computer**. Maybe that sounds obvious to some people, but some of you are reading this article on your phone or a library computer. For serious web development, it's better to invest in a desktop or laptop computer running Windows, macOS or Linux. -- **A text editor**, to write code in. This could be a text editor (e.g. [Visual Studio Code](https://code.visualstudio.com/), [Notepad++](https://notepad-plus-plus.org/), [Sublime Text](https://www.sublimetext.com/), [GNU Emacs](https://www.gnu.org/software/emacs/), or [VIM](https://www.vim.org/)), or a hybrid editor (e.g. [Dreamweaver](https://www.adobe.com/products/dreamweaver.html) or [WebStorm](https://www.jetbrains.com/webstorm/)). Office document editors are not suitable for this use, as they rely on hidden elements that interfere with the rendering engines used by web browsers. -- **Web browsers**, to test code in. Currently, the most-used browsers are [Firefox](https://www.mozilla.org/en-US/firefox/new/), [Chrome](https://www.google.com/chrome/), [Safari](https://www.apple.com/safari/), and [Microsoft Edge](https://www.microsoft.com/en-us/edge). You should also test how your site performs on mobile devices and on any other browsers your target audience may be using. [Lynx](https://lynx.browser.org/), a text-based terminal web browser, is great for seeing how your site is experienced by visually-impaired users. -- **A graphics editor**, like [GIMP](https://www.gimp.org/), [Figma](https://www.figma.com/), [Paint.NET](https://www.getpaint.net/), [Photoshop](https://www.adobe.com/products/photoshop.html), [Sketch](https://www.sketch.com/) or [XD](https://helpx.adobe.com/support/xd.html), to make images or graphics for your web pages. -- **A version control system**, to manage files on servers, collaborate on a project with a team, share code and assets and avoid editing conflicts. Right now, [Git](https://git-scm.com/) is the most popular version control system along with the [GitHub](https://github.com/) or [GitLab](https://about.gitlab.com/) hosting service. +When creating a website locally (on your own machine), you can often load up the main HTML index file directly in a browser to test it. However, some examples will need to be run through a locally-installed web server to work successfully. -For more information about other project-specific tools, especially for client-side web development, see [Understanding client-side web development tools](/en-US/docs/Learn_web_development/Extensions/Client-side_tools). +One of the easiest options we've found to make a local server available is to use a code editor extension — this way, it is available right inside your code editor. Do the following inside Visual Studio Code: + +1. Open the _Extensions_ pane using the _View_ > _Extensions_ menu option. +2. In the "Search..." box at the top of this pane, type in "live preview". The top search result should be the [_Live Preview_](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) extension, created by Microsoft. +3. Click on that option to open up a page of information about it, which includes how to use it. +4. Press the _Install_ button to install the extension. +5. Now, when you are working on an HTML file in the editor, you should be able to click the "Show Preview" button to open the live example up in a separate tab. + +The above option is simple, but not that flexible. In future, you may want to made a more flexible local server option available that can be used to load examples in any browser you have available. For other options (and more background information around why local servers are neccessary), see [How do you set up a local testing server?](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server). + +## Graphics editors + +Web developers are often required to manipulate image files for use on the websites they create. This can often mean designing/creating graphic assets, but equally, the graphics are often provided by a graphic designer (this could be a team mate or a third-party), in which case the web developer may be called upon to crop or resize the files they receive. + +None of the learning articles on MDN require you to create your own graphics, although a few of them may require you to manipulate the files that we provide. + +There are many graphic editing tools available. We would recommend that you don't spend money on an expensive commercial product until further along in your learning journey, _if_ you feel that you really need it. There are many free software tools and online services that will probably be good enough for now. + +For example: + +- macOS comes with a tool called [Preview](https://support.apple.com/en-gb/guide/preview/welcome/mac). This is mainly used for viewing images and PDFs, but it also has some really useful features for editing images, including resizing, rotating, cropping, annotating, and converting between different file types. +- The built-in Windows [Photos app](https://support.microsoft.com/en-gb/windows/manage-photos-and-videos-with-microsoft-photos-app-c0c6422f-d4cb-2e3d-eb65-7069071b2f9b) comes with many similar features. +- The [tinypng](https://tinypng.com/) website, provides a free service allowing you to compress PNGs, JPEGs, and more. This is a very common task you'll have to do when preparing assets for use on a website. + +If you have more substantial graphics editing/creation needs, you'll want a fully-fledged graphics package. In terms of commercial offerings, [Adobe Photoshop](https://www.adobe.com/products/photoshop.html) has long been the industry standard, and there are also popular relative newcomers such as [Figma](https://www.figma.com/), [Sketch](https://www.sketch.com/), and [Canva](https://www.canva.com). + +If your budget is limited, most of the above apps have trials or free modes there are worth exploring. There are also some well-regarded free apps available such as [GIMP](https://www.gimp.org/), [Adobe Express](https://www.adobe.com/express/), and [Paint.NET](https://www.getpaint.net/). + +## Version control tools + +**Version control** tools are used by developers to manage files on servers, collaborate on a project with a team, share code and assets, and avoid editing conflicts. Right now, [Git](https://git-scm.com/) is the most popular version control system along with hosting services such as [GitHub](https://github.com/) or [GitLab](https://about.gitlab.com/). + +While version control tools are essential for web development teams, you don't need to worry about them right now. We've got a module dedicated to [Version control](/en-US/docs/Learn_web_development/Core/Version_control) near the end of our Core modules series. + +## Site deployment apps + +After you've finished developing a website or app (on your local computer, or perhaps on a development server), you'll want to put it onto a remote web server so that your users can type in the web address associated with it, and view it on the web! + +There are various ways you can do this, from buying hosting and using an [SFTP app](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/Upload_files_to_a_web_server#sftp), using a service like [GitHub Pages](https://pages.github.com/) or [Netlify](https://www.netlify.com/), or even setting up a quick demo to share with others using something like [Glitch](https://glitch.com/) or [CodePen](https://codepen.io/). + +Such a list of options might seem overwhelming, but don't worry — you don't need to know anything about publishing websites right now. We'll look at this topic many times later in the course. You'll get practical experience of it soon enough, in our [Your first website](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) module. {{NextMenu("Learn_web_development/Getting_started/Environment_setup/Browsing_the_web", "Learn_web_development/Getting_started/Environment_setup")}} diff --git a/files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md b/files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md index f0ba295b81ccfad..f72effa27991066 100644 --- a/files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md +++ b/files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md @@ -8,7 +8,7 @@ page-type: tutorial-chapter {{NextMenu("Learn_web_development/Getting_started/Web_standards/The_Web_standards_model", "Learn_web_development/Getting_started/Web_standards")}} -_How the web works_ provides a simplified view of what happens when you view a webpage in a web browser on your computer or phone. +_How the web works_ provides a description of what happens when you view a webpage in a web browser on your computer or phone. This theory is not essential to writing web code in the short term, but before long you'll really start to benefit from understanding what's happening in the background. diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/set_up_a_local_testing_server/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/set_up_a_local_testing_server/index.md index 74451dfee5520f0..c0f201c9f30d7b8 100644 --- a/files/en-us/learn_web_development/howto/tools_and_setup/set_up_a_local_testing_server/index.md +++ b/files/en-us/learn_web_development/howto/tools_and_setup/set_up_a_local_testing_server/index.md @@ -52,9 +52,10 @@ To get around the problem of async requests, we need to test such examples by ru If you only need HTML, CSS and JavaScript, and no server-side language, the easiest way may be to check for extensions in your code editor. As well as automating installation and set-up for your local HTTP server, they also integrate nicely with your code editors. Testing local files in an HTTP server may be one click away. -For VS Code, you can check the following free extension: +For VS Code, try out the following free extensions: -- `vscode-preview-server`. You can check it on its [home page](https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server). +- [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) +- [Preview on Web Server](https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server) ### Using Node.js