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.

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.

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 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.

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.

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.

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 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.

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.

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 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.

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.

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 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.

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.

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.

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

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

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.

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.