HTML, CSS, & JavaScript - Certification Course for Beginners

Explore cascading style sheets (css) to replace table-based layouts with flexible, browser-friendly styling. Learn to define reusable style rules, link a single stylesheet to many pages, and boost efficiency.

Learn the three-part structure of CSS rules—selector, property, and value—and apply them in a style sheet to change page background, fonts, and header colors across selectors like body and h1–h3.

Explore the three types of CSS rules—internal, inline, and external. Learn how to convert an internal style sheet into an external stylesheet and link it in the head.

Learn how CSS uses RGB to display colors and apply color names, hex codes, and RGB values to h1, h2, and h3 elements.

Learn the class selector in CSS to apply styles from your style sheet, create blue bold text, and use span tags to add large green text and underline.

Learn how divs organize content with the div tag, offering flexible formatting and positioning beyond tables, then create an HTML page with a div and preview it in the browser.

Learn how css ids style a div with id selectors and a class for underlined text, using #div1 for 80% width, 3px border, yellow background, and blue text.

Learn how CSS margins create spacing around a div by adjusting top, right, bottom, and left margins, from 10px to 30px, including bottom and left examples.

Apply CSS padding to create space between the text and a div's perimeter, on all sides or on selected sides, illustrated with 10px, 20px, and 30px top and left examples.

Explore css text properties by applying classes to paragraphs, adjusting colors with web or rgb codes, letter spacing, word spacing, alignment, decorations, and text transforms.

Apply CSS font properties to style text with font family, font size, font style, and line height, using a class to switch font face and adjust paragraph spacing.

Learn how to add borders to elements using a custom class, specify thickness and sides, choose colors, apply dashed borders, and preview changes in the browser.

Create a div with an id and set up a style sheet to apply background-color and a background-image. Adjust background-repeat and background-position to control image tiling and centering.

Set image transparency with the CSS opacity property, starting at 40 percent. Create a hover effect that changes opacity from 40 percent to 100 percent.

Learn to place text over images with CSS by building a background div, a semi-transparent text box, and nested divs using id selectors and a text block.

Learn how to control an element's width and height with CSS, exploring min-width, max-width, width:auto, min-height, max-height, and viewport height (vh) to create responsive layouts.

Demonstrate how the CSS display property controls visibility and positioning by arranging divs in a line with inline-block and hiding elements with none.

Explore the CSS position property and the four types: static, relative, absolute, and fixed, and how static uses the normal flow as the default.

Learn to use relative positioning to offset elements with top and left properties, and see how a nested div shifts relative to its parent container.

Learn how CSS absolute positioning keeps an element fixed in its exact location, regardless of browser resize, and contrast it with relative positioning and nested div behavior.

Explore how CSS fixed positioning keeps elements stationary while the page scrolls, contrasting with absolute positioning that moves with content in a practical example.

Learn how the CSS float property wraps text around images by placing images on the left or right and adding margins, with a basic HTML page and a visual preview.

Explain how the CSS clear property controls post-float behavior, using a blue left-floating div, a red right-floating text wrap, and a clear rule to keep the yellow div from wrapping.

Explore how the z-index property controls stacking order between absolutely positioned divs, using blue and yellow examples to show how higher values place an element on top.

Learn how to style links with CSS, covering unvisited, visited, hover, and active states using the a property, color rules, text decoration, and background colors.

Explore how CSS tables enhance the look, styling, and responsiveness of HTML tables by applying borders, border-collapse, padding, and hover effects to table rows, headers, and cells.

Create a css project page with a four-link navigation, hover effects, and a default active link; implement a header with a black background, a responsive three-column layout, and a footer.

Create a page structure and a stylesheet to reset margins, set line height, style the header and footer, and build a fluid three-column layout with fixed side columns.

Create navigation styles for an unordered list by removing bullets, zeroing margins and padding, floating items left, and styling links as blocks with hover effects and a blue active first link.

Design a responsive CSS layout for mobile by using a max width of 840 pixels to drop the right column under the left and center columns, with 600-pixel stacking.

Build a container page with header navigation list and content wrapper of left, center, and right columns, using inner text divs for padding and styling, finishing with a footer.

Explore the document object model, a browser-built tree of elements and attributes, and learn how JavaScript can dynamically update DOM elements by tag name, id, or class on events.

Learn basic document object model manipulation with JavaScript by changing element text through an on-click event, using a simple change text function to demonstrate the document object model.

Learn how JavaScript enables client-side interactivity in browsers, with examples like character counting, form validation, required fields, and a tic tac toe game, its limitations, and differences from Java.

Explore JavaScript placement in the head tag and how to call functions from the body, including an age-to-dog-years calculator activated by a button click.

Learn how to use external JavaScript files by placing scripts in separate documents, calling them with a script tag's source attribute, and enjoying easier maintenance and faster page loads.

