├── .editorconfig ├── .github ├── ISSUE_TEMPLATE │ ├── config.yml │ ├── general-feedback.yml │ └── topic-coverage.yml ├── PULL_REQUEST_TEMPLATE ├── settings.yml └── workflows │ ├── auto-merge.yml │ ├── codeql.yml.template │ ├── idle.yml │ ├── lint.yml │ ├── release.yml │ └── welcome-bot.yml ├── .gitignore ├── .husky └── pre-commit ├── .lintstagedrc.json ├── .markdownlint-cli2.jsonc ├── .nvmrc ├── .prettierrc.json ├── CODE_OF_CONDUCT.md ├── LAST_MAJOR_REVIEW.txt ├── LICENSE.md ├── README.md ├── REVIEWING.md ├── TOC.md ├── curriculum ├── 0-README.md ├── 1-about-curriculum.md ├── 2-getting-started │ ├── 0-README.md │ ├── 1-soft-skills.md │ └── 2-environment-setup.md ├── 3-core │ ├── 0-README.md │ ├── 1-web-standards.md │ ├── 2-semantic-html.md │ ├── 3-css-fundamentals.md │ ├── 4-css-text-styling.md │ ├── 5-css-layout.md │ ├── 6-javascript-fundamentals.md │ ├── 7-accessibility.md │ ├── 8-design-for-developers.md │ └── 9-version-control.md ├── 4-extensions │ ├── 0-README.md │ ├── 1-transform-and-animate-css.md │ ├── 2-custom-js-objects.md │ ├── 3-web-apis.md │ ├── 4-performance.md │ ├── 5-security-and-privacy.md │ ├── 6-testing.md │ ├── 7-a-practical-understanding-of-javascript-frameworks.md │ ├── 8-css-tooling.md │ └── 9-other-tooling-types.md ├── 5-faq.md └── 6-resources-for-educators.md ├── package-lock.json ├── package.json └── pdf ├── .gitignore ├── README.md ├── adjust-links.lua ├── build.sh ├── header.md ├── header.tex ├── logo.png └── template.tex /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: https://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | [*] 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | 14 | [*.md] 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: true 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/general-feedback.yml: -------------------------------------------------------------------------------- 1 | name: "General feedback" 2 | description: Provide feedback on the target audience, general approach, high-level structure, usefulness, or anything else. 3 | labels: ["general"] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | Please fill in a description of your feedback in the title field above 9 | --- 10 | - type: textarea 11 | id: problem 12 | attributes: 13 | label: Please describe your problem or observation 14 | description: This section should include a clear and concise description of what your problem or observation is. 15 | placeholder: e.g. I think the curriculum should include... 16 | validations: 17 | required: true 18 | - type: textarea 19 | id: solution 20 | attributes: 21 | label: Describe the solution you'd like to see 22 | description: This section should include a description of the changes you'll like to see made to the curriculum to fix the issue as you see it. 23 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/topic-coverage.yml: -------------------------------------------------------------------------------- 1 | name: "Topic coverage" 2 | description: Provide feedback on specific topic coverage (e.g. HTML, CSS, JavaScript), including missing topics and requests for changes to existing coverage. 3 | labels: ["topics"] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | Please fill in a description of your topic feedback in the title field above 9 | --- 10 | - type: input 11 | id: topic 12 | attributes: 13 | label: Module number 14 | description: Fill in the specific module (subsection) number that your feedback concerns 15 | placeholder: e.g. 2.1 How the web works 16 | - type: textarea 17 | id: problem 18 | attributes: 19 | label: Please describe your issue 20 | description: This section should include a clear and concise description of what you feel is missing or wrong. 21 | placeholder: e.g. I think HTML foobar needs more coverage... 22 | validations: 23 | required: true 24 | - type: textarea 25 | id: solution 26 | attributes: 27 | label: Describe the solution you'd like to see 28 | description: This section should include a description of the changes you'll like to see made to the curriculum to fix the issue as you see it. 29 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE: -------------------------------------------------------------------------------- 1 | 2 | 3 | ### Description 4 | 5 | 6 | 7 | ### Motivation 8 | 9 | 10 | 11 | ### Additional details 12 | 13 | 14 | 15 | ### Related issues and pull requests 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /.github/settings.yml: -------------------------------------------------------------------------------- 1 | repository: 2 | # See https://github.com/apps/settings for all available settings. 3 | 4 | # The name of the repository. Changing this will rename the repository 5 | name: project-template 6 | 7 | # A short description of the repository that will show up on GitHub 8 | description: MDN Web Docs project template 9 | 10 | # A URL with more information about the repository 11 | homepage: https://github.com/mdn/project-template 12 | 13 | # The branch used by default for pull requests and when the repository is cloned/viewed. 14 | default_branch: main 15 | 16 | # This repository is a template that others can use to start a new repository. 17 | is_template: true 18 | 19 | branches: 20 | - name: main 21 | protection: 22 | # Required. Require at least one approving review on a pull request, before merging. Set to null to disable. 23 | required_pull_request_reviews: 24 | # The number of approvals required. (1-6) 25 | required_approving_review_count: 1 26 | # Dismiss approved reviews automatically when a new commit is pushed. 27 | dismiss_stale_reviews: true 28 | # Blocks merge until code owners have reviewed. 29 | require_code_owner_reviews: true 30 | 31 | collaborators: 32 | - username: schalkneethling 33 | permission: admin 34 | 35 | - username: Rumyra 36 | permission: admin 37 | 38 | - username: fiji-flo 39 | permission: admin 40 | 41 | labels: 42 | - name: bug 43 | color: D41130 44 | description: "Something that's wrong or not working as expected" 45 | - name: chore 46 | color: 258CD3 47 | description: "A routine task" 48 | - name: "good first issue" 49 | color: 48B71D 50 | description: "Great for newcomers to start contributing" 51 | - name: "help wanted" 52 | color: 2E7A10 53 | description: "Contributions welcome" 54 | 55 | teams: 56 | - name: core 57 | permission: admin 58 | -------------------------------------------------------------------------------- /.github/workflows/auto-merge.yml: -------------------------------------------------------------------------------- 1 | name: "auto-merge" 2 | on: [pull_request_target] 3 | 4 | jobs: 5 | auto-merge: 6 | uses: mdn/workflows/.github/workflows/auto-merge.yml@main 7 | with: 8 | target-repo: "TODO: set this value to the name of the current (origin) repo" 9 | secrets: 10 | GH_TOKEN: ${{ secrets.GH_TOKEN }} 11 | -------------------------------------------------------------------------------- /.github/workflows/codeql.yml.template: -------------------------------------------------------------------------------- 1 | # TODO: Rename this file to codeql.yml and fill in the TODOs 2 | name: "CodeQL" 3 | 4 | on: 5 | push: 6 | branches: ["main"] 7 | paths-ignore: 8 | - "**.md" 9 | pull_request: 10 | # The branches below must be a subset of the branches above 11 | branches: ["main"] 12 | paths-ignore: 13 | - "**.md" 14 | 15 | jobs: 16 | analyze: 17 | name: Analyze 18 | runs-on: ubuntu-latest 19 | permissions: 20 | actions: read 21 | contents: read 22 | security-events: write 23 | 24 | strategy: 25 | matrix: 26 | # Add the language(s) you want to analyze here as an array of strings 27 | # for example: ['javascript'] or ['python', 'javascript'] 28 | language: ["TODO"] 29 | 30 | steps: 31 | - name: Checkout repository 32 | uses: actions/checkout@v3 33 | 34 | # Initializes the CodeQL tools for scanning. 35 | - name: Initialize CodeQL 36 | uses: github/codeql-action/init@v2 37 | with: 38 | languages: ${{ matrix.language }} 39 | 40 | - name: Perform CodeQL Analysis 41 | uses: github/codeql-action/analyze@v2 42 | with: 43 | category: "/language:${{matrix.language}}" 44 | -------------------------------------------------------------------------------- /.github/workflows/idle.yml: -------------------------------------------------------------------------------- 1 | # This workflow is hosted at: https://github.com/mdn/workflows/blob/main/.github/workflows/idle.yml 2 | # Docs for this workflow: https://github.com/mdn/workflows/blob/main/README.md#idle 3 | name: "Label idle issues" 4 | 5 | on: 6 | schedule: 7 | - cron: "0 8 * * *" 8 | 9 | jobs: 10 | mark-as-idle: 11 | uses: mdn/workflows/.github/workflows/idle.yml@main 12 | with: 13 | target-repo: "TODO - add this repo in 'mdn/REPOSITORY_NAME' format" 14 | -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: Lint files 2 | 3 | on: 4 | pull_request: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | lint: 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | - uses: actions/checkout@v3 14 | 15 | - name: Setup Node.js environment 16 | uses: actions/setup-node@v3 17 | with: 18 | node-version-file: ".nvmrc" 19 | cache: npm 20 | 21 | - name: Install all npm packages 22 | run: npm ci 23 | 24 | - name: Lint all files 25 | run: | 26 | npm run lint 27 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Build and release PDF 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | permissions: 9 | contents: write 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@v4 16 | 17 | - name: Install build dependencies 18 | env: 19 | DEBIAN_FRONTEND: noninteractive 20 | run: | 21 | sudo apt-get install pandoc texlive-latex-base texlive-xetex fonts-inter 22 | 23 | - name: Build PDF 24 | run: | 25 | ./pdf/build.sh 26 | 27 | - name: Create release 28 | env: 29 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} 30 | run: | 31 | REVIEW_DATE="`cat LAST_MAJOR_REVIEW.txt`" 32 | GENERATED_DATE=`date -u '+%Y-%m-%d'` 33 | gh release create release-${{ github.sha }} \ 34 | --notes "PDF generated: $GENERATED_DATE | Last major curriculum review: $REVIEW_DATE" \ 35 | --target ${{ github.sha }} \ 36 | --title $GENERATED_DATE \ 37 | pdf/MDN-Curriculum.pdf 38 | -------------------------------------------------------------------------------- /.github/workflows/welcome-bot.yml: -------------------------------------------------------------------------------- 1 | # This workflow is hosted at: https://github.com/mdn/workflows/blob/main/.github/workflows/allo-allo.yml 2 | # Docs for this workflow: https://github.com/mdn/workflows/blob/main/README.md#allo-allo 3 | name: "AlloAllo" 4 | 5 | on: 6 | issues: 7 | types: 8 | - opened 9 | pull_request_target: 10 | branches: 11 | - main 12 | types: 13 | - opened 14 | - closed 15 | 16 | jobs: 17 | allo-allo: 18 | uses: mdn/workflows/.github/workflows/allo-allo.yml@main 19 | with: 20 | target-repo: "TODO - add this repo in 'mdn/REPOSITORY_NAME' format" 21 | issue-welcome: > 22 | It looks like this is your first issue. Welcome! 👋 23 | One of the project maintainers will be with you as soon as possible. We 24 | appreciate your patience. To safeguard the health of the project, please 25 | take a moment to read our [code of conduct](../blob/main/CODE_OF_CONDUCT.md). 26 | pr-welcome: > 27 | It looks like this is your first pull request. 🎉 28 | Thank you for your contribution! One of the project maintainers will triage 29 | and assign the pull request for review. We appreciate your patience. To 30 | safeguard the health of the project, please take a moment to read our 31 | [code of conduct](../blob/main/CODE_OF_CONDUCT.md). 32 | pr-merged: > 33 | Congratulations on your first merged pull request. 🎉 Thank you for your contribution! 34 | Did you know we have a [project board](https://github.com/orgs/mdn/projects/25) with high-impact contribution opportunities? 35 | We look forward to your next contribution. 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /.lintstagedrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "!*.md": "prettier --ignore-unknown --write", 3 | "*.md": ["prettier --write", "markdownlint-cli2-fix"] 4 | } 5 | -------------------------------------------------------------------------------- /.markdownlint-cli2.jsonc: -------------------------------------------------------------------------------- 1 | // This file defines our configuration for Markdownlint. See 2 | // https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md 3 | // for more details on each rule. 4 | 5 | { 6 | "config": { 7 | "default": true, 8 | "no-inline-html": { 9 | "allowed_elements": ["scrim-inline"] 10 | }, 11 | "ul-style": { 12 | "style": "dash" 13 | }, 14 | "ul-indent": { 15 | "indent": 2 16 | }, 17 | "no-hard-tabs": { 18 | "spaces_per_tab": 2 19 | }, 20 | "line-length": false, 21 | "link-fragments": false, 22 | // Force ordered numbering to catch accidental list ending from indenting 23 | "ol-prefix": { 24 | "style": "ordered" 25 | }, 26 | "code-block-style": { 27 | "style": "fenced" 28 | }, 29 | "emphasis-style": { 30 | "style": "underscore" 31 | }, 32 | "strong-style": { 33 | "style": "asterisk" 34 | }, 35 | "first-line-heading": false, 36 | 37 | // https://github.com/OnkarRuikar/markdownlint-rule-search-replace 38 | "search-replace": { 39 | "rules": [ 40 | { 41 | "name": "curly-double-quotes", 42 | "message": "Don't use curly double quotes", 43 | "searchPattern": "/“|”/g", 44 | "replace": "\"", 45 | "searchScope": "text" 46 | }, 47 | { 48 | "name": "curly-single-quotes", 49 | "message": "Don't use curly single quotes", 50 | "searchPattern": "/‘|’/g", 51 | "replace": "'", 52 | "searchScope": "text" 53 | }, 54 | { 55 | "name": "nbsp", 56 | "message": "Don't use no-break spaces", 57 | "searchPattern": "/\u00A0/g", 58 | "replace": " ", 59 | "searchScope": "all" 60 | }, 61 | { 62 | "name": "m-dash", 63 | "message": "Don't use '--'. Use m-dash — instead", 64 | "search": " -- ", 65 | "replace": " — ", 66 | "searchScope": "text" 67 | }, 68 | { 69 | "name": "trailing-spaces", 70 | "message": "Avoid trailing spaces", 71 | "searchPattern": "/ +$/gm", 72 | "replace": "", 73 | "searchScope": "all" 74 | }, 75 | { 76 | "name": "double-spaces", 77 | "message": "Avoid double spaces", 78 | "searchPattern": "/([^\\s>]) ([^\\s|])/g", 79 | "replace": "$1 $2", 80 | "searchScope": "text" 81 | }, 82 | { 83 | "name": "incorrect-spelling", 84 | "message": "Incorrect spelling", 85 | "searchPattern": ["/e-mail/ig", "/(w)eb site/ig"], 86 | "replace": ["email", "$1ebsite"], 87 | "searchScope": "all" 88 | } 89 | ] 90 | } 91 | }, 92 | "customRules": ["markdownlint-rule-search-replace"], 93 | "ignores": ["node_modules", ".git", ".github", "tests"] 94 | } 95 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v22 2 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "overrides": [ 3 | { 4 | "files": ["**/*.jsonc"], 5 | "options": { 6 | "parser": "json" 7 | } 8 | } 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of conduct 2 | 3 | This repository is governed by Mozilla's code of conduct and etiquette guidelines. 4 | For more details, read [Mozilla's Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). 5 | 6 | ## Reporting violations 7 | 8 | For more information on how to report violations of the Community Participation Guidelines, read the [How to report](https://www.mozilla.org/about/governance/policies/participation/reporting/) page. 9 | -------------------------------------------------------------------------------- /LAST_MAJOR_REVIEW.txt: -------------------------------------------------------------------------------- 1 | 2024-02-01 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | --- 2 | template: module 3 | --- 4 | 5 | # Welcome to the MDN front-end developer curriculum 6 | 7 | > **Note**: Main README for the repo, providing light introduction 8 | 9 | The MDN front-end developer curriculum is intended to provide an up-to-date industry recommendation for the key fundamental skills and knowledge that a front-end web developer should have, including the mindset and attitude required for securing a job and for long-term success in this field. This repository has been created to give the web community an understanding of the curriculum's purpose and target audience, an early preview of its content, and a chance to give [feedback](#providing-feedback) on it. Please let us know what you think! 10 | 11 | ## Rationale 12 | 13 | The curriculum is an outcome of a research project conducted by the MDN team in early 2023. We asked students, new web developers, technical hiring managers, and web education professionals about their expectations around learning front-end web development — on MDN and elsewhere. The key outcomes of this research were: 14 | 15 | - Students expect more structured guidance on what topics to learn and when. 16 | - All groups cited a lack of "soft skills" (like teamwork, research, and critical thinking) and knowledge of best practices (such as accessibility and privacy) in potential new hires as key problems in the industry. 17 | 18 | Part of our focus for 2023 is on making MDN a resource where people can learn new skills, as well as look up reference material. Back in 2019, we launched the [Learning Area](https://developer.mozilla.org/en-US/docs/Learn) on MDN to help people learn the basics of front-end development. With a lot of useful content published to date, this part of MDN has proven to be successful — it averages around 10% of MDN page views. However, we feel that it needs to be supplemented with stronger guidance on what new front-end devs should learn, and in what order, to be successful in the web industry. The curriculum represents a first step towards this goal. 19 | 20 | ## Target audience and purpose 21 | 22 | We believe the curriculum is useful to several different groups of people, from students wanting to learn web development to educators wanting to put together courses to teach it. Head over to the [curriculum About page](https://developer.mozilla.org/en-US/curriculum/about-curriculum/#target_audience) to read more about its target audience and purpose. 23 | 24 | ## Curriculum structure 25 | 26 | We have structured the curriculum as follows: 27 | 28 | - [Precursor knowledge](/curriculum/2-getting-started): Topics that are not, strictly speaking, web development topics but do constitute useful topics for anyone wanting to learn front-end web development. This includes soft skills and knowledge of a typical development environment. 29 | - [Core modules](/curriculum/3-core): Topics that we feel every web developer should have a good grounding in. This includes all the information they need to design and build a basic, accessible website/app that follows modern best practices, and manage and deploy their code using a tool like GitHub. 30 | - [Extensions modules](/curriculum/4-extensions): These "extension" topics constitute useful additional skills to learn as web developers start to expand their knowledge and develop specialisms. 31 | 32 | Get started by heading over to the main [table of contents](TOC.md) to see a granular overview of the included topics, and start exploring the content. 33 | 34 | ## Providing feedback 35 | 36 | We would love to hear your feedback regarding our curriculum. To do so, please open an issue — [leave your feedback under General feedback or Topic coverage](https://github.com/mdn/curriculum/issues/new/choose). When doing so, think about the following questions: 37 | 38 | - Does our curriculum contain all the fundamental knowledge a front-end web developer needs? If not, what topics are we missing? We are interested in high-level concerns (for example, "this whole area is missing") as well as lower-level feedback (for example, specific CSS or JavaScript topic omissions). 39 | - Do you think the curriculum is helpful to its key target audiences, for example, students wanting to learn front-end development and teachers wishing to create courses based on it? If not, why not? 40 | -------------------------------------------------------------------------------- /REVIEWING.md: -------------------------------------------------------------------------------- 1 | # Reviewing guide 2 | 3 | > **Note**: 4 | > Boilerplate reviewing guide for the repo, not needed for the final publication 5 | 6 | All reviewers must abide by the [code of conduct](CODE_OF_CONDUCT.md); they are also protected by the code of conduct. 7 | A reviewer should not tolerate poor behavior and is encouraged to [report any behavior](CODE_OF_CONDUCT.md#Reporting_violations) that violates the code of conduct. 8 | 9 | ## Review process 10 | 11 | The MDN Web Docs team has a well-defined review process that must be followed by reviewers in all repositories under the GitHub MDN organization. 12 | This process is described in detail on the [Pull request guidelines](https://developer.mozilla.org/en-US/docs/MDN/Community/Pull_requests) page. 13 | 14 | 21 | -------------------------------------------------------------------------------- /TOC.md: -------------------------------------------------------------------------------- 1 | --- 2 | template: module 3 | --- 4 | 5 | # Table of contents 6 | 7 | > **Note**: 8 | > TOC for the entire curriculum, useful to include in the final publication, but probably on a separate page. don't make this the entire main nav 9 | 10 | [Introduction](/curriculum) 11 | 12 | - [Recommended soft skills](/curriculum/2-getting-started/1-soft-skills.md): Recommendations of soft skills that students can aim to get better at while learning web development, and which constitute good traits to have when entering the industry 13 | - [Environment knowledge](/curriculum/2-getting-started/2-environment.md): Recommendations for topics related to the setup and usage of the computer system that you will use to implement websites/apps. 14 | 15 | - [1 The web standards model](/curriculum/3-core/1-web-standards.md): The fundamentals of how the web works at a high level, including the model used for communication, the core technologies involved, how those technologies are created, and how a web browser renders and displays websites to a user. 16 | - [1.1 How the web works](/curriculum/3-core/1-web-standards.md#1-1-how-the-web-works) 17 | - [1.2 The HTML, CSS, and JavaScript triangle](/curriculum/3-core/1-web-standards.md#1-2-the-html-css-and-javascript-triangle) 18 | - [1.3 Web standards](/curriculum/3-core/1-web-standards.md#1-3-web-standards) 19 | - [1.4 How browsers load webpages](/curriculum/3-core/1-web-standards.md#1-4-how-browsers-load-webpages) 20 | - [2 Semantic HTML](/curriculum/3-core/1-web-standards.md): HTML is the technology that defines the content and structure of any website. Written properly, it should also define the semantics (meaning) of the content in a machine-readable way, which is vital for accessibility, search engine optimization, and tapping into using the built-in features browsers provide for content to work optimally. This module covers the basics of the language, before looking at key areas such as document structure, links, lists, images, forms, and more. 21 | - [2.1 Basic HTML syntax and structure](/curriculum/3-core/2-semantic-html.md#2-1-basic-html-syntax-and-structure) 22 | - [2.2 Good document structure](/curriculum/3-core/2-semantic-html.md#2-2-good-document-structure) 23 | - [2.3 Lists](/curriculum/3-core/2-semantic-html.md#2-3-lists) 24 | - [2.4 Advanced text techniques](/curriculum/3-core/2-semantic-html.md#2-4-advanced-text-techniques) 25 | - [2.5 Links](/curriculum/3-core/2-semantic-html.md#2-5-links) 26 | - [2.6 Media](/curriculum/3-core/2-semantic-html.md#2-6-media) 27 | - [2.7 Other interactive elements](/curriculum/3-core/2-semantic-html.md#2-7-other-interactive-elements) 28 | - [2.8 HTML tables](/curriculum/3-core/2-semantic-html.md#2-8-html-tables) 29 | - [2.9 Debugging HTML](/curriculum/3-core/2-semantic-html.md#2-9-debugging-html) 30 | - [3 CSS fundamentals](/curriculum/3-core/3-css-fundamentals.md): CSS enables you to add style to your webpages, including color, text, positioning and layout, and animation. In our first CSS module we cover all the fundamental language mechanics you need to understand how CSS works. 31 | - [3.1 Basic CSS syntax](/curriculum/3-core/3-css-fundamentals.md#3-01-basic-css-syntax) 32 | - [3.2 Selectors and combinators](/curriculum/3-core/3-css-fundamentals.md#3-02-selectors-and-combinators) 33 | - [3.3 The box model](/curriculum/3-core/3-css-fundamentals.md#3-03-the-box-model) 34 | - [3.4 Cascade, specificity, and inheritance](/curriculum/3-core/3-css-fundamentals.md#3-04-cascade-specificity-and-inheritance) 35 | - [3.5 Values and units](/curriculum/3-core/3-css-fundamentals.md#3-05-values-and-units) 36 | - [3.6 Sizing](/curriculum/3-core/3-css-fundamentals.md#3-06-sizing) 37 | - [3.7 Background and borders](/curriculum/3-core/3-css-fundamentals.md#3-07-backgrounds-and-borders) 38 | - [3.8 Overflow](/curriculum/3-core/3-css-fundamentals.md#3-08-overflow) 39 | - [3.9 Styling form elements](/curriculum/3-core/3-css-fundamentals.md#3-09-styling-form-elements) 40 | - [3.10 Debugging CSS](/curriculum/3-core/3-css-fundamentals.md#3-10-debugging-css) 41 | - [4 CSS text styling](/curriculum/3-core/4-css-text-styling.md): This module focuses specifically on CSS font and text styling, including loading custom web fonts and applying them to your text. 42 | - [4.1 Text and font styling](/curriculum/3-core/4-css-text-styling.md#4-1-text-and-font-styling) 43 | - [4.2 Styling lists and links](/curriculum/3-core/4-css-text-styling.md#4-2-styling-lists-and-links) 44 | - [4.3 Web fonts](/curriculum/3-core/4-css-text-styling.md#4-3-web-fonts) 45 | - [5 CSS layout](/curriculum/3-core/5-css-layout.md): Our final core CSS module looks deep into another crucial topic: creating layouts for modern websites. This module looks at floatings, positioning, modern layout tools, and building responsive designs that will adapt to different devices, screen sizes, and resolutions. 46 | - [5.1 The basics of CSS layout](/curriculum/3-core/5-css-layout.md#5-1-the-basics-of-css-layout) 47 | - [5.2 Floats](/curriculum/3-core/5-css-layout.md#5-2-floats) 48 | - [5.3 Positioning](/curriculum/3-core/5-css-layout.md#5-3-positioning) 49 | - [5.4 Modern layout](/curriculum/3-core/5-css-layout.md#5-4-modern-layout) 50 | - [5.5 Responsive design specifics](/curriculum/3-core/5-css-layout.md#5-5-responsive-design-specifics) 51 | - [6 JavaScript fundamentals](/curriculum/3-core/6-javascript-fundamentals.md): JavaScript is a huge topic, with so many different features, styles, and techniques to learn, and so many APIs and tools built on top of it. This module focuses on the essentials of the core language. Learning these topics will give you a solid basis to work from. 52 | - [6.1 Variables](/curriculum/3-core/6-javascript-fundamentals.md#6-01-variables) 53 | - [6.2 Math](/curriculum/3-core/6-javascript-fundamentals.md#6-02-math) 54 | - [6.3 Text](/curriculum/3-core/6-javascript-fundamentals.md#6-03-text) 55 | - [6.4 Arrays](/curriculum/3-core/6-javascript-fundamentals.md#6-04-arrays) 56 | - [6.5 Conditionals](/curriculum/3-core/6-javascript-fundamentals.md#6-05-conditionals) 57 | - [6.6 Loops](/curriculum/3-core/6-javascript-fundamentals.md#6-06-loops) 58 | - [6.7 Functions](/curriculum/3-core/6-javascript-fundamentals.md#6-07-functions) 59 | - [6.8 JavaScript object fundamentals](/curriculum/3-core/6-javascript-fundamentals.md#6-08-javascript-object-fundamentals) 60 | - [6.9 DOM scripting](/curriculum/3-core/6-javascript-fundamentals.md#6-09-dom-scripting) 61 | - [6.10 Events](/curriculum/3-core/6-javascript-fundamentals.md#6-10-events) 62 | - [6.11 Asynchronous JavaScript fundamentals](/curriculum/3-core/6-javascript-fundamentals.md#6-11-asynchronous-javascript-fundamentals) 63 | - [6.12 Network requests with fetch()](/curriculum/3-core/6-javascript-fundamentals.md#6-12-network-requests-with-fetch) 64 | - [6.13 Working with JSON](/curriculum/3-core/6-javascript-fundamentals.md#6-13-working-with-json) 65 | - [6.14 JavaScript libraries and frameworks introduction](/curriculum/3-core/6-javascript-fundamentals.md#6-14-javascript-libraries-and-frameworks-introduction) 66 | - [6.15 Debugging JavaScript](/curriculum/3-core/6-javascript-fundamentals.md#6-15-debugging-javascript) 67 | - [7 Accessibility](/curriculum/3-core/7-accessibility.md): Access to public services, education, entertainment, and all the other valuable content the web offers is a human right. No one should be excluded based on disability, race, geography, or other human characteristics. This module discusses the best practices and techniques you should learn to make your websites as accessible as possible. 68 | - [7.1 Accessibility basics](/curriculum/3-core/7-accessibility.md#7-1-accessibility-basics) 69 | - [7.2 Accessible styling](/curriculum/3-core/7-accessibility.md#7-2-accessible-styling) 70 | - [7.3 Accessible JavaScript](/curriculum/3-core/7-accessibility.md#7-3-accessible-javascript) 71 | - [7.4 Assistive technology and testing](/curriculum/3-core/7-accessibility.md#7-4-assistive-technology-and-testing) 72 | - [7.5 WAI-ARIA](/curriculum/3-core/7-accessibility.md#7-5-wai-aria) 73 | - [8 Version control fundamentals (Git/GitHub)](/curriculum/3-core/8-version-control-fundamentals-git-github.md): 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. 74 | - [9 Design for developers](/curriculum/3-core/9-design-for-developers.md): The idea of this module is to introduce developers to some design thinking. They may not want to work as a designer, but having some basic user experience and design theory under their belt will be invaluable for understanding design briefs, making their portfolios look better, and getting into the mindset of the user. 75 | 76 | - [9.1 Basic design theory](/curriculum/3-core/9-design-for-developers.md#9-1-basic-design-theory) 77 | - [9.2 User-centered design](/curriculum/3-core/9-design-for-developers.md#9-2-user-centered-design) 78 | - [9.3 Understanding design briefs](/curriculum/3-core/9-design-for-developers.md#9-3-understanding-design-briefs) 79 | 80 | - [Extension 1 CSS transforms and animation](/curriculum/4-extensions/1-transform-and-animate-css.md): Animations are a vital part of a good user experience. Subtle usage can make page designs more interesting and appealing, and also enhance usability and perceived performance. 81 | - [Extension 2 Creating your own JavaScript objects](/curriculum/4-extensions/2-custom-js-objects.md): Having a deeper knowledge of how JavaScript objects work is very useful as you build confidence with web development, start to build more complex apps, and create your own libraries. 82 | - [Extension 3 Web APIs](/curriculum/4-extensions/3-web-apis.md): This module covers common aspects of three of the most common classes of Web APIs that we haven't previously covered in any kind of detail, providing a useful grounding for those who want to go deeper into browser API usage. 83 | - [Extension 4 Performance](/curriculum/4-extensions/4-performance.md): Performance centers around making your websites as fast as possible, both in real terms (for example small file sizes, quicker loading), and in terms of how performance is perceived (for example getting initial content to a usable state as fast as possible, even if all the content is not yet loaded). 84 | - [Extension 5 Security and privacy](/curriculum/4-extensions/5-security-and-privacy.md): It is vital to have an understanding of how you can and should protect your data and your user's data from would-be attackers who may try to steal it. This module covers both hardening websites to make it more difficult to steal data, and collecting user data in a respectful way that avoids tracking them or sharing it with unsuitable third parties. 85 | - [Extension 6 Testing](/curriculum/4-extensions/6-testing.md): Any codebase past a certain level of complexity needs to have a system of tests associated with it, to make sure that as new code is added, the codebase continues to function correctly and performantly, and continues to meet the users' needs. This module lists the fundamentals that you should start with. 86 | - [Extension 7 A practical understanding of JavaScript frameworks](/curriculum/4-extensions/7-a-practical-understanding-of-javascript-frameworks.md): JavaScript frameworks are commonly used to build web applications, so it is beneficial to learn about common frameworks and use cases (as listed below) for employment prospects. 87 | - [Extension 8 CSS tooling](/curriculum/4-extensions/8-css-tooling.md): Tooling is not just confined to JavaScript frameworks. There are also common CSS tooling types that you'll encounter on your learning journey. 88 | - [Extension 9 Other tooling types](/curriculum/4-extensions/9-other-tooling-types.md): There are other types of tooling that you'll commonly encounter on a web project. This module aims to provide a useful list to research. 89 | -------------------------------------------------------------------------------- /curriculum/0-README.md: -------------------------------------------------------------------------------- 1 | --- 2 | template: landing 3 | summary: The MDN Curriculum provides a structured guide to the essential skills and practices for being a successful front-end developer, along with recommended learning resources. 4 | --- 5 | 6 | # MDN Curriculum 7 | 8 | ## The essential skillset for new front-end developers 9 | 10 | The MDN Curriculum provides a structured guide to the essential skills and practices for being a successful front-end developer, along with recommended learning resources. 11 | 12 | Last updated: February 2024 13 | 14 | ## About the curriculum 15 | 16 | - Beginner's level 17 | - Self-paced 18 | - Free 19 | 20 | Defines the essential skills and knowledge every front-end developer needs for career success and industry relevance. 21 | 22 | Created by Mozilla and refined with insights from students, educators, and developers from the broader web community. 23 | 24 | Includes learning resource recommendations covering every curriculum topic, helping you become job-ready. 25 | 26 | [Learn more](./1-about-curriculum.md) 27 | 28 | ## Modules 29 | 30 | 31 | 32 | ## Don't know where to
get started? 33 | 34 | - ### Starting out with coding? 35 | 36 | _Begin with our "Getting started" and "Core" modules to grasp the essential skills for web development._ 37 | 38 | [Core modules](./3-core/) 39 | 40 | - ### Beyond the basics? 41 | 42 | _Dive deeper with our "Extensions" modules to develop specialized skills._ 43 | 44 | [Extensions modules](./4-extensions/) 45 | 46 | - ### Seeking employment? 47 | 48 | _Our "Soft skills" module, part of "Getting started", offers crucial insights to help you land your job._ 49 | 50 | [Getting started modules](./2-getting-started/) 51 | 52 | - ### Working at a school? 53 | 54 | _Use our modules to guide your teaching, or enroll your students in Scrimba's Frontend Path._ 55 | 56 | [Frontend Path](https://v2.scrimba.com/the-frontend-developer-career-path-c0j?via=mdn) 57 | -------------------------------------------------------------------------------- /curriculum/1-about-curriculum.md: -------------------------------------------------------------------------------- 1 | --- 2 | template: about 3 | summary: This page describes the MDN front-end developer curriculum, including its motivation, target audience, scope, and update process as a guide to essential front-end web development skills. 4 | --- 5 | 6 | # About Curriculum 7 | 8 | The MDN front-end developer curriculum aims to provide the definitive recommendation for fundamental skills and knowledge that a front-end web developer should have for employability and longevity in today's web industry. 9 | 10 | This curriculum has been created by the MDN team with review and feedback from experts within Mozilla and throughout the wider MDN community. Thank you for your valuable input; you know who you are! 11 | 12 | ## Motivation 13 | 14 | Mozilla talks to industry professionals every day, and we regularly get feedback on the knowledge gaps in new hires. Hiring managers often observe: 15 | 16 | - Too much of a focus on using frameworks to build web apps quickly, coupled with a lack of understanding of the underlying technologies behind these frameworks. This leads to a lack of problem-solving skills and less long-term employability as tools change. 17 | - A lack of core best practices such as semantics, accessibility, and responsive design. This results in a lack of user focus, leading to usability limitations. 18 | - Gaps in the knowledge of how browsers fundamentally work, how they surface information, and the interactivity you get for free. This causes solutions to be overcomplicated and often inaccessible. 19 | - Limited problem-solving, teamwork, research, and other vital soft skills. 20 | 21 | As a result, we decided to create this curriculum to help guide people towards learning a better skillset, making them more employable, and enabling them to build a better, more accessible, more responsible web of tomorrow. We want them to have the best possible chance of success. 22 | 23 | This curriculum embodies the values we think the web should have — accessibility, sustainability, usability, performance, and community. We would love educators, developers, and students to use this resource and champion these values in their work, in their teachings, and in the products they build. 24 | 25 | ## Target audience 26 | 27 | ### Students 28 | 29 | This curriculum is useful for several groups of students: 30 | 31 | - Students who want to get a job in the industry, which may involve gaining a related qualification or certification. The curriculum will act as a guide for what they should study. 32 | - Existing web developers who want to "level up" their skills, making sure their skill set is current and identifying gaps in their knowledge that they should learn more about. 33 | - Non-front-end web developers who have existing development experience in other areas (for example back-end web developers or platform-specific developers), who wish to get into front-end web development and want a guide to the topics they should learn. 34 | 35 | Once a student has the list of topics they are going to learn, they should go forth and learn them via self-study, taking a course or boot camp to teach them, or a combination. Either way, upon completing a conforming course, students should be able to pass an examination that tests their knowledge of the topics they have studied. 36 | 37 | > **Note**: This resource is not a course for learning front-end web development, and does not aim to thoroughly teach it. It is a recommendation of what modern front-end web developers should know. However, we did spend a considerable amount of time and effort reviewing different courses that cover our modules, and intend to make recommendations for free and paid courses we consider suitable for learning the curriculum. 38 | 39 | ### Educators 40 | 41 | Educators can use the curriculum as a guide when creating programs, units, and assessment specifications for a web-related university degree, college course, coding school course, or similar. Conforming to the curriculum will help ensure that courses teach current techniques and best practices, and avoid bad practices and out-of-date information. 42 | 43 | To find out more, consult our [Resources for Educators](./6-resources-for-educators.md) page. 44 | 45 | > **Hassle-free PDF download**: The complete MDN Curriculum is available as a convenient PDF to share with your students and colleagues. 46 | > 47 | > [Download the Curriculum](https://github.com/mdn/curriculum/releases/latest/download/MDN-Curriculum.pdf) 48 | 49 | ## Scope 50 | 51 | The term _front-end developer_ can be ambiguous; it can mean different things to different people, and folks working on the front end can be expected to do a wide variety of different tasks. 52 | 53 | ### What's covered 54 | 55 | This curriculum does not attempt to outline every topic that a web developer could conceivably be expected to know in-depth. The curriculum covers the following: 56 | 57 | - Core technical skills such as semantic HTML, CSS, and JavaScript fundamentals. 58 | - Best practices such as accessibility, responsive design, and UI design theory. 59 | - Key tools such as frameworks and version control. 60 | - Soft skills for promoting the mindset and attitude required to secure a job. 61 | - Environment knowledge like computer and file systems, browsing the web, command line basics, and code editors. 62 | - Several "extensions" that we feel constitute useful additional skills to learn as developers start to expand their knowledge and develop specialisms. This includes: 63 | - CSS transforms and animation 64 | - Common categories of Web API (e.g. media, graphics, and storage) 65 | - Performance 66 | - Security and privacy 67 | - Testing 68 | 69 | ### Level of detail 70 | 71 | The topics presented are covered in differing levels of detail. 72 | 73 | - Some are covered in depth, for example, HTML and CSS fundamentals. These are important to have a clear understanding of before a student goes too far on their learning journey. 74 | - Some are covered more superficially, for example, version control or testing. It is important to understand what these topics are and get started with some basics, but these kinds of skills can be expanded upon as you continue through your career. 75 | 76 | ### What is not covered 77 | 78 | There are also several areas that we explicitly don't cover in this curriculum, namely: 79 | 80 | - Back-end languages/platforms such as [Node.js](https://nodejs.org/), [PHP](https://www.php.net/), [Python](https://www.python.org/), [.NET](https://dotnet.microsoft.com/), [Java](https://www.java.com/), or [Ruby](https://www.ruby-lang.org/). The back-end, by definition, is out of scope for a front-end development curriculum, although you'll find crossover in full-stack developer courses. 81 | 82 | - One exception here is Node.js; it has such a wide range of uses in modern web development that some rudimentary Node.js knowledge should be considered essential. We don't cover development of Node.js-based applications explicitly, but you will meet it in multiple places in the curriculum as a mechanism for using various tooling/functionality. Examples include [Extension 6 Testing](./4-extensions/6-testing.md) and [Extension 9 Other tooling types](./4-extensions/9-other-tooling-types.md). 83 | 84 | - Traditional relational databases (for example, [MySQL](https://dev.mysql.com/doc/) or [Postgres](https://www.postgresql.org/)) and other server-side datastores (for example, cloud databases such as [MongoDB](https://www.mongodb.com) or [Google Cloud Datastore](https://cloud.google.com/datastore/)). These are deemed to be part of the back-end, and therefore, out of scope. We do cover client-side storage mechanisms like [cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies), [Web Storage](https://developer.mozilla.org/docs/Web/API/Web_Storage_API), and [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API), but they have different and distinct use cases. 85 | 86 | - Deep-dive DevOps topics such as cloud platforms for provisioning and automation (for example, [Amazon AWS](https://aws.amazon.com/) , [Google Cloud Platform](https://console.cloud.google.com), and [Microsoft Azure](https://azure.microsoft.com/)) and containerization tools (for example, [Kubernetes](https://kubernetes.io/) and [Docker](https://www.docker.com/)). We do lightly touch upon some tools that are considered to be in the DevOps space — like GitHub and automated testing tools — but these have distinct crossover into the front-end developer space. 87 | 88 | - Graphic design beyond the basic knowledge (outlined in [Design for developers](./3-core/8-design-for-developers.md)). 89 | 90 | - Skills related to roles such as product and program management (for example, organization, research, and planning). 91 | 92 | ## Attribution 93 | 94 | This resource is free for anyone to use. If you find the curriculum useful, we request that you consider doing the following: 95 | 96 | - Link to it. For example, an educator could include the following in their public program information: 97 | 98 | ```html 99 |

