EMMET Faster HTML & CSS workflow - Best Tool For Developers

Emmet is plugin for text editors that helps you write HTML and CSS faster. Work quicker saving time & making more money.

Created byEdwin Diaz | 900,000+ Students, Coding Faculty Solutions

Last updated 1/2022

English

German [Auto],English [Auto],

What you'll learn

You will be able to code HTML faster
You will be able to code CSS faster
You will be able to code XML faster
You will be faster coder at the end of this course, PERIOD!

Course content

3 sections • 20 lectures • 1h 15m total length

Introduction0:57
Discover how Emmet uses an abbreviation structure to write XML, HTML, and CSS with grouping, numbering, tag matching, and element replication to speed up development.
Course Exercise Files8:54
Explore course exercise files and navigate updates, settings, and resources. Learn to use Visual Studio Code and IntelliJ IDEA for efficient web development, playback controls, transcripts, and course Q&A.
What exactly is Emmet?1:44
Installing Emmet5:34
Install Emmet in Sublime Text or Brackets via package control or manual install, then restart. Test by typing a greater-than symbol A and pressing tab to see it expand.
Organizing Working Area1:55
Organize your Emmet workflow by creating a dedicated project folder and starter files, and generate an html skeleton with the exclamation shortcut.

Intro to the HTML0:35
Explore emmet basics for HTML, learn selectors, replicate elements by making copies, practice text expansion and grouping, and build faster, more efficient HTML workflows.
Short Cut Issue Head Up!3:18
Learn how to resolve Emmet shortcut conflicts by mapping or disabling co-editor and operating system shortcuts, ensuring tab-based actions work, and confirming correct key mappings on the Emmet site.
First Emmet Code5:32
Replication2:19
Learn to replicate and copy HTML items using Emmet shortcuts, create multiple list items with an asterisk and number, add classes and anchors, and use placeholders efficiently in Sublime.
Expansions4:36
Explore Emmet expansions to generate nested HTML elements using curly brace syntax, practice with exercise files, and learn to vary titles, subtitles, images, and paragraphs efficiently.
Grouping & More5:45
ExploreEmmet's grouping and nesting with the greater than symbol and parentheses to structure html quickly, using tab expansion to generate divs, headings, paragraphs, and links.
Numbering Elements4:47
Learn to number elements with emmet by generating sequential class names using the dollar sign, including starting numbers and reverse order, to differentiate repeated elements while using a base class.
Toggleling Comments5:36
Toggle comments in emmet with command forward slash to comment or uncomment; double press to uncomment. Place the cursor inside the element to limit scope.
Exploring Attributes3:06
Explore inserting attributes with emet using square brackets for src and href, preview a 100x100 placeholder image, and create link elements in a simple HTML example.
Getting to Edit Points4:18
Master Emmett's edit-point shortcuts to jump quickly between editable points in a document, skipping mouse clicks and arrows while inserting content at each location.
Matching Tags2:25
Learn to match html tags with the control shift t shortcut to jump to next matching tag. Use this to quickly navigate complex markup and locate opening and closing tags.
Wrapping2:47
Learn to speed up HTML structuring by wrapping selected text with Emmet using wrap with abbreviation, including adding classes and creating multiple list items with the asterisk replication feature.

CSS Abreviations5:09
learn how emmet abbreviations speed up css coding by expanding with the plus symbol to generate properties like background, border, and padding; explore common variations and the emmet cheat sheet.
Exploring Gradients with Emmet4:24
learn to create gradients with emmet, apply browser prefixes, and link a gradient stylesheet. set colors like yellow and red, adjust positions, and refresh with editor shortcuts.
Wrapping this up!2:08
Congratulates you, encourages practicing with Emet, using documentation and the cheat sheet, and invites you to explore more courses at Edwards dot com, including Bootstrap and WordPress.

Requirements

Students need to know HTML and CSS

Description

NEW COURSE AND UP TO DATE - AS OF APRIL 2015

Do you want to code HTML, CSS and XML faster?

Do you want to save time when coding?

Do you want to code more error free?

Do you want to become a NINJA coder?

If your answered was YES to most of these questions, then this course is for you.

On this course I will teach how to use a plugin called emmet to help make your workflow super smooth and efficient. I will show you many handy tricks that will do wonders in saving you time when developing.

You will become a faster coder in no time and it will be super easy to learn if you already know CSS. Now that I use Emmet, I could NOT imagine living without it.

Come join me in the course, and I promise that you will learn a lot and you will greatly appreciate it forever.

Who this course is for:

Anybody wanting to code HTML, CSS or XML faster should take this course
Any Developer looking to develop websites quickly should take this course
Any coder looking to be more efficient when programming or developing

EMMET Faster HTML & CSS workflow - Best Tool For Developers

What you'll learn

Explore related topics

Course content

Getting Started5 lectures • 19min

Emmet & HTML12 lectures • 45min

Using CSS with Emmet3 lectures • 12min

Requirements

Description

Who this course is for: