Total Frontend Website Creation HTML CSS JavaScript jQuery

Learn to build an HTML5 page with the doctype, meta tags, and skeleton, then use tags, self-closing tags, paragraphs, headings, lists, tables, hyperlinks, forms, divs, and CSS plus JavaScript.

Explore HTML5—the fifth and current HTML standard—its semantic tags and how browsers render markup, while learning how HTML5 works with CSS to build websites from scratch.

Explore HTML and CSS editors and tools, from Notepad and TextWrangler to browser validators, and learn how Google Chrome renders front-end code by creating your first HTML file.

Create a basic HTML template with HTML tags, wrapping head and body for meta information and visible content. Save as index.html and open in a browser to render the content.

Learn to declare the doctype and language, specify UTF-8 in meta tags, set the title, and link or embed CSS in the head to structure and style an HTML page.

explore the basics of HTML paragraphs and whitespace, distinguishing tags from elements, identifying opening and closing vs self-closing tags, and understanding default paragraph styling and whitespace behavior in HTML.

Learn to add meaning to text tags by using semantic elements like strong and em, and insert line breaks with the br tag for clearer content.

Discover how to use HTML headings from h1 to h6 to structure pages, with a single h1, using h2 and deeper levels to organize content.

Organize content with unordered and ordered lists, using list items nested in ul and ol tags, and customize numbering with numbers, letters, uppercase, roman numerals, and start positions for readability.

Learn to embed images with the img tag, set the src, and provide alt text for accessibility; use lorem pixel for placeholders and review attributes like id and title.

Learn to build and style HTML tables using table, tr, td, and th, apply borders and CSS for styling, and use colspan and rowspan to span cells.

Learn how hyperlinks use anchor tags and href to link pages. Discover local versus external paths and how target opens links in new tabs.

Build HTML forms using input types like text, email, password, number, color, and date; add radio buttons, dropdowns, and labels, name fields, and submit buttons.

Explore how HTML forms handle inputs, textareas, dropdowns, checkboxes, and file uploads, with emphasis on name and value attributes, and GET vs POST submission and browser differences.

Explore how divs and spans define and segment content, enable styling, and improve layout with borders and margins; use IDs or classes to mark header, side menu, and footer.

Discover how to use semantic HTML5 elements such as header, footer, section, article, nav, and aside to structure web pages, boosting readability and enabling easier CSS styling.

Explore how to add CSS to web pages and apply backgrounds, colors, and typography. Learn selectors, the box model, and core properties, including margins, padding, borders, fonts, display, and animations.

Learn how css visually presents documents and lets you apply your creative styling to web pages using selectors, properties, and values.

Learn how to apply styling with inline styles, on-page style tags, and external style sheets. Explore how parent elements influence descendants, and master order of CSS precedence and linking stylesheets.

Explore css selectors, including tag, class, and id, and apply targeted styles to spans and other elements via a linked style sheet.

Explore CSS color formats including hex, rgb(a), and named colors, and learn how to apply background-color with solid and translucent values while considering browser support and accessibility.

Explore how to apply a background image with CSS, controlling repeat, size, and position. Learn the shorthand background property to condense multiple background settings into one rule.

Learn the CSS box model, including content, padding, border, and margin, and how to inspect and adjust them with Chrome dev tools.

Apply CSS shorthand to margins, padding, borders and border-radius, and fonts using one to four values in a clockwise pattern to simplify styling.

Explore CSS font shorthand to combine font weight, style, size, line height, and family (for example Arial) and apply bold or italic variants.

Explore the css display property and common values like none, block, inline, and inline-block, and see how they shape navigation and list items.

Explore how css positioning uses static, relative, absolute, and fixed layouts to place elements with top, left, right, and bottom, and control stacking with z-index.

Learn pseudo classes in CSS, including hover, and apply state-based styles to headers, spans, and list items with first, last, odd, even, and child selectors.

Explore how CSS3 pseudo elements extend styling to parts of elements, using before and after, with content, color, and background changes, plus first-letter and first-line concepts.

Explore CSS selectors by using tag, class, and id identifiers, attribute selectors, and combinators to target descendants, children, adjacent and general siblings, and apply styling such as background color.

