web development tutorial workshop for beginners - learn responsive web design basics with bootstrap...
TRANSCRIPT
Jacob LettPresented by:
Web Development Workshop for Beginners
https://bootstrapcreative.com/workshops/before-using-
bootstrap-4/recording/
Free Gift
View Recording / BootstrapCreative.com
AgendaIntroduction
1. What is Responsive Web Design?
2. What’s New in Bootstrap 4
3. The Mobile First Workflow
4. Bootstrap 4 Quick Start and QuestionsView Recording / BootstrapCreative.com
9%6%
12%
26%
47%
Never Built a Site Before and New to BootstrapExperienced Developer and New to BootstrapUsed Bootstrap 2 or 3 BeforeAlready Know Bootstrap 4Other
ABCDE
How You Compare to
BootstrapCreative Survey Results
I believe responsive
design adds a new layer of
complexity for beginners
View Recording / BootstrapCreative.com
GiveawayBootstrap 4 Quick Start - Design Package
Stay to the end of this workshop to find out if you’re the winner.
Free Gift for Attending Workshop
View Recording / BootstrapCreative.com
Introduction
View Recording / BootstrapCreative.com
View Recording / BootstrapCreative.com
Jacob Lett: Web designer/developer• Marketing web developer at Altair, an engineering software company. I work on BootstrapCreative as a side project.
• Started career as a graphic designer and transitioned to web design/development.
• Married with two energetic boys, ages 4 & 2. I like classical guitar and would like to take lessons someday.
After college I was a print graphic
designer
Learned HTML & CSS after work
and began freelancing to build a digital
portfolio
Got my first development job as a front-end developer
Now I continue learning/teaching
How I became a web developer
Never built a site before
1st dev job
View Recording / BootstrapCreative.com
Why I Created BootstrapCreative
• To help you eliminate knowledge gaps to build your new knowledge on a firm foundation
• Decrease your levels of stress and self-doubt while under intense learning stages
Never built a site before
1st dev job
View Recording / BootstrapCreative.com
My FIRST website Today
View Recording / BootstrapCreative.com
1. What is Responsive
Web Design?View Recording / BootstrapCreative.com
960 Grid - 1024px x 768px
Before the iPhone
m.domain.com
View Recording / BootstrapCreative.com
View Recording / BootstrapCreative.com
After iPhoneJune 2007
Introduced: • Mobile browser (WebKit) with a full web experience • Touch gestures
View Recording / BootstrapCreative.com
iPhone 4
iPhone 6
iPhone 5
Devices Device Versions Browsers
X X CSS3 support is different for each browser/version
View Recording / BootstrapCreative.com
View Recording / BootstrapCreative.com
New Problem: Most sites now require zooming in to readWebsites without a dedicated mobile site are squeezed into the small iPhone screen.
You have to pinch and zoom to read the text.
View Recording / BootstrapCreative.com
Solution: Responsive Web Design1. <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
Why CSS Reset?
View Recording / BootstrapCreative.com
“Why do websites sometimes look different across browsers/devices?”
View Recording / BootstrapCreative.com
View Recording / BootstrapCreative.com
Web Standards “guidelines”
librariesframeworks
polyfills
Developer Community
Browsers
View Recording / BootstrapCreative.com caniuse.comView Recording / BootstrapCreative.com
View Recording / BootstrapCreative.com
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?
View Recording / BootstrapCreative.com
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.
9%6%
12%
26%
47%
Never Built a Site Before and New to BootstrapExperienced Developer and New to BootstrapUsed Bootstrap 2 or 3 BeforeAlready Know Bootstrap 4Other
ABCDE What about
the beginners?Responsive design adds a new layer of
complexity
View Recording / BootstrapCreative.com
Bootstrap is an open source toolkit for developing responsive, mobile-first projects on the web.
It is a style guide with various components.
View Recording / BootstrapCreative.com
What is a component?
View Recording / BootstrapCreative.com
Quick Affordable Consistent
View Recording / BootstrapCreative.com
View Recording / BootstrapCreative.com
Grid & Typography Styles
• Alerts
• Badge
• Breadcrumb
• Buttons
• Card
• Carousel
• Collapse
• Dropdown
• Forms
• Jumbotron
• List
• Modal
• Pagination
• Popover
• Progress
• Tooltips
• Navs
• Navbar
+ Components
View Recording / BootstrapCreative.com
Benefits of Bootstrap• Saves you time and increases productivity - you don’t have to reinvent the wheel
• Consistent CSS in a team: Awesome documentation accessible by anyone anywhere. No code bloat.
• Vendor prefixed CSS3 to avoid browser bugs
View Recording / BootstrapCreative.com
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
For comparison: WordPress is used on 19,545,516
A lot of websites use it Expected job demand for Bootstrap 4 in 2018
View Recording / BootstrapCreative.com
View Recording / BootstrapCreative.com
2. What’s Newin Bootstrap 4 4
View Recording / BootstrapCreative.com
• 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!
View Recording / BootstrapCreative.com
• Switched from px to rem as it's primary CSS unit
• Global font-size increased from 14px to 16px.
• Glyphicons dropped - Use alternative like FontAwesome
View Recording / BootstrapCreative.com
• 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
View Recording / BootstrapCreative.com
• 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
3. Mobile First Workflow
Webpage examples & workspace
View Recording / BootstrapCreative.com
How many of you are familiar with the
design process?
POLL
Add yes/no in the chat box
― 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”
View Recording / BootstrapCreative.com
View Recording / BootstrapCreative.com
The Design Process
View Recording / BootstrapCreative.com
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?
View Recording / BootstrapCreative.com
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
View Recording / BootstrapCreative.com
Design tools• [Wireframing] Balsamiq, Powerpoint, Google slides, pencil (free)
• [Pixels and comps] Adobe XD, Photoshop, or Sketch
• [Vector SVG] - Adobe Illustrator
View Recording / BootstrapCreative.com
PageExamples
The Pros and Cons of Different Code
Approaches
View Recording / BootstrapCreative.com
4. Bootstrap 4 Quick Start
How can I help you?
?
View Recording / BootstrapCreative.com
• How do I master Bootstrap and responsive design?
• How do I remember all of the class names?
• How do I make my sites look less like Bootstrap?
• How do I migrate my existing site from Bootstrap 3 to Bootstrap 4
Never Built a Site Before and New to Bootstrap
47%How Can I Help You?
View Recording / BootstrapCreative.com
– Dale Carnegie
“Learning is an active process.
We learn by doing. Only knowledge that is used
sticks in your mind.
View Recording / BootstrapCreative.com
How Can I Help You?Bootstrap 4 Quick Start Bootstrap 3 to 4 Migration Guide
Development Beginners Experienced DevelopersView Recording / BootstrapCreative.com
Bootstrap 4 Quick Start• Practice examples to help
you learn by doing
• Fill in the missing gaps of information from the Bootstrap documentation.
• Access to a community focused on learning and helping others
View Recording / BootstrapCreative.com
How do I master Bootstrap and responsive design basics?
• Bootstrap 4 Quick Start eBook [pdf]
• Web Development Primer [pdf]
View Recording / BootstrapCreative.com
Marketing Homepage Admin Dashboard
View Recording / BootstrapCreative.com
How do I remember all of the class names?
• Bootstrap 4 cheat sheet with all class names, flexbox cheat sheet, and CSS default values reference
• Components Visual Reference [pdf]
• FontAwesome Icon Cheat Sheet [pdf]View Recording / BootstrapCreative.com
How do I make my sites look less like Bootstrap?
• Printable Sketch Sheets for Design Wireframing [pdf]
• Photoshop Grid Templates and Device Mockup [psd]
• Default Colors Reference [pdf]
• Get design critiques in the Facebook groupView Recording / BootstrapCreative.com
– Max, Web Developer
“Helps make technical concepts clear and
easier to understand.”
View Recording / BootstrapCreative.com
– Sutter Raymond, Beginner
“Your training is fantastic, there is a lot of information
I understand now that makes me look at how I develop a website.”
View Recording / BootstrapCreative.com
Bootstrap 4 Quick StartStarter Package - $20Pro Package - $80 $70 Design Package - $120 $110
Live Workshop Discount Save $10 on Pro or Design
Coupon code: B4QS10View Recording / BootstrapCreative.com
View Recording / BootstrapCreative.com
Click Button Click Checkout Credit Card or PayPal Download Files
Coupon code: B4QS10
GiveawayBootstrap 4 Quick Start - Design Packagea $120 value
First one to answer question in the chat is the winner.
Free Gift for Attending Workshop
View Recording / BootstrapCreative.com
View Recording / BootstrapCreative.com
• Bootstrap 4 Quick Start Book
• Web Design Primer
• Project Template Files and Component Snippet Library
• Chrome Developer Tools Tutorial [Video]
• How to Share Prototypes with GitHub Pages [Video]
• Robin Responsive Design Testing Tool
• Bootstrap 4 Components Visual Reference
• FontAwesome Icon Cheat Sheet
• Bootstrap 4 Grid PSD Templates
• Bootstrap 4 Colors Reference
• Bootstrap 4 Printable Sketch Sheets
• Bootstrap 4 Classes Reference
• CSS Classes Default Values Reference
• Flexbox Cheat Sheet
• FREE file Updates
• Access to Community and Gitter Chat
Questions? Thank you!
Save $10 Coupon code: B4QS10