Web Development | HTML | CSS | JavaScript | jQuery | NodeJS

Master creating your first html application by installing a code editor, saving files as .html, and running in multiple browsers to view updates in real time.

Explore how HTML5 headings and paragraphs structure documents using h1–h6 and p tags, understand nesting rules, default margins, and the shift from align attributes to CSS for text alignment.

Explore how the hr tag creates a horizontal ruler in HTML5, an unpaired element used to separate sections, with styling delegated to CSS (no closing tag).

Learn how the div tag acts as a block-level container that can hold content, nest other divs, and be styled with CSS, using ids in examples like cities and seasons.

Explore css, combining css 2 and css 3 to beautify html content through property based styling, using key/value pairs for colors, fonts, margins, and paddings.

Learn how the CSS style definition uses tag, id, and class selectors to target HTML elements and apply properties like background color, color, border, margin, padding, alignment, and font-size values.

Master the tag selector in CSS to target all div and p tags, place styles in a style tag inside head, and apply borders, margins, and colors to elements.

Learn the id selector in CSS to target a single element with a unique id using the # symbol, and apply borders and margins to specific divs.

Use the CSS 3 class selector to target groups of elements with a class, applying a common style via the dot notation, and understand that ID selectors override class styles.

Master font-family in CSS to set a default font on the body that cascades to all elements, with comma-separated fallbacks, and apply fonts via cityheading and seasonheading.

Explore how the CSS3 font-size property sets text size using px, em, %, pt, vh, and vw, with defaults like 16px and practical examples such as 1.5em and 2vw.

Explain how the font-weight property controls text thickness in css, with values normal, bold, lighter, and 100–900. Use bold for headings and lighter for paragraphs, with examples like 800.

Apply italic styling with the font-style property in CSS by targeting the seasonheading class selector to make summer, winter, and rainy headings italic, while normal remains the default.

Explore the font-variant property in CSS 3 to apply small caps, with values normal and small-caps. See how font-variant: small-caps on h1 renders letters uppercase with the first letter larger.

Learn to use the CSS font shorthand to set font-style, font-variant, font-weight, font-size, and font-family in one line, with the required order and scenarios for applying to elements like h1.

Use the color property to set text color in css with hex, rgb, rgba, and color names. Explore rgb 0–255, rgba opacity, and hex examples like #ffffff and #000000.

Explore how the text-align property in CSS 3 controls left, center, right, and justify alignment, and apply it to headings and paragraphs using div, class, or id selectors.

Learn how text-decoration in CSS applies underline, overline, and line-through using text-decoration-line, text-decoration-color, and text-decoration-style. Apply underline to city headings like Goa and Kochi, and understand color and style options.

Learn to use the css3 text-transform property to convert text to uppercase, lowercase, or capitalize. See examples applying to h4 headings like things to do and day plans.

Learn how to use the css text-indent property (css3) to indent the first line of a paragraph with pixels or percentages, targeting seasonpara class paragraphs.

Learn how to use the css3 letter-spacing property to adjust text spacing, with positive and negative values, targeting paragraphs with the seasonpara class and applying 3px or -3px.

Adjust the CSS3 line-height property to control vertical spacing between lines, using positive, negative, unitless, or percentage values, with a normal default that depends on font size.

Learn how css3 word-spacing controls the space between words in paragraphs and headings, using positive values to widen and negative values to tighten the text.

Explore how the css3 text-shadow property styles text by specifying horizontal and vertical shadows, blur radius, and color, including positive and negative offsets and the default none.

Explore how the CSS white-space property controls text wrapping with normal, nowrap, and pre values, including spaces, line breaks, and code-like formatting.

Learn how the direction property sets text as ltr or rtl, with ltr as the default. See how unicode-bidi and bidi-override force rtl in a seasonpara example.

Highlight parts of a paragraph with the span tag in HTML5, an inline container; use a class like temp with the .temp selector to apply font-weight and color.

Explore font-awesome icons by loading the css3 from a cdn, using span or i tags with the fa prefix and icon name like fa-sun or fa-youtube, including free icons.

Import the google material icons CSS from fonts.googleapis.com and render icons with a span class material-icons using icon names like location_city to enhance your web app with a professional look.

Explore the css3 background-color property to set backgrounds for divs and other elements using hex, rgb/rgba, or color names, including rgba opacity, on states.html page with a common state class.

Explore the CSS3 box model, where each HTML element is a box defined by content, padding, border, and margin. Learn to customize padding, margin, and border to present content effectively.

Explore the css box model and the margin property to create space between elements, and learn how vertical margins collapse while horizontal margins accumulate using practical examples.

Learn to apply margins individually using margin-top, margin-right, margin-bottom, and margin-left, overriding a global margin; observe default 0px and margin collision between adjacent top and bottom margins.

