Watch recording - https://bootstrapcreative.com/workshops/before-using-bootstrap-4/recording/ Get the Bootstrap 4 book - https://bootstrapcreative.com/shop/bootstrap-quick-start/ Are you new to web development? Want to learn how to get started? Learn how to get started building responsive websites with Bootstrap 4. During This Free 1 Hour Live Online Training, You Will Learn: What responsive web design is and the benefits of using a frontend framework like Bootstrap 4. What’s New in Bootstrap 4 and how it has improved over Bootstrap 3 The responsive development process, and software tools necessary to make a responsive website efficiently and with fewer bugs. In addition to the training, there will be an opportunity for you to ask questions and interact with other students in the live chat. What time does it start in my country? Detroit, MI, USA - 9:00 pm San Francisco, CA, USA - 6:00 pm Austin, TX, USA - 8:00 pm London, United Kingdom - 1:00 am (the next day) New Delhi, India - 6:30 am (the next day) Tokyo, Japan - 10:00 pm (the next day) Sydney, Australia - 12:00 pm (the next day) Who is this workshop for? For absolute beginners who have never built a responsive website before. Those who are learning web development fundamentals like HTML and CSS. Will there be a recording? A recording will only be offered to those who register. So if you can’t make it, please make sure to register by filling out the form on this page. Free Giveaway Everyone who attends the live workshop will receive a copy of my responsive sketch sheets and have an opportunity to win a copy of my Bootstrap 4 Book and Toolkit What people are saying about the workshop. “It was very helpful for beginners especially for those who have minimal knowledge in Bootstrap.” “I thought it was a very helpful introduction and the handouts are great.” “I thought your workshop was very informative. For people who want to get started in web design, you've provided some ways to develop the skills.” Presented by: Jacob Lett, Creator of BootstrapCreative I transitioned to frontend design/development after working as print graphic designer. I stumbled my way through books, online courses, and blog tutorials to finally get my first web development job.

1. Jacob Lett
Presented by:
Intro to Responsive
Web Design with
Bootstrap 4

2. Agenda
1. What is Responsive Web Design?
2. What’s New in Bootstrap 4
3. The Mobile First Workflow
4. Giveaway
5. Questions and Answers

3. 1.
What is Responsive
Web Design?

4. 960 Grid - 1024px x 768px
Before the iPhone
m.domain.com

5. After iPhone
June 2007
Introduced:
• Mobile browser (WebKit)
with a full web experience
• Touch gestures

6. iPhone 4
iPhone 6
iPhone 5

7. Devices Device Versions Browsers
X X CSS3 support
is different
for each
browser/
version

8. New Problem: Most sites now
require zooming in to read
Websites without a
dedicated mobile site
are squeezed into the
small iPhone screen.
You have to pinch and
zoom to read the text.

9. Solution: Responsive Web Design
1. <meta name="viewport" content="width=device-
width, initial-scale=1, shrink-to-fit=no”>
2. @media screen and (min-width:500px) { ... }
3. Fluid widths instead of fixed widths (%, rems,
ems, auto instead of px, pt)
4. CSS reset

10. Why CSS Reset?

11. “Why do websites sometimes
look different across
browsers/devices?”

12. Web Standards
“guidelines”
libraries
frameworks
polyfills
Developer Community
Web Browsers
1
2
3

13. caniuse.com

15. Browsers use vendor prefixes to
add support for new CSS features
• WebKit: -webkit
• Firefox: -moz
• Opera: -o
• Internet Explorer: -ms
But how are you
supposed to remember
what vendor prefix to
use and when?

16. Autoprefixer
• Grunt
• Gulp
• Webpack
• NPM scripts
NPM scripts - https://autoprefixer.github.io/

17. Effects of responsive design
• More expensive: Time to design and develop websites
increased substantially and requires more testing,
maintenance, and patience.
• More complex: Everything needs to be responsive: grids,
typography, spacing, display properties, images, etc.
• Requires education: Non-developers are so used to
writing content for desktop. Mobile first applies to content
on the page as well.

