Create Stunning Websites & UX with HTML, CSS, JS & Bootstrap

Learn how CSS, the cascading style sheets language, styles HTML elements to create stunning web pages. Explore CSS syntax with selectors and declaration blocks and linking external CSS files.

Explore CSS selectors to target HTML elements, covering element, ID, class, universal, and grouping selectors, with practical examples and guidance on linking CSS files to HTML.

Connect CSS to HTML using external, internal, and inline methods, enabling you to style entire pages or single elements with the link tag, style tag, or inline style attributes.

Document CSS with comments inside a style tag using /* ... */; the browser ignores these notes. Practice multi-line and block comments to toggle styling.

Explore how to apply CSS colors to background, text, and borders using predefined color names and color models (rgb, hex, hsl) with alpha transparency.

Explore CSS background Part 01 to enhance websites with color, images, and positioning. Master background repeat, position, attachment, and shorthand properties for efficient styling.

Master CSS borders by exploring style, width, color, and border-radius, applying shorthand and side-specific properties to create diverse, multi-sided borders.

Explore css display properties to control layout by overriding default values, hiding elements with display none, and comparing inline versus block and visibility hidden behavior for space preservation.

Learn to use CSS fonts, including font family, style, weight, variant, size, and shorthand, with web safe fonts, fallbacks, and Google fonts to create readable text and strong brand identity.

Learn to add CSS icons from Font Awesome, Bootstrap icons, and Google icons to web pages. Use icon libraries, head links, and CSS customization to adjust size and color.

Learn to create and style CSS lists, including ordered and unordered lists, list style type, image markers, color styling, and the list shorthand property.

Explore how CSS text properties control color, alignment, direction, decoration, transformation, spacing, and shadows, with practical examples for headings, paragraphs, and links.

Explore the CSS box model and how margins, borders, padding, and content shape element layout, including height, width, margin collapse, and padding and margin shorthand.

Explore the CSS box model with padding, borders, margins, and content. Learn top/right/bottom/left padding, and use padding shorthand to control width and spacing.

Explore CSS layout positioning with static, relative, fixed, absolute, and sticky values, learn how each positions elements on the page and how to apply them in practical examples.

explore the css z-index property to control stack order and overlap of elements, including how negative and positive values affect layering, and how elements behave without z-index, with practical examples.

Explore the CSS layout overflow property, learn how visible, hidden, scroll, auto, and overflow x and overflow y control content in block elements with specified height.

Learn how the css float property positions elements and wraps text around images, using clear and clearfix to prevent overflow. Apply practical examples of float left, float right, and clearing.

Explore css display inline-block to set width and height, keep elements side-by-side without line breaks, and use inline-block for horizontal navigation links that wrap when crowded.

Explore building CSS navigation bars, including vertical and horizontal layouts with unordered lists and anchors; apply active states, fixed and sticky behavior, hover effects, borders, and alignment (center and right).

Create and style navigation bars with sticky, top fixed, and bottom fixed layouts, including active states, hover effects, and right-aligned links using HTML and CSS.

Learn CSS layout and alignment techniques, including center alignment with margin auto and text-align center, and left-right alignment using position, float, and flexbox.

Explore css dropdowns by building hover-activated dropdowns, dropdown menus, and right-aligned content with html and css, including practical coding examples in Visual Studio Code.

Learn to create rounded corners with CSS using the border-radius property, including single, multiple, and elliptical values.

Explore advanced css background techniques, including multiple background images, background size with contain and cover, a full-page background, and the origin and clip properties that control positioning and painting area.

Learn CSS website layout fundamentals, including header, navigation bar, content with equal or unequal columns, and a footer, plus responsive stacking via media queries.

Learn to style CSS forms, including inputs, selects, textareas, and buttons, with focus states, icons inside inputs, transitions, and responsive layouts.

Learn to style web elements with CSS pseudo classes, including anchor states (link, visited, hover, active), first-child, and language selectors, and explore hover-driven tooltips and HTML class interactions.

Explore how CSS pseudo elements style specific parts of elements, including the first line, first letter, before and after content, marker, and the selection pseudo element.

Master CSS buttons by styling colors, sizes, rounding, borders, hover and shadow effects, and handling disabled states, plus creating button groups, vertical layouts, borders, and simple HTML/CSS demos.

Explore CSS combinators, including descendant, child, adjacent sibling, and general sibling selectors, and learn how they target elements based on their relationships.

Explore CSS 2D transforms and the transform property to move, rotate, scale, and skew elements, and combine methods with the matrix for unified effects.

Explore CSS animations by defining keyframes and binding them to HTML elements, controlling delay, iteration count, direction, timing function, and fill mode to create dynamic transitions.

Learn to create a CSS image gallery and image sprites, implement navigation with sprite backgrounds and hover effects, and build a responsive gallery with media queries for different screen sizes.

