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 | 9am - 7pm

Basic to Advanced

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

Single Course Promo

Note: Promo rates are subject to change without prior notice
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 Essentials
22,000
Regular Fee
3,500
less
Package Discount
18,500
Discounted Fee
JavaScript Essentials + React JS Essentials
26,000
Regular Fee
3,500
less
Package Discount
22,500
Discounted Fee
HTML5, CSS3 with Bootstrap 5 + PHP with MySQL
23,000
Regular Fee
3,500
less
Package Discount
19,500
Discounted Fee

june 2024

fri07jun(jun 7)9:00 ammon10(jun 10)7:00 pmPHP with MySQLWeb DevelopmentPhysical Class

fri07jun(jun 7)9:00 ammon10(jun 10)7:00 pmPython Programming EssentialsProgramming LanguagePhysical Class

sat08jun(jun 8)9:00 amsun09(jun 9)7:00 pmDrupal CMSWeb DevelopmentPhysical Class

fri14jun(jun 14)9:00 amsun16(jun 16)7:00 pmReact JS EssentialsWeb DevelopmentPhysical Class

fri14jun(jun 14)9:00 ammon17(jun 17)7:00 pmCodeIgniter PHP FrameworkWeb DevelopmentPhysical Class

fri21jun(jun 21)9:00 amsun23(jun 23)7:00 pmHTML5, CSS3 & BootstrapWeb DevelopmentPhysical Class

fri21jun(jun 21)9:00 ammon24(jun 24)7:00 pmLaravel 10 PHP FrameworkWeb DevelopmentPhysical Class

sat22jun(jun 22)9:00 amsun23(jun 23)7:00 pmWordPress CMSWeb DevelopmentPhysical Class

fri28junmon01julDjango Python FrameworkProgramming LanguagePhysical Class

fri28junmon01julJava Programming EssentialsProgramming LanguagePhysical Class

sat29jun(jun 29)9:00 amsun30(jun 30)7:00 pmWordPress Custom Themewith ElementorPhysical Class

sat29jun(jun 29)9:00 amsun30(jun 30)7:00 pmJoomla CMSWeb DevelopmentPhysical Class

sat29junmon01julJavaScript EssentialsWeb DevelopmentPhysical Class

july 2024

fri28junmon01julDjango Python FrameworkProgramming LanguagePhysical Class

fri28junmon01julJava Programming EssentialsProgramming LanguagePhysical Class

sat29junmon01julJavaScript EssentialsWeb DevelopmentPhysical Class

fri05jul(jul 5)9:00 amsun07(jul 7)7:00 pmHTML5, CSS3 & BootstrapWeb DevelopmentPhysical Class

sat06jul(jul 6)9:00 amsun07(jul 7)7:00 pmDrupal CMSWeb DevelopmentPhysical Class

fri12jul(jul 12)9:00 amsun14(jul 14)7:00 pmJavaScript EssentialsWeb DevelopmentPhysical Class

fri12jul(jul 12)9:00 ammon15(jul 15)7:00 pmPHP with MySQLWeb DevelopmentPhysical Class

fri19jul(jul 19)9:00 amsun21(jul 21)7:00 pmReact JS EssentialsWeb DevelopmentPhysical Class

fri19jul(jul 19)9:00 ammon22(jul 22)7:00 pmPython Programming EssentialsProgramming LanguagePhysical Class

fri19jul(jul 19)9:00 ammon22(jul 22)7:00 pmCodeIgniter PHP FrameworkWeb DevelopmentPhysical Class

sat20jul(jul 20)9:00 amsun21(jul 21)7:00 pmWordPress CMSWeb DevelopmentPhysical Class

fri26jul(jul 26)9:00 ammon29(jul 29)7:00 pmLaravel 10 PHP FrameworkWeb DevelopmentPhysical Class

fri26jul(jul 26)9:00 ammon29(jul 29)7:00 pmDjango Python FrameworkProgramming LanguagePhysical Class

fri26jul(jul 26)9:00 ammon29(jul 29)7:00 pmJava Programming EssentialsProgramming LanguagePhysical Class

sat27jul(jul 27)9:00 amsun28(jul 28)7:00 pmWordPress Custom Themewith ElementorPhysical Class

sat27jul(jul 27)9:00 amsun28(jul 28)7:00 pmJoomla CMSWeb DevelopmentPhysical Class

Recommended Courses