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.

Explore a basic DOM manipulation example with JavaScript, changing text content through a changeText function triggered by an on click event on a h1 element, demonstrating the Document Object Model.

Discover how JavaScript enables client-side interactivity in the browser, from form validation and character counting to simple games, while understanding its limitations and object-oriented variables.

Explore how to place JavaScript in the head and call it from the body, using a dog years calculator that multiplies age by 7 on a button click.

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

Explore JavaScript output methods, including document.write for displaying results on the page and window.alert for pop-up messages, illustrated with a 5 plus 6 example that updates.

Use JavaScript innerHTML and getElementById to display calculation results inside an HTML element, demonstrated with a simple 6 plus 3 calculation and live updates.

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.

Discover how JavaScript constants fix values, like 5 and 6, and output the result; see how constants can be numbers or strings.

Explore how JavaScript variables act as named containers that store numbers or strings, follow identifier rules, and illustrate z = x + y using x and y.

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 operations with constants and variables. See examples of adding, subtracting, and multiplying values such as 100 + 50 and 20 + 30, and display results with getElementById.

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.

Explore JavaScript objects by modeling a car with properties like type, model, and color. Output values using dot notation and the DOM to display results in the browser.

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.

Generate random numbers with JavaScript using Math.random(), which outputs values between 0 and 1, and display them on the page using getElementById.

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.

Explore using JavaScript arrays to store multiple values in one variable, access items by zero-based indexes, and determine the array length with the length property.

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.

Explore JavaScript arrays by using pop, shift, push, and unshift to remove last or first elements and add new items at the end or beginning.

Change the fruits array by index to update values, such as replacing the first element with Kiwi, or deleting pear by its index; preview in a browser to see change.

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.

Sort a JavaScript array alphabetically with sort, using a sample cars array; then reverse order with reverse and verify in the browser.

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.

Apply JavaScript conditional statements like if, else if, and else to map a numeric score to a letter grade, with boundary checks (0–100) and error messages for scores above 100.

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.

Explore how break and continue statements control loops in JavaScript by exiting when i equals 3 and skipping the value 3 in a 0 to 9 for loop.

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.

Write a javascript project that randomizes the web page background color on each refresh by selecting a hex color from an eight-item array and applying it via document body style.

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 basic page structure by setting the HTML5 doctype and mobile-first meta viewport, then create fixed or fluid containers to control content width and responsiveness.

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.

Convert a two-column layout into a responsive three-column Bootstrap grid, set 4-4-4 widths, and observe stacking on viewports below 992 pixels.

Master bootstrap typography basics, including headings h1–h6, secondary text, mark highlighting, and a dotted underline with tooltip. Learn block quotes, code and keyboard tags, and contextual text and background classes.

Style Bootstrap tables with the table class, define thead and tbody, and use th for headers; add borders, hover effects, condensed spacing, and contextual classes like success, danger, and info.

Bootstrap styles images by applying classes to create rounded corners, circular shapes, and thumbnails, and makes images responsive with the image responsive class.

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 to create bootstrap alerts, including success, info, warning, and danger messages, by applying alert classes and making them dismissible with data-dismiss and a fade effect.

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 to create Bootstrap button groups by wrapping buttons in a div with the button group class, sizing with large or extra small, and switching between horizontal and vertical layouts.

Create full-width, responsive Bootstrap button groups with button group and button group justified classes. Compare using link elements versus button elements and note how they adapt to browser size.

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.

Explore Bootstrap badges and labels to emphasize elements, applying badges to links and buttons, and using label classes like primary, warning, danger, and info on headings.

Create bootstrap progress bars using HTML divs with classes progress and progress-bar, set default 50 percent, adjust 0–100 percent, add labels, and apply stripes or contextual styles.

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 a bootstrap dropdown menu with a toggle button, dropdown items, dividers, headers, and disabled options, and switch the orientation to drop up.

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.

Create a collapsible list group in Bootstrap by clicking a heading to reveal an unordered list with three items using the list group item class.

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.

Explore how to build dynamic bootstrap tabs and pills that update content on click, using nav tabs or pills, data-toggle attributes, and tab content panes.

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.

Teach how to convert a navigation bar into a responsive bootstrap collapsible menu for small screens, using a toggle button, data-target, and a collapsible div to show or hide links.

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 the bootstrap project file overview, showing css, font awesome and fonts, images, js, less, and mail folders, plus the index file that organizes themes, fonts, and scripts.

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.