Bootstrap 4 Development for Professionals

Bootstrap 4 Development for Professionals

by Eduonix Learning Solutions
Released October 2020
Publisher(s): Packt Publishing
ISBN: 9781800560482

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

Bootstrap 4 has taken the world of web development by storm with its user-friendly features that help developers to build responsive websites. It is no surprise that big names such as Spotify, Twitter, StackShare, Udemy, Coursera, Docker, and Hootsuite use Bootstrap for web development. This course will help you to take your web development career to the next level by familiarizing you with the Bootstrap 4 framework.

The course begins with an introduction to Bootstrap 4 and explains its applications. Next, you’ll get to grips with syntactically awesome style sheets (Sass) and sassy cascading style sheets (SCSS)—extensions of cascading style sheets (CSS)—in detail, along with Gulp. Moving ahead, you’ll explore the layout of flexbox and grid and delve into the concepts of typography, code images, and tables. You’ll also learn some essential Bootstrap concepts such as jQuery, alerts, badges, and button groups. Toward the end, you will enhance your learning experience by working on 10 engaging projects.

By the end of this course, you’ll have developed the Bootstrap 4 skills needed to build responsive and mobile-first websites.

What You Will Learn

  • Get to grips with the Bootstrap 4 framework and library
  • Install Sass and Gulp on your machine
  • Discover how to add custom Bootstrap to a project
  • Style and format the text content with typography
  • Use breadcrumbs to show the user the current location of the content on the website
  • Build an appealing slideshow of the content using carousels

Audience

If you are a web designer or web developer looking to use Bootstrap 4 to make responsive websites, then this course is for you.

About The Author

