Mastering CSS with Sass & Bootstrap + Interview Questions

Discover html page structure fundamentals, including the doctype html, html, head, and body tags, the title and metadata, and how html5 forms a boilerplate that pairs with css.

Master the paragraph tag in HTML, using p to wrap text and URLs, understand end tags and how spaces and newline characters are collapsed in the browser.

Learn how HTML tags define content as elements, with opening, content, and closing tags; distinguish empty (self-closing) tags like air tag (horizontal rule) and BR, plus meta, link, and img.

Explore HTML attributes and how they define element behavior by applying attributes like style and id, learn how style colors text, and master the syntax of tag name with spaces.

master the div tag as a block element that defines sections and groups elements, and learn how the inline span tag styles specific text without adding line breaks.

Discover how h1 to h6 heading tags structure HTML content, define hierarchy, and highlight topics; compare sizes, and see practical nested examples to choose when to use each tag.

Learn how to create an unordered list in HTML using the ul and li tags, and customize bullets with the type attribute (disk, circle, square, none).

Explore the ordered list tag (ol) to display numbered items, control format with type, and start values, including reverse order. Learn nesting and how ol differs from ul.

Explore how the anchor tag creates hyperlinks with href, linking pages and files, and how target attributes open links in a new window, enabling menus and media links.

Explore how anchor tags use href with a hash to target element IDs, enabling scrolling to page sections, and how an empty hash scrolls to the top.

Master the img tag to display images with src and alt attributes, and optimize with relative paths, width/height, and a clickable link via the anchor tag.

Explains the difference between relative and absolute paths for linking images in html, shows how paths fail in production, and demonstrates using dot and double dot to keep links working.

Explore how the HTML input tag creates text, number, and email fields with placeholders, built-in validation, and simple self-closing syntax for clear user data entry.

Learn to use the input tag to create checkbox and radio options, apply the checked attribute for defaults, and group radios by the same name for gender and married/unmarried examples.

Explore how the HTML select tag creates a dropdown or scrollable list of options, including option groups for frontend and backend, and apply size and disabled attributes.

Compare HTML and XHTML through practical conversion, and learn to follow strict standards with end tags, lowercase elements and attributes, and double-quoted values and self-closing empty tags.

Explore HTML5 semantic tags—address, header, footer, and section—and learn how meaningful tag names boost accessibility and readability for screen readers.

Design web apps to be accessible for all users using semantic HTML, language attributes, and ARIA attributes with semantic tags like button, form, article, and section.

Discover how ARIA attributes add meaningful information to HTML, enabling accessible rich Internet applications for users with disabilities via assistive technologies like screen readers, including labels for buttons and links.

Explore how meta tags in the head guide rendering and search engines, including meta title, description, viewport, and charset (UTF-8) for better SEO.

Install Google Analytics on your website by creating an account, configuring a property and web stream, and placing the tracking code in the head to collect data and gain insights.

Discover how the DOM models a web page as the document object model, accessible via JavaScript or Python, with DOM manipulation through traversal, adding, and removing elements.

CSS, a stylesheet language, makes websites look beautiful by applying color, typography, spacing, borders, backgrounds, and hover effects, with cascading styles enabling varied layouts.

Learn inline styling in HTML using the style attribute, mastering basic CSS syntax, and applying color, text-align, font size, and body background to style elements.

Apply internal styling with the style tag inside the head to style body, h1, p, and a; learn why it reduces inline styling for multiple attributes.

Create a separate styles.css file for styling, and link it to your html with a head link tag using rel=stylesheet to apply external styling.

Explore CSS selectors and learn how the element selector targets HTML elements to apply styling across a page, using examples like h1, div, body, and lists.

Use the class selector to style multiple elements, like paragraphs and headings, by defining a custom class with a dot and applying it via the class attribute.

Explore how the element.class selector targets a single element among many with the same class, while the browser's user agent stylesheet remains unaffected, and div to p narrows the focus.

Master the ID selector to target a unique page element with a hash, ensuring a single id per page, and compare it to the class selector and HTML shorthand.

Learn how to use the group selector to apply the same styling to multiple elements, combining element selectors and class selectors as a timesaver for shared formatting.

Use the universal selector to define global styles with the asterisk. Apply styles when no other styling exists, selecting all elements or specific tags like p, span, and div.

explore how css specificity determines which styles apply, from inline styles to ids, classes, and elements, and learn when to use !important and why it's discouraged.

Use the universal selector to implement a CSS reset that zeros margins and padding, reducing browser default styles and establishing a baseline for consistent forms and inputs.

