Complete HTML, CSS, JavaScript & jQuery Course for Beginners

Explore HTML5 as the standard for web content, highlighting semantic elements like header, footer, and section, plus canvas, drag-and-drop, audio and video embedding, form 2.0, websockets, and server-sent events.

Explore the HTML5 documentation by reviewing the modern document skeleton, including doctype, charset with UTF-8, and semantic elements like header, nav, section, article, aside, figure, and footer.

Learn to build your first HTML5 program with header, navigation, section, aside, figure, and footer, import images from an images folder, and use hashref navigation.

Explore the HTML5 date format by creating a simple date input in an HTML form and learn how the get method passes dates in the URL, unlike the post method.

Explore HTML5 time input usage by building a form that selects hours and minutes with 0 to 12 and am/pm, and submits via get method.

Learn how to create a web form with input fields for date and time, mark inputs as required, and test submitting in Chrome to capture local date and time.

Explore HTML5 date and time formats within a simple form, focusing on input fields and typed or submitted date and time values.

Explore HTML5 form controls by switching input types to month, using months instead of days and time, and testing submissions in Chrome to master web development basics.

Learn how to use the HTML5 input type=week to select and submit the week of the year, with examples of week 47 and week 52.

Learn to use HTML5 range inputs to set numbers from minimum zero to maximum 1000 and test the results in Chrome or Firefox.

Create a form that accepts only email addresses using an HTML input type email and client-side validation, and compare basic validation approaches with JavaScript and PHP.

Explore how html forms enforce url values using the input type url, based on the universal resource locator concept. Build and test a demo form that accepts only valid urls.

Explore how the html5 output element represents script results and links to other elements using default attributes, and build a simple form that updates the output on button click.

Learn how to add the placeholder attribute to input fields, using example prompts for email and name to guide user input in forms.

Master the autofocus attribute in HTML5 to automatically focus input fields, explore its behavior with email inputs and required attributes through a practical form demo.

Learn how to implement password input in HTML5 by hiding the password during entry and using a post method instead of get to prevent exposure in the URL.

Learn to collect multiple user inputs in a single HTML form by creating fields for name, username, password, email, and address, using correct input types and required validation.

Learn to validate user inputs with the required attribute, practice client-side validation on username, password, email, and address, and review server-side scripting options.

Learn the essentials of scalable vector graphics (SVG): its XML-based language for 2D graphics, embedding methods, browser support, and creating simple SVG elements with CSS and transforms.

Draw a simple rectangle in SVG by defining its width, height, fill color, and id, then position it on the SVG canvas and test in Chrome.

Explore inline SVG by drawing a line with x and y coordinates, x0/x1 and y0/y1, and styling with stroke and stroke-width while testing in your browser.

Learn to draw an ellipse in SVG and differentiate it from a circle by adjusting x and y axis radii, with color and positioning in HTML5.

Explore SVG polygons and how polygons are drawn with points in SVG, building graphics in HTML5 and practicing by editing polygon points and attributes.

Learn to draw a simple SVG star by defining polygon points in HTML5, reusing previous tutorials, and previewing results in Chrome.

Learn the fundamentals of css, from basic to advanced concepts, and discover how cascading style sheets control the style of a web document for beginners.

Learn CSS syntax by identifying the selector, property, and value, and see how an HTML tag is styled with color and border through simple examples.

Explore the CSS type selector, learn how to target specific HTML tags like h1, p, and div, and distinguish it from the universal selector for efficient styling.

Explore the universal selector in CSS, see how it matches every element, and contrast it with the type selector to learn when to apply global styles.

Explore how to use the class selector in css by targeting elements with a specific class, using dot notation and class attributes to style divs, paragraphs, and headings.

Explore the CSS id selector by targeting the element with an id attribute using the hash, and apply a green color to all elements sharing that id, like id 'Steve'.

Explore the difference between the child selector and the descendant selector; see how body, div, and p interact and how color changes demonstrate the selectors.

