Diploma in Web
Development – Part II
Front-End Development – Week 1
Bootstrap Fundamentals
Presented by:
Julian Quirke
Web Development Educator
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Advanced Diploma
Final Assignment = 100 Questions
Pass = 50%
Merit = 70%
Distinction = 85%
E-Diploma & Exam – FREE
Hard Copy Diploma – €19.95
(FREE for Members)
Course Overview
Front-End PHP
Development Development
Databases & Servers
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Course Overview
Front-End Development
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Front-End Development
Bootstrap Fundamentals
1 ➢Core Concepts
➢Grid System
➢Bootstrap Demonstration
Practical:
➢Shawpify: Website Template with
Bootstrap (I)
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Front-End Development
Object-Oriented JavaScript
2 ➢Object-Oriented Programming
➢Properties & Methods
➢Building a Prototype Object
Practical:
➢Shawpify: Website Template with
Bootstrap (I)
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Front-End Development
JQuery
3 ➢JQuery: The JavaScript Library
➢Getting Started with JQuery
➢Event Handling
Practical:
➢TBD
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Front-End Development
AJAX & Event Handling
4 ➢What is User Experience?
➢Introduction to AJAX
➢AJAX & JQuery Demonstration
Practical:
➢Shawpify: AJAX Powered Navigation
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Let’s Begin!
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Bootstrap Fundamentals
Bootstrap
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Bootstrap Fundamentals
Bootstrap
is a HTML, CSS, and Javascript framework
that is specifically designed to develop
responsive, mobile-first projects on the web
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Bootstrap Fundamentals
Notice!
➢ Frameworks must be learned
➢ Each framework has
different rules to follow
➢ Use getbootstrap.com as a
reference for the Bootstrap
Framework
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Bootstrap Fundamentals
In Your HTML Document
Head Body
1) Include meta tags for 1) Include JQuery
mobile-first development
2) Include Bootstrap JS
2) Include Bootstrap CSS
3) Include any other JS
3) Include any other CSS
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Bootstrap Fundamentals
Bootstrap Key Concepts
➢ Bootstrap requires a container
wrapper for all HTML content
➢ Use “container” class for fixed width
container
➢ Use “container-fluid” class for full
width container
➢ Note: containers shouldn’t be in
other containers!
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Bootstrap Fundamentals
Bootstrap Key Concepts
➢ Bootstrap uses a grid system ➢ Use “col-md-” and then add the
number of columns
➢ There are 12 columns in
Bootstrap ➢ E.g. “col-md-4” uses 1/3rd of the
screen
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Template
Demo
Final Note
For More Information on Bootstrap & Designing for Web
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Final Note
For More Information on Bootstrap & Designing for Web
Web Design Course
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Notice
➢ I will be away on annual leave for
week 2 & 3
➢ Tadhg Deeney will be teaching in
my stead
➢ Live lessons will continue as
normal
➢ (Be nice to him!)
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Next Week
➢ The next session is “Object-Oriented JavaScript”
• Object Oriented Programming
• Properties & Methods
• Building a Prototype Object
➢ Recordings are available within 24 hours after the live webinar
➢ Go to www.shawacademy.com and then the Top Right Corner – Members Area
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Q&A
Next Lesson is
Object-Oriented JavaScript
➢ Learn about how to build web applications
using an object-oriented design methodology
➢ You will understand the value of using objects
and how to build applications in a modular www.shawacademy.com
www.facebook.com/shawacademy
manner
www.twitter.com/shawacademy
[email protected]
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