Explore CSS combinators to relate selectors through descendant, child selector, adjacent sibling, and general sibling relationships, enabling you to style multiple elements and target children without affecting the parent.

Explore the descendant selector, a combinator that targets all elements that are descendants of a parent, enabling precise styling of paragraphs inside a div with class my style.

Learn how the CSS child selector targets only direct children, not descendants, using a div and its paragraphs; use the > syntax to select immediate children such as span.

Master the adjacent selector in CSS, using the plus sign to style elements that immediately follow another, such as paragraphs after a heading, saving time and ensuring consistent styling.

Show how the attribute selector targets elements by attribute values, such as target or ref, and compare it with class and id selectors for precise styling.

Explore the attribute spaced selector with the tilde (~) in CSS to match values separated by whitespace, such as [class~='my class'], and observe how spaces affect selection.

Explore attribute selectors with the caret, matching values prefixed by a given value, using anchor href examples and the direct-child selector for divs.

Explain the attribute selector with a suffixed value, using the dollar sign to match ends-with in class names and links, including an example [href^='C'][href$='.com'], noting case sensitivity.

Explore the attribute contains selector in css, using [name*='G'] and the i flag for case-insensitive matching, then combine child, ends-with $= and contains *= to target links inside a div.

Explore how the pipe in the attribute selector matches exact values or values followed by a hyphen, with practical examples selecting classes that start with test or my.

Discover why CSS pseudo classes are essential, defining special states like hover and focus, and see anchors gain shadow and color on hover via colon syntax.

Learn to select elements by language and text direction using linguistic pseudo-classes, including direction (rtl, ltr, auto) and lang (two-letter codes like fr and en) in CSS.

Explore location pseudo-classes such as a:link, a:visited, and a:target to style hyperlinks and content. Apply colors, backgrounds, and borders to anchors and targeted elements, and remove underlines with text-decoration: none.

Demonstrates how user action pseudo classes trigger hover and focus effects on buttons and links, using box-shadow, inset, and transitions for interactive css.

The active pseudo class activates elements when the user presses the mouse button or spacebar, showing a glow on the button; on links, tab and spacebar may not trigger it.

Explore how the focus pseudo class differs from the active state and activates when users select elements, with examples on buttons, links, and form fields.

Explore the focus-within pseudo class in CSS, learning how a parent element’s focus affects its descendants, with practical form examples and the difference from the focus pseudo class.

Explore the enabled and disabled input pseudo classes in CSS, learn how to style and toggle form fields using the disabled attribute, and see practical examples with a sample form.

Learn to control HTML editability using the readOnly attribute for inputs and the contenteditable attribute for elements like paragraphs and divisions, with practical inline examples.

Learn to use read-only and read-write input pseudo-classes to target fields by their editability, including contenteditable elements, as selectors that don't disrupt layout.

Learn how the input placeholder pseudo class, :placeholder-shown, targets placeholders in input elements and applies CSS properties, changing borders and radii when the placeholder is shown or hidden.

Explore how valid and invalid pseudo-classes style form fields for validation, using pattern and required attributes. See a form with name, email, mobile, and salary, showcasing valid and invalid states.

Learn to use the live preview extension in VS Code to update HTML and CSS output in real time, seeing exact changes as you type.

Explore how the nth-child selector targets elements by index in a list of siblings, including odd, even, integer arguments, offset groupings, and zero-based grid and table examples.

Master the nth-child() selector with complex arguments, learning start positions, end positions, negative values, and end last child to target top and bottom elements.

Discover how pseudo elements style specific parts of an element with double colon notation, enabling content before or after text and targeting first line, while distinguishing them from pseudo classes.

Discover how to style the first line of block level text with the ::first-line pseudo element, including display requirements and property limits.

Discover how the ::first-letter pseudo element styles the first letter of the first line in block-level elements, with practical examples using paragraphs and spans, and how ::first-line can override it.

Illustrate before and after pseudo elements to add content and decorative effects, using the content property, positioning, transforms, and hover-driven nav bar styling.

Explore how the after pseudo element inserts content after an element as the last child, and how before/after help prevent container collapsing with hover, color, transform, and z-index techniques.

Apply the font-family rule as a prioritized, comma-separated list with a fallback to a generic family. Include quotes for multiword names and place the generic at the end.

Load custom fonts with the font-face rule, assign them to a named font-family, and specify formats like true type, embedded-opentype, woff, and woff2 for cross-browser use.

Explore how the CSS font-weight property uses keyword values like bold and normal, numeric values such as 700, 400, and 100, and how font family affects weight and browser rendering.

Learn how the css line-height property controls the distance between lines to improve readability, with unitless values recommended and examples showing multiplication with font size.