Learn to specify margins with the CSS margin shorthand in top-right-bottom-left order, using one, two, three, or four values, and understand margin collapse.

Master the CSS3 box model by learning the padding property, controlling space between content and border with padding-top, padding-right, padding-bottom, and padding-left, as shown with 10px and 25px examples.

Specify padding for each side using individual properties: padding-top, padding-right, padding-bottom, and padding-left with values like 10px, 20px, 15px, and 30px; upcoming lesson covers shorthand for all sides.

Learn the CSS 3 padding shorthand to set padding-top, padding-right, padding-bottom, and padding-left in one line. Use two-, three-, and four-value forms, like margins, and apply it to your project.

Understand how the CSS width and height define the content box in the box model, and how padding, margin, and border affect total size, including block-level behavior.

Learn how the CSS3 float property arranges block-level elements side by side using float: left or float: right. Understand how margins and padding shape spacing in page layouts.

Explain how the CSS clear property controls line breaks for floated elements, using clear left, clear right, and clear both with float left or float right.

Understand the css3 border in the box model, including border style, width, and color, and use the border shorthand to set all three properties in one line.

Learn how to use the border shorthand in css3 to set border width, style, and color in one property, with defaults and examples like 10px solid red.

Learn to specify borders on each side in CSS using border-top, border-right, border-bottom, and border-left, exploring width, style, and color or their shorthand, with practical examples.

Learn how the css outline property differs from borders, sits outside the element's border, and can highlight specific items like Karnataka with a dotted outline using the shorthand.

Learn how the outline offset property creates space between the border and outline, with default zero, using pixel or percentage values, and why outlines may overlap elements in css3.

Apply the border radius property to create rounded corners on elements, using one value, two values, or four values to cover top left, top right, bottom right, and bottom left.

Apply the box-shadow property to any html element to create shadow effects using horizontal offset, vertical offset, blur, spread, and color.

Explore how the css3 transition property changes property values gradually on hover, enabling smooth updates to background color, font size, and other properties over a defined duration.

explore css3 transformations using the transform property to scale, rotate, translate, and skew elements, with hover effects and transitions that smooth the changes.

Discover how the transform-origin property fixes the rotation point, defaults to center center, and enables rotating, skewing, or scaling around nine points such as bottom left or bottom right.

Learn css3 3d transformations by using rotate 3d and scale 3d on x, y, z axes with 0–1 values, 180-degree rotation, and active click interactions for animated, reversible effects.

Learn to implement keyframe animations in CSS by defining a duration and milestones, setting properties such as background color, rotation, and scale, and applying the animation on active or hover.

Learn to apply gradient colors in css3 using linear and radial gradients, set with background-image, define color sequences, directions, and stop percentages for dynamic web layouts.

Explore how the CSS overflow property controls scroll bars for div content with visible, hidden, scroll, and auto values. Compare auto and scroll for when content exceeds an element.

Learn how the word wrap property handles long words that exceed an element’s width, choosing between a horizontal scrollbar and breaking the word with word wrap break word.

Learn to control text orientation with the CSS writing-mode property, using horizontal-tb and vertical-rl or vertical-lr to arrange lines as horizontal or vertical.

Use min-width and max-width in CSS3 to constrain an element's width between a minimum of 400 pixels and a maximum of 450 pixels as the browser resizes, ensuring content readability.

Learn to build bullet lists with ul and li tags, display destinations and items, style bullets with CSS, and use the list style type property since HTML5 removes type attribute.

Learn to display numbered lists with the ordered list tag, replace ul, and control numbering using start and reversed, noting type is removed in HTML5 and CSS handles numbering.

Explore styling ul and ol bullets with the CSS list-style-type property, including disk, circle, square, decimal, decimal-leading-zero, lower/upper alpha and roman, none, and list-style-image for custom bullets.

Explore how to customize unordered list bullets with the CSS list-style-image property by using a small image file and proper path handling.

Learn how to create nested lists in HTML5 using ul and ol inside li elements, enabling states, destinations, and categorized products with unlimited nesting.

Learn how html5 renames the definition list to a description list and use dl, dt, and dd to pair terms with descriptions.

Install the live server extension in visual studio code, open your project folder, and use open with live server to run on localhost, auto-refreshing on save.

learn to create hyperlinks in html using the a tag, or anchor tag, with href to navigate between pages such as home.html, destinations.html, and states.html.

Style hyperlinks with CSS using a:link, a:visited, a:hover, and a:active to control color, background, and underline. Apply these rules to unvisited, visited, and active links for a cohesive, accessible appearance.

