Fast Bootstrap By 3 Live Responsive Websites In Bootstrap 5


Easily learn the bootstrap 5 by 3 live Responsive websites with visual studio code and bootstrap from scratch

What you will learn

Easily learn bootstrap from scratch and start designing 3 pro websites

Layout of bootstrap 5 and containers

Breakpoints in bootstrap 5

Default, Fluid & Responsive Container

Grid system, row and column

Typography and Utilities

Headings, Paddings, Margins, Border, …

Responsive YouTube video

Responsive Image

Buttons in bootstrap

Card element in web design

Forms in bootstrap

Description

Hi There!

With my 23 years of programming skills I’m with you to share my knowledge with you.

So

If you wanna learn the basics of Bootstrap from pro programmer and real world teacher!

If you try you will learn Bootstrap basics easily!

If you are a beginner or student looking for a tutorial that teach bootstrap with simple project in simplest way!


Get Instant Notification of New Courses on our Telegram channel.

Noteβž› Make sure your π”ππžπ¦π² cart has only this course you're going to enroll it now, Remove all other courses from the π”ππžπ¦π² cart before Enrolling!


If you want really to start learning the basics of bootstrap 5 so it’s best place that you can start to learn bootstrap 5 bassics!

This course includes :

  • Install BootStrap 5 and Visual Studio code on Windows
  • Design portfolio website
  • Design business website
  • Design modern age website
  • Main parts of bootstrap 5 and containers
  • What is breakpoints in bootstrap 5 ?
  • Default container in bootstrap
  • Fluid container in bootstrap
  • Responsive container in bootstrap
  • Grid system in bootstrap for responsive webpage
  • Customize column width in grid
  • Headings and basic typography
  • Text color – Background color
  • Responsive padding and margin
  • Borders in bootstrap
  • Round image – Rounded corners
  • Horizantal text alignment
  • Display : inline and block
  • Text utilitties
  • Sizing: Width and height of elements
  • Responsive YouTubbe video
  • Responsive image
  • Buttons in bootstrap
  • Sample project to learn bootstrap topics
  • Using SVG in web design
  • Change background color of Vs code editor
  • and …

Don’t hesitate to start learning Basics of bootstrap 5 !

Everything will be discussed with sample project and you will have lot of tips and tricks within my course.

Say Hi bootstrap 5 world and let’s go !!!

English
language

Content

Introduction

Introduction

Starting Bootstrap 5

Install Bootstrap 5 and Visual Studio code on Win 10
First project in Vs Code and Bootstrap

Containers Layout

Main parts of bootstrap and containers
What is breakpoints in bootstrap?
Default container
Fluid container
Responsive container

Grid System

Grid system in bootstrap for responsive webpage
Customize column width in grid

Typography and Utilities

Headings and basic typography
Change background color of Vs code editor
Text color – Background color
Simple padding and margin
Responsive padding and margin
Borders in bootstrap
Round image – Rounded corners
Horizontal text alignment
Display : inline and block
Text utilities
Sizing: Width and height of elements

Final project Bootstrap Basic Components

Design First part in Vs code new project
Add Responsive YouTube video
Responsive image
Project: Using responsive image
Buttons in bootstrap
Project: Using bootstrap button
Navbar or Top Menu in bootstrap
Project: Design responsive Navbar

Using Vs Code on Windows 11

Installing vs code on Windows 11
Changing the Vs code theme
Installing Vs code required extensions

Project 1: Portfolio Website

Introduction to Project 1 (Portfolio website)
Creating new project and adding the bootstrap
Adding the top menu by navbar
Designing the header section
Designing β€œAbout us” section
Designing first part of β€œServices” section
Designing second part of β€œServices” section
Using the font icon to add icons to items
Designing β€œDownload” section
Designing first part of β€œPortfolio” section
Adding items to β€œportfolio” section
Adding text & back color to portfolio items
Adding animation to β€œportfolio” items
Designing β€œdonate” section
Designing β€œfooter” section
Connect the menu items to sections
Defining the required fonts for website

Project 2: Business website

Introduction to Project 2: Business website
Creating new project and adding the bootstrap
Adding the top menu by navbar
Designing β€œheader” section
Designing β€œFeatures” section
Designing β€œPrice” section
Designing β€œAbout us” section
Designing β€œContact us” section
Designing β€œfooter ”section
Connect the menu items to sections

Project 3: “New Age” website

Creating new project & adding bootstrap
Adding the top menu by navbar
Adding modal form to top menu
Designing β€œheader” section
Designing β€œAd” section
Designing the β€œFeatures” section
Designing β€œMore info” section
Designing β€œFirst Download” section
Designing β€œSecond Download” section
Designing β€œFooter” section
Connect menu items to sections
Solve the problem on showing modal form