web development tutorial workshop for beginners - learn responsive web design basics with bootstrap...

Jacob LettPresented by:

Web Development Workshop for Beginners

https://bootstrapcreative.com/workshops/before-using-

bootstrap-4/recording/

Free Gift

https://bootstrapcreative.com/workshops/before-using-bootstrap-4/recording/

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

http://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

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

Introduction

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

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

My FIRST website Today

1. What is Responsive

Web Design?View Recording / BootstrapCreative.com

960 Grid - 1024px x 768px

Before the iPhone

m.domain.com

http://m.domain.com

After iPhoneJune 2007

Introduced: • Mobile browser (WebKit) with a full web experience • Touch gestures

iPhone 4

iPhone 6

iPhone 5

Devices Device Versions Browsers

X X CSS3 support is different for each browser/version

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.

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?

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

Web Standards “guidelines”

librariesframeworks

polyfills

Developer Community

Browsers

View Recording / BootstrapCreative.com caniuse.comView 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?

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

Bootstrap is an open source toolkit for developing responsive, mobile-first projects on the web.

It is a style guide with various components.

What is a component?

Quick Affordable Consistent

Grid & Typography Styles

• Alerts

• Badge

• Breadcrumb

• Buttons

• Card

• Carousel

• Collapse

• Dropdown

• Forms

• Jumbotron

• List

• Modal

• Pagination

• Popover

• Progress

• Tooltips

• Navs

• Navbar

+ Components

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

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

2. What’s Newin Bootstrap 4 4

• 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!

• 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

• 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

• 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

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”

The Design Process

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?

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

Design tools• [Wireframing] Balsamiq, Powerpoint, Google slides, pencil (free)

• [Pixels and comps] Adobe XD, Photoshop, or Sketch

• [Vector SVG] - Adobe Illustrator

PageExamples

The Pros and Cons of Different Code

Approaches

4. Bootstrap 4 Quick Start

How can I help you?

?

• 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?

– Dale Carnegie

“Learning is an active process.

We learn by doing. Only knowledge that is used

sticks in your mind.

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

How do I master Bootstrap and responsive design basics?

• Bootstrap 4 Quick Start eBook [pdf]

• Web Development Primer [pdf]

Marketing Homepage Admin Dashboard

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.”

– 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.”

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

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

• 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

web development tutorial workshop for beginners - learn responsive web design basics with bootstrap...

Technology

spanish for beginners web spanish

spanish for beginners web spanish

bootstrap - departamento de informática –...

web hosting guide for beginners

mobile web security bootstrap on ericsson labs

bootstrap - web development framework

stepping out with bootstrap from twitter | web design tuts+

web dynpro for beginners

mini-workshop: responsive web design with visualforce and...

spanish for beginners - web spanish

creating responsive web pages with bootstrap 3 · creating...

application web php5 html5 css3 bootstrap

bootstrap 3.3 a guide book for beginners to learn web...

bootstrap your web styles with twitter bootstrap

web 2.0 for beginners

how to bootstrap your way in web...

web design for beginners

alerts forms navbar utility:...

endnote web: beginners guide

learning web development with bootstrap and angularjs -...