Course Brief
About this Course
This course provides a comprehensive guide on building responsive websites using Bootstrap. You will learn how to set up your development environment, create mobile-first designs, implement various Bootstrap components, and add animations and interactions to your site.
Learn how to build responsive, mobile-friendly websites using Bootstrap.
Eligibility
Requirements
- Basic understanding of HTML and CSS.
- Knowledge of web development concepts.
- A computer with internet access.
- Willingness to learn responsive web design techniques.
Training Plan
Learning Roadmap
01
Foundation Studio: Introduction
- Practice introduction through a guided digital skills practice activity.
- Course structure and project planning
- guided portfolio activity Exercise- 01
02
Practical Lab: Setting up work environment
- Choose your code editor
- Downloading Bootstrap
- Downloading and setting up jQuery
- Linking Bootstrap and jQuery files to HTML
- Project source files
- Verifying the working of Bootstrap files
- Practice resources through a guided digital skills practice activity.
- guided portfolio activity Exercise- 02
03
Applied Workflow: Bootstrap Grid System And Writing default CSS for our website
- Understanding Bootstrap Grid system
- Writing default CSS for our website
- guided portfolio activity Exercise- 03
04
Professional Practice: Let's create our Navbar
- Practice navbar part1 through a guided digital skills practice activity.
- Practice navbar part2 through a guided digital skills practice activity.
- Hamburger button troubleshoot
- Practice navbar part3 through a guided digital skills practice activity.
- Styling of navbar in CSS
- Styling login box in CSS
- FAQ How to know the difference between bootstrap classes and custom_classes
- guided portfolio activity Exercise- 04
05
Portfolio Sprint: It's time to create the Header
- Practice header html part-1 through a guided digital skills practice activity.
- Practice header html part-2 through a guided digital skills practice activity.
- Styling the Header part-1
- Styling the Header part 2
- Making the Header Responsive
- guided portfolio activity Exercise- 05
06
Career Readiness: Creating services section
- Services section HTML part-1
- Services section HTML part-2
- Styling the services Section
- guided portfolio activity Exercise- 06
07
Foundation Studio: Sales Section of our website
- Sales section HTML and CSS
- guided portfolio activity Exercise- 07
08
Practical Lab: Next thing is the Pricing section
- Pricing section layout building
- Pricing section styling in CSS
- guided portfolio activity Exercise- 08
09
Applied Workflow: Building the Mission Section
- Mission section layout building 1
- Styling the Mission section in CSS
- guided portfolio activity Exercise- 09
10
Professional Practice: Client Section
- Client section layout
- Client section styling
- guided portfolio activity Exercise- 10
11
Portfolio Sprint: Team section
- Team section layout building
- Team section styling
- guided portfolio activity Exercise- 11
12
Career Readiness: Creating our awesome contact form
- Practice contact form html through a guided digital skills practice activity.
- Contact form styling
- guided portfolio activity Exercise- 12
13
Foundation Studio: Footer
- Practice footer layout through a guided digital skills practice activity.
- Practice footer styling through a guided digital skills practice activity.
- guided portfolio activity Exercise- 13
14
Practical Lab: Animating the content of our site
- Practice animation part 1 through a guided digital skills practice activity.
- Setting up wow.js file
- Animating your HTML Elements
- Animating your HTML Elements part-2
- Practice final words through a guided digital skills practice activity.
- guided portfolio activity Exercise- 14
15
Portfolio Sprint: Digital Skills Practice Review
- Review the major digital skills practice concepts through a guided recap.
- Organize class practice into a simple portfolio-ready workflow.
- Apply the learned process on a realistic task with instructor guidance.
- Prepare next-step notes for continued practice after course completion.