•  


2. Environment setup | MDN Curriculum

2. Environment setup

Tooling

Getting started modules

This module includes topics related to the setup and usage of the computer system that you will use to implement websites/apps. These topics are not directly related to creating web code, but you will benefit greatly from understanding the operating system you are working with.

General resources:

2.1 Computer basics

  • Signing into your computer and connecting it to the internet.
  • Using basic system control with keyboard, mouse, and other pointing devices.
  • Installing applications.

Resources:

2.2 File systems

  • Basic explorer/finder usage.
  • Standard folder structure.
  • File naming best practices for the web ? no spaces, lowercase, choosing a reasonable separator like a hyphen or underscore.
  • Basic file organization best practices.
  • Creating, moving, and deleting files and folders using Explorer/Finder.
  • Searching for files and folders.
  • Dealing with file extensions (e.g. turning off "Hide extensions for known file types" in Windows, showing dot files ( .env , etc.)).
  • Learning how file types are associated with applications.

Resources:

2.3 Browsing the web

  • Available web browsers.
  • Installing a web browser.
  • The difference between a web browser, a website, and a search engine.
  • Basic search engine usage.

Resources:

2.4 Command line basics

  • Understand what the command line is, and what you can do with it.
  • Understand how to access the command line on different systems:
    • On Linux and macOS, you've generally got a built-in terminal ready to go.
    • On Windows, the default command prompt is a bit more limited; you are better off installing something like Windows Subsystem for Linux (WSL) , PowerShell or Git Bash (part of Git for Windows ) if you want the same commands and power available to macOS/Linux.
  • Shortcuts (e.g. up arrow to access previous commands, tab for autocomplete).
  • Basic commands (e.g. cd , ls , mkdir , touch , grep , cat , mv , cp ).
  • Command options/flags.

Resources:

Notes :

  • The command line / terminal is intimidating to newcomers ? you just get a blinking cursor, with no obvious signs of what to do next. We are not saying that you should be a command line wizard before you start learning web development, but you should at least understand what it is and know some basics ? you will be surprised how often you come across command line usage in web development tooling.

2.5 Code editors

  • Learn what code editors are available and what is suitable for your purposes:
    • 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 are better off with a fully-fledged code editor like VSCode (multiplatform, free), Sublime Text (multiplatform, not free) or Notepad++ (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.
  • Learn what a basic code editor can do for you:
    • Open and edit code files.
    • Syntax highlighting.
    • Auto-indentation and other simple syntax fixes.
    • Code completion and help.
    • Find and replace, often with the ability to use regular expressions to make the functionality more powerful (e.g. keep a specific string beginning and end, but replace the substring in between).
    • Integration with version control is often provided (see also Version control )
  • Customize and enhance your code editor with extensions:
    • Language-specific extensions such as code completion, highlighting, linting, and debugging. This can apply to specific languages such as JavaScript, Python, or Go, or language/framework abstractions such as TypeScript or JSX .
    • GitHub/version control extensions, if not provided by default.
    • Theme and color scheme extensions.
    • Productivity extensions like code snippets and scaffolding generators.
    • AI-powered code suggestion tools such as GitHub Copilot. Be aware that, while useful, AI tools have no reasoning skill, and frequently provide answers that are misleading or just plain wrong. You shouldn't just assume that AI answers are correct, and test them/verify them with other sources.
Previous: 1. Soft skills Next: Core modules
- "漢字路" 한글한자자동변환 서비스는 교육부 고전문헌국역지원사업의 지원으로 구축되었습니다.
- "漢字路" 한글한자자동변환 서비스는 전통문화연구회 "울산대학교한국어처리연구실 옥철영(IT융합전공)교수팀"에서 개발한 한글한자자동변환기를 바탕하여 지속적으로 공동 연구 개발하고 있는 서비스입니다.
- 현재 고유명사(인명, 지명등)을 비롯한 여러 변환오류가 있으며 이를 해결하고자 많은 연구 개발을 진행하고자 하고 있습니다. 이를 인지하시고 다른 곳에서 인용시 한자 변환 결과를 한번 더 검토하시고 사용해 주시기 바랍니다.
- 변환오류 및 건의,문의사항은 juntong@juntong.or.kr로 메일로 보내주시면 감사하겠습니다. .
Copyright ⓒ 2020 By '전통문화연구회(傳統文化硏究會)' All Rights reserved.
 한국   대만   중국   일본