Eduonix Learning Solutions: Eduonix learning Solutions is a premier training and skill development organization which was started with a vision to bring world class training content, pedagogy and best learning practices to everyone's doorsteps . Eduonix aims to identify and provide the best learning and training environment. It identifies industry veterans and content creators around the globe and bring it to the global audience using number of intuitive platforms for easy and affordable access to quality content. Eduonix offers easy to understand online courses and workshops for everyday people. If you have ever wanted to learn a new skill, but don't want to attend four years of college to do it, we have a solution for you.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Introduction section
    1. Course Introduction
    2. Whom is This Course for?
    3. What You Need to Succeed This Course
    4. Advantages and Disadvantages
    5. What This Course Will Cover?
    6. Hypertext Markup Language (HTML) Review
    7. Cascaded Style Sheets (CSS) Review
  2. Chapter 2 : Bootstrap 101
    1. Framework vs Library
    2. Introduction to Bootstrap
    3. Getting Started
  3. Chapter 3 : Sassy Cascaded Style Sheets (SCSS) + Gulp
    1. Syntactically Awesome Style Sheets (Sass) Introduction
    2. Gulp Introduction
    3. Installing Syntactically Awesome Style Sheets (Sass) on Windows
    4. Installing Node.js and NPM
    5. Starting out with Gulp and Syntactically Awesome Style Sheets (Sass)
    6. Testing with BrowserSync
    7. Syntactically Awesome Style Sheets (Sass) Project Structure
    8. Variables and Nesting
    9. Block Element Modifier (BEM)
    10. Extends, Mixins, and Includes
    11. Functions and Operators
    12. LAB1 Problem
    13. LAB1 Solution
    14. LAB2 Problem
    15. LAB2 Solution
  4. Chapter 4 : Grid and Flexbox
    1. Flexbox
    2. Installing with NPM
    3. Adding Custom Bootstrap to Project
    4. Container and Breakpoints
    5. Grid Options
    6. Equal Width Columns
    7. Gutters and Alignment
    8. What to Avoid in Bootstrap Grid?
    9. Nesting and Syntactically Awesome Style Sheets (Sass)
    10. Lab Problem
    11. Lab Solution
  5. Chapter 5 : Typography
    1. Typography
    2. Responsive Font Sizes (RFS)
    3. Responsive Font Sizes (RFS) in Action
    4. Vertical Rhythm Updated
  6. Chapter 6 : Code, Images, and Figures
    1. Code
    2. Images and Figures
    3. Table Syntax
    4. Bootstrap Tables
    5. Bootstrap Responsive Tables
    6. None Bootstrap Responsive Tables
    7. Lab Problem
    8. Lab Solution
  7. Chapter 7 : Components 1 - Alerts, Badges, Breadcrumbs, and Toasts
    1. Node Modules
    2. Building JavaScript
    3. Util.js
    4. Alerts
    5. Bootstrap Colors
    6. Close Alerts
    7. JavaScript Alerts
    8. Badges
    9. Breadcrumb
    10. Lab Problem
    11. Lab Solution
  8. Chapter 8 : Components 2 - Buttons, Button Groups, and Pagination
    1. Buttons
    2. Overriding Bootstrap
    3. Button State
    4. Button Group
    5. Pagination
  9. Chapter 9 : Components 3 - Cards
    1. Card
    2. Media Object
    3. List Group
    4. Lab Problem
    5. Lab Solution
  10. Chapter 10 : Components 4 - Carousel, Collapse, and Dropdown
    1. Carousel
    2. Carousel JavaScript
    3. Collapse
    4. Dropdown
    5. Dropdown JavaScript
    6. Jumbotron
    7. Lab Problem
    8. Lab Solution
  11. Chapter 11 : Components 5 - Forms, Input Groups, Navs, and Navbar
    1. Forms layout
    2. Forms Validation and Custom Forms
    3. Forms Testing Component
    4. Input Groups
    5. Navs
    6. Navbar
    7. Navbar Color Schemes
    8. Nav Tabs and List Group Tabs
    9. Lab Problem
    10. Lab Solution
  12. Chapter 12 : Components 6 - Modal, Progress, Scrollspy, and Spinners
    1. Modal
    2. Modal JavaScript
    3. Progress Bars
    4. Scrollspy
    5. Spinners
    6. Lab Problem
    7. Lab Solution
  13. Chapter 13 : Components 7 - Popovers, Toasts, and Tooltips
    1. Tooltip
    2. Popovers
    3. Toasts
    4. Bootstrap Cheat Sheet
  14. Chapter 14 : Accessibility
    1. Introduction to Accessibility
    2. Accessibility Options
  15. Chapter 15 : Utilities
    1. Utilities - Borders, Clearfix, Close Icon, Colors, Display, and Embed
    2. Utilities - Flex, Floats, Overflow, Position, and Screen Readers
    3. Utilities - Shadow, Sizing, Spacing, Stretched Link, Text, Vertical Align, and Visibility
    4. Theming
  16. Chapter 16 : Project 1
    1. Single Product Page Intro
    2. Markup Overview
    3. Decreasing Size-of Cascading Style Sheets (CSS) and JavaScript
  17. Chapter 17 : Project 2
    1. Blog Intro
    2. Blog Code Walkthrough
    3. Blog Adding Contact Page
  18. Chapter 18 : Project 3
    1. Stock Image Website Intro
    2. Stock Image Website Code Overview
  19. Chapter 19 : Project 4
    1. Image Gallery Intro
    2. Image Gallery Header Live Code
    3. Image Gallery in a Grid Column Layout
  20. Chapter 21 : Project 5
    1. Introduction to Landing Page
    2. Code Overview
  21. Chapter 21 : Project 6
    1. Introduction to Admin Dashboard
    2. Admin Dashboard Layout Overview
  22. Chapter 22 : Project 7
    1. Portfolio Header
    2. Banner and Icons
    3. Portfolio Markup and Styles
    4. Portfolio Modal and JavaScript
    5. Form
  23. Chapter 23 : Project 8
    1. Resume Website Intro
    2. Resume Website Code Review
  24. Chapter 24 : Project 9
    1. Introduction to Coming Soon
    2. Coming Soon Page HTML Markup
    3. Coming Soon Styling – Part 1
    4. Coming Soon Styling – Part 2
    5. Coming Soon Slider
  25. Chapter 25 : Project 10
    1. Introduction to Slicing
    2. Header Section
    3. Service Section
    4. Pricing Table and Testimonials Sections
    5. Contact us Section
    6. Footer

Product information

  • Title: Bootstrap 4 Development for Professionals
  • Author(s): Eduonix Learning Solutions
  • Release date: October 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781800560482