Faster HTML & CSS workflow with Emmet + Bootstrap

Emmet is a plugin for text editors that helps you to write HTML and CSS code quickly and easily. Save time work more..
3.9 (397 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
17,940 students enrolled
Free
Start Learning Now
  • Lectures 18
  • Contents Video: 1 hour
    Other: 1 min
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2014 English

Course Description

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.

What are the requirements?

  • HTML & CSS Knowledge required

What am I going to get from this course?

  • By the end of this course you will be able to create HTML and CSS webpages quickly and easily in less time.

What is the target audience?

  • Basic knowledge of HTML and CSS will be very helpful.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Emmet basics
01:50

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.

02:48

Emmet is available for some most popular and widely used Text Editors and online services. You can install Emmet in your preferred text editors.

01:44

Brackets is a free Text Editor by Adobe built with HTML, CSS and JavaScript. Brackets is very easy to use and has many useful features to make your coding workflow faster and easy.

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/

01:39

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

Go to

How to install Package Control ?

First you need to install package control, you can download package control code from

https://sublime.wbond.net/installation

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.

03:13

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
05:43

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$

02:48

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

03:38

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.

  Home 
  Portfolio 
  About 
  Contact 

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..

  nav.nav-main>ul>li.nav-item$*>a[$#.html]{$#} 

above abbreviation will generate following mark up for you.

  <nav> 
  <ul> 
  <li><a href="Home.html">Home</a></li> 
  <li><a href="Portfolio.html">Portfolio</a></li> 
  <li><a href="About.html">About</a></li> 
  <li><a href="Contact.html">Contact</a></li> 
  </ul> 
  </nav> 
Faster CSS
07:00
01:55

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.

script:src

link

link:rss

link:atom

meta:vp

meta:compat

style

Section 3: Complete Webpage mark up with Emmet and Bootsrtap
02:26

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/

03:38

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

header.container>h1#logo{Site Name}+nav.nav.nav-tabs>ul>li*3>a

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> 
05:43

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.

main.container>.row>#primary.col-md-8+aside.col-md-4

article>h1{this is an article title}+p*4>lorem55

.panel.panel-success>.panel-heading{heading}+.panel-body>p>lorem15

03:10

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

footer.container>.row>.col-md-4*3>h2{widget title}+p>lorem29

Section 4: Bonus lecture : How to use Web fonts to make web pages beautiful
04:32

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.

Open Sans font

Section 5: Conclusion
00:43

congratulations

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.

00:18

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
1 page

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Mohammad Tahir, Front-end Developer

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.

Ready to start learning?
Start Learning Now