The lecture demonstrates using the attribute selector to style inputs by their type. It shows how text inputs can be targeted while submits remain unaffected, with practical demonstrations.

Learn how to define multiple CSS properties in a single style block, separated by semicolons, and apply font weight, text transform, font size, and margins for richer page styling.

Group multiple CSS selectors with commas to apply the same styles across elements, and practice setting font-weight and text-transform for several selectors at once.

Embed css into html by using a style block to style body, h1, and p with green background, yellow heading, and red paragraph, via Notepad++.

Learn inline css by applying styles directly in html to color the background green, h1 yellow, and paragraph red, and compare it to an external stylesheet.

Create an external stylesheet to separate CSS from HTML, naming it with your name and a .css extension, and link it. Use the media attribute to target devices.

Learn how to comment in CSS with single-line and multi-line styles to guide future maintenance, then test in the browser and include meaningful comments in your commits.

discover how to use CSS color formats, including hex codes, rgb values (absolute and percent), and keywords, to design vibrant, accessible website colors.

Learn to set background colors for headings and paragraphs using inline styles in CSS, understand the difference between background-color and text color, and preview results in Chrome.

Set a background image in CSS using background-image with a url pointing to an image in your project's images folder, and apply it to the body.

Learn how to control background image repetition in css by using repeat, no-repeat, repeat-x, and repeat-y, and test in Chrome and Firefox.

Learn how to control a background image's repetition in css by applying repeat, no-repeat, and axis-specific settings for x and y directions to fine-tune layout.

Explore font family in CSS by applying and testing serif fonts like Georgia and Times New Roman, using inline CSS, and understanding how to change and preview fonts.

Explore CSS font-style and font-family concepts by applying normal, italic, and oblique styles, previewing changes in Chrome, and learning how to load and test fonts in a practical CSS tutorial.

Apply CSS3 border-radius to create rounded corners, adjust backgrounds and borders, and refine colors for polished web designs.

Apply image borders using the border-image technique to style elements with image backgrounds, configure border slices, repeat behavior, and responsive, non-repeating borders across multiple images.

Learn to apply css3 multiple backgrounds to a single page, combining two or three images with the background property, using background-position and background-repeat to control placement.

Explore rgb colors and their rgba and hsla variants, learn how alpha opacity ranges from 0.0 to 1.0, and apply hue, saturation, and lightness to color design in CSS.

Explore linear gradients and tune background properties to create gradients, experiment with green, yellow, purple, pink, and gray palettes, and preview gradients in your browser.

Explore left-to-right linear gradients in CSS, learning how to adjust gradient properties and color combos such as green, yellow, red, pink, purple, and gray to style elements.

Explore creating a diagonal CSS gradient from top left to bottom right using yellow and green, and adjust gradient stops to preview results in Chrome.

Experiment with Monte Carlo gradients to blend multiple colors—yellow, pink, orange, green, purple, red—to create vibrant multicolor gradients in CSS.

Learn how to convert linear gradients to radial gradients in CSS, using percentage color stops and updated code across elements to create radial effects.

Explore repeating radial gradients in CSS, adjust the background using radial gradients, and experiment with colors to create dynamic gradient effects.

Learn to apply CSS shadows to text and headings using the text-shadow property, adjusting pixel offsets and colors to create varied, visually appealing effects.

Discover how to add a box shadow behind a div, set width, height, padding, and background colors, like green and yellow, to create depth.

Learn how to use css text overflow and text-overflow to signal hidden content, control wrapping and break, and reveal navigation cues like ellipsis without JavaScript.

learn to apply 2d transform in css by rotating boxes and divs to specific degrees (90, 125, 45), using rotate with cross-browser notes for chrome, safari, and internet explorer.

Experiment with negative 2D transforms in CSS3 by applying negative degree values, compare with positive degrees, and explore angles such as 45 degrees to see the effects.

Learn how to apply 2d transforms and skew on the x-axis, visualize skew effects on a box, and relate rotation and axis references in this beginner tutorial.

