Web development has always been the central part of internet. But in today’s time as more and more companies are coming up On-line and E-commerce has become the most effective business model, the demand for skilled web developers has increased significantly. By learning HTML, CSS, Twitter Bootstrap 3, jQuery and third party APIs you can put yourself in the elite panel of web developers. Web development is a creative work and is only limited by the imagination of the developer.

1. View Complete Web Developer course details at www.edureka.co/complete-web-developer
A Complete Solution for WEB Development

2. Slide 2 www.edureka.co/complete-web-developerSlide 2Slide 2Slide 2
What will you learn today?
 Introduction to world of Web Development
 Getting Started with Twitter Bootstrap 3
 Working with Twitter Bootstrap 3
 Carousel
 Fixed Navigation Bar
 Grids
 Font-Awesome Icons
 Thumbnails
 Hands-On

3. Slide 3 www.edureka.co/complete-web-developerSlide 3Slide 3Slide 3
Web Development
21st century is the world of attractive and
creative web development

4. Slide 4 www.edureka.co/complete-web-developerSlide 4Slide 4Slide 4
Challenges of Web Development
Cross Browser Compatibility Speed
Diverse User PreferencesDifferent Devices

5. Slide 5 www.edureka.co/complete-web-developerSlide 5
Web Development Technologies

6. Slide 6 www.edureka.co/complete-web-developerSlide 6
Web Development Technologies
Can we
combine all
of them ?

7. Slide 7 www.edureka.co/complete-web-developerSlide 7
Somebody has already done that - Bootstrap
So you don’t have to start from scratch …

8. Slide 8 www.edureka.co/complete-web-developerSlide 8
Bootstrap Features
 Easy to get started
 Speed of development
 Long list of pre-built components
 Responsiveness
 Large Community Support
Bootstrap was built by Mark Otto and
Jacob at Twitter. That’s why its also
called as Twitter Bootstrap.
The current major version for
Bootstrap is version 3 but soon
version 4 is going to be released

9. Slide 9 www.edureka.co/complete-web-developerSlide 9
Hacking the Bootstrap
Next we are going to see how to use following Bootstrap components:
 Carousel
 Fixed Navigation Bar
 Bootstrap Grids
 Thumbnails
 Font Awesome Icons

10. Slide 10 www.edureka.co/complete-web-developerSlide 10
Hacking the Bootstrap - Carousel
Slide 1
Slide 2
You can see Carousel live here
http://s3freebucket.s3-website-ap-southeast-1.amazonaws.com/edureka/index.html
Carousel Fixed Navigation Bar Bootstrap Grids Thumbnails Font-Awesome Icons

11. Slide 11 www.edureka.co/testing-with-selenium-webdriver
Selenium Suite – Selenium Grid
 Selenium-Grid runs multiple
tests at the same time
against different machines
running different browsers
and operating systems
Node 1: IE
on Windows
Node 2:
Android
Node 3: Safari
on Mac
Node 4: Firefox
in Ubuntu
Let’s create a Carousel

12. Slide 12 www.edureka.co/complete-web-developerSlide 12
Hacking the Bootstrap – Fixed Navigation Bar
You can see Fixed Navigation Bar live here
https://s3-ap-southeast-1.amazonaws.com/s3freebucket/testBootstrap/fixed-nabvar.html
Bootstrap makes it very easy to create creating Fixed Navigation bars
Carousel Fixed Navigation Bar Bootstrap Grids Thumbnails Font-Awesome Icons

13. Slide 13 www.edureka.co/testing-with-selenium-webdriver
Selenium Suite – Selenium Grid
 Selenium-Grid runs multiple
tests at the same time
against different machines
running different browsers
and operating systems
Node 1: IE
on Windows
Node 2:
Android
Node 3: Safari
on Mac
Node 4: Firefox
in Ubuntu
Let’s create Fixed Navigation bar

