HTML, CSS, Bootstrap and Javascript - Beginner to Master

Discover the element system by arranging containers with image and text elements, explore left/right layouts, header, and button elements, and learn how parent and child elements move together.

Learn the fundamentals of HTML by writing and saving simple pages, using opening and closing tags, and structuring with head and body, h1–h6 and p tags.

Learn to use headings (h1–h6), paragraphs, the air tag, and br for spacing. Explore ol and ul lists with li items and examples like burger, paratha, rice, biryani.

Explore how to format text with HTML tags, such as bold, italics, mark, delete, insert, and subscript or superscript, while learning proper tag nesting and structure.

Explore CSS basics by applying color and background color via the style attribute, and distinguish inline versus block elements using h2, p, and span.

Explore anchor and image tags, set font size and font family, apply inline CSS, and manage links and local images with proper src, href, and height attributes.

Build an HTML table with rows and cells and borders; compare inline CSS and head style blocks, and learn to use classes for consistent styling and reduced repetition.

Explore the div element as a block container, using height, padding, and margins, then create side-by-side layouts with floats and percentage widths; learn responsive image sizing and bootstrap's role.

Build HTML forms with text, number, date inputs, labels, text areas, and selects; style inputs and labels with CSS, handle floats using clear, and set the page title and favicon.

Learn to manage site styles with external CSS: create a shared style.css, link it across pages, use classes to avoid repetition, and organize CSS in a style folder.

Design and recreate a website in HTML and CSS from a provided design, using divs, spans, a logo, and a navbar to practice a practical first project.

Learn step-by-step how to structure a landing page with divs, hero and consulting sections, add color and imagery, implement a reusable green button, and create a two-column layout.

Design a what we do section with six 33% width divs and inner white panels, using float left to form a three-column grid with margins.

Explore how floating divs affect background color inheritance and how clearing floats stabilizes layouts. Learn to build 3-in-1 and 2-in-1 row card grids with icons, images, and learn more links.

Master float handling with clear fixes, implement white and half-width divs, design a six-item grid using a two-cell table with an icon, apply vertical-align top, strong and italic text.

Create an about us section with left 40% and right 60% floated divs, including an image and read more button; add a recent projects grid with three images per row.

Learn to apply a background image to a div, arrange four inner divs with flex and wrap, and create white and black boxes with rounded corners and opacity.

Create a responsive consulting success section using a flex container of four cards, with four box parent and consulting flex parent classes, optimizing width, padding, and alignment.

Build a leadership and people section with flex, eight team cards at 25% width, circular portraits, centered names and roles, and social icons linked for each member.

Learn to build a responsive layout with flexbox, arranging three divs in a row, and create a latest post section with image cards and a mailto link card.

Learn to build a two-tone contact info card with 50/50 color blocks using HTML and CSS, then create a responsive two-panel contact form and map via flex and an iframe.

Explore how Bootstrap speeds web development by using prebuilt classes, while reviewing css selectors, combinators, and how to link stylesheets, including Bootstrap’s cloud-hosted css.

Explore bootstrap grid concepts by learning how rows and columns divide the page into 12 units, with responsive behavior across small, medium, and large screens, using container and alignment classes.

Explore bootstrap typography with display classes, implement responsive images using img-fluid, and build feature-rich tables with bootstrap table styles for modern, accessible layouts.

Explore bootstrap forms by building responsive layouts with container, row, and column classes; implement email, password, select, range, input groups, floating labels, and centered forms for responsive UIs.

Explore Bootstrap components like accordion, alert, badge, pill, and breadcrumb, and learn to structure pages with container, row, and responsive columns while integrating forms inside components.

Explore bootstrap buttons and cards, including primary, secondary, outline, and link buttons, block and group variations, plus image-backed cards with badges and responsive grids.

Learn to implement a Bootstrap carousel by preparing identical-size images, configuring slides and indicators, and switching between slide and fade effects for responsive layouts.

Explore how to implement a Bootstrap navbar with a logo, links, and dropdowns, adapt it for mobile with responsive behavior, and choose between fixed and sticky top positions.

Explore bootstrap utilities to customize background colors, text colors, borders, opacities, and responsive visibility. Learn to apply margins, paddings, borders, and display classes to control layout across sizes.

Explore the basics of JavaScript by creating variables, strings and numbers, using functions and onclick events, and outputting results with alert and console.log, all within a Bootstrap-enabled HTML page.

Explore JavaScript arrays: declare arrays, access elements by index (first element is at index zero), use length, and apply push, pop, shift, unshift, indexOf, sort, and reverse to manage data.

Create and manipulate objects as key-value pairs, using dot and bracket notation to read and modify properties; add or remove fields, and combine objects with arrays and nested data.

Learn how to implement JavaScript conditional statements using if, else if, and else, compare values, and apply conditions to arrays with length and indexOf checks.

Discover the loop concept in JavaScript, using for and while loops to iterate arrays and objects, manage increment steps, and break to avoid infinite loops.

Master creating and using JavaScript functions that take arguments and return values, including calling functions, passing parameters, and returning sums, with examples like even/odd checks.

Explore manipulating the DOM with JavaScript using document.getElementById and innerHTML to update text and respond to on click actions in a Bootstrap layout.

Learn to use get elements by class name to loop through Bootstrap cards, and change background color and border color with a color input for dynamic styling.

Select elements by tag name and by name, then iterate over matches to apply font size and color. Also learn to add new cards with insertAdjacentHTML, preserving existing content.

Learn how to add and remove classes with JavaScript to dynamically change an element’s background, using BG primary, BG secondary, and BG success classes.

Master event handling in HTML and JavaScript, using on click, document.getElementById, addEventListener, and window load to trigger functions like increase and respond to mouse and keyboard events.

Create a table generator page with HTML, Bootstrap and JavaScript that builds a multiplication table from a user-entered number using a generate button and centered layout.

Build a bootstrap five table generator that inputs a number, generates one row per click, and updates the output with dynamic badges using dom methods.

Build an interactive animal gallery with Bootstrap and JavaScript, rendering animal buttons that swap images in a container.

Create a word counter page that counts words and characters from a text area and displays live word count and character count using a Bootstrap 5 layout.

Edit a downloaded HTML template to build your portfolio, replacing logos, icons, and text with Bootstrap styling. Host on Cloudflare Pages and deploy updates to share a live portfolio.

Design a web-based calculator UI using HTML and Bootstrap, center the calculator with a screen and square number and operator buttons, and prep for JavaScript functionality in the next video.

Build a functional calculator with JavaScript by wiring onclick events to buttons, updating the display with innerHTML, handling AC and equals with eval, and converting x to *.

Build a two-player tic tac toe game with HTML, CSS and JavaScript, designing a 3x3 grid, handling clicks, alternating X and O, detecting wins and draws, and resetting.