The Complete Front-End Web Development Course

Learn the basics of HTML document structure by applying proper tag usage, including opening and closing tags, the head and body sections, and the title element.

Learn how HTML tags work, focusing on div as a block element and span as inline, with width, margins, padding, and developer tools insights like div soup and HTML5 alternatives.

Explore inline HTML elements—i for italic, b for bold, and p as a block paragraph—plus creating links with the a element and href attributes.

Create and structure content with ul and ol lists, using li for each item and nested sublists, then apply div and p elements to pages.

Learn how HTML5 header and footer replace divs to structure content semantically, reduce div soup, and improve readability; build a site header, footer, and use entities like © and  .

Learn how to replace div soup with semantic HTML5 elements like article, main, and section, use self-closing tags for breaks and images, and keep clean, well-indented markup.

Explore h1–h6 headings to establish title hierarchy and visual scale. Learn to use the aside element for side content and float it left as a 200×200 box.

Learn how to build and style HTML tables with rows, columns, thead, tbody, tr, th, and td, add borders and widths, and compare inline styles to CSS.

Build a basic unstyled HTML page from a blank slate, creating a header, about me section, and an article list with linked titles and a footer.

Insert images with the image tag (self-closing), note its block-level behavior, and use the src attribute with relative or absolute paths, adjusting width to 100% for proportional scaling.

Create a form element to collect user data, including input fields, text areas, and checkboxes, using id properties to target the form and the action script that processes submissions.

Builds the front-end order form by adding input fields for address1, address2, city, state, and zip with placeholders and classes, using line breaks and inline layout.

Learn to replace free input fields with checkbox inputs to let users select pizza ingredients. Build labeled options such as pepperoni, salami, bacon, and onions with name and type attributes.

Learn how radio buttons group by name to allow only one selection, as with delivery or pickup. Contrast them with checkboxes, and note how values identify options for form submission.

Create a size select with option elements in a pizza order form, add a place order button, and explain get versus post methods for transmitting delivery or pickup order data.

Learn to embed native HTML5 video using the video element and source tags, ensure cross-browser support with MP4 and OGG formats, enable controls, and provide a fallback message.

Explore how to use an HTML5 audio element on a webpage with src, controls, autoplay, and loop, and control playback with JavaScript.

Learn how to declare the html5 doctype so browsers parse html correctly, and how header elements and meta tags enable css usage, with notes on bootstrap and legacy doctypes.

Explore meta tags in the header, including charset utf-8, description, keywords, author, and viewport, and learn how description affects Google results and how bootstrap supports responsive design.

Link a stylesheet in the head and create a CSS file to style the page. Use hex, rgb, rgba colors to set background and text, and explore inheritance and specificity.

Explore how specificity in css controls styling across elements, using descendant and direct-child selectors. See how top-down reading and element paths determine which rules apply, with practical dev tool demonstrations.

Target elements by id, apply borders and margins, and reset body spacing with CSS. Import and use Roboto Condensed, adjust font-weight, and leverage border and margin shorthand for precise styling.

Explore how css display properties control layout by switching elements between block, inline, and inline-block, and master spacing with margins, padding, and floats.

Set up a three-article grid demo, using a centered 1000px container and article cards with responsive widths, background image divs, and CSS rules for max-width, inline-block, and cover scaling.

Switch to WebStorm, a JetBrains IDE for web development that supports JavaScript, CSS, and HTML, using the same workflow as Atom, with a free 30-day trial.

Explore how to import fonts from fonts.google.com, apply font-family and font-weight, and use IDs and classes to style titles and links with italic and bold variations.

Learn how to style links with the text-decoration property, removing the default underline and applying underline, overline, line-through, or multiple values to achieve unique link appearances.

Explore how to adjust letter spacing and word spacing in CSS using the p tag, with pixel-based values and both positive and negative options to fine-tune readability.

Explore text-indent, text-align, and text-decoration to shape typography in CSS. See how a elements, color, and line style respond to the last rule and set groundwork for pseudo-states.

