- +91-9602880219, +91-8104464971, +91-7852071653
- info@regexsoftware.com
Menu
Frontend (HTML, CSS, Bootstrap, Tellwind Css )
Answer:- HTML (HyperText Markup Language) is the standard
Answer:- HTML elements are building blocks of an HTML page,consisting of a start tag, content, and an end tag (e.g., <p>Hello</p>).
Answer:- XHTML (Extensible HTML) is stricter in syntax and follows XML rules, while HTML is more flexible.
Answer:-Semantic elements (e.g., <header>, <article>, <section>) describe the content meaningfully.
Answer:- It provides metadata such as character encoding, viewport settings, and SEO information.
Answer:- Block elements (<div>, <p>) take full width, while inline elements (<span>, <a>) take only as much space as needed.
Answer:- It embeds another webpage inside the current page.
Answer:-Elements that don’t need a closing tag (e.g., <img>, <br>, <input>).
Answer:- Using
,,
, and elements. |
Answer:- <strong> has semantic importance (indicates importance), whereas <b> only makes text bold.
Answer:- <!– This is a comment –>
Answer:- HTML forms allow user input using elements like <input>, <textarea>, <select>, and <button>.
Answer:- It associates text with an input field for better accessibility.
Answer:- CSS (Cascading Style Sheets) is used to style and layout web pages.
Answer:- Inline, Internal, and External CSS.
Answer:-
Answer:-
Answer:- id is unique (#id), while class can be reused (.class).
Answer:- A layout model that makes it easy to align and distribute items in a container.
Answer:- Special selectors that define a special state (e.g., :hover, :focus, :nth-child).
Answer:- It controls the stack order of elements.
Answer:- Elements that style specific parts (::before, ::after).
,,
, and elements. |
Answer:- display: flex; justify-content: center; align-items: center;
Answer:- Grid is two-dimensional, while Flexbox is one-dimensional.
Answer:- @media (max-width: 768px) { CSS code }
Answer:- A CSS framework for building responsive websites.
Answer:- Fixed-width (.container) and full-width (.container-fluid) layout wrappers.
Answer:- Uses a 12-column layout with classes like .col-6.
Answer:- btn-primary is the main button color, while btn-secondary is a less prominent one.
Answer:- Using .navbar, .navbar-toggler, and .collapse classes.
Answer:- To display flexible and extensible content containers.
Answer:- .m-3, .p-3 (margin and padding).
Answer:- Using the .img-fluid class.
Answer:- A large box for hero messages, now deprecated in Bootstrap 5.
Answer:- Using the .modal class.
Answer:- d-flex is for flexbox, d-grid is for grid layout.
Answer:- Using .table-responsive.
Answer:- A utility-first CSS framework for rapid UI development.
Answer:- text-red-500, text-blue-600, etc.
Answer:- Enables Flexbox layout (flex, flex-row, flex-col).
Answer:- Using p-4, px-2, py-3.
Answer:- grid, grid-cols-3.
Answer:- fixed top-0 w-full.
Answer:- flex justify-center items-center.
Answer:- hover:bg-blue-500.
Answer:- A responsive wrapper with max width.
Answer:- hidden.
Answer:- shadow-lg, shadow-md.
Answer:- Sets width to 100%.
Answer:- rounded-full.
.
Answer:- <section> is for grouping content, while <article> represents self-contained content like blog posts.
Answer:- Custom attributes starting with data- used to store extra information (e.g., <div data-id=”123″></div>).
.
Answer:- The loading=”lazy” attribute on images delays loading until they are visible in the viewport.
Answer:- Using semantic elements, alt attributes for images, ARIA roles, and keyboard navigability.
Answer:- It stores HTML content that is not rendered until used via JavaScript.
Answer:- Web applications that provide a native app-like experience.
Answer:- <noscript> provides fallback content when JavaScript is disabled.
Answer:- It allows defining multiple image sources for different screen sizes.
Answer:- They provide structured data to improve SEO.
Answer:- Using the <meta name=”viewport”> tag, media queries, and responsive frameworks.
Answer:- <svg> is vector-based, <canvas> is pixel-based.
Answer:- It provides predefined autocomplete options for <input>.
Answer: contenteditable=”true” makes an element editable.
Answer:- nth-child() targets based on position among all siblings, while nth-of-type() selects based on type
Answer:- They set constraints on how small or large an element can be.
Answer:- It smoothly animates changes in properties (e.g., transition: all 0.3s ease-in-out;).
Answer:- Using @keyframes and the animation property.
Answer:- Custom properties declared using –varname (e.g., –main-color: red;).
Answer:- Using background: url(img1.png), url(img2.png);.
Answer:-
Answer:- Effects applied to elements (filter: blur(5px);).
Answer:- It creates custom shapes (e.g., clip-path: circle(50%);).
Answer:- It optimizes elements that will change frequently.
Answer:-
Answer:- Using position: sticky;.
Answer:- Bootstrap uses breakpoints like sm, md, lg, xl, xxl.
Answer:- Columns stack vertically by default.
Answer:- 16px.
Answer:- Classes like d-flex, justify-content-between.
Answer:- Using sticky-top or fixed-top.
Answer:- m-4 (margin), p-2 (padding).
Answer:- Using .img-fluid.
Answer:- A pop-up dialog created using .modal.
Answer:- Non-blocking notifications.
Answer:- Uses .carousel class with .carousel-item.
Answer:- A collapsible panel using .accordion.
Answer:- .bg-dark, .text-light.
Answer:- Tailwind provides utility classes, making it highly customizable.
Answer:- Just-In-Time compiler optimizes styles dynamically.
Answer:-Using w-full sm:w-1/2.
Answer:- flex, flex-wrap, items-center.
Answer:- hover:bg-red-500.
Answer:- Adds styles for headings and paragraphs
Answer:- .container mx-auto.
Answer:- Controls spacing between flex/grid items (gap-4).
Answer:- Using shadow-lg p-4 rounded-lg.
Answer:- aspect-w-16 aspect-h-9.
Answer:- Controls transparency (opacity-50).
Answer:- sticky top-0.
Answer:- Shadow DOM provides encapsulation for HTML, CSS, and JavaScript within a component, preventing styles from
Answer:- A set of technologies (Custom Elements, Shadow DOM, and HTML Templates) for creating reusable UI components in HTML.
Answer:- It allows content to be inserted into a Web Component at a designated location.
Answer:- A technology that enables a server to push updates to the client using a persistent HTTP connection.
Answer:- Use semantic tags (<article>, <header>), proper heading structure, meta tags, alt attributes, and structured data (schema.org).
Answer:- A script that replicates newer HTML5 features in older browsers.
Answer:- It adds security restrictions to prevent malicious scripts from running inside the iframe. provides fallback content when JavaScript is disabled.
Answer:- WebSockets provide a persistent, bidirectional communication channel between the client and server
Answer:- data-* attributes store custom data, while ARIA attributes improve accessibility for assistive technologies.
Answer:- It creates a modal-like dialog that can be opened and closed natively with JavaScript.
Answer:-The <link rel=”preload”> tag loads critical resources (e.g., fonts, images) early to improve performance
Answer:- <picture> provides multiple source options for responsive images, whereas <img> is a single static image.
Answer:- They inform the browser whether a request was successful (200 OK), redirected (301 Moved Permanently), or failed (404 Not Found).
Answer:- subgrid allows child elements to inherit and align with the parent grid layout.
Answer:-
Answer:- It applies visual effects (e.g., blur(), grayscale()) to elements behind a target element.
Answer:- A property that maintains the width-to-height ratio of an element.
Answer:-
Answer:- Using ::after, position: absolute;, and opacity: 0; with hover for visibility.
Answer:- It aligns elements within a scrollable container based on predefined positions (scroll-snap-type, scroll-snap-align).
Answer:- It defines how an element’s colors blend with the background.
Answer:- A feature allowing styles to be based on an element’s size rather than the viewport.
Answer:- Houdini APIs give developers more control over the browser’s CSS rendering pipeline.
Answer:- It allows selecting elements that contain specific children (e.g., div:has(img)).
Answer:- Minify CSS, remove unused styles, use efficient selectors, and limit reflows and repaints.
Answer:- The container class adjusts its max width based on the viewport size.
Answer:- It hides content visually but keeps it accessible to screen readers.
Answer:- Using d-flex align-items-stretch.
Answer:- It creates floating labels for input fields.
Answer:- A hidden sidebar menu that slides in when activated.
Answer:- They define grid gaps (g-3 for a 1rem gap).
Answer:- It changes the order of flex items (order-1, order-2).
Answer:- Using .toast with .toast-body.
Answer:- It maintains a fixed aspect ratio for responsive embeds.
Answer:- It styles loading placeholders (placeholder-wave, placeholder-glow).
Answer:- A collapsible content panel system.
Answer:-Using aria-labelledby and aria-hidden attributes.
Answer:- A compiler that generates CSS dynamically as needed.
Answer:- By adding dark: prefix (dark:bg-gray-900).
Answer:- It allows using custom values (w-[450px]).
Answer:- Using breakpoint prefixes (sm:, md:, lg:).
Answer:- It allows styling child elements based on a parent state (group-hover).
Answer:- Using animate-bounce, animate-spin.
Answer:- It allows applying multiple utilities in CSS files
Answer:- It allows sibling elements to react to an input state.
Answer:- Using tailwind.config.js.
Answer:- w sets exact width, max-w sets maximum width.
Answer:- aspect-w-16 aspect-h-9 maintains proportions.
Answer:- Using PurgeCSS to remove unused styles.
For Webinar Videos and Demo Session, Join our Youtube Channel