Explore JavaScript output methods by using document.write to display a calculation result in the page content. Compare this with window.alert, which shows the value in a pop-up message box.

Master using JavaScript innerHTML and getElementById to display calculation results, such as 6 plus 3, in an element with the id math, and update values to change the output.

Learn how to use single-line and multi-line comments in JavaScript to explain code, control execution, and support collaboration on complex scripts.

Explore JavaScript constants as fixed values and perform 5 plus 6, displaying the result in a web page. Learn that constants can be numbers or strings and affect output.

Learn how JavaScript variables work as named containers that store numbers or strings, using identifiers like x, y, and z, and how to output results to a web page.

Learn how the equals sign functions as an assignment operator in JavaScript, assigning values across numbers and strings, with a practical example showing 30 appended to a text string.

Explore JavaScript arithmetic operations using constants and variables, perform addition, subtraction, and multiplication, and display results in the web page using getElementById and DOM updates.

Explore JavaScript arithmetic operators, including division, increments with ++, and decrements with --, by declaring variables, computing results, and displaying outputs in the browser.

Master operator precedence by understanding the order of operations—brackets, exponents, division, multiplication, addition, and subtraction—with a practical example like (50 + 200) times 3 equals 750.

Discover how JavaScript variables hold data types like numbers, strings, arrays, and objects. Explore properties and structures with examples: age, last name, cars, and the person object.

Explore JavaScript objects by modeling a car with properties like type, model, and color; access values using dot notation and display them in the browser via getElementById.

Learn to output properties of a JavaScript object by building a person with first name and eye color, concatenating values to form sentences like 'John has blue eyes'.

Learn how JavaScript strings store text and how to use single and double quotes, display each value on its own line, and handle quotes inside strings.

Determine the length of a string using the built-in length property and display it by setting innerHTML to text.length, where text holds 26 letters of the alphabet and outputs 26.

Discover how to display quotes inside strings in JavaScript by using the backslash escape character, illustrated with the word player's in browser output.

Learn how to generate a random number in JavaScript using Math.random, which outputs a value between 0 and 1, with live browser previews and refreshing shows new numbers.

Explore how Math.min and Math.max find the lowest and highest values in a list of numbers, illustrate with a script, and verify results in a web browser.

Explore how to round decimal numbers in JavaScript using Math.round, Math.floor, and Math.ceil, with practical examples that convert 15.4 to 15 and 15.6 to 16.

Learn how JavaScript arrays store six values in a single variable using a fruits array, access items by zero-based indices, and use the length property.

Output each item in a JavaScript array and customize separation with the join method, using an asterisk as the delimiter and previewing changes in the browser.

Manipulate arrays using pop, shift, push, and unshift to remove the last or first element and to add new elements at the end or beginning.

Learn to modify and delete array elements by index, replacing the first item with kiwi and removing pear to create an empty slot after updating and refreshing in the browser.

Use the splice method to insert multiple items into an array at index 2 without removing existing elements, demonstrated by adding lemon and banana after orange.

Sort an array named cars with four elements: Volvo, Acura, Honda, Lexus, using JavaScript's sort method to arrange them alphabetically from A to Z, then reverse with the reverse method.

Join two arrays with the concat method to merge girls and boys into a combined array, then output the results in a browser preview.

Learn how to implement JavaScript conditional statements—if, else if, and else—to convert a numeric score into a letter grade, handle out-of-range errors, and display results.

Explore JavaScript comparison operators by testing a variable against values with the equal to and not equal operators, observing true or false results in the browser.

Discover how the boolean function tests truth in JavaScript, where real values like numbers and strings are true, and 0 is false. See test across seven variables and browser output.

Learn how a for loop initializes a counter, repeats code, and outputs values 0 to 10 on separate lines, with start and max values adjustable.

Learn how the JavaScript for-in loop traverses an object's properties, such as first name, last name, and age in a Person object, and outputs each item in the browser.

Explain how a while loop runs code while a condition is true, using a script that outputs i from 0, incrementing by 1 up to 19 before stopping at 20.

Master the do while loop, which executes the code block once before checking the condition and then repeats while the condition stays true, as shown by a button-triggered counter example.

Explore how JavaScript break and continue statements control loops, exiting when i reaches 3 and skipping the 3rd iteration, while a for loop runs from 0 to 9.

Define and call JavaScript functions with parameters A and B, using a return statement to output A multiplied by B, with arguments 8 and 2 producing 16.

Explore JavaScript events in HTML, including click, mouseover, mouseout, keydown, and document load, and see how a button displays the current date and time on interactions.

Build a simple JavaScript project that changes the page background color on refresh. Choose a color array of eight hex values and apply a random color via document.body.style.

Build a JavaScript and CSS photo gallery with top thumbnails that swap the main preview image on hover, plus hover borders, colors, and responsive styling in an HTML page.

Create a centered page with a header and a default preview image, then implement a five-image thumbnail gallery that updates the preview on hover.