diff --git a/.cspell.json b/.cspell.json index 518aa1c..0c9bb98 100644 --- a/.cspell.json +++ b/.cspell.json @@ -1,5 +1,36 @@ { "language": "en", - "words": ["asdf", "hackyourfuture", "monospace", "Precourse"], + "words": [ + "asdf", + "hackyourfuture", + "Nepo", + "monospace", + "Precourse", + "sooooo", + "Abnux", + "Loruki", + "dzone", + "migas", + "shoreditch", + "Rodolf", + "Gradie", + "Editables", + "slkdfk", + "Myintt", + "wireframe", + "Traversy", + "Fribly", + "Interneting", + "gitbook", + "Tiago", + "Samir", + "Bermarte", + "Mame", + "Yodiz", + "Zepel", + "Ponomarev", + "Lant", + "mmtuts" + ], "ignorePaths": ["node_modules/**", "**/*.json", "**/*.mp4", "**/*.svg"] } diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..0ff4153 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,54 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +# Why You Should Use EditorConfig to Standardize Code Styles +# https://www.freecodecamp.org/news/how-to-use-editorconfig-to-standardize-code-styles/ + +########################################## +# Common Settings +########################################## + +# This file is the top-most EditorConfig file +root = true + +# All Files +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +insert_final_newline = true +trim_trailing_whitespace = true + +########################################## +# File Extension Settings +########################################## + +# JSON Files +[*.{json,json5,webmanifest}] +indent_size = 2 + +# YAML Files +[*.{yml,yaml}] +indent_size = 2 + +# Markdown Files +[*.{md,mdx}] +trim_trailing_whitespace = false + +# Web Files +[*.{htm,html,js,jsm,ts,tsx,cjs,cts,ctsx,mjs,mts,mtsx,css,sass,scss,less,pcss,svg,vue}] +indent_size = 2 + +# Batch Files +[*.{cmd,bat}] +end_of_line = crlf + +# Bash Files +[*.sh] +end_of_line = lf + +# Makefiles +[Makefile] +indent_style = tab diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..9850b86 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,296 @@ +# https://github.com/alexkaratarakis/gitattributes + +# Common settings that generally should always be used with your language specific settings + +# Auto detect text files and perform LF normalization +* text=auto + +# +# The above will handle all files NOT found below +# + +# Documents +*.bibtex text diff=bibtex +*.doc diff=astextplain +*.DOC diff=astextplain +*.docx diff=astextplain +*.DOCX diff=astextplain +*.dot diff=astextplain +*.DOT diff=astextplain +*.pdf diff=astextplain +*.PDF diff=astextplain +*.rtf diff=astextplain +*.RTF diff=astextplain +*.md text diff=markdown +*.mdx text diff=markdown +*.tex text diff=tex +*.adoc text +*.textile text +*.mustache text +*.csv text eol=crlf +*.tab text +*.tsv text +*.txt text +*.sql text +*.epub diff=astextplain + +# Graphics +*.png binary +*.jpg binary +*.jpeg binary +*.gif binary +*.tif binary +*.tiff binary +*.ico binary +# SVG treated as text by default. +*.svg text +# If you want to treat it as binary, +# use the following line instead. +# *.svg binary +*.eps binary + +# Scripts +*.bash text eol=lf +*.fish text eol=lf +*.sh text eol=lf +*.zsh text eol=lf +# These are explicitly windows files and should use crlf +*.bat text eol=crlf +*.cmd text eol=crlf +*.ps1 text eol=crlf + +# Serialisation +*.json text +*.toml text +*.xml text +*.yaml text +*.yml text + +# Archives +*.7z binary +*.gz binary +*.tar binary +*.tgz binary +*.zip binary + +# Text files where line endings should be preserved +*.patch -text + +# +# Exclude files from exporting +# + +.gitattributes export-ignore +.gitignore export-ignore +.gitkeep export-ignore + +# Apply override to all files in the directory +*.md linguist-detectable + +## GITATTRIBUTES FOR WEB PROJECTS +# +# These settings are for any web project. +# +# Details per file setting: +# text These files should be normalized (i.e. convert CRLF to LF). +# binary These files are binary and should be left untouched. +# +# Note that binary is a macro for -text -diff. +###################################################################### + +# Auto detect +## Handle line endings automatically for files detected as +## text and leave all files detected as binary untouched. +## This will handle all files NOT defined below. +* text=auto + +# Source code +*.bash text eol=lf +*.bat text eol=crlf +*.cmd text eol=crlf +*.coffee text +*.css text diff=css +*.htm text diff=html +*.html text diff=html +*.inc text +*.ini text +*.js text +*.json text +*.jsx text +*.less text +*.ls text +*.map text -diff +*.od text +*.onlydata text +*.php text diff=php +*.pl text +*.ps1 text eol=crlf +*.py text diff=python +*.rb text diff=ruby +*.sass text +*.scm text +*.scss text diff=css +*.sh text eol=lf +.husky/* text eol=lf +*.sql text +*.styl text +*.tag text +*.ts text +*.tsx text +*.xml text +*.xhtml text diff=html + +# Docker +Dockerfile text + +# Documentation +*.ipynb text eol=lf +*.markdown text diff=markdown +*.md text diff=markdown +*.mdwn text diff=markdown +*.mdown text diff=markdown +*.mkd text diff=markdown +*.mkdn text diff=markdown +*.mdtxt text +*.mdtext text +*.txt text +AUTHORS text +CHANGELOG text +CHANGES text +CONTRIBUTING text +COPYING text +copyright text +*COPYRIGHT* text +INSTALL text +license text +LICENSE text +NEWS text +readme text +*README* text +TODO text + +# Templates +*.dot text +*.ejs text +*.erb text +*.haml text +*.handlebars text +*.hbs text +*.hbt text +*.jade text +*.latte text +*.mustache text +*.njk text +*.phtml text +*.svelte text +*.tmpl text +*.tpl text +*.twig text +*.vue text + +# Configs +*.cnf text +*.conf text +*.config text +.editorconfig text +.env text +.gitattributes text +.gitconfig text +.htaccess text +*.lock text -diff +package.json text eol=lf +package-lock.json text eol=lf -diff +pnpm-lock.yaml text eol=lf -diff +.prettierrc text +yarn.lock text -diff +*.toml text +*.yaml text +*.yml text +browserslist text +Makefile text +makefile text + +# Heroku +Procfile text + +# Graphics +*.ai binary +*.bmp binary +*.eps binary +*.gif binary +*.gifv binary +*.ico binary +*.jng binary +*.jp2 binary +*.jpg binary +*.jpeg binary +*.jpx binary +*.jxr binary +*.pdf binary +*.png binary +*.psb binary +*.psd binary +# SVG treated as an asset (binary) by default. +*.svg text +# If you want to treat it as binary, +# use the following line instead. +# *.svg binary +*.svgz binary +*.tif binary +*.tiff binary +*.wbmp binary +*.webp binary + +# Audio +*.kar binary +*.m4a binary +*.mid binary +*.midi binary +*.mp3 binary +*.ogg binary +*.ra binary + +# Video +*.3gpp binary +*.3gp binary +*.as binary +*.asf binary +*.asx binary +*.avi binary +*.fla binary +*.flv binary +*.m4v binary +*.mng binary +*.mov binary +*.mp4 binary +*.mpeg binary +*.mpg binary +*.ogv binary +*.swc binary +*.swf binary +*.webm binary + +# Archives +*.7z binary +*.gz binary +*.jar binary +*.rar binary +*.tar binary +*.zip binary + +# Fonts +*.ttf binary +*.eot binary +*.otf binary +*.woff binary +*.woff2 binary + +# Executables +*.exe binary +*.pyc binary + +# RC files (like .babelrc or .eslintrc) +*.*rc text + +# Ignore files (like .npmignore or .gitignore) +*.*ignore text diff --git a/.github/PULL_REQUEST_TEMPLATE/code-review.md b/.github/PULL_REQUEST_TEMPLATE/code-review.md deleted file mode 100644 index b82302e..0000000 --- a/.github/PULL_REQUEST_TEMPLATE/code-review.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -name: code review PR -about: A template PR for contributing to this project ---- - - - -## Checklists - - - -- [ ] All CI checks pass -- [ ] the branch is up to date with `main`/`master` -- [ ] the code works when pulled and run locally - -## Markdown - - - -- [ ] the markdown source is formatted -- [ ] spelling and grammar is correct in all text -- [ ] The markdown looks correct when you preview the file -- [ ] all links and images work diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 0000000..55c425d --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,41 @@ + + + + +## Description + + + +## Checklists + +### General Checks + +- [ ] the branch is up to date with `main`/`master` +- [ ] the code works when pulled and run locally +- [ ] All CI checks pass +- [ ] all conflicts are resolved (if any) +- [ ] PR has a descriptive title +- [ ] PR has appropriate labels and milestones for easy identification +- [ ] PR it is assigned to the owner +- [ ] reviewers are assigned +- [ ] the PR contributes only one focused change +- [ ] It is in the appropriate column in the project board (if necessary) +- [ ] has short and clear description +- [ ] is linked to an issue (if it is related) +- [ ] feedback is addressed (if any and if it is appropriate feedback.) + +## Markdown + + + +- [ ] the markdown source is formatted +- [ ] spelling and grammar is correct in all text +- [ ] The markdown looks correct when you preview the file +- [ ] all links and images work diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 34bf087..aa6ac69 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -8,6 +8,9 @@ jobs: lint-and-validate: runs-on: ubuntu-latest steps: + - name: Checkout + uses: actions/checkout@v3 + - run: npm install - run: npm run format:check diff --git a/.gitignore b/.gitignore index 3c3629e..7587ea5 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,25 @@ +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +!.vscode/*.code-snippets + +# Local History for Visual Studio Code +.history/ + +# Built Visual Studio Code Extensions +*.vsix + +# Dependency directory +# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git node_modules + +# Generated by MAC users +**/.DS_Store + +# Optional npm cache directory +.npm + +# Generated from accessibility validation +accessibility_report diff --git a/.htmlvalidateignore b/.htmlvalidateignore index 3c3629e..baac422 100644 --- a/.htmlvalidateignore +++ b/.htmlvalidateignore @@ -1 +1,2 @@ node_modules +accessibility_report diff --git a/.markdownlint.jsonc b/.markdownlint.jsonc index e9d034a..244509f 100644 --- a/.markdownlint.jsonc +++ b/.markdownlint.jsonc @@ -67,7 +67,7 @@ // MD013/line-length - Line length "MD013": { // Number of characters - "line_length": 80, + "line_length": 120, // Number of characters for headings "heading_line_length": 80, // Number of characters for code blocks @@ -115,9 +115,9 @@ // MD024/no-duplicate-heading/no-duplicate-header - Multiple headings with the same content "MD024": { // Only check sibling headings - "allow_different_nesting": false, + "allow_different_nesting": true, // Only check sibling headings - "siblings_only": false + "siblings_only": true }, // MD025/single-title/single-h1 - Multiple top-level headings in the same document @@ -242,7 +242,7 @@ // MD048/code-fence-style - Code fence style "MD048": { - // Code fence syle + // Code fence style "style": "consistent" } } diff --git a/.prettierrc.json b/.prettierrc.json index a68a6f4..a915845 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,4 +1,5 @@ { "printWidth": 80, - "proseWrap": "always" + "proseWrap": "always", + "endOfLine": "lf" } diff --git a/.stylelintrc.json b/.stylelintrc.json index 40db42c..6870053 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,3 +1,7 @@ { - "extends": "stylelint-config-standard" + "extends": ["stylelint-config-standard"], + "rules": { + "declaration-property-value-no-unknown": true, + "property-no-vendor-prefix": null + } } diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..c1593f7 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,35 @@ +{ + // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. + // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp + + // List of extensions which should be recommended for users of this workspace. + "recommendations": [ + "streetsidesoftware.code-spell-checker", + "dbaeumer.vscode-eslint", + "mhutchie.git-graph", + "donjayamanne.githistory", + "github.vscode-pull-request-github", + "eamodio.gitlens", + "anteprimorac.html-end-tag-labels", + "ritwickdey.liveserver", + "yzhang.markdown-all-in-one", + "davidanson.vscode-markdownlint", + "esbenp.prettier-vscode", + "alefragnani.project-manager", + "stylelint.vscode-stylelint", + "vscode-icons-team.vscode-icons", + "alefragnani.bookmarks", + "bierner.markdown-preview-github-styles", + "ecmel.vscode-html-css", + "htmlhint.vscode-htmlhint", + "pranaygp.vscode-css-peek", + "zignd.html-css-class-completion", + "juanallo.vscode-dependency-cruiser", + "visualstudioexptteam.vscodeintellicode", + "aaron-bond.better-comments", + "christian-kohler.path-intellisense", + "ms-vsliveshare.vsliveshare" + ], + // List of extensions recommended by VS Code that should not be recommended for users of this workspace. + "unwantedRecommendations": [] +} diff --git a/.vscode/settings.json b/.vscode/settings.json index 22c74b1..5a90e20 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,7 +1,117 @@ { + // https://vscode-docs.readthedocs.io/en/stable/customization/userandworkspace/#default-settings + //-------- Editor configuration -------- + + // Controls auto save of editors that have unsaved changes.: https://code.visualstudio.com/docs/editor/codebasics#_save-auto-save + "files.autoSave": "onFocusChange", + + // Format a file on save. A formatter must be available. "editor.formatOnSave": true, - "editor.renderIndentGuides": true, + + // Controls whether the editor should automatically format the pasted content. A formatter must be available. + "editor.formatOnPaste": true, + + // Controls whether the editor should render indent quides + "editor.guides.indentation": true, + + // Controls whether the editor should highlight the active indent guide. + "editor.guides.highlightActiveIndentation": true, + + // Controls the rendering size of tabs in characters. Accepted values: "auto", 2, 4, 6, etc. If set to "auto", the value will be guessed when a file is opened. "editor.tabSize": 2, - "files.autoSave": "onFocusChange", - "editor.defaultFormatter": "esbenp.prettier-vscode" + + // Defines a default formatter which takes precedence over all other formatter settings. Must be the identifier of an extension contributing a formatter + "editor.defaultFormatter": "esbenp.prettier-vscode", + + // Controls bracket pair colorization is enabled or not + "editor.bracketPairColorization.enabled": true, + + // Controls whether bracket pair guides are enabled or not. (true, active, false) + "editor.guides.bracketPairs": "active", + + // Controls whether horizontal bracket pair guides are enabled or not. + "editor.guides.bracketPairsHorizontal": "active", + + // Controls whether the editor should highlight the active bracket pair. + "editor.guides.highlightActiveBracketPair": true, + + // Controls whether the editor has linked editing enabled. + "editor.linkedEditing": true, + + //-------- HTML configuration -------- + + // Enable/disable auto closing of HTML tags + "html.autoClosingTags": true, + + // Configures if the built-in HTML language suggests HTML5 tags, properties and values. + "html.suggest.html5": true, + + // Defines a default HTML formatter which takes precedence over all other formatter settings. Must be the identifier of an extension contributing a formatter + "[html]": { + "editor.defaultFormatter": "vscode.html-language-features" + }, + + //-------- Emmet configuration -------- + + // Enables completion when you are writing Emmet appreveation. + "html-css-class-completion.enableEmmetSupport": true, + + //-------- JavaScript configuration -------- + + // Enable/disable auto closing of JSX tags. + "javascript.autoClosingTags": true, + + // Enable/disable auto import suggestions. + "javascript.suggest.autoImports": true, + + // Enable/disable automatic updating of import paths when you rename or move a file in VS Code. + "javascript.updateImportsOnFileMove.enabled": "always", + + // Enable/disable suggestoins for paths in import statement and require calls. (change it to false to be able to use Path Intellisense extension) + "javascript.suggest.paths": false, + + //-------- TypeScript configuration -------- + + // Enable/disable auto closing of JSX tags. + "typescript.autoClosingTags": true, + + // Enable/disable auto import suggestions. + "typescript.suggest.autoImports": true, + + // Enable/disable automatic updating of import paths when you rename or move a file in VS Code. + "typescript.updateImportsOnFileMove.enabled": "always", + + // Enable/disable suggestoins for paths in import statement and require calls. (change it to false to be able to use Path Intellisense extension) + "typescript.suggest.paths": false, + + //-------- Work Bench configuration -------- + + // Controls whether a top border is drawn on tabs for editors that have unsaved changes. + "workbench.editor.highlightModifiedTabs": true, + + //-------- Files configuration -------- + + // When enabled, will trim all new lines after the final new line at the end of the file when saving it. + "files.trimFinalNewlines": true, + + // When enabled, insert a new final line at the end of the file when saving it. + "files.insertFinalNewline": true, + + //-------- Live Server configuration -------- + + // Set Custom Port Number of Live Server. Set 0 if you want random port. + "liveServer.settings.port": 5504, + + //-------- Markdown configuration -------- + + // Enable path suggestoins while writing links in markdown files + "markdown.suggest.paths.enabled": true, + + // Defines a default markdown formatter which takes precedence over all other formatter settings. Must be the identifier of an extension contributing a formatter + "[markdown]": { + "editor.defaultFormatter": "DavidAnson.vscode-markdownlint" + }, + + // Enable/disable update table of contents on save + "markdown.extension.toc.updateOnSave": false } diff --git a/0-developing-html-and-css/html-css/examples/css/inline-vs-internal-vs-external-styles.html b/0-developing-html-and-css/html-css/examples/css/inline-vs-internal-vs-external-styles.html index 79ac05b..c112f30 100644 --- a/0-developing-html-and-css/html-css/examples/css/inline-vs-internal-vs-external-styles.html +++ b/0-developing-html-and-css/html-css/examples/css/inline-vs-internal-vs-external-styles.html @@ -5,7 +5,7 @@ Inline vs. Internal vs. External Styles - +