Apply text-shadow to the body and all descendants, tuning offsets, blur and spread, and RGBA color for subtle contrast; compare this with box-shadow for non-text elements.

Explore CSS pseudo-states and pseudo elements, including hover, focus, and active, to dynamically style links, inputs, and articles using class and element selectors while examining specificity and maintainability.

Learn how to use border-radius to create rounded corners and circles, control all-sides or individual corners, pair values for each corner, and apply transparent borders for clean web design.

Explore CSS position concepts, comparing relative, fixed, and absolute positioning, and learn how headers become fixed layers that affect document flow, top margins, and the viewport.

Learn to create CSS pseudo-elements ::before and ::after, style them with content, display, width, and height, and apply absolute positioning with left, top, and bottom.

Understand how z-index controls layer depth for absolute or fixed elements, enabling overlapping, while relative positioning can participate; position with top and left to shape the stacking order.

Learn how max-height and max-width control container sizing, and how the overflow property enables hidden or scrollable content, with practical contrasts between percent, vw, and vh for responsive layouts.

Learn how the transition property animates changes on hover for any element, with examples of box-shadow and background color, including durations, delays, and per-property timing.

Learn the basics of JavaScript as a scripting language, including creating functions, classes, event handlers, and variables, and printing hello world with document.write.

Explore how to use alert and console.log in JavaScript. Practice writing single-line and multi-line comments, and apply basic syntax including semicolon rules and simple functions.

Create variables in JavaScript using var, store strings and numbers, and display values with alert. Distinguish integers, floats, and strings, and learn how type affects math.

Explore how to declare, reassign, and increment variables in front-end development, using myAge and myName to demonstrate reassignment, concatenation, and undefined versus defined values.

Explore booleans as a type, declare and reassign iLikeCheese with true or false, and learn how = assigns while == checks equality against text.

Learn to compare values using equals and not equals, and apply greater/less than checks; use if statements to branch code based on boolean conditions like isPremiumUser.

Learn how to use if statements with boolean variables, else and else if branches, and age-based conditionals to control code flow in front-end development.

Learn to use for loops to repeat actions until a condition, initialize i, test i < 10, and increment i. Print the current i value and name the counter consistently.

Define and call functions in code, using function keyword, naming, braces, and parameters; pass arguments, print output with console.log, and reuse functions to modularize tasks.

Learn how JavaScript enables user interactions on web pages by wiring an HTML button with an id to a JavaScript event listener using getElementById and addEventListener, illustrating event handling.

Learn how to set an element's innerHTML using document.getElementById and the innerHTML property. Log the element to the console and remove the click event listener after the first click.

Learn how to create and manipulate arrays in JavaScript, including push, pop, and indexing. Explore using arrays of strings, booleans, and even multi-dimensional arrays, with zero-based indexing.

Master JavaScript arrays by using length to get the last item, iterate with forEach and a callback to access items and indices, and modify arrays with shift and unshift.

Learn to obtain an array item’s index with indexOf, remove elements with splice, and test for presence using indexOf > -1, applying strict equality for accurate comparisons.

Learn to grab input and textarea values, update text with innerHTML, and distinguish innerText from innerHTML using getElementById and getElementsByClassName.

Learn how to define and call functions, pass parameters, and return values, including using phrases, variables, and function scoping to compute lengths.

Learn to pass multiple parameters to a function, sum string lengths, and use typeof to check parameter existence, enabling optional arguments and robust error handling in your front-end code.

Master flexible function parameters in JavaScript through nested functions and using objects to pass data. Learn how to compute lengths, handle undefined values, and access object properties with dot notation.

Learn to sort arrays numerically in JavaScript with a comparator, avoiding string sort. Implement a function to find the missing number in a shuffled 1–20 sequence.

Develop a JavaScript function to find the missing number in a 0–20 sequence using a loop. Use indexOf and -1 default, and mention sorting as an optional alternative.