Learn how to apply a 2d skew on the y-axis using transforms, adjust angles from 25 to 80 degrees, and observe how x and y axes shape the result.

Explore css matrix transform; adjust matrix values to skew and transform elements, copy presets to avoid errors, and test the standard syntax across Safari, Internet Explorer, and Firefox for compatibility.

Explore CSS matrix transform on a mattress by tweaking directional values such as 150 and 0.5 to see how the transformation changes.

Explore 3D x-axis transform by extending 2D transforms, rotate around the x axis, and understand browser syntax for 3D effects while recognizing x, y, z directions.

Explore the 3d y-axis transform by rotating along the y direction and comparing it to the x axis to see how the 3d transform changes.

discover how to apply a 3d z-axis transform, adjust the z direction, and see how the x, y, and z directions interact to shape 3d elements in html css javascript.

Explore css3 animations, including keyframes and the sliding effect, set animation durations to 2.5 seconds, and trigger the animation via JavaScript on a button click for cross-browser WebKit compatibility.

Learn to add a delay to animations, watch a gesture move from the left to 50%, and tweak font size, weight, and height during the motion.

Learn how to build multi-column layouts with CSS column-count to break long text into readable chunks, adjust column lines, and test across browsers like Chrome and WebKit.

Build and explore a user interface where visitors type in a text box, adjust borders and sizes with CSS pixels, and preview in Chrome.

Learn box sizing and how to size boxes using CSS with class selectors instead of IDs, set heights to 700px and 400px, and add a 3px solid green bottom border.

Explore css3 outline offset and outline concepts by applying borders, adjusting offset, and styling with red, green, and yellow while setting width and height.

Write and run your first JavaScript code using script tags and the text/javascript type, then print hello world to the screen in a browser as a simple interactive example.

Learn how JavaScript handles semicolons, case sensitivity, and comments, with examples showing when semicolons are required and how to write single-line and HTML comments.

Discover how to enable JavaScript across Internet Explorer, Firefox, and Chrome. Follow browser-specific steps for security and scripting settings.

Explain how to handle non-JavaScript browsers using the no-script tag, display a clear message when JavaScript is disabled, and test by enabling or disabling JavaScript in browsers.

Learn how to place JavaScript code in the head, body, or external files, with a practical example that uses onClick to display a welcome greeting.

Demonstrates where to place JavaScript in a web page, explains head versus body placement, and shows how a script runs on page load to generate content in the body.

Learn how to place JavaScript in the head and body sections and use onClick attributes to trigger actions, keeping scripts outside the content.

Learn how to place JavaScript in an external file and include it in HTML to reuse code across pages, using the script tag with a src attribute.

JavaScript uses variables as name containers to store data, and you declare them with the var keyword. Variables are dynamically typed and can have global or local scope.

Explore JavaScript arithmetic operators, including plus, minus, multiply, divide, increment, and decrement, with beginner-friendly examples using variables and document.write to show results.

Master JavaScript comparison operators such as equal to, not equal, greater than, less than, and their greater or equal and less or equal variants, producing boolean results from operands.

Explore logical operators in JavaScript, including and, or, and not, and learn how non-zero operands yield true while conditions evaluate accordingly.

Explore conditional statements in JavaScript, focusing on if statements and if-else and else-if constructs that let code decide actions based on conditions, with age-based examples.

Explore how to use if, else if, and else statements to evaluate conditions and display messages based on whether a number is below, equal to, or above 50.

Master switch statements in JavaScript by evaluating a single variable against multiple cases, using break and default to replace long if else chains with clear, efficient control flow.

Explore while loops in JavaScript to repeat actions, such as printing hello twenty times with a counter, increment, and a break for new lines, guided by the lecture.

Learn how to use a for-in loop to print all properties of the navigator object in JavaScript, demonstrating iterating over object properties and printing them.

Learn how break exits a loop and how continue skips to the next iteration in JavaScript, with while-loop examples showing precise control of iteration flow.

Learn to write modular JavaScript with your own functions, reuse them across programs, and call them from HTML events like onClick.

