Learn Mobile First Web Development using Bootstrap

Create a responsive website front-end with a Do It Yourself Project, working files, code snippets and final project.
3.0 (3 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.
503 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 35
  • Length 3.5 hours
  • Skill Level Beginner Level
  • 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 5/2015 English

Course Description

This course will help you make an amazing front-end responsive webpage. Bootstrap is very easy to learn and use, its responsive features allows you to build with mobile-first approach and design which is compatible with all browsers, devices (mobile, tablets, etc). By the end of the course, you will build an entire front end of the website, which you can use. The html files are made downloadable for you to have a look. But first try it yourself.

Why take this course?

Bootstrap is an open source front-end framework for creating websites and web applications. Originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter and many developers at Twitter. It makes use of HTML, CSS as well as optional JavaScript extensions. Bootstrap consists other commonly used interface elements, like buttons, labels and more. It also contains several JavaScript components in the form of JQuery plugins. Compatible with all browsers and devices like mobile, desktop, tablets. Bootstrap can be used by graphic designers, Entrepreneurs, Employees, coders, web developers, students and anyone interested in making a website quick and easy.

How much time does it take to complete the course?

This course contains of 32 lectures. These are 3 hours of video tutorials.

What am I going to get from this course?

Lifetime access to the course

Downloadable project HTML files

Create a fully functional and responsive front-end of a website.

Technical Support

Course Outline:

1. Introduction to Bootstrap

2. Basic concepts to get started

3. Navigation Bar

4. Carousel (commonly known as slider)

5. Coding feature sections

6. Creating About Us section

7. Creating panels, list groups, alerts and well

8. Creating parallax scrolling effect

9. Creating media and tab panels

10. Creating a sign up section

11. Creating footer

12. Creating blog for the website

13. Creating tooltip

14. Creating popover

What are the software and other requirements for the course?

A computer, basic text editor (used Sublime in the course), and having very basic knowledge of HTML and CSS.

What are the requirements?

  • Before starting the course, the student should have basic knowledge of HTML & CSS.
  • Before beginning the course, the student should have a text editor, even some basic text editor will do. In this course we are using Sublime text editor.
  • And a browser. Google Chrome is preferable,
  • No additional materials is required before starting the course.

What am I going to get from this course?

  • Build a fully functional responsive front-end
  • Can build a website front-end for clients as freelancer
  • complete understanding of Bootstrap 3

What is the target audience?

  • Anyone who is interested in making a responsive websites which works on all platforms. It can be a non-developer, a photoshop user who wishes to make a website, an entrepreneur, or any professional or student.

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: Start Here
02:55

What is bootstrap, advantages of bootstrap and what value does it provide to developers.

In this lecture you will also find 2 compressed downloadable folders.

The code snippets folder contains section wise code used in the tutorial for your practice. you can download the file and run and test it.

The final project folder contains the final project which you will learn to create in this course.

03:39

Making of - getting starter template

05:24

Learning about sublime text and emmet plugin tool which we will be using in our project.

02:31

A JavaScript library which will enable our project to run on old legacy IE browsers.

Section 2: Basic concepts to get started
06:17

Container, row, columns are building blocks of bootstrap framework. It is essential for every developer to understand this.

Different Breakpoints
06:05
05:19

Images are very important for web designers. How to use Photoshop to adjust image quality which can be used in our project

02:57

It gives simple effect to an element

Section 3: Navigation Bar
05:33
Navigation bar for our project
06:43

Navigation bar for our project

05:11

Navigation bar for our project

Section 4: Carousel (commonly known as slider)
07:21

Commonly known as sliders but in bootstrap we call them carousel

Carousel Part 2
09:17
Section 5: Coding Feature Sections
05:28

In this section, we are going to learn about thumbnail caption and text center class in bootstrap

05:27

In this section, we are going to learn about thumbnail caption and text center class in bootstrap

Section 6: Creating about us section
04:33

In this video we are going to learn about image shapes and lead classes

06:20

In this video we are going to learn about responsive utility class which allows to hide and make content visible at different breakpoint

Section 7: Creating panels, list groups, alerts & well
05:50

Sometimes you need to put your DOM in a box. For those situations, try the panel component.

10:14

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

03:09

List groups are flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Section 8: Creating parallax scrolling effect
Testimonial parallax effect
07:27
Section 9: Creating Media and Tab Panels
05:58

Abstract object styles for building various types of components (like blog comments, tweets, etc) that feature a left or right-aligned image alongside textual content

09:02

Add dropdown menus with a little extra html and the dropdowns JavaScript plugin.

Section 10: Blockquote and Accordion Panel
Blockquote
02:58
Accordion Part 1
17:14
Accordion Part 2
03:35
Section 11: Creating a sign up section
08:47

In this video we will learn how to create fixed parallax scrolling effect

05:46

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

06:03

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Section 12: Creating Footer
05:03

Design footer which contain social media icons and copyright symbols

Section 13: Creating blog for the website
01:55

Design blog and learn about responsive images, badges

06:02

Design blog and learn about responsive images, badges

01:12

Design blog and learn about responsive images, badges

Section 14: Creating tooltip
04:02

Hover over the links below to see tooltips which is a small dialog container text to describe the component you are hovering on

Section 15: Creating popover
02:55

Add small overlays of content, like in ipad, to any element for housing secondary information.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Yoda Learning, Become 4X Faster | Join 32000+ Udemy Students

Yoda Learning is a team of 12+ industry professionals focused on developing “Project-based"learning solutions, which enable the learners explore real world situations and thus, make the learning process engaging and practical. Our Courses on Technology includes everything including Web Development, Mobile App Development, Data Analytics and Design.

The collective work-experience of 80+ yrs. spans across multiple industries like Manufacturing, IT, Sales, Finance, Marketing, Operations, HR and functional domains such as Office suites, Mobile applications, Digital Marketing, Database Technologies, Networking).

Ready to start learning?
Take This Course