HTML CSS JavaScript for Beginners Modern Web Design Course

Learn to write HTML using editors such as Brackets and CodePen, render your HTML in the browser, and practice common tags, nesting, and copying the source code.

Explore how html tags create structure for content using opening and closing tags and paragraph tags, and see how browsers render a plain page into a structured, backward-compatible web page.

Explore what an element is in html, including start and end tags, content, and attributes, using the sandwich analogy and hands-on exercises to build paragraphs and bold text.

Learn the basic HTML page structure, including the opening and closing html tags, the root element, head and body sections, meta data, and the title tag.

Learn how HTML metadata and meta tags shape pages by using charset UTF-8, viewport settings, and meta descriptions, links to stylesheets, and social media metadata for search indexing.

Declare the HTML doctype at the top of your page to signal an HTML5 document to the browser, and use a simple, case-insensitive declaration that affects rendering but isn’t visible.

Learn to create a basic index.html from scratch by defining the doctype, html, head, and body, adding a title, and viewing the page in a browser with live preview.

Explore how HTML elements form with start and end tags, content, and attributes, and learn how nesting elements inside body structures headings, paragraphs, and styling options for modern web design.

Explore how HTML heading tags h1 through h6 structure content, emphasize text, and create new lines, with six sizing options for web pages in modern design.

Explore self-closing tags such as line breaks and horizontal rules for formatting within a web page, and compare paragraphs with line breaks to manage spacing and margins.

Practice rendering html content by transforming a set of paragraphs and line breaks to match the source code, using an editor, live preview, and comparing paragraphs versus line breaks.

Learn to use HTML comments to annotate code and explain decisions for web developers, noting they are not rendered.

discover how the pre tag preserves whitespace and line breaks, rendering content exactly as written, and use preformatted text for blocks needing precise spacing while avoiding nesting paragraphs inside pre.

Explore HTML entities and character references to render special characters in HTML code, including ampersands, less-than, and greater-than symbols, with practical examples of paragraphs and spacing.

Explore HTML text formatting with bold and strong tags, italic styling, and semantic tags like mark, small, del, ins, subscript, and superscript, and learn how these options shape web typography.

Explore practical HTML text formatting by applying blockquote, underline, strike, small, acronym, quote, and code styling, and compare their semantic meanings for clearer web content.

Practice text formatting in HTML by structuring text with paragraphs and line breaks, and apply bold and emphasis using semantic tags like strong and em, exploring additional formatting options.

Discover how divs and spans organize content, with divs as block level and spans as inline elements, enabling targeted styling with classes and styles.

Explore semantic elements such as header, nav, section, article, aside, and footer to give meaning to HTML and replace divs. See how these tags organize content for clearer source code.

Transform a basic page into a semantic HTML5 layout using doctype, html, head, and body. Build header, navigation, sections, and a footer, and convert paragraphs with strong and em emphasis.

Use placeholder content to preview layouts and create realistic mockups in HTML pages, generating lorem ipsum text with adjustable paragraphs, headers, bold text, links, and lists.

Explore how to use the anchor tag to create hyperlinks, bookmarks, and internal and external links with targets, including mailto and tel, and understand absolute versus relative paths.

Create and navigate a web page using hyperlinks, internal anchors with IDs, and external links opened in new tabs, while building a navigation section and multiple sections.

Learn how to add images to web pages using the img tag, specify src paths (local, absolute, relative), adjust size with width and height, and use alt text for accessibility.

Create two images: one relative and one absolute path, with the relative image width set to 200 px. Then link the absolute-path image to placeholder.com using a target attribute.

Explore how to use HTML lists to organize content with unordered lists, ordered lists, and description lists, including nesting, terms and descriptions, and list style options.

Transform the navigation area into an unordered list by wrapping hyperlinks in list items, using the start file, and reinforcing how lists structure typical website navigation.

rebuild the first website using basic html structure, practicing headings, paragraphs, unordered lists with hyperlinks, and anchor tags to recreate the original page.