Apply a single CSS rule to multiple elements with comma separated selectors, adding yellow background, padding, and fonts from Google fonts.

Explore google fonts to expand font families and options, import rock salt handwriting style into your stylesheet, and apply it across your web pages to refresh typography.

Master CSS overflow by confining content to fixed height and width, applying border radius, shadows, gradients. Explore options (scroll, hidden, auto) and axis control (x or y) with online tools.

Explore CSS generators for border radius, colors, box shadows, and gradients, learn to generate and copy CSS code, and understand browser compatibility and transforms for dynamic styling.

Use media queries to make web pages responsive at breakpoints like max-width 600, overwrite styles at the bottom of the stylesheet, and apply animations for cool effects.

Explore css animations and keyframes, including how animation duration, animation name, and margin-left drive visual effects, practice with resources, and see color changes from red to blue.

Explore how JavaScript runs in the browser as an interpreted language, linking external files, and using variables, data types, arrays, objects, functions, and the DOM for dynamic pages.

Explore essential javascript tools, including brackets and online editors, plus browser dev tools console and sources panel for live coding, debugging, and file linking.

Learn to use Chrome DevTools as an in-browser editor, attach your project folder, save changes, and manipulate the document object model with JavaScript to render web pages.

Learn how to add JavaScript to your website with inline attributes, script tags, and external files. Implement on click event listeners, use DOM, and debug with console to show alerts.

Explore how JavaScript uses semicolons and whitespace, create prompts and alerts, manage variables, and enable two-way communication for a customized interactive user experience.

Explore JavaScript variables, including strings, numbers, and booleans, and learn how to declare, comment, and debug with console log and dev tools.

Explore creating arrays in JavaScript by storing strings, numbers, and booleans, accessing elements via 0-based indices, and viewing results with console.log, while following variable naming rules.

Explore JavaScript arrays by using push to add items, shift to remove from the front, and length-based last-item handling. Learn indexOf and looping to log values.

Explore JavaScript array functions like splice, sort, reverse, join, concat, and slice to manipulate and display arrays, build dynamic values, and convert arrays to strings.

Learn how to create and manipulate JavaScript objects, compare them with arrays, and access values to store car data: year, model, make, and cost, using literals, bracket notation, and constructors.

Discover how to define and call JavaScript functions, pass arguments, return values, and use console log. Understand global and local scope and avoid naming conflicts.

Discover how the browser constructs the document object model as a tree of elements on page load, enabling JavaScript access, property updates, and event-driven interactivity.

Learn to access and modify web page elements using the dom by selecting with getElementById and getElementsByClassName, and update innerHTML or innerText.

Explore how to manipulate the DOM with JavaScript to update element styling, colors, backgrounds, and image sources through event listeners and getElementById.

Explore how JavaScript handles DOM event listeners, wiring a button by id, updating content and background color, and comparing on click with addEventListener, plus a glimpse of creating elements.

Explore JavaScript element selection using querySelector and querySelectorAll to target elements by class, then loop through them to apply styles and add click event listeners.

learn to create new elements with JavaScript using createElement and createTextNode, place them in a chosen output with getElementById and appendChild, and output text inside an h1.

Select and enumerate a wrapper's child nodes with getElementById. Compare childNodes and children to list elements like buttons and images and access their inner HTML.

Use assignment operators to update variables like A and B, display results with dynamic output via innerHTML and getElementById, and connect clickable buttons to increment or decrement A.

Explore how JavaScript logical operators and the ternary conditional operator produce boolean results, demonstrate and/or logic, not operations, and how these form concise conditional statements.

Explore conditional statements using if, else if, and else to act on input values, update output, and handle red, blue, and default cases with strict equality.

Master JavaScript looping by using while and for loops to increment values, set conditions, and output dynamic results to the page, while understanding when each loop best fits a task.

Master the JavaScript math object to generate random values with Math.random, scale with multiplication, and apply Math.floor, Math.ceil, and Math.round for precise ranges; learn input value handling and string-to-number conversion.

Learn how to convert a string to an integer in JavaScript using parseInt, and compare numbers reliably by aligning types with numeric values rather than strings.

