Menu
Search
Close this search box.

HTML, CSS & Bootstrap

HTML structures, CSS styles, Bootstrap empowers: Crafting stunning, responsive web experiences
html css bootstrap training philippines inventive media

Course Overview

We offer the most beginner-friendly HTMLCSS, and Bootstrap training in the Philippines. This course equips learners with the abilities to craft attractive, responsive websites. It includes fundamental HTML and CSS concepts, responsive design principles, and Bootstrap framework usage.

In-Person | Physical

3 Days | 30+ Hours

Basic to Advance

Unlimited Retakes

Ranked as one of the Best Schools for Web Development

Frequently Asked Questions

  • Basic computer knowledge and skills in PC or Mac.
  • Certificate of course completion
  • Training references (PDF)
  • Exercise materials
  • Some add-ons
  • Free trainer consultation
  • Unlimited Free Retakes
Unlimited Retakes = Unlimited Hours of Learning!

We understand that individuals have different learning styles and paces, that’s why we offer the opportunity to learn at your own speed. If you need more time to grasp a concept, you are welcome to come back and retake the class at no additional cost. We believe in providing students with the support they need to succeed.

To Avail: Finish the course to qualify for the unlimited refresher classes

Validity: 1 Year

  • Aspiring Web Developers and Front-end Designers
  • People who are about to start a personal or business website
  • People who would like to further customize a CMS based websites.

HTML (Hypertext Markup Language) is the standard language used to create web pages. It provides the structure and content of a web page, including headings, paragraphs, images, links, and more.

CSS (Cascading Style Sheets) is a language used to style and layout web pages. It is used to control the colors, fonts, spacing, and other visual elements of a web page. CSS allows you to separate the presentation of a web page from its structure, which makes it easier to maintain and update.

Bootstrap is a front-end development framework that is built on top of HTML and CSS. It provides a set of pre-designed components and layout options that can be easily integrated into web pages. Bootstrap makes it easy to create responsive and mobile-friendly web pages, and it also includes a set of JavaScript plugins that can be used to add interactivity and dynamic functionality to web pages.

  • Job opportunities: HTML skills are in high demand in the job market, with many companies looking for web developers and designers who are proficient in HTML.
  • Prerequisite web language: HTML and CSS are required by most front-end and back-end web languages such as JavaScript, jQuery, PHP, Laravel, CodeIgniter, etc.
  • Customizing templates and extensions:  HTML and CSS can be used in customizing  templates and extensions for CMS based web applications such as  WordPressJoomla, and Drupal based websites.
  • E-commerce: HTML and CSS are used to create online shopping websites, including product pages, shopping carts, and checkout pages.
  • Blogs and online publications: HTML and CSS are used to create blogs and online publications, including text, images, and videos.
  • Online forms: HTML and CSS are used to create online forms for data collection and submission, including contact forms, surveys, and registration forms.
  • Mobile development: HTML and CSS are used to create mobile-friendly websites and apps that are optimized for small screens and touch-based navigation.
  • Landing pages: HTML and CSS are used to create landing pages for businesses, products, and services, including calls-to-action, forms, and social sharing buttons.
  • Email Marketing: HTML and CSS are used to create emails that are visually appealing and interactive.
  • Accessibility: HTML and CSS are used to create accessible websites that can be used by people with disabilities.
  • SEO: HTML and CSS are used to create websites that are optimized for search engines, making it easier for people to find the website through search engines.
  • Animation and Transitions: HTML and CSS can also be used to create animations and transitions that make web pages more interactive and engaging.

Course Outline

Introduction to Web

  • What is The Internet?
  • The World Wide Web
  • Web Server and Domain Name Service
  • Web Browser and its purpose
  • What are Web Pages?
  • Text Editors
  • The HTML Code

HTML File Basics

  • Creating An HTML Document
  • Organizing Your Project Assets

Visual Studio Code (BONUS)

  • Installation and Interface Tour
  • Common Shortcuts
  • Chrome Shortcuts
  • VS Code Shortcuts
  • Utilizing Emmet.io and Intellisense
  • Windows Shortcuts
  • Converting Screenshots Into Links For Troubleshooting
  • Installing Extensions
  • Configuration For Convenience

What is HTML?

  • Elements
  • The Head
  • The Body
  • Syntax and semantics
  • Setting up the HTML document structure
  • Creating Comments

Global Attributes

  • Title
  • Style
  • Class
  • Id

Block Elements

  • Headings
  • Paragraphs
  • Line Breaks
  • Ordered Lists
  • Unordered Lists
  • Special Characters
  • Preformatted Text
  • Details
  • Summary
  • Horizontal Rule

Inline Elements

  • Span
  • Bold
  • Italic
  • Underline
  • Strong
  • Emphasis
  • Insert
  • Small
  • Big
  • Superscript
  • Subscript
  • Del
  • Mark

Images

  • Using Royalty Free Images
  • Alt Attribute
  • Width
  • Height

Links

  • Relative Links
  • Absolute Links
  • Link Target
  • Text
  • Email
  • Telephone
  • Image Link
  • Download Link
  • Anchor Links

Embedding Media

  • Internal Embedding
  • External Embedding
  • Audio
  • Video
  • Google Apps
  • Social Media
  • Manual Embedding

Other Elements

  • Tables
  • Forms
  • Divs
  • Link
  • Meta

What is CSS?

  • CSS Syntax
  • Cascading Styles with Inheritance
  • Understanding Specificity

Linking CSS to HTML

  • Inline Style Attribute
  • Internal Style Tag
  • External Style Sheet

CSS Selectors

  • Element
  • Class
  • ID
  • Multi Selector
  • Descendant
  • Wild Card
  • Direct Child
  • General Sibling
  • Adjacent Sibling
  • Attribute
  • Pseudo Class
  • Pseudo Element