Explore how to build deeply nested lists in HTML by placing unordered lists inside list items, understanding doctype, head, body, headings, and paragraphs, with hands-on practice.

Build and structure HTML tables using table, tr, td, and th, with thead, tbody, and tfoot, and apply colspan and rowspan for flexible layouts with CSS styling.

Discover how to style HTML tables with a style tag for consistent design, compare inline attributes versus style sheets, and explore table-specific options and background styling.

Explore HTML forms by creating inputs with text and password types, using name and id for data submission, adding labels and required attributes, and leveraging browser validation without JavaScript.

Build a from-scratch contact form with name, email, and message inputs, semantic labels, and a textarea, using HTML5 validation to require entries.

Learn to use HTML form options with action and method, compare get and post submissions, and apply placeholder text and values in inputs and textareas.

Build a contact form from scratch, including placeholders, labeled inputs for name and email, a message textarea, and a submit button, with server-side submission via post.

Explore HTML5 input types to build versatile forms, including color, date, email, file, number, URL, radio, checkbox, and range, with attributes like placeholder, min, max, and pattern, plus cross-browser considerations.

Build and customize HTML5 forms using inputs, textarea, labels, placeholders, radio buttons, checkboxes, and a select dropdown; create a registration form with name, password, gender options, and terms and conditions.

Learn to build HTML forms using fieldset and legend, apply required validations, and use input types like text, email, and date, with a hands-on form-from-scratch exercise.

Practice building HTML forms from scratch, using radio groups, a number age input with min and max, text and email inputs, a datalist dropdown, and a textarea with validation.

Learn to embed content using iframes, loading a local or external page with id, title, width, height, and a source, while noting that some sites block framing and file protocols.

Build a mini website from scratch with HTML and CSS, creating three pages (home, about, contact) and a navigation menu, plus a form, images, placeholders, and a table.

Learn the basics of Cascading Style Sheets (CSS) by styling HTML elements, adjusting color and size, and using selectors with units.

Explore how css describes presentation and layout for html, separating content from style, and enables colors, fonts, responsive design, animations, and cross-browser compatibility through selectors and properties.

Explore the basics of CSS, applying styles to HTML elements with inline styles, the style attribute, and the style tag, using color and simple h1 selectors.

Apply inline styles with the style attribute to set colors and font sizes on paragraphs and divs, including nested elements. Understand how precedence and order affect styling.

Style with the style tag instead of inline attributes to apply consistent changes across paragraphs and divs. Select elements, adjust color and font size, and learn nesting for flexible styling.

Learn to use an external cssa file to style a web page, linking it with a href and link tag for updates across pages.

Learn to select and style HTML elements with CSS using classes and IDs, apply color and font size, and navigate cascade and overwriting rules for reusable styling.

Explore CSS color options, from named keywords to hex values and RGB/RGBA with alpha transparency, learn how to apply color to text and backgrounds, and preview color palettes.

Explore how to use the CSS background property to set colors and images, control repetition and positioning, and apply fixed or scrolling backgrounds, with shorthand options for efficiency.

Learn how the CSS display property controls layout by switching div and span between block and inline, applying inline-block and display none, and managing visibility in navigation menus.

Discover CSS list item styling to control display for navigation menus, apply square, inside, url graphics, or none, and experiment with lower and upper alpha on unordered lists.

Link the exercise1.css file and apply CSS to a site by styling the body, sections, and footer with colors, and convert list items to inline blocks with white text.

Explore CSS measures and properties, including px, em, rem, and percentage units. See how scalable units relate to page size and the root element to build responsive layouts.

Learn to select elements using divs and spans, chaining class and tag selectors to target ingredients. Highlight with red text and yellow background, demonstrating precise element targeting.

Explore CSS text properties to control color, text align, decoration, transform, indent, spacing, and shadows. Use style tags and classes like text left, text center, text right, lorem ipsum.