100 | This course is based on the 101 | MDN front-end development curriculum. 104 |

105 | ``` 106 | 107 | - Tell others about it! We would love as many students and educators as possible to start using this curriculum and converging around it as a standard for web developer baseline knowledge. 108 | 109 | > **Note**: This curriculum should be used as a guide, but its use does not imply endorsement by Mozilla. 110 | 111 | ## Curriculum update process 112 | 113 | The web development industry is changing constantly and rapidly. To keep our recommendations current, we will review our curriculum regularly, publish changelogs, and make an announcement every year, contacting the creators of known conforming courses to let them know the curriculum has changed and encourage them to review/update their courses as appropriate. 114 | 115 | We intend to do this in Q2 each year, to give educators time over Q2/Q3 to implement changes before the start of the following academic year. 116 | 117 | ## Feedback 118 | 119 | We would love to hear your feedback regarding our curriculum. If you have any suggestions for how the resource could be improved, or if you've noticed any inaccuracies or mistakes, we would love to hear from you. File an issue containing your feedback on the [curriculum source code repo](https://github.com/mdn/curriculum/issues). 120 | -------------------------------------------------------------------------------- /curriculum/2-getting-started/0-README.md: -------------------------------------------------------------------------------- 1 | --- 2 | template: overview 3 | summary: Before diving into learning with the MDN curriculum, explore foundational topics like soft skills and environment setup to support your success in the core web development modules. 4 | --- 5 | 6 | # Getting started modules 7 | 8 | The subjects outlined in these modules are not web development topics, but they are useful for anyone wanting to learn front-end web development to have an understanding of. We don't consider learning these topics as required before moving on to the core modules, hence we haven't used the word "prerequisite". However, we believe students will have an easier time if they spend some time on these topics first. 9 | -------------------------------------------------------------------------------- /curriculum/2-getting-started/1-soft-skills.md: -------------------------------------------------------------------------------- 1 | --- 2 | summary: Develop a great attitude towards learning, researching, and collaborating to enhance your chances of success. 3 | topic: Best Practices 4 | template: module 5 | --- 6 | 7 | # 1. Soft skills 8 | 9 | This module provides recommendations of soft skills that students can aim to get better at while learning web development, and which constitute good traits to have when entering the industry. They will help immensely in developing the right attitudes for learning, researching, and collaborating, and increase the chances of getting hired. 10 | 11 | ## 1.1 Constant learning mindset 12 | 13 | Students should get into the mindset of constant learning. The web is constantly evolving and technologies and trends are always changing, and they need to constantly update their knowledge to keep up. 14 | 15 | - Get into the habit of regularly reading technical news, blogs, and browser release notes. 16 | 17 | - Engage in reading tasks or small research projects semi-regularly. 18 | 19 | - Set aside specific learning time to spend on acquiring new skills. 20 | 21 | - Be curious. 22 | 23 | Recommended news and information sites: 24 | 25 | - [MDN](https://developer.mozilla.org) 26 | 27 | - [CSS Tricks](https://css-tricks.com/) 28 | 29 | - [Dev](https://dev.to/) 30 | 31 | - [freeCodeCamp](https://www.freecodecamp.org/) 32 | 33 | - [A List Apart](https://alistapart.com/) 34 | 35 | - [Smashing Magazine](https://www.smashingmagazine.com/) 36 | 37 | - [CodeCademy](https://www.codecademy.com/) 38 | 39 | ## 1.2 Open to embracing failure 40 | 41 | A very common issue that causes students and new developers to shy away from experimentation and taking risks (for example when starting new projects or exploring new ideas) is fear of failure. Spend some time learning about the value that can be gleaned from making mistakes, and the lessons that can be learned and applied in the future in similar situations. 42 | 43 | Here are some tips to improve this skill: 44 | 45 | - Define a safe space/peer group where people are free to ask questions and failure will not be judged harshly. 46 | 47 | - Look to your local community and try to find meetup groups with people who can either give you help and advice or are facing the same issues you are and can provide moral support or experiment together with you. 48 | 49 | - (For educators) Set up the marking schemes for your assessments so that you can still get a reasonable number of marks even if you didn't get the correct result provided the process is well documented. Award extra marks for innovation. 50 | 51 | - Run show 'n' tell or one-on-one sessions part-way through a project with peers and mentors to get feedback and insights into where you are going wrong and get advice on how to get back on the right path. 52 | 53 | - Run retrospective meetings to analyze projects, look at what didn't go so well, and talk about how to improve things next time. 54 | 55 | ## 1.3 Effective research 56 | 57 | Web developers spend a lot of time searching for solutions to problems encountered in their work. Students should learn effective strategies for finding answers, and when to use which methods (e.g. don't jump straight to pestering the senior dev every time you hit a roadblock). 58 | 59 | These strategies include: 60 | 61 | - Consulting the documentation. 62 | 63 | - When you are stuck with using a tool/product, consult the official documentation first. It is surprising how many people do not think to do this; official docs are often geared towards beginners, so people with experience may not think of them as being suitable for them. 64 | 65 | - Learn about different [types of documentation](https://documentation.divio.com/) — for example, tutorials, references, and other types — and understand when each type is useful. 66 | 67 | - Using search engines effectively (See [How to use search like a pro: 10 tips and tricks for Google and beyond](https://www.theguardian.com/technology/2016/jan/15/how-to-use-search-like-a-pro-10-tips-and-tricks-for-google-and-beyond)). 68 | 69 | - Choosing valid information sources: 70 | 71 | - Choose recommended sites such as [Stack Overflow](https://stackoverflow.com/) and [MDN](https://developer.mozilla.org). 72 | 73 | - Check the dates on articles, and consider whether the techniques discussed are out-of-date. For example, does an article on CSS layout talk about modern approaches like grid and flexbox, or does it still present obsolete techniques like multi-column layouts with floats? Does it still talk about hacks for ancient browsers like Internet Explorer or Netscape 4? 74 | 75 | - Using social media effectively: 76 | 77 | - Build a network of folks who can help. 78 | 79 | - Join community groups where you can look for answers. For example: 80 | 81 | - [The MDN Web Docs community](https://discord.gg/apa6Rn7uEj) on Discord 82 | - [Scrimba](https://scrimba.com/?via=mdn) _Course partner_ 83 | 84 | - [freeCodeCamp](https://www.freecodecamp.org/) 85 | 86 | - [CodeNewbie](https://www.codenewbie.org/) 87 | 88 | - [Dev.to](https://dev.to/) 89 | 90 | - Learn to give back as well as take; web developers who reciprocate are much more likely to build strong relationships and keep getting help. 91 | 92 | - When you find a useful answer, write about it. For example, blog about it or share it on a social network. Not only will the process of writing clarify the concepts to you, but you'll also get validation and/or feedback from the community. It could also help you to start making a name for yourself in the industry. 93 | 94 | - Making effective use of an experienced contact's time: 95 | 96 | - By "experienced contact", we mean a teacher, mentor, or senior developer. 97 | 98 | - Ask them what communication methods they prefer. 99 | 100 | - Think carefully about what questions to ask them beforehand, consider their time limited and precious. 101 | 102 | - Be sure to do some background research about the topic beforehand and don't ask questions that you can find answers to by searching the web or the official documentation. 103 | 104 | - Timebox the session to say 30 minutes. 105 | 106 | - Prioritize your issues. 107 | 108 | - Set a goal for the session, for example, "try to find a solution to the highest priority issue"; solving the biggest issue may also lead to a fix for other issues. 109 | 110 | - [Rubber ducking](https://wikipedia.org/wiki/Rubber_duck_debugging) as an effective help mechanism. See also [Rubber Duck Debugging](https://rubberduckdebugging.com/). 111 | 112 | - Using AI to help with coding issues (for example [ChatGPT](https://openai.com/blog/chatgpt) or [GitHub Copilot](https://resources.github.com/copilot-for-business/)). You should use AI tools with caution, and familiarize yourself with their strengths and weaknesses: 113 | 114 | - On the plus side, they can speed up research/searches enormously, and help with structuring code and copy. 115 | 116 | - On the other hand, AI tools have no reasoning skills 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. 117 | 118 | > **Notes**: 119 | > 120 | > - There is definitely a balance to knowing the right time to ask for help. Web developers shouldn't constantly pester their peers/colleagues, but equally, they shouldn't soldier on and pretend they know what they are doing when they don't. 121 | > - Consider the value of saying "I don't know" at the right time. 122 | 123 | Resources: 124 | 125 | - [Learning and getting help](https://developer.mozilla.org/docs/Learn/Learning_and_getting_help) 126 | 127 | ## 1.4 Collaboration and teamwork 128 | 129 | As a professional in the web industry, you are going to have to work with other people on projects, and while brainstorming ideas and proposals. Not everyone is born with an innate ability to work in a team, so it is beneficial to start incorporating some best practices early on and putting work into areas where you think you are lacking. 130 | 131 | Recommendations: 132 | 133 | - Learn about empathy, humility, conflict resolution, and cooperation. In all engagements, stay polite and respectful and do not use offensive language. 134 | 135 | - While working in a team in the real world, you will frequently be expected to do peer reviews. Practice how to deliver feedback constructively and respectfully. When receiving feedback, practice how to not take it personally, and focus on the positives and what you can learn. 136 | 137 | - Participate in pair programming, or work in teams on assessments to experience working with other people. 138 | 139 | - Practice running projects like a real software project, with a timeline, plan, and responsibilities. Learn about the software development lifecycle. Pick up some basic project planning skills and tools to be able to estimate and plan your work/project. 140 | 141 | - As part of the course, blog about your work, learnings, and roadblocks, share your code repositories, get peers to critique your work, and offer updates to fix issues in other people's work. 142 | 143 | - Join a Slack channel, Discord, or a similar space, ask peers for help, share resources, and discuss the work to be done. For example: 144 | 145 | - Check out the [Frontend Developers](https://discord.me/frontenddevelopers) Discord server. 146 | 147 | - Our learning partner, Scrimba, provides a [strong community and collaboration experience](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~0xyi?via=mdn) via their Discord server, intending to help their students gain exactly these kinds of skills. 148 | 149 | - Practice asking and answering questions. Even if they seem somewhat trivial, always come up with one or two questions to ask when discussing or reviewing peer work. It is essential to practice explaining what you are doing and asking the right questions to find out what you need to know. 150 | 151 | - Help each other, rather than waiting for a teacher or senior dev to go around and help everyone. Less able peers will get help more quickly, and more able peers will become mentors and experience the satisfaction that it brings. 152 | 153 | - Observe and learn from other experienced folks how to engage in discussions as well as how to approach problem-solving/debugging. 154 | 155 | - Join an open-source project to practice the skills you learn, engage with folks in the community, and learn from observing others (see [How to Contribute to Open Source Projects – A Beginner's Guide](https://www.freecodecamp.org/news/how-to-contribute-to-open-source-projects-beginners-guide/) for useful information). 156 | 157 | Our learning partner, Scrimba, provides a strong community and collaboration experience via their Discord server, intending to help their students gain exactly these kinds of skills. Check out the following embedded content to learn more. 158 | 159 | 160 | 161 | ## 1.5 Succeeding in job interviews 162 | 163 | Technical job interviews can be very demanding, and some have quite specific requirements. 164 | 165 | 166 | 167 | Recommendations: 168 | 169 | - Learn effective strategies for job searching. For example: 170 | 171 | - Attend networking events and job fairs to meet potential employers. 172 | 173 | - Keep an inventory of the people you meet and the companies you apply to. 174 | 175 | - Follow up with any promising leads you meet. 176 | 177 | - Create a portfolio. 178 | 179 | - Build the perfect resumé. 180 | 181 | - Get experience — build real projects and contribute to open source. 182 | 183 | - Build your online persona. 184 | 185 | - Use sites like [LinkedIn](https://www.linkedin.com) to help with the above. 186 | 187 | - Practice writing answers for coding and design interview questions. 188 | 189 | - Build a collection of anecdotes to use for experience-based interview questions. 190 | 191 | - Be aware of the attributes that hiring managers look for in a candidate and prepare accordingly: 192 | 193 | - Someone they can get along with. 194 | 195 | - Positive attitude, respectful, empathic, constructive. 196 | 197 | - Open-minded and works well in a diverse team with diverse viewpoints. 198 | 199 | - Graceful when a decision does not go their way, able to align for the greater good. 200 | 201 | - Good communicator and relationship builder. 202 | 203 | - Tenacious, focused, good problem solver. 204 | 205 | - Having a good portfolio. 206 | 207 | - Be patient. Even the best candidates will get rejections from multiple job applications before they land the job they want. 208 | 209 | Resources: 210 | 211 | - [Getting hired](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~0156?via=mdn), Scrimba _Course Partner_ 212 | 213 | - [Technical Interviewing 101: Ultimate Guide to Acing Your Tech Interview](https://learntocodewith.me/posts/technical-interview/), learntocodewith.me (2022) 214 | 215 | - [30 Technical Interview Questions and Tips for Answering](https://www.coursera.org/articles/technical-interview-questions), Coursera (2023) 216 | 217 | ## 1.6 Workflows and processes 218 | 219 | An important aspect of technical projects that beginners often miss out on is an idea of the bigger picture of a project. They might learn an individual tool or language and understand what they need to do, but be unaware of all the other codebases, tools, systems, and job roles that go together to deliver an entire web application. It is useful to understand the following at a high level: 220 | 221 | - Typical technology combinations and application architectures in common web projects. 222 | 223 | - Typical processes for a technical project, including where different tools are used in those processes. 224 | 225 | - Typical job roles, and where they are involved in those processes. 226 | 227 | - Common work management styles, such as agile and waterfall. 228 | 229 | Resources: 230 | 231 | - [What is a Tech Stack and How Do They Work?](https://www.mongodb.com/basics/technology-stack), mongodb.com 232 | 233 | - [Website development team structure: roles and processes](https://www.truemark.dev/blog/web-development-team-structure-role-process/), truemark.dev (2017) 234 | 235 | - [Waterfall vs. Agile vs. Kanban vs. Scrum: What's the difference?](https://asana.com/resources/waterfall-agile-kanban-scrum), Asana (2022) 236 | 237 | ## 1.7 Relevant contextual information 238 | 239 | While not essential for understanding the technical topics listed in the curriculum, there is a range of contextual information that can help developers gain a well-rounded and flexible perspective. 240 | 241 | Recommendations: 242 | 243 | - To understand why things are the way they are, study the relevant historical context. For example: 244 | 245 | - Why was the web designed like it is in terms of data delivery when arguably faster mechanisms exist? 246 | 247 | - Why does the web use a document model with links as a central feature when these days it is largely used to build apps? 248 | 249 | - Why are web standards created like they are, in collaboration, when the process isn't necessarily as efficient as it could be? 250 | 251 | - Study general programming concepts where relevant, for example: 252 | 253 | - The purpose of objects, and what they enable in terms of the design of a language like JavaScript and its surrounding APIs. 254 | 255 | - How loops work and why they are needed. 256 | -------------------------------------------------------------------------------- /curriculum/2-getting-started/2-environment-setup.md: -------------------------------------------------------------------------------- 1 | --- 2 | summary: Familiarize yourself with your development environment and the tools you'll use to build websites. 3 | topic: Tooling 4 | template: module 5 | --- 6 | 7 | # 2. Environment setup 8 | 9 | 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. 10 | 11 | General resources: 12 | 13 | - [Windows help and learning](https://support.microsoft.com/windows), Microsoft (2024) 14 | 15 | - [macOS User Guide](https://support.apple.com/guide/mac-help/welcome/mac), Apple (2024) 16 | 17 | - [Official Ubuntu documentation](https://help.ubuntu.com/), ubuntu.com (2024) 18 | 19 | ## 2.1 Computer basics 20 | 21 | - Signing into your computer and connecting it to the internet. 22 | 23 | - Using basic system control with keyboard, mouse, and other pointing devices. 24 | 25 | - Installing applications. 26 | 27 | Resources: 28 | 29 | - [Installing basic software](https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web/Installing_basic_software) 30 | 31 | ## 2.2 File systems 32 | 33 | - Basic explorer/finder usage. 34 | 35 | - Standard folder structure. 36 | 37 | - File naming best practices for the web — no spaces, lowercase, choosing a reasonable separator like a hyphen or underscore. 38 | 39 | - Basic file organization best practices. 40 | 41 | - Creating, moving, and deleting files and folders using Explorer/Finder. 42 | 43 | - Searching for files and folders. 44 | 45 | - Dealing with file extensions (e.g. turning off "Hide extensions for known file types" in Windows, showing dot files (`.env`, etc.)). 46 | 47 | - Learning how file types are associated with applications. 48 | 49 | Resources: 50 | 51 | - [Dealing with files](https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web/Dealing_with_files) 52 | 53 | ## 2.3 Browsing the web 54 | 55 | - Available web browsers. 56 | 57 | - Installing a web browser. 58 | 59 | - The difference between a web browser, a website, and a search engine. 60 | 61 | - Basic search engine usage. 62 | 63 | Resources: 64 | 65 | - [What is the difference between web page, website, web server, and search engine?](https://developer.mozilla.org/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines) 66 | 67 | - [How to use search like a pro: 10 tips and tricks for Google and beyond](https://www.theguardian.com/technology/2016/jan/15/how-to-use-search-like-a-pro-10-tips-and-tricks-for-google-and-beyond), theguardian.com (2016) 68 | 69 | ## 2.4 Command line basics 70 | 71 | - Understand what the command line is, and what you can do with it. 72 | 73 | - Understand how to access the command line on different systems: 74 | 75 | - On Linux and macOS, you've generally got a built-in terminal ready to go. 76 | 77 | - On Windows, the default command prompt is a bit more limited; you are better off installing something like [Windows Subsystem for Linux (WSL)](https://learn.microsoft.com/windows/wsl/), [PowerShell](https://learn.microsoft.com/powershell/scripting/install/installing-powershell-on-windows?view=powershell-7.3) or Git Bash (part of [Git for Windows](https://gitforwindows.org/)) if you want the same commands and power available to macOS/Linux. 78 | 79 | - Shortcuts (e.g. up arrow to access previous commands, tab for autocomplete). 80 | 81 | - Basic commands (e.g. `cd`, `ls`, `mkdir`, `touch`, `grep`, `cat`, `mv`, `cp`). 82 | 83 | - Command options/flags. 84 | 85 | Resources: 86 | 87 | - [Command line crash course](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line) 88 | 89 | - Stack Overflow is a good place to find specific solutions to command line problems, for example [How to Batch Rename Files in a macOS Terminal?](https://stackoverflow.com/questions/24102974/how-to-batch-rename-files-in-a-macos-terminal) 90 | 91 | > **Notes**: 92 | > 93 | > 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. 94 | 95 | ## 2.5 Code editors 96 | 97 | - Learn what code editors are available and what is suitable for your purposes: 98 | 99 | - Binary file editors like Microsoft Word are unsuitable for editing code. You need something that cleanly handles and outputs plain text. 100 | 101 | - Default OS plain text editors can be OK, for example, TextEdit on macOS, or Notepad on Windows, but they also have limitations. 102 | 103 | - You are better off with a fully-fledged code editor like [VSCode](https://code.visualstudio.com/) (multiplatform, free), [Sublime Text](https://www.sublimetext.com/) (multiplatform, not free) or [Notepad++](https://notepad-plus-plus.org/) (Windows, free). 104 | 105 | - Integrated Development Environments (IDEs) such as [Visual Studio](https://visualstudio.microsoft.com/) (Windows, not free), [NetBeans](https://netbeans.apache.org/) (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. 106 | 107 | - Learn what a basic code editor can do for you: 108 | 109 | - Open and edit code files. 110 | 111 | - Syntax highlighting. 112 | 113 | - Auto-indentation and other simple syntax fixes. 114 | 115 | - Code completion and help. 116 | 117 | - 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). 118 | 119 | - Integration with version control is often provided (see also [Version control](../3-core/9-version-control.md)) 120 | 121 | - Customize and enhance your code editor with extensions: 122 | 123 | - 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](https://www.typescriptlang.org/) or [JSX](https://react.dev/learn/writing-markup-with-jsx). 124 | 125 | - GitHub/version control extensions, if not provided by default. 126 | 127 | - Theme and color scheme extensions. 128 | 129 | - Productivity extensions like code snippets and scaffolding generators. 130 | 131 | - 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. 132 | -------------------------------------------------------------------------------- /curriculum/3-core/0-README.md: -------------------------------------------------------------------------------- 1 | --- 2 | template: overview 3 | summary: This page lists all core modules in the MDN front-end developer curriculum, covering essential topics like HTML, CSS, JavaScript, accessibility, and version control to build a solid foundation in front-end web development. 4 | --- 5 | 6 | # Core modules 7 | 8 | The core modules cover topics that we feel every web developer should have a good grounding in. This includes all the information they need to design and build a basic, accessible web app that follows modern best practices, and manage and deploy their code using appropriate tools. 9 | 10 | General resources: 11 | 12 | - [The Frontend Developer Career Path](https://v2.scrimba.com/the-frontend-developer-career-path-c0j?via=mdn) from Scrimba: Teaches the MDN Curriculum Core with fun interactive lessons and challenges, knowledgeable teachers, and a supportive community. Go from zero to landing your first front-end job! 13 | -------------------------------------------------------------------------------- /curriculum/3-core/1-web-standards.md: -------------------------------------------------------------------------------- 1 | --- 2 | summary: Understand how the web works at a high level, and the process for creating web technologies. 3 | topic: Web Standards & Semantics 4 | template: module 5 | --- 6 | 7 | # 1. Web standards 8 | 9 | This module covers the fundamentals of how the web works at a high level — including the model used for communication, the core technologies involved, how those technologies are created, and how a web browser renders and displays websites to a user. 10 | 11 | General resources: 12 | 13 | - [Resilient Web Design](https://resilientwebdesign.com/), Jeremy Keith 14 | 15 | ## 1.1 How the web works 16 | 17 | Learning outcomes: 18 | 19 | - Clients and servers and their roles in the web. 20 | 21 | 22 | 23 | - DNS and how it works at a high level. 24 | 25 | - TCP/IP and HTTP. 26 | 27 | - HTTP syntax at a basic level. 28 | 29 | - Common HTTP response codes (e.g. 200, 301, 403, 404, and 500). 30 | 31 | - Components of a URL (protocol, domain, and subdomain). 32 | 33 | - TLDs and how to register a domain. 34 | 35 | - Hosting, how to purchase it, and how to put a website online. 36 | 37 | > **Notes**: 38 | > 39 | > - One of the key goals of this section is a high-level understanding of how the web functions behind the code. 40 | > - You should also gain a vocabulary to start talking about how the web functions precisely. 41 | 42 | Resources: 43 | 44 | - [Requests and responses](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~0lr?via=mdn), Scrimba _Course Partner_ 45 | 46 | - [How the web works](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works) 47 | 48 | - [How the Web Works: A Primer for Newcomers to Web Development (or anyone, really)](https://www.freecodecamp.org/news/how-the-web-works-a-primer-for-newcomers-to-web-development-or-anyone-really-b4584e63585c/), freeCodeCamp (2015) 49 | 50 | - [What is a domain name?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) 51 | 52 | - [What is a URL?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL) 53 | 54 | - [Publishing your website](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website) 55 | 56 | ## 1.2 The HTML, CSS, and JavaScript triangle 57 | 58 | Learning outcomes: 59 | 60 | - The purpose of HTML, CSS, and JavaScript. 61 | 62 | > **Notes**: 63 | > 64 | > Purposes of the main web authoring technologies: 65 | > 66 | > - HTML is for structure and semantics (meaning). 67 | > - CSS is for styling and layout. 68 | > - JavaScript is for controlling dynamic behavior. 69 | 70 | 71 | 72 | - Their place in the larger ecosystem, and the fact that they are not the only web technologies. 73 | 74 | - Why separating the layers is a good idea. 75 | 76 | > **Notes**: 77 | > 78 | > Separation is a good idea for: 79 | > 80 | > - Code management and comprehension. 81 | > - Teamwork/separation of roles. 82 | > - Performance. 83 | 84 | - The fact that in reality, the separation is not always clear. 85 | 86 | > **Notes**: 87 | > 88 | > - A prime example is the case of using JavaScript to dynamically update CSS styling on-the-fly in response to app state changes, user choices, etc. 89 | > - Often this is done by modifying the `Element.style.x` properties, which results in inline CSS being injected into HTML. A better strategy is to add/change classes on elements to avoid inline CSS. 90 | > - Much more severe is the case of JavaScript frameworks that use various HTML-in-JavaScript or CSS-in-JavaScript custom syntax, which results in a lot of mixing of syntax types. 91 | 92 | - The nature of this separation — an ideal to aim for where possible rather than an absolute. 93 | 94 | - The concept of progressive enhancement. 95 | 96 | > **Notes**: 97 | > 98 | > Progressive enhancement is often seen as unimportant, because browsers tend to support new features more consistently these days, and people tend to have faster internet connections. However, you should think about examples relevant to the modern day — cutting down on decoration to make a mobile experience smoother and save on data, or providing a simpler, lower-bandwidth experience for users in developing countries who might still pay for home internet by the megabyte. 99 | > 100 | > This bleeds over into responsive design, which is [covered later on in more depth](./5-css-layout.md). 101 | 102 | Resources: 103 | 104 | - [Intro to web dev basics](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~0f?via=mdn), Scrimba _Course Partner_ 105 | 106 | - [The web and web standards](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards) 107 | 108 | - [The Web Standards Model](https://explainers.dev/web-standards-model/), explainers.dev 109 | 110 | - [What is Progressive Enhancement, and why it matters](https://www.freecodecamp.org/news/what-is-progressive-enhancement-and-why-it-matters-e80c7aaf834a/) 111 | 112 | ## 1.3 The web standards model 113 | 114 | Learning outcomes: 115 | 116 | - How standards bodies operate — for example the [W3C](https://www.w3.org/), [WHATWG](https://whatwg.org/), [TC39](https://tc39.es/), and [Khronos Group](https://www.khronos.org/). 117 | 118 | - The process of standards creation. 119 | 120 | > **Notes**: 121 | > 122 | > - The basic principles of the web — interoperable, accessible, collaborative, and not owned by a single corporation. 123 | > - This basis means that the web is a unique and exciting industry to get involved in. 124 | > - The full W3C standards process is deep and academic. For now, you should understand how different individuals and companies get involved in the standards process, and how the different maturity stages are designed to weed out issues (e.g. interoperability issues, patent issues). 125 | 126 | - The lifecycle of web standards features: 127 | 128 | - Experimental: Usually only available in one browser engine as it is developed, sometimes not in a specification yet. Too early to use in production. 129 | 130 | - Stable: Development finished, specified, available across browser engines. 131 | 132 | - Deprecated: Not to be used anymore, may still be in browsers but flagged for deletion. 133 | 134 | - The key principles web standards are built on: 135 | 136 | - Open to contribute and use. 137 | 138 | - Not patent-encumbered or controlled by a single private entity. 139 | 140 | - Accessible and interoperable. 141 | 142 | - They don't break the web. 143 | 144 | Resources: 145 | 146 | - [The web and web standards](https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards) 147 | 148 | - [About W3C web standards](https://www.w3.org/standards/about/), W3C 149 | 150 | - [The W3C recommendation track](https://www.w3.org/2021/Process-20211102/#rec-track), W3C (2021) 151 | 152 | - [WHATWG FAQ](https://whatwg.org/faq), WHATWG 153 | 154 | - [Web Platform Design Principles](https://www.w3.org/TR/design-principles/), W3C (2023) 155 | 156 | ## 1.4 How browsers load webpages 157 | 158 | Learning outcomes: 159 | 160 | - The HTTP request-response model. 161 | 162 | - The different kinds of assets that are returned in an HTTP response. 163 | 164 | > **Notes**: 165 | > 166 | > The different kinds of downloaded resources to understand are: 167 | > 168 | > - HTML files. 169 | > - CSS files. 170 | > - JavaScript files. 171 | > - Media assets such as images, videos, audio files, [PDFs](https://developer.mozilla.org/docs/Glossary/PDF), and [SVGs](https://developer.mozilla.org/docs/Glossary/SVG). 172 | > - Other kinds of file that the browser can't handle natively and hands off to a relevant app on the device, for example Word documents and PowerPoint slide decks. 173 | 174 | - Static versus dynamic files: Some downloaded code files will be static (they exist on the server in the same form as they are downloaded), and some will be dynamic (generated by the server based on varying data). 175 | 176 | - How these are assembled to create a web document that is then displayed by the browser. 177 | 178 | > **Notes**: 179 | > 180 | > The different stages of rendering a web page: 181 | > 182 | > - A web page is requested (e.g. by clicking a link). 183 | > - A [DNS](https://developer.mozilla.org/docs/Glossary/DNS) lookup is performed to find the location of all the assets to download for the web page. 184 | > - The assets start to be fetched. This involves [TCP handshakes](https://developer.mozilla.org/docs/Glossary/TCP_handshake), [TLS](https://developer.mozilla.org/docs/Glossary/TLS) negotiation, and HTTP requests and responses. 185 | > - A [DOM](https://developer.mozilla.org/docs/Glossary/DOM) tree is assembled from the downloaded HTML. 186 | > - The [CSSOM](https://developer.mozilla.org/docs/Glossary/CSSOM) is built from the CSS rules. 187 | > - The JavaScript is parsed, interpreted, compiled, and executed. 188 | > - The accessibility tree is built for assistive technologies (e.g. screen readers) to hook into. 189 | > - The render tree is created from the DOM and CSSOM, to identify visual styles applied to each DOM node. 190 | > - Page layout is calculated. 191 | > - The styled, laid-out nodes are painted to the screen in the right order, via painting and compositing. 192 | 193 | - Why the browser is sometimes seen as a hostile programming environment: 194 | 195 | - Unlike other programming environments, it is much harder to make guarantees about the environment your code will run on. 196 | 197 | - You cannot guarantee a user's OS, browser, language, location, network connection, CPU, GPU, memory, etc. 198 | 199 | - You need to embrace uncertainty and learn to program defensively. This feeds back into and expands upon the concepts looked at around progressive enhancement in [1.2 The HTML, CSS, and JavaScript triangle](#1.2_the_html_css_and_javascript_triangle). This would also be a good place to look at related concepts such as error handling, feature detection, and responsive design. 200 | 201 | - The flipside — why the web is an awesome programming environment: 202 | 203 | - Its basic state is accessible and linkable. Some of these basics are harder to achieve in other environments. 204 | 205 | - App delivery across the web is simple and powerful. 206 | 207 | - Updates are easy — in many cases, you can just reload the browser tab. You don't need to worry about constantly downloading and installing large packages. 208 | 209 | - The community is vibrant and helpful, and there are lots of great resources available to learn. 210 | 211 | Resources: 212 | 213 | - [Populating the page: how browsers work](https://developer.mozilla.org/docs/Web/Performance/How_browsers_work) 214 | 215 | - [Dealing with files](https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web/Dealing_with_files) 216 | 217 | - [How browsers work](https://www.freecodecamp.org/news/web-application-security-understanding-the-browser-5305ed2f1dac/), freeCodeCamp (2018) 218 | -------------------------------------------------------------------------------- /curriculum/3-core/2-semantic-html.md: -------------------------------------------------------------------------------- 1 | --- 2 | summary: Learn the fundamentals of HTML, the language used to define and structure web content. 3 | topic: Web Standards & Semantics 4 | template: module 5 | --- 6 | 7 | # 2. Semantic HTML 8 | 9 | HTML is the technology that defines the content and structure of any website. Written properly, it should also define the semantics (meaning) of the content in a machine-readable way, which is vital for accessibility, search engine optimization, and making use of the built-in features browsers provide for content to work optimally. This module covers the basics of the language, before looking at key areas such as document structure, links, lists, images, forms, and more. 10 | 11 | General resources: 12 | 13 | - [Learn HTML and CSS](https://scrimba.com/learn/htmlandcss?via=mdn), Scrimba _Course Partner_ 14 | 15 | - [The basics of semantic HTML](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~0xid?via=mdn), Scrimba _Course Partner_ 16 | 17 | - [Structuring the web with HTML](https://developer.mozilla.org/docs/Learn/HTML) 18 | 19 | - [Learn HTML](https://www.codecademy.com/learn/learn-html), Codecademy 20 | 21 | 22 | 23 | ## 2.1 Basic HTML syntax 24 | 25 | Learning outcomes: 26 | 27 | - The need for a doctype at the top of HTML documents. Its original intended purpose, and the fact that now it is somewhat of a historical artifact. 28 | 29 | - The need to set the language of a document using the `lang` attribute in the opening `` tag. 30 | 31 | - The HTML head, and its purpose as a metadata container for the document including key uses: 32 | 33 | - Setting information like character encoding and title. 34 | 35 | - Providing metadata for search engines (e.g. ``) and social media platforms (e.g. [Open Graph Data](https://ogp.me/)), and the Search Engine Optimization (SEO) benefits. 36 | 37 | - Linking to icons for use on browsers and mobile platforms. 38 | 39 | - Linking to stylesheets and script files. 40 | 41 | - The HTML body and its purpose as a container for the page content. 42 | 43 | - The anatomy of an HTML element — element, opening tag, content, closing tag, attributes. 44 | 45 | - What [void elements](https://developer.mozilla.org/docs/Glossary/Void_element) (also known as empty elements) are, and how they differ from other elements. 46 | 47 | Resources: 48 | 49 | - [Getting started with HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML/Getting_started) 50 | 51 | - [What's in the head? Metadata in HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) 52 | 53 | ## 2.2 Good document structure 54 | 55 | Learning outcomes: 56 | 57 | - How to create a good document structure with headings and content beneath those headings. 58 | 59 | - Using semantic HTML rather than presentational HTML: 60 | 61 | - Some presentational markup should no longer be used at all (e.g. `` and ``); it is deprecated. 62 | 63 | - Some presentational markup has been repurposed to have new semantic meaning (e.g. `` and ``). 64 | 65 | - It is tempting to just use `
` elements wherever a block-level container is required, but you should be aware of the other available structural elements and their benefits (such as improved accessibility). Examples include `
`, `
`, `
`, `
`, `