HTML, CSS, JavaScript, ReactJS, NodeJS from Zero to Expert

Explore the HTML body element, which defines content shown to users—text, images, links, and forms—using div, p, a, and img. The body displays; head and meta stay hidden.

Explore the HTML head elements, including meta, charset, viewport, title, and meta description, and learn how these guide encoding, responsive design, and search visibility.

Explore how div elements create sections and act as containers for multiple elements, enabling shared styling across all child anchor elements.

Learn how HTML attributes add functionality to HTML elements, using the anchor tag with href and target, and the id attribute for unique element access via CSS or JavaScript.

Explore how the anchor element uses href to create clickable links, such as Gmail login linking to google.com, and control behavior with target _blank or _self and br.

Create unordered lists in HTML with ul and li to display bulleted items such as phone, keyboards, and TV. Use these lists for simple navigation menus on web pages.

Master html heading tags from h1 to h6 and build semantic, hierarchical page structure. Avoid nesting headings to improve accessibility and search engine visibility on Google.

Highlight semantic markup using header, nav, main, section, and article to create meaningful structure, improve SEO through meta tags, and ensure maintainability and adaptability.

The video demonstrates building an html form with labels, input fields, and a submit button, using action, name, id, and for attributes to send data to a server.

Explore the types of form elements in HTML, including text, password, email, number, checkbox, radio, textarea, select and file inputs, with name and value attributes for backend integration.

Explore CSS introduction and learn cascading style sheets control HTML appearance with inline, internal, and external styling using selectors like p and div and properties such as color and font-size.

Compare class selectors, which target groups of elements, with id selectors that target a single unique element, using a period for class and a hash for id.

Explore how the css class selector enables applying multiple styles by assigning several class values, such as center-text and red, to elements, and why ids cannot combine styles.

Explore css combinator selectors and how they relate elements in the document using four types: descendant, child, adjacent sibling, and general sibling selectors, with their symbols to remember.

Explore the child selector in CSS by targeting direct children with the greater-than symbol, applying font size 36 pixels to paragraph elements inside divs, and distinguishing direct children from descendants.

Explore how the adjacent sibling selector uses the plus symbol to target p elements directly after a div element, applying green text and a 36px font size.

Explore how pseudo class selectors style elements in specific states, such as hover, active, focus, and visited. See how nth-child, first-child, last-child, and related selectors apply targeted styles.

Learn how to use the CSS pseudo elements selector with double colon notation to style parts of elements, including after, before, first letter, first line, marker, and selection, with examples.

Learn how CSS margins create space outside an element’s border. The distance between neighboring elements uses the larger margin value.

Discover how CSS padding creates space between an element's content and its inner border, distinct from margin, with examples using 40px padding on paragraphs and visual borders.

Master css flexbox by turning a container into a flex parent with display:flex and styling child boxes using flex-direction, justify-content, wrap, align-items, and align-content.

Apply the flex-direction property to the container to control how its child boxes lay out, using row, row-reverse, column, and column-reverse. The default is row, and each value changes order.

Explore how the align-items property controls vertical alignment in row flex containers and horizontal alignment in column layouts, using values like flex-start, center, flex-end, stretch, and baseline.

Explore flex basis as the initial length for flex items and how flexbox calculates space to fit five children, showing why width values may be ignored.

Explore how the flexbox align-self property aligns individual child elements along the container's cross axis, using row and column directions and values like center and flex-end.

Discover css grid layout for two dimensional pages with rows and columns, using grid-template-rows, grid-template-columns, grid-row, and grid-column, and learn when to use grid versus flexbox.

Learn how to create css grid columns by applying display: grid to a container and defining grid-template-columns with fr units and repeat. Adjust column gaps to control spacing between columns.

Learn to use grid-column and grid-row to place elements by start and end lines, and apply the grid-column shorthand. Practice with repeat columns, minmax row heights, and responsive grid layouts.

Demonstrates nesting grid layouts by turning a child box into a grid, defining multiple columns, adjusting gaps, and using grid-column and span to lay out items across columns.

Learn how grid-template-areas defines named regions header, ads, content, sidebar, and footer, and maps them with grid-area values using 1fr 3fr 1fr columns.

Explore how align-items and justify-items control vertical and horizontal alignment in CSS grid, and learn to customize item positioning with align-self and justify-self across three-column layouts.

Build a semantic, responsive page using a 12-column grid system with CSS grid, defining container, header, main, article, nav, aside, and footer with grid-column, grid-row, repeat, minmax, and fr.

Learn how the z-index property controls stacking order in CSS by comparing absolute and relative positioned elements, using negative values, and understanding when z-index applies to children versus parents.

Learn how the CSS translate property moves elements along the x and y axes and enables 3D positioning with the z axis using perspective and transform.

Master the line-height property in CSS to define the height of each line of text; understand unitless values, the browser-dependent 'normal' default, and how line height differs from element height.

Explore how the CSS vertical-align property adjusts inline elements within a paragraph, using values like baseline, middle, sub, and super. Apply pixel and percentage offsets based on line height.

Explore styling CSS colors using named values, hexadecimal values, rgb, and rgba. Build an HTML page with divs to show color formats, font size, and rgba transparency.

Explore JavaScript as a web development language that runs in the browser and on servers with Node.js, and learn how statements, expressions, keywords, and variables power dynamic web pages.

Learn where to insert JavaScript in HTML using script tags in head or body, with guidance on load timing and accessing page elements in a vs code setup.

Learn to add single-line and multi-line comments in JavaScript. Use // for single-line comments and /* ... */ for multi-line comments, and toggle them with ctrl+/ or cmd+/ in VSCode.

Discover data types in JavaScript, from primitive types (number, string, boolean, undefined, null, symbol, bigint) to non-primitive types (object, array, function, date), with practical examples.

Explore arithmetic operators in JavaScript, including addition, subtraction, multiplication, division, and modulo, with example variables and console.log outputs.

Explore assignment operators in JavaScript, including =, +=, -=, *=, /=, and %=, with live examples showing how variables update.

Explore JavaScript comparison operators, including equality, strict equality, inequality, and strict inequality. Learn to use if statements to test numbers and strings.

Discover how JavaScript logical operators—and (&&), or (||), and not (!)—work in if statements to combine conditions and control code execution.

Learn unary operators in JavaScript, including type of, delete, unary plus and minus, and pre/post increment and decrement with practical object, array, and string examples.

Learn strings and template literals in JavaScript, covering single and double quotes, escaping with backslashes, embedding variables with backticks, and multi-line templates.