Write quicker HTML5 and CSS 3; productivity hacks with emmet (Udemy.com)

Pretty good course on learning to use EMMET to maximize your productivity. The ONLY thing I would add to this course, even though the course creator said he doesn't like to change things in the EMMET files, would be showing how to add languages such as perl, php, etc..., so that EMMET can fill in common tags for those languages like it does for html and css!

The author should have been mentioned emmet io specifications (commands) and original explanations first! And unfortunately in case you have a question or trouble no one will help you during this course. So the author doesn't answer the questions ! And there are actually not many questions posted. But it is still a good course. There are some cmd he used at the final stages of this course. CSS commands: m+tab = {margin: ;} mt+tab = margin-top: ; mr+tab = margin-right: ; ml+tab = margin-left: ; mb+tab = margin-bottom: ; the same thing is applicable for m:a and mr,ml,mb,mt +tab -> equal margin (side): auto ----------------- p tab= padding: ; pt tab=padding-top: ; presumbably the same is applicabl for pb,pr,pl; pr:25px = {padding-right: 25px;} Don't forget to write these expessions and statements with bg tab = background: ; bg:#0+ tab = background: #000; bg+ = background: #fff url() 0 0 no-repeat; bgc tab = background-color: #fff; bgc:t tab= background-color: transparent; bgsz tab = -webkit-background-size: ; background-size: ; c tab = color: #000; cr tab = color: rgb(0, 0, 0); op tab = opacity: ; bxz tab = -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; box-sizing: content-box = bxz:cb tab = -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; box-size or bxz:bb tab =-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; box shadow or bxsh tab = -webkit-box-shadow: inset hoff voff blur color; -moz-box-shadow: inset hoff voff blur color; box-shadow: inset hoff voff blur color; maw tab = max-width: ; f tab = font: ; ff tab = font-family: ; f+ tab = font: 1em Arial,sans-serif; fw tab = {font-weight: ;} fs tab = {font-style: italic;} fs:obl tab = font-style: oblique; fz tab = {font-size: ;} ff:s ; ff:f; ff:c; ff:m; font-family: serif; fem tab = font-emphasize: ; fems tab = font-emphasize-style: ; fems:dt tab= font-emphasize-style: dot; fems:c tab= font-emphasize-style: circle; fems:d tab= font-emphasize-style: disc; va tab = vertical-align: top; td tab = text-decoration: none; to+ tab = text-outline: 0 0 #000; tt tab = text-transform: uppercase; te tab = text-emphasis: ; te:a tab = text-emphasis: accent; tt:l tab = text-transform: lowercase; txs tab = text-shadow: hoff voff blur #000; whsc tab = white-space-collapse: ; whsc:ka tab = white-space-collapse: keep-all; whsc:ba tab = white-space-collapse: break-all; ol:none tab = outline: none; olw tab = outline-width: ; ols tab = outline-style: ; olc tab = outline-color: #000; tbl tab = table-layout: ; tbl:f = table-layout: fixed; emc tab= empty-cells: ; emc:h tab= empty-cells: hide; bd tab = border: ; bd+ tab = border: 1px solid #000; bdi tab = -webkit-border-image: url(); -moz-border-image: url(); -o-border-image: url(); border-image: url(); bds tab = border-style: ; bds:no tab = border-style: outset; bds:n tab = border-style: none; @f tab = @font-face { font-family:; src:url(); } @f+ tab = @font-face { font-family: 'FontName'; src: url('FileName.eot'); src: url('FileName.eot?#iefix') format('embedded-opentype'), url('FileName.woff') format('woff'), url('FileName.ttf') format('truetype'), url('FileName.svg#FontName') format('svg'); font-style: normal; font-weight: normal; } @kf tab = @-webkit-keyframes identifier { from { } to { } } @-o-keyframes identifier { from { } to { } } @-moz-keyframes identifier { from { } to { } } @keyframes identifier { from { } to { } } ac tab = -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; al tab = -webkit-animation-delay: time; -moz-animation-delay: time; -o-animation-delay: time; animation-delay: time; ai tab = -webkit-animation: ; -o-animation: ; animation: ; align-items ; don't work This is important. if you place any css cmd out of style or out of external css it won't work, or indeed it will but it will give you just angle brackets as if it was html

Was a good class to learn about another software development package that would increase the speed of creating code faster via shortcuts using Emmet. The nice thing about this plug-in is that is compatible with quite a few editors, so no matter where you work or if you go to another company to work, this plug-in/extension will probably work on the editors they may use.

The course was not a complete waste of time as I did learn a few new emmet concepts, but it seemed like the instructor did not plan out the course content very well prior to generating the videos. I found that the background music was distracting. There was a lot of rambling and repetition. He kept referring to "The Bootstrap" but none of the content actually used Bootstrap. The HTML section was much better than the CSS section. In the CSS section, he completely missed explaining some of the basic, but more powerful CSS combinations like combining the CSS rule along with the CSS values. For example, he did not cover examples like "m1" -> "margin: 1px;", "m10p" => "margin: 10%;", "m2r" -> "margin: 2rem;", "fz2r" -> "font-size: 2rem;", "m2p--10--10-2p" -> "margin: 2% -10px -10px 2%;", etc. Instead he just listed several CSS rules without combining them with emmet expressions to autofill their values.

Solid course! The instructor was very knowledgeable, and his misuse of English wasn't confusing -- in fact, it added a bit of humor to the course. This is the first non-native speaker where I'm actively looking through his course library to consider another course buy.

People who are already familiar with the front-end web stack are encouraged to learn Emmet to speed up the coding process. In this course, the instructor provides a rapid, quick overview of using some - not all - of the more commonly-used HTML and CSS shortcuts via Emmet. The content and materials provided are essential in discovering the usage of Emmet. The content delivered is easy-to-understand, and requires active participation on part of the viewer to actively practice those Emmet shortcuts. One thing that could be improved would be the pacing; in particular, the 2 lectures prior to the last one crammed a lot of information and similar CSS properties together very quickly. Experienced developers should have no issue with the pacing, however the pronunciation of some syllabus and words (eg. "width", z, s and x letters) sound a little too similar to each other, so attentively watching what was typed on-screen helps to mitigate the learning process amidst any potential confusion. I'm probably looking forward to a more advanced/intermediate follow-up to this course or similar subjects in the future, if there are going to be any.

I was already using emmet before I joined this course. The reason I joined was I would get lost in some situations on handling the lengthier shortcode. And used very less with CSS, I'll obviously do that more now. Explaining what we're going to achieve before we start working on a lesson would have been far better. It's a great course if you've just heard of or started using emmet. It's not the advanced or cover-everything kind of course.

This has been a very useful course for me, I am relatively new to HTML and CSS but this has pointed out some great shortcuts, although I only use a handful of them at the moment, I know I will be using more and more. The only thing that got slightly annoying is that the instructor kept saying he really liked things, he must have said that multiple times in every video.

i'm really enjoyed with this course the instructor very clear to deliver the concept and he cover almost everything that emmet can do... very recommended to learn amazing thing about emmet you may even don't know if you already using emmet for along time and for those don't know what's emmet and would to learn beautiful extension to help them write code quicker..

This is a great course to learn how to write HTML & CSS quicker. It covers all the basics but that's OK since it's a free course. The tutor doesn't use a monotone voice which is a great plus. The background music was a nice touch also. As soon as you finish this course I'd recommend that you go to the emmet site and check the examples and learn about writing your own snippets. Thank you.