{"id":21696321,"url":"https://github.com/dinanathsj29/emmet-zen-coding","last_synced_at":"2025-03-20T14:47:27.392Z","repository":{"id":121990033,"uuid":"243060888","full_name":"dinanathsj29/emmet-zen-coding","owner":"dinanathsj29","description":"In this course, let us learn and use a plugin called `emmet` which helps to make your workflow super smooth and efficient. I will show you many handy tricks that will do wonders in saving time when developing a project. Emmet is a plugin for text editors that helps you write HTML and CSS faster and efficiently. Write quicker HTML5 \u0026 CSS3 productivity hacks with Emmet (Zen Coding). Faster HTML \u0026 CSS workflow with Emmet (Zen Coding). A Complete Guide to Improve HTML \u0026 CSS Workflow using Emmet. Accelerate HTML \u0026 CSS workflow with emmet coding faster techniques.","archived":false,"fork":false,"pushed_at":"2020-02-28T12:11:55.000Z","size":4512,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-25T14:11:22.726Z","etag":null,"topics":["emmet","emmet-abbreviations","emmet-child-sibling-climbing","emmet-css","emmet-css3","emmet-doctype","emmet-gradient-generator","emmet-html","emmet-html5","emmet-installation","emmet-selector-class-id","emmet-shortcut","emmet-snippet","emmet-tag-generation","emmet-zen-coding","installing-emmet","zen-coding","zen-coding-abbreviations","zen-coding-html","zen-coding-shortcut"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dinanathsj29.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-25T17:38:45.000Z","updated_at":"2020-04-20T10:26:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"29bd56ce-06fe-48fa-a5f9-500b55f8e61c","html_url":"https://github.com/dinanathsj29/emmet-zen-coding","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Femmet-zen-coding","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Femmet-zen-coding/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Femmet-zen-coding/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Femmet-zen-coding/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dinanathsj29","download_url":"https://codeload.github.com/dinanathsj29/emmet-zen-coding/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244635919,"owners_count":20485440,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["emmet","emmet-abbreviations","emmet-child-sibling-climbing","emmet-css","emmet-css3","emmet-doctype","emmet-gradient-generator","emmet-html","emmet-html5","emmet-installation","emmet-selector-class-id","emmet-shortcut","emmet-snippet","emmet-tag-generation","emmet-zen-coding","installing-emmet","zen-coding","zen-coding-abbreviations","zen-coding-html","zen-coding-shortcut"],"created_at":"2024-11-25T19:19:28.453Z","updated_at":"2025-03-20T14:47:27.363Z","avatar_url":"https://github.com/dinanathsj29.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e **Description**:\nIn this course, let us learn and use a plugin called `emmet` which helps to make your workflow super smooth and efficient. I will show you many handy tricks that will do wonders in saving time when developing a project.\n\nEmmet is a plugin for text editors that helps you write HTML and CSS faster and efficiently. Write quicker HTML5 \u0026 CSS3 productivity hacks with Emmet (Zen Coding). Faster HTML \u0026 CSS workflow with Emmet (Zen Coding). A Complete Guide to Improve HTML \u0026 CSS Workflow using Emmet. Accelerate HTML \u0026 CSS workflow with emmet coding faster techniques.\n\n\u003e **Topics (separate with spaces)**:\nAdd topics to categorize your repository and make it more discoverable.\n\n- emmet\n- emmet-html\n- emmet-snippet\n- emmet-abbreviations\n- emmet-shortcut\n- emmet-css\n- zen-coding\n- emmet-zen-coding\n- zen-coding-html\n- zen-coding-abbreviations\n- zen-coding-shortcut\n- installing-emmet\n- emmet-installation\n- emmet-html5\n- emmet-css3\n- emmet-doctype\n- emmet-tag-generation\n- emmet-child-sibling-climbing\n- emmet-gradient-generator\n- emmet-selector-class-id\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"_images-emmet-zen-coding/emmet-logo-1.png\" alt=\"Emmet Zen Coding Logo\" title=\"Emmet Zen Coding\" width=\"200\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"_images-emmet-zen-coding/emmet-logo-2.png\" alt=\"Emmet Zen Coding Logo\" title=\"Emmet Zen Coding\" width=\"600\" /\u003e\n\u003c/p\u003e\n\nEmmet - (Zen Coding)\n=====================\n\n`Emmet` is a plugin for text editors that helps you write HTML and CSS faster and efficiently. Write quicker HTML5 \u0026 CSS3 productivity hacks with Emmet (Zen Coding). Faster HTML \u0026 CSS workflow with Emmet (Zen Coding). A Complete Guide to Improve HTML \u0026 CSS Workflow using Emmet. Accelerate HTML \u0026 CSS workflow with emmet coding faster techniques.\n\nWelcome\n---------------------\n\nHi All, I'm **`Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional`**, I wanna welcome you to `Emmet - Faster coding techniques for HTML \u0026 CSS` - Beginners to Advanced level tutorial for all. \n\nAbout the Course/Tutorial\n---------------------\n\nIn this course, let us learn to use a plugin called `emmet` which helps to make your workflow super smooth and efficient. I will show you many helpful/handy tricks that will do wonders in saving time when developing a project.\n\nIn this Tutorial/Class, Participants will learn how to write Codes/Markups/Styles/Properties without wasting of time. Without writing any tags or attributes, they will feel great; getting full Syntax of HTML and CSS just pressing `TAB` key on Keyboard and typing short letters or keywords only. It's a quite different way to write the codes for best Web Developers forever. No need to remember every tags/element or attribute/property. Without typing tags and attributes, they will get a response to all tags and attributes on screen. It's Time to have fun with Codes!!!\n\nWill learn:\n- How to code/write HTML tags and markup faster\n- How to write CSS code/styles/properties faster\n- How to take HTML \u0026 CSS coding to the next level with Emmet plugin in VS Code\n\nWho is this for? Audience\n---------------------\n\nThis Course/Tutorial is ideal for:\n- Freshers\n- Intermediates\n- Web Designers/Developers, Front-End/UI Designers/Developers\n- Candidates/Professionals who want to learn and master HTML \u0026 CSS faster coding hacks\n- Anybody wanted to code HTML5, CSS3 or XML faster\n- Any Developer looking to develop websites quickly with HTML \u0026 CSS or HTML5, CSS3\n- Any coder looking to be more efficient when programming or developing with HTML \u0026 CSS\n- Candidates desire to learn new techniques to improve skills\n- Anyone want to be more productive writing HTML5 \u0026 CSS3 code\n\nCourse/Tutorial achievement\n---------------------\nCourse/Tutorial Goal\n---------------------\n\nAfter completing/attending/finishing this Course/Tutorial, participants should be able to: \n- Write HTML \u0026 CSS code faster and in an efficient way\n- Improve HTML \u0026 CSS workflow with Short Codes\n- Participants will be able to write HTML5 \u0026 CSS3 codes within a fraction of seconds with various emmet hacks\n\nPrerequisites for current course / What you need to know\n---------------------\n\n- Participants need to know and have Basic/Intermediate knowledge of HTML and CSS or HTML5 and CSS3\n- How to use a text editor such as Notepad++, Sublime Text and/or IDE like Visual Studio Code \n\nTopics included/covered\n=====================\n\n1. [Introduction to Emmet](#1-introduction-to-emmet)\n    - 1.1. [Emmet (Zen Coding)](#11-emmet-zen-coding)\n    - 1.2. [Welcome](#12-welcome)\n    - 1.3. [Agenda](#13-agenda)\n    - 1.4. [What You will Learn](#14-what-you-will-learn)\n    - 1.5. [How long you need to complete?](#15-how-long-you-need-to-complete)\n    - 1.6. [Emmet Zen Coding Code Like a Pro](#16-emmet-zen-coding-code-like-a-pro)\n    - 1.7. [What is Emmet?](#17-what-is-emmet)\n    - 1.8. [Text Editors and IDEs](#18-text-editors-and-ides)\n    - 1.9. [Why Emmet Advantages of Emmet](#19-why-emmet-advantages-of-emmet)\n    - 1.10. [Installing Emmet](#110-installing-emmet) | [Installing Emmet Zen Coding](#110-installing-emmet-zen-coding) | [Setup Emmet Zen Coding](#110-setup-emmet-zen-coding)\n    - 1.11. [Emmet Short Cut Issue Head Up](#111-emmet-short-cut-issue-head-up)\n2. [Using Emmet with HTML5](#2-using-emmet-with-html5)\n    - 2.1. [Using Emmet with HTML5 Symbol Syntax)](#21-Using-emmet-with-html5-symbol-syntax)      \n    - 2.2. [HTML Doc Types ! Html:5 html:4t](#22-html-doc-types)\n    - 2.3. [HTML Tag Elements - name](#23-html-tag-elements-name)\n    - 2.4. [HTML Tag Selectors - Attributes - IDs and Classes . # { }](#24-html-tag-selectors-attributes-ids-and-classes)\n    - 2.5. [HTML Child Element \u003e](#25-html-child-element)\n    - 2.6. [HTML Sibling Element +](#26-html-sibling-element)\n    - 2.7. [HTML Climb-Step Up Element ^](#27-html-climb-step-up-element)\n    - 2.8. [HTML Math Numbering Multiply Replicate tags elements * $ @](#28-html-math-numbering-multiply-replicate-tags-elements)\n    - 2.9. [HTML tags elements Grouping ( )](#29-html-tags-elements-grouping)\n    - 2.10. [HTML Dummy Text generation \u000bLorem Ipsum](#210-html-dummy-text-generation-lorem-ipsum)\n3. [Using Emmet with CSS3](#3-using-emmet-with-css3)\n    - 3.1. [Using Emmet with CSS3 Symbol Syntax)](#31-Using-emmet-with-css3-symbol-syntax)\n    - 3.2. [CSS Properties / Abbreviations m / p / w](#32-css-properties-abbreviations-m-p-w)\n    - 3.3. [CSS Vendor Specific properties / prefix](#33-css-vendor-specific-properties-prefix)\n    - 3.4. [CSS Gradients](#34-css-gradients)\n    - 3.5. [CSS @font-face](#35-css-font-face)\n4. [Demo and Resources](#4-demo-and-resources)\n    - 4.1. [Demo](#41-Demo)\n    - 4.2. [Useful Emmet Shortcuts](#42-useful-emmet-shortcuts)\n    - 4.3. [Useful Websites Resources](#43-useful-websites-resources)\n    - 4.4. [What You Learnt](#44-what-you-learnt)\n    - 4.5. [Q and A](#45-q-and-a)\n    - 4.6. [Feedback ](#46-feedback)\n    - 4.7. [Refinements and Improvements](#47-refinements-and-improvements)\n    - 4.8. [Thank You](#48-thank-you)\n    \n1 Introduction to Emmet\n=====================\n\n1.1. Emmet Zen Coding\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide1.png\" alt=\"Emmet (Zen Coding) Tutorial - Banner\" title=\"Emmet (Zen Coding) Tutorial - Banner\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Banner\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.2. Welcome\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide2.png\" alt=\"Emmet (Zen Coding) Tutorial - Welcome\" title=\"Emmet (Zen Coding) Tutorial - Welcome\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Welcome\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.3. Agenda\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide3.png\" alt=\"Emmet (Zen Coding) Tutorial - Agenda\" title=\"Emmet (Zen Coding) Tutorial - Agenda\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Agenda\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.4. What You will Learn\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide4.png\" alt=\"Emmet (Zen Coding) Tutorial - What You will Learn\" title=\"Emmet (Zen Coding) Tutorial - What You will Learn\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - What You will Learn\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.5. How long you need to complete?\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide5.png\" alt=\"Emmet (Zen Coding) Tutorial - How long you need to complete?\" title=\"Emmet (Zen Coding) Tutorial - How long you need to complete?\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - How long you need to complete?\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide6.png\" alt=\"Emmet (Zen Coding) Tutorial - How long you need to complete?\" title=\"Emmet (Zen Coding) Tutorial - How long you need to complete?\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - How long you need to complete?\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.6. Emmet Zen Coding Code Like a Pro\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide7.png\" alt=\"Emmet (Zen Coding) Tutorial - Emmet Zen Coding Code Like a Pro\" title=\"Emmet (Zen Coding) Tutorial - Emmet Zen Coding Code Like a Pro\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Emmet Zen Coding Code Like a Pro\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.7. What is Emmet?\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide8.png\" alt=\"Emmet (Zen Coding) Tutorial - What is Emmet?\" title=\"Emmet (Zen Coding) Tutorial - What is Emmet?\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - What is Emmet?\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide9.png\" alt=\"Emmet (Zen Coding) Tutorial - What is Emmet?\" title=\"Emmet (Zen Coding) Tutorial - What is Emmet?\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - What is Emmet?\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.8. Text Editors and IDEs\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide10.png\" alt=\"Emmet (Zen Coding) Tutorial - Text Editors and IDEs\" title=\"Emmet (Zen Coding) Tutorial - Text Editors and IDEs\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Text Editors and IDEs\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.9. Why Emmet Advantages of Emmet\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide11.png\" alt=\"Emmet (Zen Coding) Tutorial - Why Emmet Advantages of Emmet\" title=\"Emmet (Zen Coding) Tutorial - Why Emmet Advantages of Emmet\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Why Emmet Advantages of Emmet\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide12.png\" alt=\"Emmet (Zen Coding) Tutorial - Why Emmet Advantages of Emmet\" title=\"Emmet (Zen Coding) Tutorial - Why Emmet Advantages of Emmet\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Why Emmet Advantages of Emmet\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide13.png\" alt=\"Emmet (Zen Coding) Tutorial - Why Emmet Advantages of Emmet\" title=\"Emmet (Zen Coding) Tutorial - Why Emmet Advantages of Emmet\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Why Emmet Advantages of Emmet\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide14.png\" alt=\"Emmet (Zen Coding) Tutorial - Why Emmet Advantages of Emmet\" title=\"Emmet (Zen Coding) Tutorial - Why Emmet Advantages of Emmet\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Why Emmet Advantages of Emmet\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.10. Installing Emmet\n---------------------\n1.10. Installing Emmet Zen Coding\n---------------------\n1.10. Setup Emmet Zen Coding\n---------------------\n\nIn this section, we will learn how to set up/install Emmet, a special plugin in your favorite Text Editor/IDE:\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide15.png\" alt=\"Emmet (Zen Coding) Tutorial - Installing Emmet Zen Coding\" title=\"Emmet (Zen Coding) Tutorial - Installing Emmet Zen Coding\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Installing Emmet Zen Coding\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide16.png\" alt=\"Emmet (Zen Coding) Tutorial - Installing Emmet Zen Coding\" title=\"Emmet (Zen Coding) Tutorial - Installing Emmet Zen Coding\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Installing Emmet Zen Coding\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.11. Emmet Short Cut Issue Head Up\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide17.png\" alt=\"Emmet (Zen Coding) Tutorial - Emmet Short Cut Issue Head Up\" title=\"Emmet (Zen Coding) Tutorial - Emmet Short Cut Issue Head Up\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Emmet Short Cut Issue Head Up\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2 Using Emmet with HTML5\n=====================\n\n2.1. Using Emmet with HTML5 Symbol syntax\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide18.png\" alt=\"Emmet (Zen Coding) Tutorial - Using Emmet with HTML5 - Symbol Syntax\" title=\"Emmet (Zen Coding) Tutorial - Using Emmet with HTML5 - Symbol Syntax\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Using Emmet with HTML5 - Symbol Syntax\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide19.png\" alt=\"Emmet (Zen Coding) Tutorial - Using Emmet with HTML5 - Symbol Syntax\" title=\"Emmet (Zen Coding) Tutorial - Using Emmet with HTML5 - Symbol Syntax\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Using Emmet with HTML5 - Symbol Syntax\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.2. HTML Doc Types\n---------------------\n2.2. HTML Doc Types ! Html:5 html:4t\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide20.png\" alt=\"Emmet (Zen Coding) Tutorial - HTML Doc Types ! Html:5 html:4t\" title=\"Emmet (Zen Coding) Tutorial - HTML Doc Types ! Html:5 html:4t\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - HTML Doc Types ! Html:5 html:4t\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.3. HTML Tag Elements-name\n---------------------\n2.3. HTML Tag Elements - name\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide21.png\" alt=\"Emmet (Zen Coding) Tutorial - HTML Tag Elements - name\" title=\"Emmet (Zen Coding) Tutorial - HTML Tag Elements - name\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - HTML Tag Elements - name\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.4. HTML Tag Selectors-Attributes-IDs and Classes\n---------------------\n2.4. HTML Tag Selectors - Attributes - IDs and Classes . # { }\n---------------------\n2.4. HTML Tag Selectors - Attributes - IDs and Classes . # [ ] { }\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide22.png\" alt=\"Emmet (Zen Coding) Tutorial - HTML Tag Selectors - Attributes - IDs and Classes . # [ ] { }\" title=\"Emmet (Zen Coding) Tutorial - HTML Tag Selectors - Attributes - IDs and Classes . # [ ] { }\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - HTML Tag Selectors - Attributes - IDs and Classes . # [ ] { }\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.5. HTML Child Element\n---------------------\n2.5. HTML Child Element \u003e\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide23.png\" alt=\"Emmet (Zen Coding) Tutorial - HTML Child Element \u003e\" title=\"Emmet (Zen Coding) Tutorial - HTML Child Element \u003e\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - HTML Child Element \u003e\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.6. HTML Sibling Element\n---------------------\n2.6. HTML Sibling Element +\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide24.png\" alt=\"Emmet (Zen Coding) Tutorial - HTML Sibling Element +\" title=\"Emmet (Zen Coding) Tutorial - HTML Sibling Element +\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - HTML Sibling Element +\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.7. HTML Climb-Step Up Element\n---------------------\n2.7. HTML Climb-Step Up Element ^\n---------------------\n2.7. HTML Climb - Step Up Element ^\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide25.png\" alt=\"Emmet (Zen Coding) Tutorial - HTML Climb-Step Up Element ^\" title=\"Emmet (Zen Coding) Tutorial - HTML Climb-Step Up Element ^\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - HTML Climb-Step Up Element ^\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.8. HTML Math Numbering Multiply Replicate tags elements\n---------------------\n2.8. HTML Math Numbering Multiply Replicate tags elements * $ @\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide26.png\" alt=\"Emmet (Zen Coding) Tutorial - HTML Math Numbering, Multiply, Replicate tags elements * $ @\" title=\"Emmet (Zen Coding) Tutorial - HTML Math Numbering, Multiply, Replicate tags elements * $ @\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - HTML Math Numbering, Multiply, Replicate tags elements * $ @\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide27.png\" alt=\"Emmet (Zen Coding) Tutorial - HTML Math Numbering, Multiply, Replicate tags elements * $ @\" title=\"Emmet (Zen Coding) Tutorial - HTML Math Numbering, Multiply, Replicate tags elements * $ @\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - HTML Math Numbering, Multiply, Replicate tags elements * $ @\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.9. HTML tags elements Grouping\n---------------------\n2.9. HTML tags elements Grouping ( )\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide28.png\" alt=\"Emmet (Zen Coding) Tutorial - HTML tags elements Grouping ( )\" title=\"Emmet (Zen Coding) Tutorial - HTML tags elements Grouping ( )\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - HTML tags elements Grouping ( )\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.10. HTML Dummy Text generation \u000bLorem Ipsum\n---------------------\n2.10. HTML Dummy Text generation\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide29.png\" alt=\"Emmet (Zen Coding) Tutorial - HTML Dummy Text generation \u000bLorem Ipsum\" title=\"Emmet (Zen Coding) Tutorial - HTML Dummy Text generation \u000bLorem Ipsum\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - HTML Dummy Text generation \u000bLorem Ipsum\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n3 Using Emmet with CSS3\n=====================\n\n3.1. Using Emmet with CSS3 Symbol syntax\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide30.png\" alt=\"Emmet (Zen Coding) Tutorial - Using Emmet with CSS3 Symbol Syntax\" title=\"Emmet (Zen Coding) Tutorial - Using Emmet with CSS3 Symbol Syntax\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Using Emmet with CSS3 Symbol Syntax\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n3.2. CSS Properties Abbreviations m p w\n---------------------\n3.2. CSS Properties / Abbreviations m / p / w\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide31.png\" alt=\"Emmet (Zen Coding) Tutorial - CSS Properties / Abbreviations m / p / w\" title=\"Emmet (Zen Coding) Tutorial - CSS Properties / Abbreviations m / p / w\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - CSS Properties / Abbreviations m / p / w\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n3.3. CSS Vendor Specific properties prefix\n---------------------\n3.3. CSS Vendor Specific properties / prefix\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide32.png\" alt=\"Emmet (Zen Coding) Tutorial - CSS Vendor Specific properties / prefix\" title=\"Emmet (Zen Coding) Tutorial - CSS Vendor Specific properties / prefix\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - CSS Vendor Specific properties / prefix\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n3.4. CSS Gradients\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide33.png\" alt=\"Emmet (Zen Coding) Tutorial - CSS Gradients\" title=\"Emmet (Zen Coding) Tutorial - CSS Gradients\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - CSS Gradients\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n3.5. CSS @font-face\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide34.png\" alt=\"Emmet (Zen Coding) Tutorial - CSS @font-face\" title=\"Emmet (Zen Coding) Tutorial - CSS @font-face\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - CSS @font-face\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n4 Demo and Resources\n=====================\n\n4.1. Demo\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide35.png\" alt=\"Emmet (Zen Coding) Tutorial - Demo\" title=\"Emmet (Zen Coding) Tutorial - Demo\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Demo\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n4.2. Useful Emmet Shortcuts\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide36.png\" alt=\"Emmet (Zen Coding) Tutorial - Useful Emmet Shortcuts\" title=\"Emmet (Zen Coding) Tutorial - Useful Emmet Shortcuts\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Useful Emmet Shortcuts\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide37.png\" alt=\"Emmet (Zen Coding) Tutorial - Useful Emmet Shortcuts\" title=\"Emmet (Zen Coding) Tutorial - Useful Emmet Shortcuts\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Useful Emmet Shortcuts\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n4.3. Useful Websites Resources\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide38.png\" alt=\"Emmet (Zen Coding) Tutorial - Useful Websites Resources\" title=\"Emmet (Zen Coding) Tutorial - Useful Websites Resources\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Useful Websites Resources\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\n4.4. What You Learnt\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide39.png\" alt=\"Emmet (Zen Coding) Tutorial - What You Learnt\" title=\"Emmet (Zen Coding) Tutorial - What You Learnt\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - What You Learnt\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n4.5. Q and A\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide40.png\" alt=\"Emmet (Zen Coding) Tutorial - Q and A\" title=\"Emmet (Zen Coding) Tutorial - Q and A\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Q and A\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n4.6. Feedback\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide41.png\" alt=\"Emmet (Zen Coding) Tutorial - Feedback\" title=\"Emmet (Zen Coding) Tutorial - Feedback\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Feedback\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n4.7. Refinements and Improvements\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide42.png\" alt=\"Emmet (Zen Coding) Tutorial - Refinements and Improvements\" title=\"Emmet (Zen Coding) Tutorial - Refinements and Improvements\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Refinements and Improvements\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n4.8. Thank You\n---------------------\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-emmet-zen-coding/Slide43.png\" alt=\"Emmet (Zen Coding) Tutorial - Thank You\" title=\"Emmet (Zen Coding) Tutorial - Thank You\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Emmet (Zen Coding) Tutorial - Thank You\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Femmet-zen-coding","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdinanathsj29%2Femmet-zen-coding","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Femmet-zen-coding/lists"}