Speed Up Your Html Workflow With Emmet

Learn how to write HTML code faster

What you'll learn

What is Emmet and how to get it (or to know if it's included in your code editor)

How Emmet can help improve your HTML writing speed

What are Emmet commands and operators

How to write complete HTML blocks of code with Emmet

Requirements

Some basic knowledge of HTML

Code editor of choice with installed Emmet extension / plugin, or Visual Studio Code (Emmet is included by default in it)

Description

If you want to learn how to write HTML code faster then this course is for you! For this purpose we will be learning Emmet, which allows us to write small snippets and those gets converted in to HTML code instantly.This course structure will be like this:Section "Learn Emmet" - here we will be learning all different operators and commands of Emmet, so we would know how to use each thing individually.Section "Various examples" - here we will write various examples and practice the skills, we will try to implement different HTML things with mixings of various Emmet operators.Section "Project" - here we will be practising more by building chosen project HTML code, all from navbar to footer.Topics structure will be like this:Theory - I will explain Emmet operator, talk about why it exists and how it can help.Examples - I will show all different ways on how you can use that Emmet operator.Practise - we will be practising to apply all this in real life.From this course you will get:Video lessons.Downloadable resources.PDF with all code snippets and results.Non-automatic captions.My support….We will be learning about Emmet these things:HTML boilerplate / HTML doctypesElements abbreviationChild: >Sibling: +Climb-up: ^Multiplication: *Grouping: ()ID and Class attribute operatorsCustom attributesItem numbering: $Numbering base and directionText: {}"Lorem ipsum" text generator

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 What is Emmet and how it can help you?

Lecture 3 How to get most out of this course?

Lecture 4 What resources will be provided?

Lecture 5 Course content in PDF

Section 2: Learn basics of Emmet

Lecture 6 About section

Lecture 7 HTML boilerplate / HTML doctypes

Lecture 8 Elements abbreviation

Lecture 9 Child: >

Lecture 10 Sibling: +

Lecture 11 Climb-up: ^

Lecture 12 Multiplication: *

Lecture 13 Grouping: ()

Lecture 14 ID and Class attribute operators

Lecture 15 ID and Class defaults to div if element is not provided

Lecture 16 Custom attributes

Lecture 17 Item numbering: $

Lecture 18 Changing numbering base and direction

Lecture 19 Text: {}

Lecture 20 "Lorem Ipsum" generator

Lecture 21 Summary

Section 3: Practise Emmet by writing various examples

Lecture 22 About section

Lecture 23 Header with paragraph and some text

Lecture 24 Unordered list with some items each having a link

Lecture 25 List with items, but first item is different

Lecture 26 Create some paragraphs with some repeated and some generated text

Lecture 27 Generate article with image and content wrappers and add some content

Lecture 28 Header with heading, navigation and links

Lecture 29 Different way of writing custom attributes

Lecture 30 Multiple divs with same class but different ids

Lecture 31 Multiple divs with same and different classes

Lecture 32 Slider markup with active slide

Lecture 33 Team blocks with each having different images

Lecture 34 Projects list block with images and information

Lecture 35 Table without data

Lecture 36 Table with some data

Lecture 37 Summary

Section 4: Practise Emmet by building chosen project HTML

Lecture 38 About section

Lecture 39 Navigation markup

Lecture 40 Header markup

Lecture 41 Citation block markup

Lecture 42 Few similar blocks markup

Lecture 43 Artists blocks markup

Lecture 44 Gallery images markup

Lecture 45 Tickets options markup

Lecture 46 Location markup

Lecture 47 Contacts columns markup

Lecture 48 Contacts information markup

Lecture 49 Contact form markup

Lecture 50 Footer markup

Lecture 51 Summary

Section 5: Summary and course PDF

Lecture 52 Summary

Lecture 53 Course content in PDF

Anyone who wants to write HTML code faster