Learn how to work with the JavaScript Date object, display system time, and extract hours, day, and date using methods like getHours, getDay, and getDate.

Explore how JavaScript objects store paired values, create a basic object with first name and company, and access or display object data, including looping through items.

Explore advanced JavaScript objects and arrays of objects, access specific items by index, loop through all students, and retrieve data from JSON files via Ajax to use in code.

Identify and validate a JSON object representing an array of items, access each object in code, and set up Ajax calls to fetch and process them.

Learn how to create an XMLHttpRequest AJAX call, open a GET request, handle onreadystatechange, monitor readyState, and access the responseText to load data from a URL.

Parse external data into a usable JavaScript object with AJAX, pull from a server or database, and dynamically render it in HTML for front-end use.

Replace the traditional for loop with a for in loop to cleanly iterate over objects in JavaScript and output data, then fetch posts via AJAX from a json placeholder API.

Use ajax to send data to a server via get or post, pass parameters like name, set the content type, and receive a dynamic JSON response.

Learn to send data via ajax to the server by building a json object, posting it, and processing the response to update the page content.

Explore how jQuery simplifies JavaScript by providing built-in selectors and easy dom interactions, enabling quick, readable code. Learn to select elements, traverse the dom, handle events, and animate with effects.

Learn what jQuery is—a popular JavaScript library—and how to integrate it into web pages, including event listeners, AJAX calls, and using a CDN or local downloads.

Explore how jQuery enables JavaScript DOM manipulation by waiting for the document to be ready and selecting elements by ID or class to update inner HTML.

Use jQuery to update webpage content by manipulating html, text, and input values, and pull values into a variable to display in the output area.

Learn to select and loop through multiple items with jQuery's each, identify and differentiate elements by class, access index and inner content, and update or log content for list items.

Master jQuery updates to the output div using prepend, append, before, and after to place content around existing content, and learn how empty and remove differ.

Explore how jQuery event listeners trigger user interactions with click events, selectors, and both long-form and shorthand approaches, including passing event data and updating the output.

Learn how to filter a jQuery selection by index using eq(), targeting a specific list item with zero-based indexing to apply click behavior.

Learn how to use jQuery to attach click handlers to hyperlinks, identify elements by id, and prevent the default navigation so the page stays on screen.

Explore jQuery mouse events such as mouseover, mouseleave, and mousemove, update text on hover, and manage form events like keydown and focus to create interactive interfaces.

Explore jQuery traversing techniques to select elements by ancestors, descendants, and siblings, and practice using parents, children, and each to manipulate content across a page.

Master jQuery traversing by targeting a parent and its children, using descendants, ascendants, siblings, and next to update specific divs and their inner html.

Learn to select and traverse a parent and its children, use first and last child and index-based selection for the second item, and apply filters to update specific paragraphs.

Explains how to use jQuery to select elements, traverse the dom, and update css properties such as color and background color, with interactive paragraph clicks and multi-property styling.

Learn to create two CSS classes and apply them with jQuery, using hasClass to toggle my class A and my class B on click for simple styling.

Learn how to toggle classes with jQuery using the toggleClass method, handling click events to add or remove class B on paragraphs, starting from class A.

Learn to use jQuery to read and update image attributes, display the source in an output div, and refresh placeholders from lorem pixel on click.

Learn to use jQuery simple effects and callbacks by selecting elements, hiding and showing an image with configurable durations, toggling states, and executing a callback after animations.

Learn to apply jQuery effects like fade and slide with configurable durations, toggle visibility, and manage states with callbacks and display settings for smooth UI interactions.

This lecture demonstrates animating elements with jQuery's animate function by setting an element to position absolute, adjusting left and top, specifying duration, and using callbacks for chained effects.

Learn to dynamically load content into web pages with jQuery ajax, using a simple page and a server file to fetch output without page refresh, including preventing default link behavior.

Learn to use ajax get in jQuery to send data to the server, receive a response, and output returned data on the page as a full data round trip.

Master using jQuery Ajax post to securely send data, compare get and post, and handle responses with status and callbacks. Explore how Ajax can control content and read response data.