Programming Basics 101: Starting from Scratch.

Explore element positioning by applying the CSS display property to three square containers, resetting margins, and switching between block, inline-block, and inline to demonstrate how layout changes.

Explore how to use the position property with fixed, relative, and absolute values to build a sticky navigation bar, center elements, and place a circle inside a square.

Learn to speed up web development with the Live Server extension in Visual Studio Code, enabling real-time auto-refresh of HTML changes on port 5500.

Explore pseudo-classes and pseudo-elements, including hover, active, focus, first-child, last-child, nth-child, and not, using buttons, links, and lists to demonstrate interactive styling.

Explore how to implement transitions and animations in CSS, using a box to demonstrate hover effects, background color changes, transforms, and keyframe animations for motion in a square path.

Explore flexbox fundamentals to arrange and space elements in an HTML container, using display:flex, flex-direction, wrap, gap, and justify-content for responsive layouts.

Learn how responsive design adapts web layouts to different screen sizes using media queries, flexbox, and practical steps to structure header, main content, and footer.

Build a first section with a centered two-text layout inside a main tag, applying a background image with a dark gradient overlay and a 100% height container.

Continue building the second section of the web page, adding eight icon cards with concise titles and descriptions, and styling with flexbox, spacing, centered text, and icon circles.

Build a footer with HTML and CSS, including a logo, a brief description, and a sitemap with links to home, shop, contact, and about to finish the first project.

Explore JavaScript fundamentals with a practical, advanced approach, focusing on data types and the language's broad applications beyond web development, with optional prerequisites and hands-on practice.

Master JavaScript data types: numbers, strings, booleans, arrays, and objects; learn parse int conversion, string concatenation, and using constants.

Learn how to implement JavaScript switch statements to map a day variable (1–7) to weekdays, compare with if-else chains, and use case and default with break.

Learn the differences between var and let in JavaScript, including global and block scope, with practical examples of x and y and how scope affects accessibility.

Learn how to declare and invoke functions to encapsulate and reuse code, pass parameters, and return values for flexible, reusable logic across a project.

Practice while and do while loops, initializing and updating control variables, iterating arrays, and using remainder to check even numbers, while prompting user input until an even number is found.

Learn how to modify a web page with JavaScript by creating elements, adding them to a container, and manipulating text with textContent and innerHTML, then removing nodes.

Explore how JavaScript responds to user actions through mouse, keyboard, and form events. Identify common events such as click, mouseover, mouseout, mousedown, mouseup, key down, key up, and submit.

Master keyboard events in web development, including keydown, keyup, and keypress, and implement practical examples using HTML and JS to detect keys and key combinations.

Explore form events including summit, change, and input with a practical login form. Create elements, attach event listeners, prevent default, validate credentials, and handle role selection.

Style the GUI with a blue borderless button, centered and rounded with white text; add a padded cart and full-width form; format a bordered table with uppercase headers.

Validate form inputs across fields such as name, full name, email, and birth date by capturing values on submit, preventing default submission, and displaying error messages above the button.

Register a new client, store the form data as an object in an array, and render the data in a table with an init table function that clears prior rows.

Add a delete button beside each record to remove it from the user array with splice and refresh the table in programming basics 101, using HTML, CSS, and JavaScript.

Install the jQuery library in your project by adding the script, organize files in assets/js and assets/css, and verify with a simple background color change.

Design a travel landing page with a full-width video header, a responsive navigation bar, and alternating content using flexbox, custom fonts Montserrat and Rosario, and a four-video JavaScript slider.

Bootstrap, a CSS framework, provides prewritten classes to design web interfaces. Learn how its grid system and reuse of components speed development while ensuring compatibility and design consistency.

Learn how the Bootstrap grid system uses containers, rows, and columns with flexbox to create a fully responsive 12-column layout that auto-wraps into new rows.

Build a responsive book catalog with bootstrap's grid, container, row, and four columns per row, load remote covers, adjust image size, and place text beside images for dynamic content.

Explore Bootstrap tables by initializing with the table class, structuring with thead, tbody, and tfoot, and using table-responsive for horizontal scrolling and color variants, stripes, hover, and borders.

Explore bootstrap cards as flexible content containers with headers, bodies, and footers, and learn to set widths, include images, apply margins, and arrange cards in rows and columns.

Explore Bootstrap carousels as a CSS, 3D transforms, and JavaScript slideshow that cycles images, text, or custom markup, with manual initialization, controls, indicators, captions, and fade options, plus accessibility considerations.

Master bootstrap grid and responsive design by managing columns across screen sizes with row and col classes and size prefixes like xz and md.

Create a responsive blog template using bootstrap, wiring up a navigation bar, brand logo, Montserrat font, and a multi-item carousel with styled cards.

Learn to build a blog page with bootstrap-style grid, two-column post layout, responsive adjustments, typography and spacing, plus widgets like search and recent posts.

Learn to build image carousels with Swiper js, install via a content delivery network, and configure navigation, pagination, and effects such as fade, cube, and coverflow.

Explore Light Gallery, a JavaScript image slideshow library, including installation and css and js setup, and initialization in app.js with plugins for zoom and thumbnails in a bootstrap layout.

Explore Cliff, an auto formatting library that formats inputs like credit card numbers, phone numbers by country, and dates, with validation and CDN installation.