Learn HTML and CSS from Scratch - Build Responsive Websites

Learn the basics of the hypertext markup language, including opening and closing tags, placing content inside, how browsers render pages into websites, and the move to HTML5.

Learn the basic HTML page structure, starting with the doctype declaration, html, head, and body sections, including the title and SEO meta tags, with notes on notepad and free editors.

Explore free text editors for HTML coding, including notepad++, brackets, and atom, and learn features like syntax highlighting, auto closing tags, and live preview that speed up building websites.

Discover how HTML elements and tags form the building blocks of a page, how browsers build the document object model, and how opening, closing, nested, and empty tags function.

Explains how semantic elements organize web pages, including header, nav, aside, section, article, and footer, and how they structure the body content and independent articles.

Explore the div element as a non semantic container that groups content and acts as the parent for child elements. Use CSS to control layout and spacing of its children.

Explore html attributes on anchors and images, using href and src to define links and loaded files, and note lang, title, style, width, height, class, and id.

Learn how to add ordered and unordered lists in HTML, customize list-style-type and numbering with type and start attributes, and style lists with CSS.

Add images to web pages by using the image element with a src attribute, handling same-folder, nested folders, and up-one-level paths, and optionally set width, height, and alt text.

Learn to hyperlink text and images using the anchor tag, href, and target values like _self and _blank, for links to internal pages or external sites, including iframe usage.

Build html tables with table, tr, th, and td; add headers, data, and captions, then style borders and text using inline css with row span and col span.

Explore HTML block and inline elements, their default line behavior, and how CSS display toggles between block and inline to control layout for anchors and paragraphs.

Learn to use HTML comments to annotate code, hide sections not displayed on the page, with HTML comment syntax <!-- ... --> and shortcuts for adding and removing.

Learn how to use iframes to display another page with a source, width, and height, and customize borders or embed external content like YouTube videos.

Build HTML forms to collect user data using labels, inputs, radio buttons, checkboxes, and selects. Master form attributes like name, value, placeholder, required, and autocomplete.

Craft HTML forms using select dropdowns with options and values, default choices, and required attributes; add text areas with wrap and minimum and maximum characters, plus get or post submission.

Learn to embed audio on web pages using the HTML5 audio tag with controls and multiple source tags (mp3, wav, ogg) for cross-browser playback and graceful fallbacks.

Learn to embed video with the HTML5 video tag, using multiple sources, controls, and optional width and height to size the player while providing a fallback message for unsupported browsers.

This lecture explains building a website from scratch with HTML, including header, logo, navigation, sidebar, sections, and footer, then introduces styling with CSS and creating services and contact pages.

Explore inline, internal, and external css methods, using selectors, properties, and values; link external style sheets with the head and link tag to build scalable, maintainable web pages.

Learn how to use class and id attributes in HTML, apply selectors with dots and hashes, reuse class names, ensure unique ids, and bookmark page sections with anchors for navigation.

Explore CSS text properties to control font size, alignment, decoration, transform, text indent, letter spacing, word spacing, line height, color, and text shadow for responsive, accessible web typography.

Explore adding colors to web pages with color names, rgb values, hex codes, and alpha-enabled options for opacity, with hsl representations for hue, saturation, and lightness.

Every element is a rectangular box with content, padding, border, and margin. Adjust padding, border, and margin to control inner space, outer space, and overall layout.

Compare absolute and relative CSS measuring units, from fixed pixels, centimeters, inches, and millimeters to scalable percentages, em, rem, and viewport units (vw, vh, vmin, vmax) for responsive design.

Explore how the CSS float property moves elements to the left or right, enables wrapping, and how the clear property fixes layout in a three-column page with right navigation.

explains how the CSS clear property controls wrapping when an element floats. shows none, left, right, and both options, initial and inherit, and introduces clear fix using an empty element.

Design a custom three-column web layout using semantic html elements like header and nav, with paragraphs and images, and learn responsive techniques using floats, inline-block, margins, padding, and max-width.

Learn how to position elements with CSS using static, relative, absolute, fixed, and sticky techniques, including top, bottom, left, right, z-index, and practical examples with wrappers.

Master advanced CSS selectors using pseudo-classes to style elements in hover, visited, link, and active states. Explore position-based selectors like first-child, last-child, even, and nth-child for scalable styling.

Learn to style parts of elements using CSS pseudo classes and pseudo elements, including first line, first letter, selection, and before and after content, with display considerations.

Learn to create CSS linear and radial gradients with adjustable direction, color stops, and sizes, apply gradients to elements and images, and use repeating gradients with shape and position options.

Design a layered blue and pink gradient over a background image, adjust transparency, use cover sizing, and check cross-browser support with caniuse and vendor prefixes.

Explore the css border-radius property to shape element corners, including top-left and others, use four-corner shorthand, and create circles or ellipses with px, % or other units, with cross-browser prefixes.

Explore the CSS transform property in two-dimensional space, applying translate, skew, scale, and rotate to shift, tilt, and resize elements, with transform-origin and transitions for interactive hover effects.

Preview HTML and CSS changes in real time using a live server. Install the live server plugin in Brackets or Atom to auto-refresh your browser on save.

Learn how to add icons to your website using Font Awesome and Google Material icons, choosing free versions, linking via CDN, and customizing size, color, rotation, and simple animations.

Define font-family and apply web fonts, including Ariel and Helvetica, via Google Fonts. Choose between linking fonts or hosting downloaded fonts; balance font weight and load time.

Explore how to code faster with the Emmet plugin for HTML and CSS, using shortcuts, tab expansions, and custom abbreviations to generate boilerplate efficiently.

Explore css animation and transitions, showing how animation runs automatically on load and can loop infinitely, while transitions need a trigger like hover or click to change properties.

Learn how CSS keyframes drive animations by defining 0% to 100% states to smoothly transition properties such as background color, over a set duration, using animation-name, duration, and iteration-count controls.

Master CSS animations by applying animation timing function, keyframes, delays, directions, and fill modes, and use the shorthand to combine properties for smooth, responsive effects.

Learn to create engaging CSS animations with keyframes, including header, button, text span, and progress bar effects, using translate, rotate, color changes, and cross browser prefixes.

Set the viewport with the meta tag to match the device width and an initial-scale of 1.0, enabling responsive layouts that adapt to different screen sizes using browser dev tools.

Master css media queries to build responsive layouts by applying styles at breakpoints like 600 pixels, with media types and conditions, ensuring content adapts across screen sizes.

Explore flexbox basics by turning a container into a flex row with display: flex, arranging three boxes, and using flex properties to equalize width, reorder items, and align heights responsively.

Explore flexbox fundamentals by applying width, wrapping, and alignment with container and child elements; learn space between, space around, flex wrap, grow, shrink, and centering techniques for responsive layouts.

Learn to redesign a three-column layout using flexbox, including nested flex boxes, justify content, and responsive adjustments via a media query to stack on small screens.