Learn to build a top navigation bar with a brand name and links using ul, li, and a, then style for horizontal layout, hover, and spacing.

Link a single external stylesheet to all pages, such as home, destinations, and states, via styles.css to share the navigation bar and improve maintainability.

Explore creating internal navigation with bookmark links by assigning ids and using hash hrefs to jump between sections on a single web page, enabling smooth top-to-bottom scrolling.

Create HTML file links to pdfs and other files using href with the correct folder path, and control behavior with target and download to open or download.

Learn to embed pages and files with HTML5 iframes using src, width, height, and borders, including states.html in home.html, PDFs, and multiple iframes with divs.

Explore CSS3 position concepts, including static, absolute, fixed, relative, and sticky, and learn how left and top define x and y coordinates for elements.

Explore how the css display property controls element layout with block, inline, inline-block, and none, including default block and inline values and how width and height apply to each.

Explore how visibility hidden hides elements without reclaiming space, unlike display none which reclaims space and shifts following elements.

Create a sidebar with sub menus using html ul and li, style with sidebar.css, and toggle submenus with jquery, featuring electronics, appliances, fashion, and a chevron indicator.

Learn to display images on a webpage with img tag using src, width, and height from current or subfolders; build gallery.html to showcase cathedral.jpg, kanjipuram.jpg, and mammalapuram.jpg with correct extensions.

Create an image gallery with hover highlights that scale images using transition and transform, and display captions beneath each photo in a centered, bordered layout.

Learn how html5 figure and figcaption tags group an image with its caption, replacing divs to improve semantics and help search engines identify image descriptions.

Learn how to use the img tag with width, height, src, and the alt attribute, ensuring accessibility and a helpful tooltip with the title attribute.

Use the style attribute to set image width and height with inline css; avoid overusing it, since alternatives include the width and height attributes.

Wrap images in anchor tags to turn them into hyperlinks, specifying hrefs like incredible india.org and placing images in an images folder with proper src paths on gallery.html.

Learn to apply CSS3 background-image using url paths on elements, convert img tags to background images, and decide text position.

Learn how the CSS3 background-repeat property controls how a background image repeats or fits inside an element, exploring repeat, no-repeat, repeat-x, and repeat-y with demos in states.html.

Learn how the background-position property controls where a background image appears, with presets (top left, top center, bottom right) and x y values (e.g., 30px 30px) for no repeat images.

Learn how the background-size property controls a css background image, using auto, width, height, or color, with cover to fully fit the element and clip oversized images.

Discover how the CSS background-attachment property determines whether a background image scrolls with page content or remains fixed, demonstrated on the body tag with cover and no-repeat settings.

Explore how CSS background-clip controls where the background color or image appears by using content box, padding box, and border box within the box model.

Explore applying multiple background images to a single element with CSS3, using comma-separated URLs, and assign distinct positions and no-repeat for corners like top left and bottom right.

Learn how to use CSS3 border-image to apply an image as a border, using border-image-source, border-image-slice, and border-image-repeat with options stretch, repeat, and round.

Learn how to use the picture tag to serve different images for small and large screens, using source elements with media attributes and a fallback img tag.

Explore how to implement audio on a webpage using the HTML5 audio tag with mp3 and ogg sources, browser-based selection, controls, and fallbacks for cross-browser reliability.

Embed video with the HTML5 video tag using multiple source formats (mp4, ogg, webm) so the browser picks the first supported file, with controls and set width and height.

Embed YouTube videos in your webpage by using the iframe generated from YouTube's embed option, then paste it into a div with specified width, height, and frameborder 0.

Create interactive images using the html image map by defining rectangular areas with x1 y1 x2 y2 and circular areas with center x y and radius.

Learn to build tabular data in html using table, tr, td, th, thead, and tbody, with examples like student reports and India states and capitals, plus basic css styling.

Apply a professional look to tables using CSS by leveraging the box model, transitions, and box shadows, with a table container, 100% width, border-collapse, and hover effects.

Apply striped colors to a table by alternating background colors for even and odd rows using CSS selectors like table tr:nth-child(even) and tr:nth-child(odd), improving readability for large tables.

Learn to build a responsive table that uses overflow auto to provide horizontal and vertical scrollbars within a table container, with a min width of 1000px and max height 700px.

Learn how the table caption tag provides a heading for a table and can appear at the top or bottom with css styling.

Master how to merge table cells horizontally with colspan in HTML (td and th), using a total and 29 states example; the lesson also introduces vertical merging with rowspan.

Learn how row span merges table cells vertically in HTML using td and th, and contrast it with col span for horizontal merging, with practical examples spanning two rows.

Use the vertical-align property to position content in table cells, choosing top, middle, bottom, or baseline; apply a class with rowspan and style it in styles.css.