Explore the CSS font-style property and its three values—italic, oblique, and normal—through practical class-based examples that compare italic and oblique and demonstrate styling paragraphs.

Learn how the CSS text-transform property controls text case with lower case, uppercase, and capitals, including how capitals behave near numbers, demonstrated with heading and paragraph examples.

Explore how the css font-variant property converts text to small caps, including font-variant caps and titling caps, with practical examples on headings and body text.

Explore the text-decoration shorthand to apply underline, overline, or line-through with color, style, and thickness. Learn to remove decorations, set text underline offset, and use anchor tags for menus.

Use the text-align property to control horizontal text alignment: left, right, center, start, end, and justify. Default is left; start follows the direction, and end follows the direction, unlike right.

Master the CSS text-indent property to add horizontal space before the first line using length, percentage, or negative values, and adjust direction for RTL layouts.

Explore how the css color property sets the foreground color of text and decorations, and apply color to elements using color names, hexadecimal, rgb, or Excel values.

Explore how CSS colors elevate web pages by applying foreground, background, border, text decorations, shadow, and outline colors. Learn different color values like rgb, hexadecimal, and Excel across elements.

Learn how CSS uses rgb values to color elements; understand red, green, and blue channels range 0-255, 24-bit true color, and alpha for opacity, with practical examples.

Learn to represent colors in CSS using hex notation, including six-digit and three-digit shorthand, with examples for red, green, blue, and alpha transparency, plus case rules.

Learn how to define colors in CSS with HSL values, using hue degrees, saturation and lightness percentages, optionally with alpha, and apply them to gradients and shapes.

Master the CSS opacity property to control element transparency from 0 to 1, applying it to images and text and blending with color values.

Learn to create CSS linear gradients with linear-gradient(), control direction via keywords or angles, add color stops, and apply gradients to backgrounds and text.

Master radial gradients in CSS by defining circular or elliptical color gradients with stops, using circle or closest side, and positioning with at to create center-based patterns.

Master css conic gradient, rotating around the element center from 0 to 360 degrees with color stops. Learn to apply a gradient overlay on images using after pseudo-element and mix-blend-mode.

Explore how CSS units vary between absolute and relative types, using examples such as px, 100%, and 3 cm, and learn how each unit relates to parent values or defaults.

Explore the CSS pixel unit, an absolute length unit defined by 1/96 inch. See a div with 50px font, padding, margins, height 200px, width 150px, and border radius 50px.

Explore how point units, derived from typography and 72 points per inch, define font sizes in CSS, contrasting 30px and 30 points, and see padding differences in a practical demo.

Explore how the centimeter unit defines font sizes and spacing in CSS, compare 1.5 cm to 56.7 px, and understand how cm maps to pixels and varies across devices.

Explore the mm absolute unit in CSS, its relation to centimeters and pixels, its printing use, and why it's not suited for screen display, with practical examples and borders.

Explore absolute units in CSS, compare inches and pixels to understand on-screen display accuracy, and perform practical inch-to-pixel conversions for frontend sizing.

Explore absolute units with the Pikka (pica) unit, its one sixth of an inch and equivalence to 16 pixels and 12 points, with a practical CSS demonstration and a chart.

Learn how the em relative unit scales font size and spacing with the parent element, including padding, margins, width, height, and the compounding effect.

Learn how rem uses the root HTML font size, defaulting to 16 px, prevents parent compounding, and can underpin grid systems, with pixel fallbacks for browser compatibility.

Learn how percentage units size text and elements relative to their parent, enabling fluid layouts and flexible images as the browser resizes.

Explore the x unit and x height, defined by the current font, and how font family affects its pixel value, explaining why these relative units are rarely used in frontend.

Discover how the ch (character) unit constrains width by character count, using the zero glyph width in the current font to limit text and paragraph lines.

explore how the vw viewport width unit sizes elements by the browser window, where 1vw equals 1% of viewport width, and unlike percentages, vw is independent of parent elements.

Explore relative units in CSS, focusing on viewport height (vh) and how it compares to percentage heights, with practical examples using headings, body and HTML elements, including margin calculations.

Explore how vmin and vmax derive from the viewport's minimum and maximum dimensions and how they compare to vh and vw, with responsive font sizing as the window resizes.

Explore angle measurement units in CSS, including deg, grad, rad, and turn, with their directions and conversions, and learn how they apply to animation, transform, and gradient properties.

Learn how to use seconds and milliseconds in css for transitions and animations, with durations like 1000 ms, formatted as a number followed by s or ms, and positive values.

Explore advanced CSS concepts to master element positioning with page layout techniques, including margins, padding, borders, floats, Flexbox, grid, and display, enabling responsive, fixed, and fluid layouts.