The Box Model

  • Margin
  • Padding
  • Border and Styling

Box Sizing

  • Content Box
  • Border Box

Sizing

  • Width
  • Min-Width & Max Width
  • Height
  • Min-Height and Max Height
  • Pixels
  • Percentage
  • Viewport Height & Viewport Width
  • Rems & Ems
  • Ch
  • Targeting the Root Element

Colors

  • Using Color Generators
  • Storing CSS Variables
  • Hexadecimal
  • Red Green Blue (RGB)
  • Hue Saturation Lightness (HSL)

Text

  • Text Alignment
  • Text Transform
  • Text Decoration
  • Text Shadow
  • Box Shadow
  • Font Family
  • Font Weight
  • Font Style
  • Font Size
  • Line Height
  • Letter Spacing
  • Word Spacing
  • List Style Type
  • Custom List Style Type Using Marker

Background

  • Background Color
  • Background Image
  • Background Size
  • Background Repeat
  • Background Position
  • Position
  • Object Fit
  • Z-index

Easily Align Elements with Flexbox

Advanced Positioning with CSS Grid

Introduction to Bootstrap

  • What is Bootstrap?
  • Adding the Bootstrap library CDN
  • Integrating Bootstrap library Locally
  • Using the grid design pattern
  • Using Bootstrap’s custom classes
  • Using Bootstrap’s typography
  • Using Bootstrap icons
  • Using Styled Buttons

Final Project: Company Website with four pages

Standards and validation

  • Common HTML and CSS mistakes
  • Code validation
  • Accessibility Standards
  • Google HTML style guide
  • Google CSS style guide

Other Tips and More!

Registration

Note: Promo rates are subject to change without prior notice

Single Course Promo

10,000

Regular Fee

1,000 less

New Student Discount

1,500 less

Alumni Discount

Course Packages Promo

Promo Mechanics: Courses that are part of a Packaged Promo should be availed within the same month. Promo rates are subject to change without prior notice

HTML5, CSS3 with Bootstrap 5 + JavaScript
21,000
Regular Fee
4,000
less
Package Discount
17,000
Discounted Fee
HTML5, CSS3 with Bootstrap 5 + PHP with MySQL
23,000
Regular Fee
4,500
less
Package Discount
18,500
Discounted Fee

Schedules

march 2024

fri01mar9:00 amsun03(mar 3)7:00 pmHTML5, CSS3 & BootstrapWeb DevelopmentPhysical Class

sat02mar(mar 2)9:00 amsun03(mar 3)7:00 pmJoomla CMSWeb DevelopmentPhysical Class

fri08mar(mar 8)9:00 amsun10(mar 10)7:00 pmJavaScript EssentialsWeb DevelopmentPhysical Class

fri08mar(mar 8)9:00 ammon11(mar 11)7:00 pmPHP with MySQLWeb DevelopmentPhysical Class

fri15mar(mar 15)9:00 ammon18(mar 18)7:00 pmCodeIgniter PHP FrameworkWeb DevelopmentPhysical Class

sat16mar(mar 16)9:00 amsun17(mar 17)7:00 pmWordPress CMSWeb DevelopmentPhysical Class

fri22mar(mar 22)9:00 amsun24(mar 24)7:00 pmReact JS EssentialsWeb DevelopmentPhysical Class

fri22mar(mar 22)9:00 ammon25(mar 25)7:00 pmLaravel 10 PHP FrameworkWeb DevelopmentPhysical Class

fri22mar(mar 22)9:00 ammon25(mar 25)7:00 pmPython Programming EssentialsProgramming LanguagePhysical Class

fri22mar(mar 22)9:00 ammon25(mar 25)7:00 pmJava Programming EssentialsProgramming LanguagePhysical Class

sat23mar(mar 23)9:00 amsun24(mar 24)7:00 pmMastering WordPress with ElementorWeb DevelopmentPhysical Class

sat30mar(mar 30)9:00 amsun31(mar 31)7:00 pmDrupal CMSWeb DevelopmentPhysical Class

april 2024

fri05apr(apr 5)9:00 amsun07(apr 7)7:00 pmHTML5, CSS3 & BootstrapWeb DevelopmentPhysical Class

sat06apr(apr 6)9:00 amsun07(apr 7)7:00 pmJoomla CMSWeb DevelopmentPhysical Class

fri12apr(apr 12)9:00 amsun14(apr 14)7:00 pmJavaScript EssentialsWeb DevelopmentPhysical Class

fri12apr(apr 12)9:00 ammon15(apr 15)7:00 pmPHP with MySQLWeb DevelopmentPhysical Class

sat13apr(apr 13)9:00 amsun14(apr 14)7:00 pmDrupal CMSWeb DevelopmentPhysical Class

fri19apr(apr 19)9:00 amsun21(apr 21)7:00 pmReact JS EssentialsWeb DevelopmentPhysical Class

sat20apr(apr 20)9:00 amsun21(apr 21)7:00 pmWordPress CMSWeb DevelopmentPhysical Class

fri26apr(apr 26)9:00 ammon29(apr 29)7:00 pmLaravel 10 PHP FrameworkWeb DevelopmentPhysical Class

fri26apr(apr 26)9:00 ammon29(apr 29)7:00 pmPython Programming EssentialsProgramming LanguagePhysical Class

fri26apr(apr 26)9:00 ammon29(apr 29)7:00 pmJava Programming EssentialsProgramming LanguagePhysical Class

sat27apr(apr 27)9:00 amsun28(apr 28)7:00 pmMastering WordPress with ElementorWeb DevelopmentPhysical Class

Recommended Courses