Explore how CSS font-family controls how text looks, apply fonts, adjust size and weight, and preview default browser fonts, cursive, and fantasy options, with Google fonts coming next.

Explore Google fonts and learn to add font families to web projects with link or import, then apply font family, weight, style, size (em units), and color.

Create exercise2.css to style the starter HTML, matching the example with yellow highlights, large bold italic fantasy text, centered headings, inline navigation, red list items, and gray footers.

Learn to use CSS floats to position images, including placeholder images, make them responsive with max-width, and align images inline with text, with selective right alignment via classes.

Float div elements to align content left or right and clear floats within a container. Use borders, fixed width and height, and clear techniques to keep layout neat.

Explore the CSS box model, including content, padding, border, and margin, learn to use shorthand and set width and height, and inspect rendering in the browser.

Transform your HTML into a website by applying CSS in exercise 3, using purple theme, dotted borders, a padded nav bar, min-height sections, white logo and text, and right-aligned images.

Create and link a new style sheet, import a Google font, and apply a purplish background. Style the logo, headings, sections, navigation, images, and footer using the box model.

Explore the CSS outline property, how it differs from borders, and how outline color and style sit outside the border. Learn to manage margins to avoid overlap.

Explore CSS positioning options: static, relative, absolute, fixed, and sticky, and learn how top, left, bottom, and right offsets place elements in normal flow or relative to the non-static ancestor.

Transform nine images into a three-per-row image grid by setting each image to 30 percent width, using float left, and adjusting margins to create even spacing.

Master CSS pseudo-classes for hyperlinks by styling visited, unvisited, hover, and active states. See practical examples applying these states to anchors and other elements to create interactive navigation.

Explore css pseudo classes to refine selection, using first and last child within a container, and nth-child for odd and even patterns with hover effects.

Style HTML tables with CSS by applying borders, background colors, alignment, and padding to th and td, and use nth-child to create alternating row colors.

Learn to control content with css overflow and max width/height for text areas, and apply overflow options like auto, scroll, hidden, and visible on x and y axes.

Explore CSS element alignments and positioning, including margins, auto centering, text-align, borders, and widths. Practice centering and positioning with floats, absolute positioning, and percentage layouts in a practice template.

Style a website from start to finish by applying CSS basics to a starter file, including body color, font, wrapper width, and a responsive navigation bar with hover effects.

Learn to build a modern webpage layout with a full-width top content area, inline-block elements, a banner with overlay text, and a two-column section using floats.

Wrap up the site by setting images inside section article to 50 percent width. Align the footer divs at 33 percent with inline-block and top alignment, using floats and clear.

Learn how to write and render JavaScript in your browser using Chrome dev tools, the console, and the brackets io editor, with an introductory alert example.

Explore how javascript adds interactivity to html documents through alerts, event listeners, and script tags, including inline, head, and body placements and linking to external js files.

Learn how to interact with and update web page content using javascript, the document object model, and querySelector to dynamically change inner html.

Explore JavaScript syntax basics, including console.log, comments, whitespace handling, code indentation, blocks, and reserved keywords, and learn how to debug and structure code effectively.

Learn how to declare variables with var in JavaScript, explore numbers and strings, assign and update values, and output results in the browser console.

Learn how to declare, name, and reassign variables in JavaScript, using meaningful camelCase names. Explore data types like string, number, and boolean, and use typeof to inspect them.

Declare a variable named message in JavaScript and assign it 'Hello world' to display via innerHTML in the h1 element. Debug message errors and explore operators to customize your output.

Explore how variables are declared and updated with assignment and arithmetic operators in JavaScript, including plus, minus, multiplication, division, increment, modulus, comparison operators, booleans, and console output.

Discover how JavaScript functions encapsulate reusable code blocks, return and run them, take arguments, and respond to clicks, while updating the page with console logs and DOM output.

Wire three buttons, initialize three variables to zero, and increment and display their values through linked functions and a message function.

Explore how functions manage arguments and return values, distinguish local and global scope, and use return to compute and output results like a calculator.

