Bootstrapi algkursus (e-õpe, inglise keeles)

Koolituse maht: 16 akadeemilist tundi ehk 2 õppepäeva, mille saad endale sobivale ajale jaotada.

Sihtgrupp: This course is for students new to Bootstrap.

Koolitusel osalemise eeldused: Experience in the following is required for this Bootstrap class: HTML, CSS, JavaScript.

To complete the training and get a certification you need to pass the quiz 100%.

Koolituse teemad:

This Introduction to Bootstrap 4 course teaches students how to use the world’s most popular framework for building responsive, mobile-first sites.

1. Getting Started with Bootstrap Basics

• Introduction to Bootstrap 4
  1. What Is Bootstrap?
  2. What Is a Framework?
  3. What Is Responsive Design?
  4. What Is Mobile-first Design?
  5. Major Changes in Bootstrap 4
• Creating a Basic HTML Template with Bootstrap
• How to Download Bootstrap
• Applying Styles and Functions with Class
• Test

2. Bootstrap Layout

• What Is the Viewport?
• Understanding Breakpoints
  1. Bootstrap’s Breakpoints
  2. Introducing Bootstrap’s Grid System
• Using Responsive Classes
  1. Containers
  2. Rows and Columns
• Making Grids
• Test

3. Creating Responsive Navigation

• 1. Using the nav Component
     1. nav Modifiers
     2. HTML data- Attributes
     3. The role Attribute
  2. Working with nav Modifier Classes
  3. Using the navbar Component
  4. Create a Responsive Navigation Header
• Test

4. Bootstrap Typography

• How Bootstrap Updates Browser Defaults
  1. Introducing Reboot
  2. Bootstrap Default Styles
• Understanding rem and em
  1. em
  2. rem
  3. Headings and Paragraphs
• Styling Blocks With rem
• Styling Text Inside Blocks
  1. Inline Elements
  2. Text Utilities
• Test

5. Tables

• Responsive Tables
  1. Breakpoint-specific Responsive Tables
• Overall Table Styles
• Styling Tables
• Table Headers
  1. The scope Attribute
• Contextual Classes
• Test

6. Bootstrap Forms

• Browser Input Inconsistencies
  1. Form Controls
  2. Input Types
• Form Layout
  1. Form Groups
  2. Grid Layout
  3. Horizontal Forms
  4. Sizing
• Styling a Form
• Test

7. Images

• Making Images Responsive
  1. Responsive CSS
  2. Using the Picture Element
• Aligning Images
  1. Float Classes
  2. Centering Images
• Figures
• Create a Page with Images
• Test

8. Bootstrap Components

• Styling Buttons
  1. Outline Buttons
  2. Button Sizes
• Carousel
• Make a Carousel
• Jumbotron
• Alerts
• Collapse
• Modal
• Pagination
• Card
• Tooltip
• Popover
• Test

9. Bootstrap Utilities

• Borders
  1. Border Colors
  2. Border Width
  3. Rounded Corners
• Position
• Shadows
• Spacing Utilities
• Misc Helpful Utilities
  1. Clearfix
  2. Close Icon
  3. Embed
  4. Screenreaders
  5. Visibility
• Build a Single-page Website, Part 1
• Test

10. Bootstrap Flex

• What is Flexbox?
• Create a Flexbox Container
  1. Inline Flexbox
  2. Responsive Flexboxes
• The Two Axes
  1. Flex Directions
• Justify Content
  1. Alignment
  2. Order
• Build a Single-page Website, Part 2
• Test

Koolituse eesmärk

The main purpose of this e-course is to give students a good understanding of the basics of Bootstrap framework.

Koolituse õpiväljundid

After completing this course, students will:

• Learn the benefits of mobile first responsive design.
• Learn how to use Bootstrap’s predefined classes.
• Understand how to use Bootstrap’s grid system.
• Learn to create responsive navbars.
• Learn to style typography with Bootstrap.
• Learn to style tables with Bootstrap.
• Learn to style forms with Bootstrap.
• Learn to use images with Bootstrap.
• Learn to use the most popular Bootstrap components.
• Learn to use an array of Bootstrap Utilities.
• Learn to use Bootstrap Flex.

Koolitus toimub e-õppe keskkonnas, kuhu saab siseneda isikliku kasutajanime ja parooliga. Need saadetakse Teile pärast koolitusarve tasumist või erikokkuleppel.

Täienduskoolituse õppekavarühm: tarkvara ja rakenduste arendus ning analüüs