Fullstack web development : CSS JavaScript and PHP Mastery

Learn to write inline css using the style attribute to apply color and text alignment to specific elements, such as h1 and paragraph tags, in the browser.

Explore internal css by placing style tags inside the head and applying styles to the body and h1, and understand how this enables reuse across the page over inline styles.

Learn to link an external css file with a link tag, create a main.css, and apply styles sitewide to save time and enable easy global design changes.

Apply CSS classes to style paragraphs by setting color and font weight. Reuse a single class across multiple elements to beautify pages and understand how classes enable consistent styling.

Master how to use css ids to style specific elements by applying id attributes to divs and paragraphs, then customize color, background, padding, and spacing with id selectors.

Learn to apply colors to HTML elements with inline and internal styles, set background colors like tomato and slate blue, and use color codes and color wheels to craft palettes.

Apply background colors with opacity in CSS, using body and paragraph elements, and experiment with opacity values such as 0.6 and 0.1 to control lightness.

Learn how the float property moves images and text, with left, right, none, or inherit values, and see how text wraps within a paragraph.

Explore how the css position property controls element layout using top, bottom, left, and right, and learn static, relative, fixed, absolute, and sticky positioning.

Learn to set and customize margins around elements using per-side properties (top, right, bottom, left), with auto, length, and percentage values, including inherited behavior.

Explore how padding creates inner space inside a box, using top, right, bottom, and left values with lengths and percentages, and compare it with margins to control text and layout.

Explore borders in CSS by applying the border-style property to boxes, experimenting with solid, dashed, dotted, double, groove, and ridge styles, including outside and none states.

Explore how to style text using font style properties to apply normal, italic, and bold effects, and learn to create classes for consistent text formatting across paragraphs.

Explore text alignments using the text-align property to center, left, and right align headings and paragraphs on web pages.

Learn CSS styling for links by creating simple anchors and applying color and state changes for default, hover, visited, and active links, including target attributes for new tabs.

Learn how to apply font-family in CSS to style text with serif, sans-serif, and monospace fonts, using classes and fallback fonts for consistent web typography.

Explore how to style text with font size, font family, and font weight in CSS, including applying classes to produce normal, bold, and italic text.

Learn to integrate Google fonts into a web page by linking a stylesheet in the head, choosing a font family like Tangerine, and applying it to the body with CSS.

Explore the CSS box model, including content, padding, border, and margins, and learn how to create and style boxes for layout and design in web pages.

Learn to apply icons using Font Awesome via CDN links or local downloads, using class-based icons and simple styling to adjust size and color, including heart, cloud, and address card.

Learn to build and beautify HTML tables by creating rows and columns, applying borders, padding, fonts, colors, hover effects, and responsive styling.

Learn to build a navigation bar with an unordered list of links (home, about, products, contact) and style it with CSS for beautification, alignment, and an active state.

Learn to build and style dropdowns with hover effects, including a button, dropdown content, and country list, using CSS for positioning, colors, shadows, and accessible interactions.

Learn advanced CSS selectors by applying class selectors, universal selectors, and tag grouping to style headings and paragraphs with center alignment and colors across the page.

Design responsive two-column forms with labels and text inputs using container, row, and column layouts, then apply border-box, border radius, padding, background color, and inline-block styling.

Learn to design a complete website layout with a header, top navigation, content area, and footer, featuring a responsive three-column grid and practical CSS techniques.

Discover how to use CSS border-radius to create rounded corners on paragraphs, inputs, and controls, and experiment with different radii and classes for beautification of your website.

Explore color keywords in CSS to create transparent and light green backgrounds, borders, and padding. See how transparent colors and background images enhance boxes and text for engaging web layouts.

Learn to create CSS animations using keyframes to smoothly transition a box through colors and positions. Apply properties like duration, animation-iteration-count, and relative positioning to build engaging, JavaScript-free effects.

Learn how to use CSS pseudo classes to style anchor elements and hover effects, with simple examples showing independent classes and practical applications.

