Ads by adsterra

5 More HTML Tricks For You

  1. CSS Grid Layout

    Utilize the CSS Grid Layout to create complex and responsive grid-based layouts. Define the grid container and its items using CSS. Here's an example:

      .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
    <div class="grid-container">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
  2. Custom Fonts

    Embed custom fonts in your web page using the @font-face rule. You can include font files (e.g., .woff, .ttf) and define their usage in your CSS. Here's an example:

      @font-face {
        font-family: 'CustomFont';
        src: url('custom-font.woff') format('woff');
      body {
        font-family: 'CustomFont', sans-serif;
  3. Tooltips

    Add informative tooltips to elements on your page using the title attribute. When users hover over an element, a tooltip with the specified text will be displayed. Here's an example:

    <p title="This is a tooltip">Hover over me!</p>
  4. Video Background

    Set a video as the background of a section on your webpage to create an engaging visual effect. Use the <video> element with the autoplay and loop attributes. Here's an example:

      #video-section {
        position: relative;
        height: 100vh;
        overflow: hidden;
      #video-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    <div id="video-section">
      <video id="video-background" autoplay loop>
        <source src="video.mp4" type="video/mp4">
  5. Progress Bar

    Display a progress bar to show the completion status of a task or process. Use the <progress> element and specify the value and max attributes to indicate the progress. Here's an example:

    <progress value="50" max="100">

    Feel free to incorporate these HTML tricks into your web projects and customize them according to your needs.

    html html tricks web development
Newer Post Older Post Home

Popular Posts