18. 9%
6%
12%
26%
47%
Never Built a Site Before and New to Bootstrap
Experienced Developer and New to Bootstrap
Used Bootstrap 2 or 3 Before
Already Know Bootstrap 4
Other
A
B
C
D
E
What about
the beginners?
Responsive design
adds a new layer of
complexity

19. Bootstrap is an open source
toolkit for developing
responsive, mobile-first
projects on the web.
It is a style guide with
various components.

20. What is a component?

21. Quick
Affordable
Consistent

22. Grid & Typography Styles
• Alerts
• Badge
• Breadcrumb
• Buttons
• Card
• Carousel
• Collapse
• Dropdown
• Forms
• Jumbotron
• List
• Modal
• Pagination
• Popover
• Progress
• Tooltips
• Navs
• Navbar
+ Components (design patterns)

23. Similar to print design patterns
Drop Caps Table of Contents Grid and Page Numbers

24. Benefits of Bootstrap
• Saves you time and increases productivity -
you don’t have to reinvent the wheel
• Consistent CSS: Awesome documentation
accessible by anyone anywhere. No code
bloat as you write redundant styles.
• Vendor prefixed CSS3 to avoid browser bugs

25. Benefits of Bootstrap
• Stable grid breakpoints for common
device widths
• Helps to prevent wasted time
searching/testing for jQuery plugins
by providing built-in and compatible
JavaScript behavior
• Open source and actively maintained

26. For comparison:
WordPress is used on 19,545,516
A lot of websites use it
Expected job demand
for Bootstrap 4 in 2018

27. 2. What’s New
in Bootstrap 4
4

28. • No longer support IE9/
lower and IOS 6
• Flexbox is used
instead of floats
• Added a new xs grid
tier for smaller devices
at 576px and below.
New!

29. • Switched from px to
rem(root em) as it's primary
CSS unit
• Global font-size increased
from 14px to 16px.
• Glyphicons dropped -
Use alternative like
FontAwesome
MijlvÉy EM emphemeral
unit

30. • Navbar: You can now specify when the
navbar should collapse using .navbar-
toggleable-{breakpoint} and change color
schemes with .navbar-dark .bg-dark
• .img-responsive renamed to .img-fluid

31. • Cards replace Bootstrap
3 panels and wells
• New Responsive Utilities:
spacing, display, flex,
and colors.
Example .my-md-3 = margin of
16px on y axis on md breakpoint
and up

32. 3.
Mobile First Workflow
Webpage examples & workspace

33. ― Luke Wroblewski, Mobile First
“Screens are small, connections
are slow, and people often only give
you their partial attention or short
bursts of their time.
Designing for mobile first forces you to
embrace these constraints”

34. The Design Process

35. Pencil Sketch Wireframe Prototype Design Iteration
The Design Process - Milestones
Think through
content and
layout in the pencil
sketch stage.
Does the design
achieve the desired
results and not just
look cool?
!

36. Development tools - All Free
• GitHub account - version control hosting
• GitHub Desktop
• GitHub Atom text editor
• XAMPP - local development web server
• Google Chrome and live.js
Filezilla FTP

37. Design Software
• [Wireframing] Balsamiq, Powerpoint,
Google slides, pencil(free)
• [Pixels and comps] Adobe XD(now free),
Photoshop, or Sketch
• [Vector SVG] - Adobe Illustrator,
Inkscape(free), Vectr(free)

38. How to make a fixed
layout responsive
Code Demo

39. How to get more practice?
Book with practice
examples to help you learn
by doing step by step.
Videos, templates, guides,
and reference to save
you time.
Access to a community
so you can get help if
you need it.
1
2
3
Bootstrap 4 Quick Start

40. Marketing Homepage Admin Dashboard
Learn by Building These Layouts

41. Questions?
Thank you for your time!
Free Download
http://bootstrapcreative.com/b4handout