The Ultimate 70+ Hour Front-End Web Development Course 2026

Explore html basics as a markup language for describing web documents, and learn how opening and closing tags pair, with html, head, and body forming the document structure.

Write a basic HTML document with the doctype HTML5, html, head, and body tags to establish structure and visible content, use an h1 heading, and save with a .html extension.

Explore the structure of HTML elements, including opening and closing tags and their content, and understand nested and empty elements such as br and hr.

Explore how HTML attributes modify tags, such as lang and href, with anchor links to pages like google.com, and learn how attributes sit inside tags.

Learn how to apply inline style in HTML with the style attribute to set background color and text color, and view changes by saving and refreshing.

Explore HTML headings from h1 to h6 and how they structure content, using a resume example. See how search engines index pages and how headings impact readability.

Explore HTML paragraphs with the p tag and pre tag to learn how browsers render spaces, line breaks, and block elements, and how br and pre affect formatting.

Discover HTML code tags such as code, kbd, samp, and var, and see how pre, p, br, and sup render code, input, and variables in the browser.

Explore how to write and use HTML comments to mark sections such as header and services, including normal and conditional comments for IE6, and understand their lack of visible effect.

Explore html text formatting by styling a paragraph with p, and using tags such as b, i, mark, small, big, sub, sup, del, ins, var, and strong.

Learn HTML quotes with quote and blockquote tags, and use p and br for structure. Apply borders, padding, and direction with abbr (title attribute) and bdo for rtl and ltr.

Discover how HTML colors work, learning hex and RGB color formats, how to apply inline styles for text and backgrounds, and use alpha for transparency.

Explore the difference between block and inline elements in HTML, including p, div, h1–h6, and form, with inline examples like span, a, and img, and how blocks take full width.

Explore how HTML IDs provide unique, anchorable identifiers for page navigation and how classes enable multiple selectors across elements, with examples from header, footer, and inline versus block concepts.

Learn to create HTML links with the anchor tag and href, distinguishing global and local navigations, using target for new or same tabs and relative paths like about/about.html.

Learn to use the HTML image tag with src and alt attributes, control size with width and height, and float images to wrap text for SEO-friendly layouts.

Learn to create and style HTML tables with headers, rows, and cells using tr, th, and td. Apply borders, spacing, padding, border-collapse, and row or column spans to organize data.

Learn to build html lists: unordered (ul) and ordered (ol) with li items, style list-style-type as disk, circle, square, or none, and describe lists with dl, dt, dd.

Explore css syntax through style tags, internal and inline styles, and the basics of selectors. Learn to write selectors, properties, and values with proper braces and semicolons.

Explore CSS selectors, including single, multiple, descendant (div p), and sibling selectors such as div greater than p or div plus p, plus id and class selectors.

Explore css by contrasting descendant and child selectors with a div id, showing div p colors all paragraphs red while div #me > p colors only first-level children green.

Explore three CSS inclusion methods—inline styles, internal styles in a style tag, and external styles via a linked CSS file—and learn how the cascade favors the last declaration.

Explore css colors using hex codes, rgb, and rgba with opacity. Learn hex starts with #, rgb uses 0–255, and rgba adds alpha, with red on black as an example.

Explore css borders and outlines, adjust border width, style, and color, apply border radius to create circles and rounded corners, and learn text alignment, line height, and browser prefixes.

Explore css margin and how it creates space around elements outside the box. Learn margin shorthand for top, right, bottom, and left, default values, and how borders relate to margins.

Master CSS padding to create space inside elements using shorthand and longhand forms, linked to margins. Explore top, right, bottom, left values with anchor links and button styling.

Explore the CSS box model, including content, padding, border, and margin, and learn how each layer affects width and height to calculate element dimensions.

Explore the CSS font-family property, learn how to define a preferred font with fallbacks like Arial, Helvetica, and Courier, and distinguish between family name and generic family names.

Apply box shadow and inner shadow to HTML elements, with effects activated on hover, and customize horizontal and vertical distances, blur, spread, and color.

Explore how the CSS transition property and transition duration create smooth hover effects on a center-aligned button, showing transitions on width, box-shadow, and color.

Learn how to apply CSS transitions with transition property, duration, delay, and timing functions to animate a ball on hover, including ease, ease-in, ease-out, ease-in-out, linear, and cubic bezier.

Use the CSS transition shorthand to combine property, duration, timing function, and delay. Apply hover-based left and top movements with staggered delays for engaging button and loader animations.

Learn to create a unique button hover effect by wrapping the button in a positioned container and using before and after pseudo elements with skew, transitions, and shadows.

Learn to animate a ball with css by defining a key frame named ball, applying animation name, duration, and iteration count, and using from to or 0% to 100% keyframes.

Explore the core CSS animation properties, including animation name, duration, iteration count, delay, direction, fill mode, timing function, and play state, with practical examples.

Learn the CSS animation shorthand by setting animation name, duration, timing function (linear), and delay, then apply 0% to 100% with reverse or infinite for direction and repetition.

