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!
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