Explore how gradients create smooth color transitions and apply linear gradients to boxes, text, and backgrounds, using left-to-right color stops such as red and yellow.

Apply CSS text-shadow to headings and text elements, adjusting color, offset, and blur to create shadow effects on h1, h2, and other tags.

This lecture demonstrates using the css calc() function to create a responsive, absolute positioned box with centering, padding, a deep sky blue background, and centered text.

Learn to create a responsive page using the viewport meta tag in HTML, so the layout adapts to device widths and screen sizes with initial-scale settings.

Learn to style web buttons using a CSS button class, covering button types (button, link button, input button), and applying background color, padding, alignment, display, font size, and cursor.

Implement pagination by creating numbered page links and left-right navigation, apply active states and hover effects with css, and test page transitions.

Define multi-column layouts for paragraphs using CSS properties like column-count, column-gap, column-rule, and column-width to create newspaper-style text with adjustable widths and spacing.

Learn to create image reflections in CSS by applying a reflection effect to an image tag, using values like right or below with an offset, demonstrated on an apple image.

Explore the differences between ui and ux design and learn how a designer translates requirements into a look‑and‑feel, prototypes, and tests that guide color, icons, typography, and layout.

Learn to integrate social media icons into a webpage using open source resources and font awesome, and apply consistent styling with background colors, white text, and hover effects.

Learn how to add external CSS by linking an external stylesheet to your main HTML file, apply styles to elements like h1 and body, and preview changes across devices.

Understand what JavaScript is, a lightweight scripting language powering interactive client and server side features, with interpreted versus compiled execution and just-in-time optimization in the browser.

Learn to build a basic hello world program in JavaScript by creating a project folder, an index.html file, and updating a paragraph with document.getElementById('demo').innerHTML.

Learn four ways to get output in JavaScript: document.write, document.writeln, window.alert, and console.log, demonstrated with arithmetic examples and using browser developer tools (F12) to view console output.

Learn how to write internal JavaScript inside the head, use script tags and addEventListener to create dynamic paragraphs on button clicks, manipulating the DOM with createElement and appendChild.

Learn how to move JavaScript to an external file, include it with a script tag using src and defer, and interact with the DOM to create dynamic paragraphs.

Learn how to implement inline JavaScript by moving code into a script tag inside the body, distinguishing internal, external, and inline approaches, with basic troubleshooting.

Explore how to load external JavaScript files with async and defer to prevent blocking page rendering, control execution order, and manage dom readiness for dependent scripts.

Learn to declare and use variables in JavaScript with let and const, assign values with the equals operator, and distinguish mutable versus constant variables in browser code.

Explore JavaScript data types, including strings, numbers, booleans, arrays, and objects, with string literals in single or double quotes and practice variable declaration with let.

Learn about numbers as a data type, including decimals and arithmetic operators like plus, minus, multiply, and divide, and how quotes convert numbers to strings.

Explore strings in JavaScript, including single or double quotes, concatenation with plus, and building first and last names, then validate input using string length and a minimum three digits.

Master string formatting in JavaScript for fullstack web development by concatenating first name, last name, and pin code, then displaying the result in the browser.

Learn arithmetic operators in JavaScript, including plus, minus, multiplication, division, and increment/decrement, with pre and post increment and the power operator.

Master assignment operators in fullstack web development: assign values to variables using =, and update them with +=, -=, *=, and /= to modify existing data.

Master JavaScript comparison operators, including equal and not equal, less than, greater than, and their type-sensitive behavior, testing numbers and strings to drive decisions in code.

Learn how JavaScript logical operators and, or, and not combine conditions, compare values, and produce true or false results through practical examples.

Implement if-else logic to map a dynamic message based on time input, with variable definitions, condition checks, and output mapping for good day, good evening, or a default message.

Learn if-else-if logic to handle multi-condition decisions, displaying messages like good morning, good day, or good evening, and prep for switch cases.