14. Slide 14 www.edureka.co/complete-web-developerSlide 14
Hacking the Bootstrap – Grids
You can see bootstrap grids live here
http://s3freebucket.s3-website-ap-southeast-1.amazonaws.com/edureka/story.html
Bootstrap uses 12 column grid system, below are 3 div elements each consists of 4 column
Carousel Fixed Navigation Bar Bootstrap Grids Thumbnails Font-Awesome Icons

15. Slide 15 www.edureka.co/testing-with-selenium-webdriver
Selenium Suite – Selenium Grid
 Selenium-Grid runs multiple
tests at the same time
against different machines
running different browsers
and operating systems
Node 1: IE
on Windows
Node 2:
Android
Node 3: Safari
on Mac
Node 4: Firefox
in Ubuntu
Let’s use bootstrap grids

16. Slide 16 www.edureka.co/complete-web-developerSlide 16
Hacking the Bootstrap – Thumbnails
You can see thumbnails used live here
http://s3freebucket.s3-website-ap-southeast-1.amazonaws.com/edureka/courses.html
If you want to show images/videos with some description and a link, then thumbnails are the way to go
Carousel Fixed Navigation Bar Bootstrap Grids Thumbnails Font-Awesome Icons

17. Slide 17 www.edureka.co/testing-with-selenium-webdriver
Selenium Suite – Selenium Grid
 Selenium-Grid runs multiple
tests at the same time
against different machines
running different browsers
and operating systems
Node 1: IE
on Windows
Node 2:
Android
Node 3: Safari
on Mac
Node 4: Firefox
in Ubuntu
Let’s use Thumbnails

18. Slide 18 www.edureka.co/complete-web-developerSlide 18
Hacking the Bootstrap – Font Awesome
Font Awesome makes it easy to display icons on
the web pages.
Rather than using images, font-awesome icons are
preferred as they take less time to load
Carousel Fixed Navigation Bar Bootstrap Grids Thumbnails Font-Awesome Icons

19. Slide 19 www.edureka.co/complete-web-developerSlide 19
Hacking the Bootstrap – Font Awesome
You can see font awesome icons used live here
http://s3freebucket.s3-website-ap-southeast-1.amazonaws.com/edureka/index.html
Below we have used font-awesome icons for linkedIn, twitter, facebook, youtube and google plus
Carousel Fixed Navigation Bar Bootstrap Grids Thumbnails Font-Awesome Icons

20. Slide 20 www.edureka.co/testing-with-selenium-webdriver
Selenium Suite – Selenium Grid
 Selenium-Grid runs multiple
tests at the same time
against different machines
running different browsers
and operating systems
Node 1: IE
on Windows
Node 2:
Android
Node 3: Safari
on Mac
Node 4: Firefox
in Ubuntu
Let’s use Font Awesome Icons

21. Slide 21 www.edureka.co/complete-web-developerSlide 21Slide 21Slide 21
Certification
Get certified in The Complete Web Developer Course by Edureka
Edureka's The Complete Web Developer course:
• It starts from the basics of web development like HTML elements, styling the HTML elements with CSS, using newly introduced
features in HTML5 and CSS3 to deploying the websites on Amazon Simple Storage Service.
• You will learn how to use Twitter Bootstrap 3 components like Carousel, ScrollSpy, Fixed Navigation Bar, Accordion, Jumbotron,
Thumbnails, Forms, Modals, Bootstrap tour etc.
• Online Live Courses: 30 hours
• Assignments: 25 hours
• Project: 20 hours
• Lifetime Access + 24 X 7 Support
Go to www.edureka.co/complete-web-developer

22. Slide 22 www.edureka.co/complete-web-developerSlide 22
Survey
Your feedback is vital for us, be it a compliment, a suggestion or a complaint. It helps us to
make your experience better!
Please spare few minutes to take the survey after the webinar.

23. Thank You …
Questions/Queries/Feedback
Recording and presentation will be made available to you within 24 hours