Learn how to create and use CSS image sprites, build a navigation list from a sprite, and implement hover effects to animate the sprite in a practical HTML/CSS demo.

Learn to style CSS tables with borders, full width and collapse options, horizontal and vertical alignment, padding, dividers, zebra stripes, hover effects, and colored headers.

Learn to style CSS links across states (link, visited, hover, active) using color, background, font, and text decoration. Build link as button examples with state-based styles.

Master CSS 3D transforms by learning rotate X, rotate Y, and rotate Z using the transform property. Compare 2D and 3D effects with hands-on examples and a concluding quiz.

Learn how to create css gradients, including linear, radial, and conic gradients, using color stops, directions, angles, and transparency, with practical syntax and examples in code.

Explore CSS gradients in depth by building linear, radial, repeating, and conic gradients with HTML and CSS, including angles, color stops, transparency, shapes, and practical demos.

Explore CSS transitions to smoothly change property values on hover, control duration and timing functions (linear, ease, ease in, ease out, cubic bezier), apply delay, and combine transition with transform.

Learn CSS grids to design web pages by defining a grid container and items, setting columns, rows, gaps, lines, and container properties like justify content and align content.

Master JavaScript as the web’s scripting language, covering client-side and server-side use, its HTML integration via script tag, and core applications in interactive websites and back end development.

Learn JavaScript syntax, including literals, variables, operators, expressions, keywords, and identifiers, and practice running JavaScript in browser consoles and HTML integrations.

Learn JavaScript comments, including single-line and multi-line formats, and how to prevent execution during testing with practical Visual Studio Code, HTML, and JavaScript examples.

Explore JavaScript variables by learning how to declare with var, let, and const, assign values, master block scope and redeclaration rules, and understand naming rules.

Explore JavaScript data types, including primitive and non-primitive kinds, and learn how numbers, strings, booleans, undefined, null, arrays, and objects work, plus using the type of operator.

Learn to use JavaScript operators, including arithmetic, assignment, comparison, bitwise, logical, ternary, and special operators, with practical examples in code and the browser.

Learn how JavaScript conditional statements control program flow with if, else, else if, and switch, using time-based greetings and practical code examples.

Master JavaScript loops, including for, while, and do-while, plus for in, for of, and for each, and learn loop flow, syntax, and iterating over arrays and objects.

Explore JavaScript break and continue statements to control loops, showing how break exits a loop and continue skips an iteration in for loops and arrays.

Learn how JavaScript functions are defined, invoked, and return values, with syntax, parameters, and function types. Understand function scope and the global versus local context through examples.

Learn how to create and access JavaScript arrays, modify elements, and use array methods such as length, to string, pop, push, shift, unshift, delete, concat, flat, slice, and splice.

Learn how to sort and reverse JavaScript arrays, sort in random order, and find the highest and lowest values using Math.max and Math.min.

Explore JavaScript const arrays, where a const array cannot be reassigned, yet its elements can change, and learn const redeclaration rules and block scope.

Master JavaScript array iterations, including for each, map, flatMap, filter, reduce, every, some, indexOf, lastIndexOf, find, findIndex, from, keys, and includes, to transform and analyze arrays for web development.

Explore JavaScript strings, including quotes, length, and escape characters. See how strings become objects with the new keyword and how typeof reveals their types.

Explore JavaScript string methods, including length, slice, substring, substr, replace, replace all, to uppercase, to lowercase, concat, trim, pad start, pad end, and split.

Learn how JavaScript handles numbers, including decimals and scientific notation, how numbers are treated as a single type, numeric strings, NaN, and numbers as objects.

Explore JavaScript number methods, including toString, toExponential, toFixed, toPrecision, and valueOf. Learn how to convert numbers using Number, parseFloat, parseInt, and number object methods like isInteger and isSafeInteger.

Explore JavaScript number properties such as epsilon, max value, min value, max safe integer, min safe integer, positive infinity, negative infinity, and NaN, explained with code examples and outputs.

Explore JavaScript classes, including constructor initialization, creating objects with new, and defining class methods. Learn strict mode, inheritance with extends and super, getters and setters, and static methods.

Explore JavaScript errors and error handling with try catch finally statements, the throw statement, and the error object, including range, reference, syntax, type, and URI errors.

Explore how JavaScript objects organize data with properties and methods, create objects via object literals or the new keyword, and understand mutability.

Explore JavaScript object methods and the this keyword, learn to access and add methods, and use built-in string methods to convert text to uppercase.

Learn to work with JavaScript object properties, accessing values via dot and bracket notation, iterating with for-in loops, and adding or deleting properties, including nested objects and arrays.

Explore the JavaScript Math object, its static constants like pi and e, and methods such as round, floor, sin, cos, pow, sqrt, abs, min, max, random, and log.