Explore the CSS box model, where every element is a box with content, padding, border, and margin. Use dev tools to visualize how these properties shape layout.

Apply borders to elements using border style, width, color, and the shorthand border property. Learn per-side borders and border radius to soften edges.

Explore how padding creates space between an element's border and its content, shown with a division and h1. Learn top-right-bottom-left shorthand and that percentage padding relates to the parent width.

Explore how margins create space outside an element's border, using shorthand values for top, right, bottom, and left, and how auto centers horizontally when a width is set.

Explore how vertical margins collapse between block elements, and how to manage them with flexbox, grid, or padding. Understand how negative margins pull elements and which margin dominates.

Master the float property to create flexible layouts, wrap text around floated elements, and build photo galleries and horizontal menus using values like left, right, none, initial, and inherit.

Learn how the clear property restores the normal document flow after floating elements, with values right, left, both, none, and inherit, and how to prevent overlaps in css layouts.

Learn why floated elements collapse a parent's height and apply fixes such as floating the parent, setting height, inserting a clear element, or using overflow hidden.

Learn how the clearfix technique prevents container collapsing by clearing floats with the after pseudo element, a hidden content block, and display: block.

Explore building a three-column float-based layout with a header and article containing first, second, and third columns. Float the columns left, clear the footer, and adjust widths to create gaps.

The display property defines how elements render as block, inline, or inline-block, compares display none with visibility hidden, and notes inline width/height behavior and other values.

Compare fixed, fluid, and responsive layouts in web design and assess usability trade-offs. Learn how percentage and viewport units, plus media queries, enable adaptive layouts across devices.

Master grid layouts in CSS by turning a container into a grid and defining rows, columns, and gaps with grid template columns, grid template rows, and the repeat function.

Demonstrate spanning grid items across columns and rows using grid-column, grid-row, and the span keyword. Explore nested grids and practical layouts for building web layouts.

Explore flexbox, a one-dimensional layout model with a flex container and items that control positioning, size, and order along the main and cross axes for responsive designs.

Explore flex container properties such as justify-content, align-items, flex-direction, and wrap, with flex-flow shorthand. Learn how to enable a flexbox with display:flex and align items on main and cross axes.

Master flex item behavior by applying align-self and align-items, using flex basis, auto, and content to size, then control growth, shrink, and order for responsive card layouts.

Explore how flex-grow distributes the remaining space among items by using their flex-grow values, calculating the available space and adding the result to each item's width.

Master responsive design by using media queries to target screens and devices with specific types, breakpoints, and conditions, applying CSS rules based on viewport width, height, and orientation.

Apply media queries to optimize mobile layouts by setting a 450px breakpoint and hiding heavy resources like images on small screens. Hide images under 450px to save memory.

Target all devices using the all media type and media queries to create responsive, centered menu and headings, with flex menus, cleaned list styling, and responsive font sizes.

Target devices with media type screen to build desktop two-column grids. Switch to a column layout on mobile using a main container and styled columns.

Learn to apply the css print media query to tailor page styles for printing, adjusting color and font size. Understand the differences between media screen and media print.

Learn to build a responsive signup form using media queries and breakpoints at 900px and 600px, transitioning from four-column to two-column to single-column layouts.

Explore 2D and 3D CSS transforms and animations to decorate and optimize visuals with CSS3. Learn to manipulate x, y, and z axes for transforming elements in modern browsers.

Discover how CSS transform property uses translate, translate X, translate Y, and translate 3D to reposition elements in 2D or 3D space, including perspective to create depth and manage element stacking.

Explain how the transform rotate function rotates elements in 2d space clockwise and shows rotate x, rotate y, rotate z, and rotate 3d, using degrees, radians, and negative values.

Build a 3d cube with front and back faces; rotate the back by -90 degrees, translate along z, then hover to rotate 90 degrees and reveal the backside with perspective.

Explore how the CSS scale() function resizes elements in 2D and 3D, using scaleX, scaleY, and scale3D to transform size and flip elements with negative values.

Master CSS skew transformations by applying the skew() function to images, adjusting x and y angles, and using the shorthand to control one or two values.

Apply the css skew and rotate effects to a span-wrapped heading, center it with grid and 100vh minimum height, and experiment with hover, letter-spacing, and transitions for skewed designs.

Explore the matrix() and matrix3d() functions for 2d and 3d transforms, combining rotate, scale, translate, and skew into a single matrix with up to six and sixteen parameters.

Create a 3d card flip design using transform methods with bootstrap logos, implementing front and back faces, a block element modifier naming convention, and smooth hover transitions.