Explore how JavaScript objects group properties, access values with dot or bracket notation, and define methods using the this keyword, then update and use dynamic object content.

Create and manipulate a JavaScript object by defining a car with properties, updating values, retrieving data, and displaying results via concatenation and the console.

Learn how JavaScript arrays hold multiple values in a single variable, using square brackets and zero-based indexing to retrieve and update items by index.

Learn how to manipulate arrays in JavaScript using push, pop, shift, and unshift; find indices with indexOf; sort, reverse; and extract items with splice.

Explore how JavaScript comparisons produce booleans and drive conditional logic with if statements, else if, and else. Practice using logical operators not, and, or to control console output.

Learn how to combine functions with conditional logic in JavaScript. Pass numeric values, update the h2 element dynamically, and log outcomes to the console.

Use the JavaScript switch statement to replace else-if chains by matching an expression to cases and a default. Build cases, break, and output a message for numeric and string values.

Explore JavaScript loops, including for, while, and do-while, and learn to iterate over arrays and objects, log values to the console, and control loop flow with conditions and increments.

Explore JavaScript string methods by creating a string, measuring length, and locating content with indexOf, lastIndexOf, and search; develop a function to check existence and report its position.

Explore var, let, and konst scoping in ES6, comparing block and function scope, showing how let/konst limit access and encourage using them instead of var.

Explore the document object model (dom) and browser apis. Create and append elements, use querySelector and getElementById to read input values, and dynamically update an h2 with user input.

Learn to attach click event listeners in JavaScript by selecting elements by id with querySelector, using addEventListener, and separating JavaScript from HTML for reusable, clickable divs.

Build a mini JavaScript app to check if a user-input number is odd or even using modulus, with a button trigger updating a div output.

Explore how the browser builds the document object model into a tree, and learn to access, inspect, and manipulate elements using JavaScript to create interactive web pages.

Explore the document object model, created by the browser from your loaded page, as a JavaScript object you can interact with using console logs, developer tools, and DOM manipulation.

Master DOM manipulation by selecting elements with querySelector and querySelectorAll, logging changes in the console, and updating content and styles to build dynamic web pages.

Explore how the browser builds the document object model and select elements using document methods such as getElementById, getElementsByTagName, getElementsByClassName, and querySelector, including node lists and first-match behavior.

Learn to select DOM elements with query selector and update their text content. Compare inner text, inner HTML, and outer HTML to see how updates affect the page.

Learn to manipulate DOM classes with JavaScript by setting className and using classList to add, remove, and toggle classes, triggering red and blue style changes.

Select elements by class name, grab the first item from the node list, and apply inline styles using element.style to update color, font size, borders, and display.

Learn to grab and update element attributes in JavaScript, such as image sources and hyperlink hrefs, using getAttribute and setAttribute to swap images and change links.

Learn to make a website come to life with click events and event listeners by selecting elements with querySelector, attaching a click handler, and updating styles like background color.

Learn to select multiple list items with querySelectorAll, loop through them, and attach click listeners that toggle a red class using this and classList.

Select the correct input with querySelector, attach a keypress listener, and trigger actions such as adding items, logging event data, and highlighting on enter, with character length checks.

Explore JavaScript mouse events by attaching listeners to list items, toggling a red class on hover with mouseover and removing it on mouseout to recreate interactive hover effects.

Create your own dom elements with JavaScript by wiring a click handler to build and append new list items using createElement, text nodes, and appendChild.

Learn to attach click event listeners to existing and dynamically created list items, apply styling changes like red text, line-through, and background, toggle states, and delete elements with new items.

Learn to build and manage dynamic lists by adding and removing elements with event listeners, DOM traversal, and real-time updates using span elements and parent removal.

Transform your dorm project user interface by removing the click button and enabling adding items with the enter key, using input value, keypress listener, and dynamic list updates.

Learn how to attach hidden values to dynamically created list items using plain JavaScript objects, then retrieve and log those values to enhance interactive web elements.

