O'Reilly logo
live online training icon Live Online training

Bootstrap Responsive Design & Development

Why Bootstrap Is Awesome For Responsive Design?

Frahaan Hussain

The responsive framework Bootstrap improves the development of responsive websites using less work. It also helps create complex websites with a simple implementation for a variety of features including UI elements.

The goal of the training course is to design a fully responsive website from scratch. We will take a look at different websites including good responsive websites and poorly designed responsive websites. We will also take a look at non-responsive websites and analyze the reasons why responsive design is the best methodology for creating websites.

This course will take you through the process of using Bootstrap to create a responsive website with a variety of pages. This course will provide all the steps and code required to create a solid foundation for all future websites.

This training is aimed at teaching you to improve your development of websites by creating a website from scratch using Bootstrap 4. You will learn about responsive web development.

What you'll learn-and how you can apply it

  • Responsive web development
  • Bootstrap 4 elements
  • Responsive web design
  • Why responsive design is the future
  • Understand the principles of responsive web design & development
  • Why Bootstrap is the best tool for the job
  • Create a solid foundation for future responsive websites
  • Learn how to use Chrome developer tools to debug a web project

This training course is for you because...

You are a web developer, web designer, general programmer and IT managers who want to enhance their knowledge of Bootstrap and responsive web development. If you have been struggling to find the time to gain proficiency and confidence with responsive web development and creating websites the Bootstrap 4 framework, here is your one-stop solution!

Prerequisites

  • HTML development
  • CSS development
  • JavaScript programming
  • jQuery programming
  • Basic web design

Materials, downloads, or Supplemental Content needed in advance:

  • GitHub (https://github.com/)
  • Bootstrap (https://getbootstrap.com/)
  • jQuery (included with Bootstrap)
  • Google Chrome web browser (https://www.google.com/chrome/)

About your instructor

  • Frahaan Hussain is the CEO and lead developer at Sonar Systems, the world leader in educational material for the game engine Cocos2d-x, one of the best and most popular game engines in the world. With years of experience programming and running an online education platform (Sonar Learning), he can help and support new programmers like you. He is also a University Lecturer teaching a variety of topics in games programming from games design to OpenGL shader programming. He is also a author of many video courses published by Packt.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

DAY 1

Section 1: Introduction to Responsive Web Development (45 minutes - instructor lecture + Q&A)

  • Understand responsive web design
  • Advantages of responsive web design
  • Understand the development lifecycle
  • Analyze responsive websites
  • Analyze non-responsive websites
  • Compare the design methodologies of web design

Section 2: Introduction To Bootstrap 4 (60 minutes - instructor lecture + Q&A)

  • Understand how Bootstrap 4 improve responsive web design
  • Setup a web project with Bootstrap
  • Look into Bootstrap elements

Section 3: Chrome Developer Tools Overview (20 minutes - instructor lecture + Q&A)

  • Responsive mobile feature overview
  • Console overview
  • Look at the source tabs
  • Element inspector
  • A general look at the chrome developer interface

DAY 2

Section 4: Looking at Well Designed Responsive Websites (50 minutes - instructor lecture + Q&A)

  • Analyze responsive websites
  • Determine which elements and features of Bootstrap we need
  • Compare responsive and non-responsive websites

Section 5: Bootstrap Components (60 minutes - instructor lecture + Q&A)

  • What are Bootstrap components
  • Why use Bootstrap components
  • Why not create our own components
  • Leveraging the built-in components to enhance our website

Section 6: Creating A Simple Page Using Bootstrap (60 minutes - instructor lecture + Q&A)

  • Bootstrap implementation
  • Components
  • Tools
  • Pipeline/flow
  • Element implementation
  • Environment usage
  • Debugging

Section 7: What Makes A Good Website? (60 minutes - instructor lecture + Q&A)

  • Good designs
  • Bad designs
  • Best practices
  • Colour perception
  • UI
  • UX
  • Page flow

DAY 3

Section 8: Bootstrap Templates/Themes (35 minutes - instructor lecture + Q&A)

  • Analyze why we should use templates
  • Templates available for us to use
  • Advantages and disadvantages of using templates

Section 9: Frameworks Built On Top Bootstrap (35 minutes - instructor lecture + Q&A)

  • Examples of frameworks built on top of Bootstrap
  • Why use frameworks
  • Frameworks vs vanilla Bootstrap

Section 10: Using Frameworks (50 minutes - instructor lecture + Q&A)

  • Using Bootstrap frameworks
  • Tools
  • Pipeline/flow
  • Element implementation
  • Environment usage
  • Debugging

Section 11: What Is SASS? (60 minutes - instructor lecture + Q&A)

  • Why use SASS?
  • SASS overview
  • Benefits of SASS

Wrap-up and remaining Q&A (45 min)