Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
LAST UPDATED : NOVEMBER 10 2014
In this video course you will learn how to write HTML and CSS code quickly and easily with Emmet.
Emmet is a free plugin for Text Editors that allows you to write short abbreviation and convert these abbreviation into complete HTML and CSS code.
You will also learn how to use Emmet and twitter bootstrap to create websites very quickly.
Write HTML & CSS Crazy Fast with Emmet
Emmet for sublime text 2 & sublime text 3
Emmet cheat sheet
Emmet Wrap with Abbreviation feature
Emmet for brackets
Emmet bootstrap snippets (Emmet bootstrap 3 snippets)
You can watch all lectures on your smart phones & Tablets & other small screen devices as well.
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
|Section 1: Emmet basics|
Emmet is a free plugin for code editors that helps you to write HTML and CSS code quickly and easily. Bootstrap is a free CSS framework to create mobile friendly and responsive websites.
In this video course you will learn how to code responsive websites quickly and easily with both Emmet and Bootstrap framework.
Emmet is available for some most popular and widely used Text Editors and online services. You can install Emmet in your preferred text editors.
In this Video you will learn how you can install and use Emmet Plugin in Brackets.
You can download Brackets free from http://brackets.io/
SublimeText is one of the most popular and widely used Text editor. It is a premium text editor but you can test SublimeText for unlimited time.
Emmet is much more advance than Brackets editor, There is a free Package control available to install, uninstall and manage extension and packages in SublimeText.
Download and install SublimeText
How to install Package Control ?
First you need to install package control, you can download package control code from
copy the code and and press ctrl+` or go to View > Show Console, once open paste the appropriate code.
How to install Emmet ?
Go to Preferences > package control and select install package than type Emmet to install, Restart SublimeText after installation.
That's all. Now you cak start using Emmet.
In this video you will learn how to get started with Emmet ?
You will learn how to generate divs with id's and classes with Emmet and how to use Emmet abbreviations to create mark up quickly for images and links.
Emmet uses . sign to generate divs with classes and # symbol to generate divs with ids. You just need to type .className or #yourid to generate a div with your given class name or id.
|Section 2: Emmet Advance Features|
Emmet uses different symbols to right long abbreviations to generate complex HTML and CSS mark up quickly.
There are many symbols that will help you to make your HTML and CSS workflow faster and simpler.
Here is a list of symbols that you need to use.
> to create child elements. e.g. nav>ul>li
+ to create sibling elements Example header+main+footer
$ to add numbering to your items Example li.navi-tem$
Keyboard short cuts are very helpful to make your work flow much faster and simpler. Emmet akso have some really useful keyboard short cuts.
Ctrl+Alt+J = Go to matching tag
Tab = Go to next edit point
Shift+Tab = Go to previous edit point
Ctrl+shift+; = Remove HTML element
Ctrl+Alt+Enter = Wrap with abbreviation function
Emmet Wrap with Abbreviation function is one of the most powerful and time saving function. Specially when you need to create mark up for your navigation items, Wrap with Abbreviation is a must use function.
For example if you have 4 navigation items.
Just select all four items and press Ctrl+Alt+Enter key board short cut, an small window will appear at bottom of SublimeText to type your Emmet Abbreviation.
Now type following abbreviation and press enter..
above abbreviation will generate following mark up for you.
Emmet makes it very simple to add style sheets, scritps, RSS and Atom link easily.
Here are some useful short cuts to add mark up to your header section quickly and easily.
|Section 3: Complete Webpage mark up with Emmet and Bootsrtap|
Bootstrap is a front end development framework to create beautiful and fully responsive websites. In this video you will learn how to download and set up bootstrap, so in next lesson you will learn to create full page mark up with twitter Bootstrap.
Download Bootstrap from http://www.getbootstrap.com/
In this video you will learn how to create mark up for header section of web page with Emmet and Bootstrap.
You will learn to create site title with id of logo and navigation with 3 menu items with bootstrap's nav and nav-tabs classes.
You will also learn how you can add some additional styling with CSS to your navigation items.
Emmet Abbreviation used as example
Abbreviation will generate following mark up
<header class="container"> <h1 id="logo">Site name</h1> <nav> <ul class="nav nav-tabs"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About us</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </nav> </header>
In this video you will learn how to write long abbreviation to generate mark up for main section of web page.
I have typed following 3 abbreviation in this video.
This videos is about final footer section of your web page. In this video you will learn how to create 3 columns layout with bootstrap's medium grid classes.
Bootstrap's medium grid offers col-md-* classes, replace * with your desired number from 1-12 because bootstrap offers 12 columns grid for medium, small and large screen devices.
In this series for our webpage we have used bootstrap's medium grid with col-md-* classes.
Our footer area will have 3 widget areas, each with widget title and widget content.
i have used following abbreviation in this video to create 3 column layout with Emmet & bootstrap grid system
|Section 4: Bonus lecture : How to use Web fonts to make web pages beautiful|
This is a bonus lecture, it is not about Emmet and Bootstrap, in this video you will learn how to make your web page that we created with Emmet and Bootstrap's grid system more beautiful with custom web fonts.
You will learn how to fins your desired fonts from Google web fonts and use it for your web pages.
You can find all Google fonts at Google web fonts directory, for our web page i will use Open Sans web font from Google web fonts.
|Section 5: Conclusion|
You have successfully completed this course.
In this course you have learned how to use Emmet and Bootstrap grid system to make your HTML and CSS workflow much faster and simpler to save your precious time.
No need to waste your time to write HTML and CSS line by line, Just type small Emmet abbreviations and hit Tab or any other trigger key on your text editor and Emmet will generate all the necessary mark up for your web pages.
Thank you very much for completing this course, I hope you have learned some new skills and you will be able to write HTML and CSS code faster than ever.
it's time to join discussion and share your views about this course.
Don't forget to write a review and give five star rating. :-)
|Section 6: What's Next : Learn to use Bootstrap framework + offer|
Learn to Code a magazine style website with Bootstrap
Mohammed Tahir is a blogger, writer and front end developer from Karachi, Pakistan.
He has been learning and teaching about HTML, CSS, Front end development Frameworks like Bootstrap, Foundation ZURB, WordPress, Theme Development and other web design related topics for 5 years..
He published video courses and articles about HTML, CSS, WordPress, Theme Development, front end development Frameworks like Twitter Bootstrap, Foundation and others topics.
He also develop Wordpress themes. He uses WordPress starter theme Bones, Underscore and Bootstrap framework to make WordPress Themes fully responsive.