Learn to draw a line on an HTML5 canvas by selecting the canvas, obtaining its context, beginning a path, moving to start, drawing to center, and stroke the line.

Adjust the line width and set the starting coordinates to center the line, experimenting with values like -7 and -28 to get the desired position.

Learn to draw a circle on a canvas with a black border and red fill, explore adjusting stroke order and line width to customize the circle’s look.

Draw a dashed line on the canvas by setting stroke style and line width, applying a dash pattern with setLineDash, and adjusting the offset.

Explore clearing the canvas with clear rectangle, center a 100 by 100 rectangle, and animate its movement across frames using a loop and an event listener.

Animate a blue rectangle moving across a 400-pixel canvas using a 2d context and requestAnimationFrame, stopping at the edge. Use the reset button to reset to x=0 and restart animation.

Learn to draw a semicircle on a canvas with JavaScript by starting a path and drawing an arc using x, y, radius, start angle, and end angle, then stroke.

Create multiple circles across a canvas using a JavaScript loop. Begin each path, draw an arc with radius 40, and stroke to render five circles spaced by 50 pixels.

Learn to make a canvas respond to user input by tracking mouse movement, logging coordinates, and drawing lines as the cursor moves across the canvas.

Animate a blue square moving across a canvas using request animation frame. Adjust speed and size, initialize x at zero with a DOMContentLoaded setup, and loop the animation.

Learn json basics and javascript objects, including name-value pairs, data types, and object structures. Explore api, ajax, fetch, and local storage to retrieve and display json on web pages.

Learn json, javascript object notation, for transferring data on the web using curly braces, key-value pairs, and arrays; include the .json extension and validate with json lint.

Learn how JSON functions as a data format in JavaScript, structuring data with arrays and objects. See how Ajax exchanges JSON between browser and server and how YAML differs.

Learn to build a json object in JavaScript, using strings, numbers, nested objects, and arrays such as an address and a phone numbers list, then test with a json editor.

Learn to create and access JSON-like objects with dot and bracket notation, explore nested details, and output object properties to the console while handling arrays of car objects.

Create a simple data object and use the DOM to output its first name, last name, and other details into HTML elements via innerHTML.

Learn to build and access arrays of objects in JavaScript, using cars and people to create nested JSON-like structures with color, model, and looping.

Learn to build an array of objects representing people with first name, last name, and age, access items by index, and output the data into HTML using JavaScript.

Build a more complex object with an array of people and places, loop through the data using for loops and other iterations, and render the results into HTML.

Build a complex data object with people and places in JavaScript, loop through the people array with a for loop, and output each person’s first and last name into HTML.

Learn how to add content to a JavaScript object by pushing new entries into a people array, using a template object to maintain structure.

Explore JavaScript JSON methods to stringify objects into strings and parse them back, enabling storage as a single string for cookies or sessions and back to objects.

Learn to store objects in local storage by stringifying them, saving with setItem, and retrieving with getItem, then parsing back into an object.

Create a simple object, convert it to a string with JSON.stringify, and store it in local storage. Retrieve and parse the string with JSON.parse, then render the object in HTML.

Master javascript fetch to connect to an api, retrieve json data as an object, and handle the promise based response within your code.

Practice fetching data from the random user api with fetch, display the first name and last name in the page output, and log the raw data to the console.

catch and handle errors in JavaScript using promises and arrow functions, while performing a fetch request to a URL and managing responses with then and catch.

Learn to fetch JSON data from an API, parse it, and loop through data.results with forEach to output each item into HTML.

Iterate through the json results with forEach to extract each person's name first and picture thumbnail, and render them in the output div.

Review the included pdf and source code from each lesson, and use mdn resources and api examples to practice javascript and json handling.

Master the fundamentals of jQuery, including selectors, DOM manipulation, and simple animations. Learn to add interactivity with event listeners and populate content from data via web APIs.

