Programming Basics 101: Starting from Scratch.

Learn how css styles a web page by separating content and style, using selectors, cascade, and inheritance, and master the box model, syntax, pseudo classes and elements, and responsive design.

Explore CSS selectors by applying element, class, and id rules, then combine selectors within containers to style paragraphs and lists with colors and fonts.

Explore the box model by building containers with the div tag, applying background color, width, height, and auto height, and adjusting padding, margins, borders, and border radius to control layout.

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.

Discover how to manage colors in HTML with CSS. Explore RGB, hex, HSL, and CMYK formats, color palettes, and gradients for styling a sample article layout.

Explore css text manipulation by applying font family and font weight to headings and paragraphs. Load Google Fonts, and import local font files to style web text.

Explore sizing HTML elements using absolute units like pixels and relative units such as M and REM, and learn how root and parent font sizes affect layout.

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 CSS pseudo elements such as after, before, first letter, first line, selection, and placeholder, learning practical examples to style added content, text, and inputs.

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.

Create a website navigation bar with HTML and CSS, linking an external style.css and using flexbox for alignment. Implement site name, navigation links, hover effects, and transitions.

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.

Master responsive design by adapting layouts for mobile, tablet, and desktop using CSS margins, padding, media queries, and a stacking navigation bar.

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.

Explore variables and their types in JavaScript, including numeric, string, constant, boolean, arrays, and objects, with practical examples of declaration, initialization, and reassigning values.

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

Master JavaScript conditionals with if, else, and else if blocks through practical form validation and time-of-day examples, printing legal age and morning, afternoon, or night to the console.

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.

Explore strings in depth by declaring with double quotes, single quotes, and backticks, creating string objects, and using methods like length, charAt, substring, replace, split, trim, toUpperCase, and padStart.

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

Explore arrow functions as a concise, modern way to define simple JavaScript functions, compare them with regular functions, and explore anonymous functions assigned to variables for a simple sum.

Explore arrays in JavaScript by creating number and fruit arrays, learning length, index-based updates, and methods like push, pop, shift, unshift, slice, and concat.

Master loops in JavaScript by exploring the for, while, and do-while constructs, including syntax: initialization, condition, and increment, and practical examples with arrays, strings, and console logging.

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.

Create and manipulate objects in arrays and loops by building user objects with name, last name, email, and birthplace, initialize arrays, and iterate with for and for each loop.

Explore DOM manipulation with JavaScript by understanding the Document Object Model, and navigate the HTML document’s hierarchy—from HTML and head to title and body—to access and modify elements.

Learn to manipulate the DOM with JavaScript to change the page interface by selecting elements by id, class, tag name, or CSS selectors.

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 to use the document object in JavaScript to create and style elements, and access the document title, links, body, head, and url.

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.

Demonstrates handling mouse events in JavaScript, including click, mouseover, mouseout, mouse down, and mouse up. Fetch elements, register event listeners, and apply Verdana font, color, and alignment in a paragraph.

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.

Create a graphical user interface for a JavaScript CRUD app with HTML and CSS. Build a form and a table, and apply flexbox layouts and Roboto fonts.

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.

Explore jQuery, a JavaScript library that simplifies DOM manipulation, events, and animations, and learn why it's still used in teaching and older projects despite modern vanilla 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.

Learn to manipulate the dom with jQuery, comparing plain javascript approaches and the jQuery html method to inject and retrieve content, and apply css styles in this practice.

Learn how to handle events in jQuery by comparing pure JavaScript and jQuery syntax, and build a practical button that toggles a paragraph's visibility while updating the button text.

Learn how to create and control visual effects in jQuery by using show, hide, toggle, fade in, fade out, and slide up/down with event-driven button interactions.

Learn to install and use libraries like chosen and select2 to enhance selectors with a search bar, linking js and css files, and configuring options.

Learn to install and use the Select2 library with jQuery, via a CDN, and configure placeholders, data options, and events to retrieve selected values and distinguish between value and text.

Design a responsive dashboard sidebar with HTML and CSS guided by a mockup, featuring icons, a profile section with image, a logout option, and a collapsible toggle for interactivity.

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.

Explore bootstrap's documentation, from navigation bars and examples to components such as accordions, buttons, cards, pop up windows, dropdowns, and toasts, and learn how to customize themes and icons.

Install bootstrap via a content delivery network, include the stylesheet and script in your index.html, and verify changes by testing a simple h1 render.

Explore bootstrap typography by mastering default header styles and color utilities. Learn to adjust font size, weight, alignment, and text transformation with utility classes like fs-1 and text-uppercase.

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 flexbox utilities to arrange cards using a flex container, toggle direction with flex column or row, and justify content with start, end, center, between, around, and evenly.

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 forms from basic inputs and text areas to selects, checkboxes, radios, and switches, with practical guidance on form controls, labels, placeholders, and input groups.

Explore bootstrap form design by building structured layouts with rows, columns, and labels. Apply form-control, gutters, and placeholders to create responsive inputs and a button that fits its container.

Learn bootstrap form validation by applying html form validation pseudo-classes and bootstrap classes is-invalid and is-valid within a form, toggle browser validation, and implement custom validation messages.

Explore Bootstrap modals: how a trigger opens a modal with header, body, and footer, how the dark backdrop focuses content, and how to close it with buttons or backdrop click.

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.

Learn to build responsive Bootstrap navbars with brand, collapsible menus, togglers, and color themes, including proper container usage and logo integration.

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.

Learn how to handle dates in JavaScript with and without libraries. Compare native date object methods to Moment.js for formatting and parsing.

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.