Learn how JavaScript functions accept multiple parameters and use them inside to produce dynamic outputs, including passing and concatenating a name and age.

Explore JavaScript function parameters, including optional return statements, and learn to concatenate first name and surname with a function that returns the full name.

Explore how JavaScript uses DOM events to interact with HTML, including page load, clicks, key presses, and window resize, and how onClick triggers actions.

Learn how the onsubmit event validates form data before posting to the server, contrasts it with onclick, and implements a validate function that submits only when true.

Master onmouseover and onmouseout events to create image and text hover effects, learning how mouseover triggers and mouseout reverses actions for interactive web pages.

Explore client-side page redirection and automatic page refresh using JavaScript to guide users to new URLs and reload the page after a given time period.

Explore how to perform page redirection with a redirect function, using window.location and setTimeout to navigate to a new page after a short delay.

Explore the three essential JavaScript dialog boxes: alert, confirm, and prompt, and learn how they warn users, request confirmation, or collect input on web pages.

Explore how a confirmation box prompts user consent with two options, okay and cancel, and how a confirm function returns true or false to drive decisions.

Explore how the prompt dialog box uses the prompts function to display a text input with okay and cancel buttons, capture the user's name, and return the entered value.

Learn to print a web page with JavaScript using window.print(), triggered by a button, including a practical example and how to print from a connected printer.

Explore how JavaScript objects enable encapsulation, aggregation, inheritance, and polymorphism, and create objects with constructors and properties like shoe and shoemaker Adidas.

Explore user defined object types and functions, learn how to create objects, pass parameters, and use a user defined function to set shoe types in this procedural guide.

define an object and attach a function as a method, illustrating how a separate function can operate as a method within the object and update properties to verify behavior.

Discover jQuery, a lightweight javascript toolkit that simplifies web development by enabling dom manipulation, event handling, animation, and ajax through fewer lines of code, with cross-browser support.

Download and install the jQuery library from jquery.com/download, choose uncompressed for development or compressed for production, include the map file, and test in a local HTML file.

Discover how to load the jQuery library from the Google CDN or a local copy on a machine, and verify the setup with a hello world example.

Learn how to call a jQuery library function by wiring a click event on a paragraph to open a dialog box, using the locally installed jQuery library.

Create custom scripts with external scripts in jQuery by adding a jquery.js file, referencing it with a script source, keeping files in the same folder, and testing in Chrome.

Explore how to resolve conflicts between jQuery and JavaScript by using the noConflict method, reclaiming the dollar symbol, and safely separating jQuery code from other libraries.

Learn the basic JavaScript syntax and core data types—strings, numbers, booleans—and how variables, functions, and scope work, with jQuery as a framework built on JavaScript.

Master css selectors and the document object model with jQuery, using tag name, id, and class selectors to efficiently target elements.

Learn to use tag selectors in jQuery to target all paragraphs inside a div. Iterate with a for loop and update each paragraph's html content.

Learn to use the element name selector in jQuery to target tag names like div and p, and color the first, second, and third divs green using the ready function.

Learn how to use the jQuery element id selector to target a single element by id, such as my id, and manipulate it with CSS and JavaScript.

Master the element class selector using the dot syntax and the dollar sign to target a specific class, applying consistent style changes across elements.

Learn how the universal selector in jQuery chooses all elements in the document, with hands-on examples showing how this broad selection affects styling and behavior.

Learn how to use multiple element selectors in css by combining class and id targets to select several elements, and see live examples of applying these selectors in a browser.

Explore jQuery attributes and dom element properties, learning how id, source, class, and title map to element attributes and how jQuery enables accessing and changing them.

Learn to retrieve attribute values with jQuery by selecting an element and extracting its title attribute, then display it in another div.

Learn to set attribute values with jQuery by changing an image's src attribute to swap logos, using selectors and the attr method for dynamic updates.

Learn how to style web pages with jQuery by selecting elements, changing text color to yellow, and setting background to green using simple selectors.