Discover how jQuery simplifies JavaScript by enabling DOM selection and manipulation, events, animations, and Ajax, with cross-browser support; compare download and content delivery network options, including minified and uncompressed versions.

Learn to select single or multiple elements with jQuery using the dollar sign, chain methods to set items red, and use id, class, and tag selectors for efficient DOM manipulation.

Explore jQuery styling by selecting list items, anchors, classes, and IDs, then update content and styles with an object of CSS properties.

Learn how to select list items with jQuery, update their text content or inner HTML using text() and html(), and append or prepend content to each item, including line breaks.

Explore how to work with DOM attributes using jQuery attributes: add and remove classes, update input types, read values, and chain methods for streamlined element manipulation.

Update image sources by manipulating the src attribute using placeholder.com images. Access and set form values—from input values to checkbox states and select options—using value attributes and boolean checks.

Explore jQuery click events by attaching click listeners, logging clicks, updating text content, and using $(this) to target the active element, with simple class toggle.

Understand the document ready event in jQuery to ensure the document loads before manipulating elements, then use event listeners to prevent default actions and change styles on hover and click.

Learn jQuery mouse events by using hover, mouse enter, and mouse leave to toggle and remove classes, and practice adding and removing the red class on hover.

Discover keyboard events in jQuery, including key down, key press, and key up. Learn to attach them to inputs, read the event object, and detect enter via key code 13.

Learn how to use the on event listener to attach multiple event handlers, including click, mouseover, mouseenter, and mouseleave, and toggle classes to create hover effects.

This lesson demonstrates applying hide, show, and toggle effects with jay query to page elements via button clicks, using first, second, and third buttons to hide, show, or toggle visibility.

Explore jQuery fade effects by wiring button click events to fade in, fade out, fade to, and fade toggle, controlling opacity, display, and timing via milliseconds and callbacks.

Explore jQuery slide effects, including slide down, slide up, and slide toggle, with the same syntax as previous lesson, height and padding adjustments, speeds in milliseconds, and an optional callback.

Apply jQuery animate to h elements on button click to move left 300px, resize width to 100px, increase font size, and explore duration, easing, and a console log callback.

Learn how to create and handle jQuery ajax requests, fetch data asynchronously, and update page elements with the data returned by the server using a callback.

Load file contents into a page element using an ajax-style load function, explain http vs file protocols, and show how a local server resolves cross-origin (CORS) errors.

Learn to submit form data with ajax using jQuery by preventing default submission, serializing name and email, posting to the server, and handling the response.

Learn to loop through multiple items in a JSON response, using the get method and forEach to build and output dynamic HTML content on the page.

Explore diverse selectors to target buttons and text dynamically, attach event listeners, and retrieve button text via values, while using child, index, and query selector methods for precise element selection.

Develop a small web app using ajax and jquery to fetch data from an api of random users, then render first name, last name, and thumbnail images into the page.

Learn to build a JavaScript-powered modal popup with HTML and CSS, style the modal and its content, and control opening and closing via JavaScript event listeners.

Explore the css box model and border-box sizing, and learn how margins, borders, padding, and width interact across inline, inline-block, and block elements for layout.

Learn to use querySelector and querySelectorAll to build a dynamic unordered list and add items from an input. Enforce a five-item limit and compare live versus static node lists.

Learn to add event listeners to existing and dynamically created list items using vanilla JavaScript, toggle an active state, and track per-item counts stored on each item.

Output complex JavaScript objects and arrays to a web page by traversing nested structures with forEach and template literals, rendering into a page output area.

Create and navigate in-page bookmarks by turning list items into anchor links tied to page element ids, enabling smooth scrolling with hash anchors and a sticky top navigation.

Construct a person object by combining first name and last name into a full name using an object constructor, the new keyword, and this, then output the result to console.

Create and control a modal popup with HTML, CSS, and JavaScript, including open and close buttons, outside-click-to-close behavior, and accessible styling throughout.

Learn to implement lazy image loading with JavaScript by marking images with a lazy class and data source, loading them when they enter the viewport.