Explore how JavaScript classes serve as blueprints for objects, defining properties and methods with ECMAScript 2015, and learn to instantiate them with new in modern browsers.

See how JavaScript constructors run on object instantiation and how parameters become instance variables via this. Learn to use class-level static variables accessed through the constructor and the class.

Extend the animal class with dog and fish subclasses, adding bark volume, leash color, swim speed, and a super constructor, then implement bark and swim methods.

Learn to set up jQuery in your pages, include the library via CDN or download, and use $(document).ready to run jQuery code after the document is ready, speeding JavaScript development.

Master targeting elements with JavaScript and jQuery by using id and class selectors with CSS notation, innerHTML and html methods, and input value handling to build dynamic front end interfaces.

Compare vanilla JavaScript and jQuery for event handling, creating and targeting elements with getElementById or getElementsByClassName, converting to a jQuery object, and using on('click') and hover.

Apply concepts from HTML, CSS, and jQuery to build a reusable profile dropdown menu with a profile-submenu, dropdown-trigger data attributes, and hover interactions.

Implement a responsive dropdown with jQuery by handling profile-menu mouseleave, toggling the submenu's active class, adding bottom padding for a link path, and applying fadeIn and fadeOut for smooth transitions.

Learn to append, prepend, and replace content in a section using a textarea and buttons, while handling click events and determining the clicked button's id with currentTarget and attr.

Learn to manipulate web page content with jQuery by prepending, appending, or replacing inner HTML, targeting the main element by id or text class, and updating with text val.

Learn to prevent default browser actions using the event.preventDefault method in click handlers, with examples on links and form submissions, and note return false as an alternative.

Learn how to detect which mouse button is clicked using event.which, and implement clean event handling with a switch statement to differentiate left, middle, and right buttons.

Learn to build a custom right-click context menu with html, css, and jquery, positioning it at the mouse's pageX and pageY while preventing the default menu and using fade methods.

Learn to create a context-sensitive menu with the jQuery is method, showing save image as or open in new tab based on whether you right-click an image or a link.

Develop a custom gQuery library to mimic jQuery by selecting elements by class or id and adding classes with a wrapper function and addClass method.

Explore building a lightweight, fast JavaScript library inspired by jQuery, and master the document ready concept, the find method, and practical DOM navigation for targeted element updates.

Learn to select the first and last links in a submenu by targeting the submenu class and its a elements, then log their text to the console.

Explore focusin and focusout events, their use with text areas and inputs, and how to validate emails on focusout or keyup using JavaScript and CSS pseudo states.

Explore the contains selector, the is method, and hasClass in jQuery, showing how to select text-based paragraphs, test element types, and check classes with practical console examples.

Learn how the jQuery each method loops over a set of elements, using a callback to process each item's text, and compare its behavior to a for loop.

Explore callbacks in front-end development by passing functions as arguments, using inline and named callbacks, and handling events with this, element, and validation patterns.

Learn to apply CSS in jQuery using the css method with a dictionary object, using camelCase property names like borderColor and backgroundSize, with string values.

Explore bootstrap as a starting framework, not a final design tool, by setting up bootstrap 3 with css and js, including jQuery, minified files, and custom swag.css overrides.

Build a navigation bar with bootstrap by using navbar, navbar-brand, nav-item, and nav-link, and adapt from bootstrap 3 to bootstrap 4 with utility classes.

re-implement a responsive bootstrap navbar with a toggler, brand, and collapsible menu, wire up jquery, tether, and bootstrap js, and ensure aria controls for accessibility.

Master Bootstrap forms by using form-group and form-control to style inputs and textareas, build a container with a 12-column grid for responsive layouts using col-md-4 and col-md-8.

Explore building form elements with bootstrap: create a labeled select with form-control, add checkboxes with form-check-input, and style buttons using btn btn-success and a zero border-radius for a flat look.

Explore how to turn links into buttons, apply Bootstrap button classes (btn, btn-primary, btn-outline, btn-lg, btn-sm, btn-block), and use color and size variations to guide user attention.