Learn to build a full-screen hero with a looping background color animation using css keyframes and rgba transparency, center text with flex, and style a call-to-action button as a link.

Add a full-height background video to the hero area by embedding an mp4 in a full-width slider, with muted autoplay, looping, proper positioning, overflow handling, and hover effects for CTAs.

Refine the animated video background hero by keeping the CTA box shadow consistent, while changing the background color and text shadow on hover, and apply a 30-pixel border radius.

Explore how flex shrink controls the shrinking rate of items as the browser narrows, illustrated by three 400-pixel items with shrink values 1, 2, and 3.

Explore flex basis to set the starting width of elements, then see how flex grow and flex shrink adjust sizes for three items as the container changes, with hands-on examples.

Learn how to use the flex shorthand property to control flex grow, shrink, and flex basis, with practical examples showing responsive width changes among three items.

Explore how to align each flex item vertically with the align-self property in flexbox, using examples of flex-start, center, and flex-end across three items.

Learn CSS grid fundamentals by building a two-column layout with grid template columns, grid template rows, and grid gap, plus grid auto rows and repeat usage.

Discover how grid auto flow determines item placement in CSS grid, defaulting to rows and switching to columns to fill by column across three rows.

Understand the grid gap concept, including grid row gap and grid column gap. Use the grid gap shorthand with two values: the first for rows and the second for columns.

Explore how to use grid container properties to justify content horizontally, experimenting with start, end, center, space around, space between, and space evenly, for clean layouts.

Explore the difference between justify content and justify items in css grids, showing how justify-content centers the whole grid while justify-items centers each item, with brief notes on align-content.

Learn to align content and items in a grid using justify content, align content, and align items to center, start, and end on both axes.

Learn how to use CSS grid properties like display grid, grid gap, width and height, justify items, align items, and the place content shorthand to control alignment.

Explore CSS grid by rearranging a three-column, three-row orange item grid using grid row start/end and grid column start/end in a 900 by 900 container with 50px gaps.

Demonstrate the CSS grid area shorthand, using row start, column start, row end, and column end, with items two and three and a middle placement challenge.

Learn to place item three in a grid using grid area with precise row and column starts and ends to center it, and explore additional grid item properties.

Explore how to align individual grid items with justify self, align self, and place self, within a grid container, and preview grid template areas.

Build a multi-section website layout with CSS grid by naming grid areas for header, sidebar, content, and footer, experiment with four and three column templates, and adjust gaps and padding.

Explore sas as a css preprocessor that compiles into css, extending css with variables, nesting, import, mixin, and extend to reduce repetition and speed up styling.

Learn to use Sass variables to streamline styling in front-end development, using Visual Studio Code and Live Sass Compiler to compile styles.scss to styles.css, with global and local color scope.

Master sass nesting to write styles for container, section and section content, align with flex and viewport, refine a link's color and underline, while hinting at a shorthand using parent.

Discover how the ampersand denotes the parent in nested selectors, apply font weight and 30px font size, preview with a live server, and reduce duplicate font prefixes.

Explore shortening code with common prefixes using Sass variables and nesting, and learn the import, mixing, and extend directives to streamline styles.

Learn how to use a Sass mixin, a function-like CSS tool, to create a gradient button and reuse its styles with include, defining the mixin and applying it across sections.

Learn to create and apply a mixin for centering content using variables like body, font, and bg, and properties such as width, height, align-items, justify-content, and text-align.

Explore using Sass import to organize mixins, including center and gradient text, and apply gradient text effects while preventing compilation errors.

Extend section styles by applying a gradient to an h1 in section one, showing inheritance of properties and gradient text, then preview with a live server.

Learn to implement mixins with arguments to create gradient text, using a direction and two colors in styles.css for dynamic gradient headings.

Learn to craft reusable styles with Sass mixins for buttons, applying direction, color variants, and background colors while exploring variables, nesting, import, mixins, and extend.

Explore CSS pseudo elements, especially before and after, to build a dynamic hover effect for a button with gradient background, absolute positioning, transitions, and z-index layering.

Learn to build a centered button hover effect using both before and after pseudo elements, with two rotating circles and CSS animations via keyframes.

Create a unique hover effect with a pseudo element on a centered button. Implement transitions, overflow handling, and z-index tweaks to ensure smooth animation.

Create a layered hover effect by sliding two pseudo elements from left and right to overlap, with keyframes and a border color animation from white to orange red to green.

Learn to create CSS shapes, including a triangle with one line of code via clip-path polygon and a gradient background, for a hero area project.

Create a hexagon using clip-path polygon with six points, a 300 by 300 canvas, and purple and orange backgrounds, and note hover effects before the next lecture's circle trick.

Learn to create a circle with css by setting equal width and height and a 50% border radius, then apply a blue and green background and save via copy-paste.

Learn to create an open book shape using a polygon clip-path on a 300 by 300 canvas, color it yellow to red, and apply these shapes in web designs.

Build a two-column hero area with centered text and image using HTML and CSS, featuring an orange background, hover effects, clip-path shape, and a contact us button.