Code Mobile first websites Rapidly with Emmet & Bootstrap 4

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

header.container>.row>.col-md-4>h1.site-title>a[href="index.html"]{Site name}^^.col-md-8>ul.nav.justify-content-end>li.nav-item*4>a.nav-link

Abbreviation will generate following mark up

 <header class="container">
    <div class="row">
      <div class="col-md-4">
        <h1 class="site-title"><a href="index.html">Site name</a></h1>
      </div>
      <div class="col-md-8">
        <ul class="nav justify-content-end">
          <li class="nav-item"><a href=".html" class="nav-link">Home</a></li>
          <li class="nav-item"><a href=".html" class="nav-link">Shop</a></li>
          <li class="nav-item"><a href=".html" class="nav-link">About</a></li>
          <li class="nav-item"><a href=".html" class="nav-link">Contact</a></li>
        </ul>
      </div>
    </div>
  </header>

In this video you will learn how to write long abbreviation to generate mark up for main section of web page.

  main.container>.row>.primary.col-md-8>article>h1.article-title{this is an article title}+p*5>lorem22^^^aside.col-md-4#sidebar>.card>h2.card-header{about us}+.card-body>p>lorem22

  <main class="container">
    <div class="row">
      <div class="primary col-md-8">
        <article>
          <h1 class="article-title">this is an article title</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas provident suscipit deserunt minus dolores, maxime ut hic quisquam distinctio architecto dolor quam.</p>
          <p>Assumenda impedit, voluptas laborum, quasi tempore veniam quae. In ex, commodi, accusamus adipisci iusto quod consequuntur molestias voluptatem ipsam quisquam laudantium corporis.</p>
          <p>Minima aliquam sunt dicta laboriosam alias nemo odio est quia molestias. Totam in quasi, modi odit provident quo iste tempora, sapiente minima.</p>
          <p>Iusto omnis quod laudantium quis delectus expedita eveniet voluptas excepturi atque ea beatae error rem accusamus deleniti nulla, perferendis, sint. Accusamus, facilis!</p>
          <p>Nobis, asperiores dolorum tempore sit incidunt dolores quis, ratione eaque necessitatibus inventore quam ut, officia dolor quaerat, delectus minus corporis cumque fuga.</p>
        </article>
      </div>
      <aside class="col-md-4" id="sidebar">
        <div class="card">
          <h2 class="card-header">about us</h2>
          <div class="card-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita consequuntur ullam obcaecati, eius hic veritatis ipsum libero maxime, cumque, quae at, perferendis.</p>
          </div>
        </div>
      </aside>
    </div>
  </main>

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>.card>.card-body>h4.card-title{this is title}+p>lorem22

  <footer class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">this is title</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, ullam veniam, quod quaerat enim commodi quas nobis, illum maxime ea unde non!</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">this is title</h4>
            <p>Quo vitae culpa numquam aliquam eveniet omnis ea eligendi nihil odit quas, iste, iusto illum adipisci aperiam necessitatibus consectetur! Illum neque, voluptatum?</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">this is title</h4>
            <p>Assumenda sequi illum totam officiis ut, tempore rem natus! Deleniti iusto reiciendis aliquid, a quaerat, iure officia error pariatur, porro voluptate eaque.</p>
          </div>
        </div>
      </div>
    </div>
  </footer>

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

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.