Learn how to create and manipulate JavaScript date objects using new Date with different arguments, including current date, specific dates, and milliseconds. Explore date methods, string conversions, and UTC/ISO formats.

Learn how JavaScript handles date input and output, including ISO dates, year-month and year formats, and parsing dates with Date.parse, with time zones and UTC handling.

Learn how to create date objects with the new Date constructor, and extract year, month, date, weekday, hours, minutes, seconds, milliseconds, and epoch time using get methods.

Explore how to manipulate JavaScript dates using setter methods to adjust year, month, date, hours, minutes, seconds, and time. Learn zero-based month indexing and how to set milliseconds.

Explore how to locate and manipulate HTML elements with JavaScript using methods like getElementById, getElementsByTagName, getElementsByClassName, and querySelectorAll to build dynamic DOM interactions.

Discover how to use JavaScript DOM methods to access and modify HTML elements, including document.getElementById and innerHTML, to dynamically update web pages.

Learn how to validate forms with JavaScript, perform numeric input validation, enable automatic browser validation with required attributes, and understand client-side versus server-side validation and HTML5 constraint validation.

Explore the html dom and document object model, showing how the browser builds a dom tree from html to head and body, and how JavaScript manipulates elements, attributes, and events.

Explore how JavaScript events bring web pages to life by reacting to HTML elements via the DOM. Learn practical examples of onload, onclick, onchange, mouse events, and content manipulation.

Learn how to use the addEventListener method to attach multiple handlers to elements, pass parameters, and control bubbling or capture. Explore removing event listeners and handling window events like resize.

Discover bootstrap as a free front end framework for rapid web development, including HTML/CSS templates and components, responsive mobile-first design, and CDN or download options across bootstrap four and five.

Explains bootstrap containers, including fixed width container and container-fluid full-width. It covers container padding, borders, colors, and responsive breakpoints for small, md, lg, and xl.

Explore Bootstrap colors to enhance web design with text colors, contextual text classes, link colors, and background color utilities, including opacity options and accessible contrasts.

Learn how to use Bootstrap jumbotron to create a gray callout box, including full-width jumbotron options with container and container fluid for responsive layouts.

Explore Bootstrap four patterns for buttons, including primary, secondary, and outline styles, various sizes, block level buttons, active and disabled states, and spinner buttons.

Explore how to style images with Bootstrap 4, including rounded corners, circle images, and thumbnails, then control alignment, centering, and responsive behavior with image-fluid.

Explore Bootstrap navigation bars, mastering basic, vertical, centered, colored, and fixed variations, including collapsible, dropdown, form integrations, and brand elements for responsive web navigation.

Learn bootstrap inputs and form controls, including text, password, textarea, plain text, checkboxes, radios, and selects, with sizing, inline options, range and file inputs, and CDN-enabled examples.

Explore bootstrap four input groups to enhance inputs with icons, text, or buttons, including prepend and append helpers, sizing options, checkboxes, radios, dropdowns, and labeled inputs.

Explore bootstrap input groups to build versatile forms, including small and large inputs, addons, checkboxes, radios, dropdowns, and labeled controls.

Explore Bootstrap list groups and learn to create basic list groups, enable active states, link or disable items, flush borders, arrange horizontally, apply contextual classes, and add badges.

Explore Bootstrap button groups in Bootstrap four, including vertical, nested button groups with dropdowns, split button dropdowns, and side-by-side groupings, with large and small sizes.

Master Bootstrap four cards, including basic cards with headers and footers, contextual styles, tiles, text and links, and image placements, plus columns, deck, groups, and overlays.

Learn Bootstrap dropdowns with basic menus, dividers, headers, active and disabled items, right/left/up positions, text items, nested button groups, and split and vertical dropdowns.

Explore bootstrap collapse and accordion components to hide and reveal content, using collapsible elements, data-parent behavior, and the show class to control default visibility in a Bootstrap 4 workflow.

Explore Bootstrap for forms to learn defaults and layouts, build stacked and inline forms, use form row and grid layouts, and apply validation with visual feedback.

Explore bootstrap modals in Moodle, adding fading animations, and configuring small, large, extra-large, centered, and scrolling modals with headers, bodies, and footers.

Learn bootstrap four grid system core concepts: a 12-column flexbox grid, container and row structure, responsive col classes (col-, col-sm-, col-md-, col-lg-, col-xl-), equal/unequal columns, stacking, and auto layout columns.

Master Bootstrap progress bars with height, labels, and width to show user progress. Create colored, striped, animated, and stacked progress bars using contextual classes like primary, success, warning, and danger.

Explore Bootstrap flex utilities to build responsive layouts with flexbox, including horizontal and vertical directions, alignment, equal widths, growth, ordering, margins, wrapping, and responsive classes.