HTML, JavaScript, & Bootstrap - Certification Course

Explore how the Document Object Model structures a browser-created tree of elements and how JavaScript or jQuery updates them by tag name, id, or class in response to events.

Create an external JavaScript file and call it with a script tag's src attribute. This improves maintainability, caching, and load speed.

Learn how to document JavaScript code with comments that explain the function, using single-line // and multi-line /* */ styles to control execution and reveal output.

Learn how the equals sign functions as the assignment operator in JavaScript, assigning values between numbers and strings with a practical example.

Explore JavaScript arithmetic operators, starting with division of 100 by 50 and displaying the result. Increment and decrement variables (x++, h--), and store outputs in z and k for preview.

Explore operator precedence to understand how arithmetic expressions are evaluated by brackets, exponents, division, multiplication, addition, and subtraction. See how (50 + 200) in brackets is multiplied by 3.

Explore JavaScript data types by examining variables that store numbers, strings, arrays, and objects, and learn how properties define object data through examples like age, last name, cars, and person.

Output object properties in one line from a person object via getElementById, first name, last name, age, and eye color. Create a sentence 'John has blue eyes' with plus signs.

Discover how JavaScript strings store characters in variables, using single or double quotes. Practice embedding quotes inside strings and displaying outputs in the browser with line breaks.

Discover how to determine a string's length using the built-in length property in JavaScript. See an example with a 26-letter alphabet string to output the length as 26.

Learn to display quotes inside JavaScript strings by using the backslash escape character, ensuring proper output and correct rendering of quotations in your browser.

Learn how to use Math.min and Math.max to find the lowest and highest values in a list of numbers, with examples showing output such as -150 and 600.

Explore how to use JavaScript's Math.round to convert decimals like 15.4 to 15 and 15.6 to 16, and compare with Math.floor and Math.ceil to control rounding.

Output each array value by calling toString, preview the results in the browser, and customize separators with join to use an asterisk with surrounding spaces.

Use the splice method to add multiple items to an array and set the start index. See lemon and banana inserted after orange at index 2, removing zero elements.

Join two arrays using the concat method to create a combined array from girls and boys, then display the results and preview in the browser.

Explore JavaScript comparison operators, including the equal to and not equal operators, by testing a variable against values like 8, 6, and 10 and observing true or false results.

Explore how the boolean function tests whether a value is true, showing that real values (numbers and strings) are true, while zero is false, via a seven-variable example.

Learn how for loops run a code block repeatedly, starting at 0 and incrementing by 1 until 10, using document.write in an HTML document, with adjustable initial values and max.

Explore the JavaScript for-in loop that iterates over an object's properties, using a person object with first name, last name, and age to output each value.

Demonstrate the JavaScript while loop by starting a variable at zero and outputting i while i does not exceed 20. Adjust the maximum to 40 to show it reaches 39.

Explore how the do-while loop runs its code block once before testing the condition, then repeats while the condition is true, illustrated with a button-triggered JavaScript example.

Define JavaScript functions to perform tasks, accept parameters, and return results, using the return statement. Call these functions with arguments to multiply numbers 8 and 2 or 6 and 5.

Explore how HTML events trigger JavaScript, including click, hover, and mouse out. See a sample button display the date and time on click.

Bootstrap streamlines web development with built-in templates for typography, forms, buttons, tables, navigation, modals, and image carousels, plus optional JavaScript plugins that enable responsive, cross-browser layouts.

Embed the Bootstrap framework into your web page using the Bootstrap CDN, include the jQuery library, and load Bootstrap.js to access the built-in CSS and JavaScript components.

Explore Bootstrap's mobile-first grid system that uses up to 12 columns to adapt layouts for any device, with breakpoints like lg, md, and sm.

Apply the Bootstrap jumbotron to a div to create a prominent area with an h1 heading and a subtitle paragraph, and explore container placement and the page header alternative.

Learn how bootstrap wells highlight content with a rounded border, light background, and padding, using well, well small, and well large to create small, normal, and large wells.

Learn how to create Bootstrap buttons using button classes, apply sizes and block-level layouts, and toggle states like active and disabled across button, input, and link elements.

Learn how Bootstrap glyphicons let you display icons by inserting a span with the appropriate icon classes, such as envelope, search, heart, star, and print, inside text, buttons, and links.

Apply bootstrap pagination by building an unordered list with the page nation class, marking active and disabled states, and resizing to large or small; convert to breadcrumb style for navigation.

Explore bootstrap pager pagination by applying the pager class to an unordered list to create previous and next buttons, and align them to container edges with previous and next classes.

Learn to style Bootstrap list groups with basic items, add badges and icons, enable hover effects, and apply active, disabled, and contextual classes.

Create and style Bootstrap panels containing panel body, heading, and footer. Group panels into panel groups and apply contextual classes such as panel primary, warning, and danger for color.

Learn to build bootstrap collapsibles that show or hide content by clicking a button or link, using data-toggle collapse, data-target, and matching element ids with a collapse class.

Demonstrates a collapsible bootstrap panel that toggles on heading click, using a panel group, panel primary, panel heading, panel title, and a content div with panel body and panel footer.

Develop a Bootstrap accordion by building panel groups, assigning a unique id, and linking headers to content with href and data-parent to ensure one panel collapses as another expands.

Learn to build Bootstrap tab menus and dropdowns using nav tabs, active states, and dropdown components, including proper markup with ul, li, and a tags.

Explore inline and vertical pill menus built with unordered lists, active states, and responsive dropdowns. Create dropdowns with dropdown, dropdown toggle, and data-toggle attributes to organize links.

Create a responsive Bootstrap navigation bar that spans the page on large screens and stacks links on small screens, using the nav bar, header, brand, and related classes.

Explore bootstrap forms, including vertical, horizontal, and inline layouts, using a sample login form. Learn semantic structure with form, form-group, form-control, labels, email, password, and validation.

Style inputs, text areas, checkboxes, radios, and selects with Bootstrap using form group and form control classes, with proper input types and text area rows.

master bootstrap form control states in a horizontal form, including focus, disabled, success, warning, and error states, with labels, grid columns, and form control feedback.

Set input heights and widths with bootstrap using input-lg and form group large or small, and arrange inputs in columns that span extra small grid sizes in horizontal forms.

Create a bootstrap carousel that cycles car images with a title and description, using indicators, left/right controls, and data attributes to manage slides and the active state, with responsive behavior.

Create a Bootstrap modal that appears over the page, with a header, body, and footer, featuring fade transitions and a close button to dismiss, including outside click dismissal.

Create a bootstrap tooltip that appears on hover over a link using data-toggle='tooltip' and a title attribute. Initialize it with a jQuery script before the closing body tag to enable all tooltips.

Explore Bootstrap popovers, adding a header and content beyond tooltips, and learn to set placement with data attributes plus initialize with jQuery.

Create a Bootstrap page layout with the scrollspy plugin, linking four sections (sign in, yellow, pink, magenta). Build a responsive navbar using data-spy and data-target with a collapsible menu.

Explore Bootstrap themes, focusing on the freelancer theme from Start Bootstrap. Learn to download and extract a fluid, responsive layout with collapsible navigation, portfolio modals, and a validated form.

Explore how a Bootstrap theme is built, from head inclusions and responsive navigation to a grid-based portfolio with image modals, illustrating easy customization and layout fundamentals.

Build a Bootstrap portfolio page featuring an about us section, a validated contact form, modals for portfolio items, and include jQuery, bootstrap.js, and theme scripts.