Front-end Development
These courses are primarily designed for aspiring Front-end Web Developers. Front-end development is an area of web development that focuses on the coding and programming of website elements that are visible and accessible to the end-user. A front-end developer is generally responsible to the visual aspects and the total user experience of the website.
Course Overview
At the heart of every website is an HTML script. Hyper Text Markup Language or HTML, is the standard markup language used to creating web pages. It is the basic building blocks or framework on how each every website on the internet is built.
What you will learn
Introduction
- The Internet
- World Wide Web
- Web Server
- Domain Name Service
- Browser
- Web Pages
- Text Editors
- Code
HTML File Basics
- Creating An HTML Document
- Organizing Your Project Assets
Visual Studio Code
- 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
- 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!
Course Overview
This is a Basic to Advance Course in JavaScript with Introduction to jQuery. The JavaScript Essential Training is designed to teach students on how to code, create, and build JavaScript data types, arrays, functions, loops, control flow and objects. Learn and understand how to add JavaScript code to create powerful interactions to websites.
What you will learn
Getting started
- Introduction to JavaScript
- Creating your first JavaScript
- Getting to know the tools and applications
Core JavaScript Concepts
- Understanding the structure of JavaScript
- Where to write your JavaScript
- Creating Variables
- Using different data types
- arrays
- numbers
- strings
- dates
- objects
- Working with operators
- Sending a message to the console
- Working with conditional constructs
- Working with loop constructs
- Creating Functions
Understanding the Document Object Model
- What is DOM
- Working with nodes and elements
- Accessing DOM Elements
- Changing DOM Elements
- Creating DOM Elements
Working With Events and Event Listeners
- Introduction to JavaScript event handling
- Working with onClick and onInput events
- Working with timers
Debugging Javascript
- Common JavaScript errors
- Tools debug JavaScript
Working with HTML Forms
- Accessing form elements
- Common form element validation techniques
- Common form element actions
Working with CSS
- CSS and JavaScript integration
- Removing and applying CSS classes
- Changing inline styles
Final Projects
- Sample code for active clock
- Sample Slider code
- Sample Accordion
| WordPress CMS |
|---|
| Joomla CMS |
|---|
Content Management System
Content Management System or more popularly known as CMS is a software that helps non-technical users to easily create, manage and edit powerful dynamic database-driven websites without any technical skill in web development.
Are you a non-technical user with zero background in coding and programming but would want to create a Powerful and Dynamic Websites? If yes, then CMS is the choice for you.
Overview
WordPress CMS is hailed as the “World’s Fastest Growing CMS and #1 Blog Application”. Awards: 2010 – CMS Hall of Fame Winner; 2009 – Best CMS Website Development Application. A database driven web development application powered by PHP and MySQL. Great for building dynamic websites with features such as ecommerce, classified ads, directories, forum, blog, etc.
What You’ll Learn
Introduction
- Website 101
- Web Evolution
- What is WordPress CMS?
- Blog vs CMS?
- What is a Content Management System (CMS)?
- CMS Features and Advantages
- CMS disadvantages
- Two parts of a CMS Application
- What is a Database
Installation
- What are the applications needed to get you started?
- Where to get the local database application?
- Where to get the WordPress Application?
- Installing the Local Database
- XAMPP installation
- WAMP installation
- MAMP installation
- Configuring XAMPP and MAMP
- Installing WordPress
- Accessing WordPress website’s Frontend and Backend
Touring WordPress Dashboard
- Header
- Main Navigation Menu
- Work Area
- Footer
- Site Updates
- Customizing the Dashboard
- Customizing your profile
Configuring WordPress Settings
- General Settings
- Writing Settings
- Reading Settings
- Discussion Settings
- Media
- Privacy
- Permalinks
Working with Menus
- Creating a Menu
- Assigning the menu to the Current Theme
- Add, Edit and Delete Menu Items
- Creating Multiple Menus
Posts vs Pages
Creating a Dynamic and Static Home Page
All about Posts
- How to Add, Edit and Delete a Post
- Organize Post with Post Categories
- Using Post Tags
- Working with Revisions
- Post security access: Private, Public & Password Protected
- Post SEO: Title, Slug, and Content
- Sticky Post
- Allowing post discussion and pingbacks
- Scheduled Post
All about Pages
- How to Add, Edit and Delete a Page
- Working with Revisions
- Page security access: Private, Public & Password Protected
- Page SEO: Title, Slug, and Content
- Page Order
- Page Template
- Scheduled Page
Using the Block Editor
- Block Inserter
- Searching for Blocks
- Adding Blocks
- Tools
- Undo and Redo
- Details
- List View
- Block Patterns
- More Options
Improving Content Readability using Read More, Page Break and Excerpts
Working with Hyperlinks
- Text Links
- Image Links
- Email Link
- PDF Link (Using add media approach)
- Download Link
- Named Anchors
Commonly Used Blocks
- Heading
- Paragraph
- List
- Classic
- Social Icons
- File
- Custom HTML
- Group
- Spacer
- Separator
- Code
- Preformatted
- Verse
- Table
- Image
- Media and Text
- Cover
- Button
- Column
- Audio
- Video
- Gallery
- Latest Posts
Working with Media
- The Media Library
- Add, Edit, Delete Media Elements
- Organizing your Media Content
- Embedding an Image and Photo Gallery
- Embedding a Single Audio Track and an Audio Playlist
- Embedding Internal and External Videos
- Embedding Google Map
- Embedding PDF, Docs, Sheets, Slides
Working with Themes
- Installing Premade Themes
- Customizing Premade Theme
Widgets vs Plugins
- Installing Free Widgets and Plugins
- Installing Commercial Widgets and Plugins
- Configuring Widget and Plugins
- Control to which Pages and Post, Extensions will Appear
Creating Contact Form using a Gravity Forms (Paid Extension: Bonus)
Creating a Professional Image Slider using Slider Revolution (Paid Extension: Bonus)
Website Back-up
- Database Backup
- Site Files Backup
Publishing
- Web Hosting 101
- Recommended Web Hosts
- Publishing the database
- Publishing the Site Files
Fixing Broken Links
Securing the Backend Access
User Management
- Users Accounts
- Add, Edit and Delete User Accounts
- Promoting Users
Bonus: Tips and Other Best practices!
Overview
2011’s Best CMS Awardee. Is by far the world’s most popular and widely used CMS Web Development application in the world. Joomla is web development application made easy! It’s database driven (PHP/MySql) & helps you easily build dynamic based websites. Allows easy integration of features such as user login, RSS, forum, ecommerce, blog, etc. This Joomla tutorial is designed to help you create and design database based driven websites like a pro!
What You’ll Learn
Introduction to Joomla
- What is Joomla?
- What’s a CMS?
- Advantages of Using CMS
- What is a database?
Installation
- Where to Download Joomla
- Where to Download Local Web Server Application
- Installing the local database (XAMPP/WAMP/MAMP)
- Installing Joomla (Windows/Mac)
- Accessing Website’s Frontend and Backend
Understanding Joomla’s Control Panel
- Menu Bar
- Add New Articles
- Article Manager
- Front Page Manager
- Section Manager
- Category Manager
- Media Manager
- Menu Manager
- Language Manager
- User Manager
- Global Configuration
- Logged in Users
- Popular
- Recent Added Articles
- Menu Stats
Configuring Joomla after Installation
Organizing Articles through Categories
- What are Category and Categories?
- Creating a Category and Categories
- Adding Articles to Category and Categories
All about Content
- What’s a Content?
- What’s an Article?
- Adding Content/Article
- Edit, Delete and Unpublish Articles
- Promoting Article(s) to the FrontPage/Homepage
- Arranging Articles on the FrontPage
- Creating individual pages of Content
- Minimizing the display of articles through Read More and Page Break
- Deleting and Retrieving Deleted Articles
Designing and Formatting Content
- Getting to know the TinyMCE / WYSIWYG Editor
Creating Hyperlinks
- What’s a Relative Hyperlink?
- What’s an Absolute Hyperlink?
- Creating Different Hyperlink
- Text Hyperlink
- Image Hyperlink
- Email Hyperlink
- PDF Hyperlink
- Download Hyperlink
- Named Anchors
Embedding Multimedia
- Managing your Media Content with the Media Manager
- Embedding Images
- Embedding Videos
- Inserting Internal Video
- Inserting External Video
Article Configuration and Settings
- Article Global Parameters (Site-wide Parameters)
- Article Parameters (Overriding Article Global Parameters)
- Article Access Levels
- Article Publishing Parameters
- Article Metadata
Working with Menus
- Parent Menu Item and Sub-menu item
- Menu Item Details
- External Link Menu
- Menu Separator
- Search Menu
- Menu Wrapper
- Changing the Order of Menu items
- Menu item Page Title
- Changing the site’s Default Loading Page
- Deleting Menu Items
- Restoring Menu Items
- Creating additional Menu
Using Extensions
- What are Extensions?
- Installing and Uninstalling Extensions
- Working with Different Extensions?
- Modules
- Plugins
- Component
- Laguage
- Template
Managing Templates
- What is a Template?
- Joomla’s Pre-installed Templates
- Installing Templates
- Assigning different Templates to specific Pages
- Template Parameters
- Editing the Template’s Images
- Editing the Template’s CSS and HTML codes
User Management
- Adding Users
- User Permissions
Understanding the Global Configuration
Additional Tools
- Built-in Private Messaging
- Global Check-in
- What is Cache?
- Clean Joomla Cache?
- Turning-off Joomla Cache
Optimizing your content for Search Engine Indexing
- Search Engine Friendly URLs
- Adding Metadata to Articles and Global Configurations (Keywords & Description)
Site Publishing
- Looking for the right Web Host
- Backing-up and Exporting the database (localhost)
- Importing the database to your Webhost
- FTP Publishing
- Configuring the configuration.php file
- Site Backup
Meet your Mentor
Why Enroll in this Bootcamp?
Unlimited Free Retakes
In-line with our mission statement, students who have previously completed this course are automatically entitled to unlimited free refresher courses. Limitations: The refresher course is limited only to the same course that you have taken and is only valid for 1 year.
1st training center to offer CMS Web Development classes in the Philippines (Since 2006)
This is where it all started. Our Founder “Henry N. Ong II“ is the recognized pioneer of CMS Web Development courses in the country. and In 2006, Inventive Media became the first center to offer Joomla, WordPress and Drupal CMS classes.
1st training center to offer Bootstrap in the Philippines (since 2014)
Inventive Media was the first to realize the enormous importance and potential of Bootstrap and Laravel Framework in Web Development. That's why in 2014 we became the first training center in the Philippines to offer classes for these now massively popular and highly in-demand frameworks.
Unmatched Credibility and Experience
Close to 85% of Government and LGU websites powered by CMS got their formal training from us. Such agencies include Malacanang, OVP, DOST, DICT, PNP, Phil. Army, Phil. Navy, Bureau of Immigration, NBI, GSIS, Pagcor, PCSO, Phivolcs, NEDA to name a few.
Course Packages Promo
| Onsite | Face-to-Face Class | ||
| Basic Networking Wired & Wireless + CCTV Security Surveillance Installation and Management
2 Course Package | ||
| Regular Fee | Package Discount | Discounted Fee |
| ₱45,000 | ₱4,000 less | ₱12,000 |