Instead of installing $your-framework-autosuggest, try out datalist in your next project. Datalist is the browsers built-in way of showing a list of options as a user types into an input.

<input list="frameworks" />

<datalist id="frameworks">
  <option>Bootstrap</option>
  <option>Tailwind CSS</option>
  <option>Foundation</option>
  <option>Bulma</option>
  <option>Skeleton</option>
</datalist>

To use it, you add a datalist element with an ID and a set of options to your HTML. Don't worry, the element won't be visible. Then you use the list attribute on an input to associate the two.

As a user now types into the input, the browser will show the datalist as a dropdown, automatically filtering the options as the user types. Because it's a regular input though, users still have the option to type in their own value. Lastly, they can see all of the options by selecting the input and using the arrow keys to navigate the list, or clicking the dropdown icon the browser adds.

    <table class=”events-table” >
    <caption>Évènements</caption>
    <thead>
    <tr>
    <th class=”event-date”>Date</th>
    <th class=”event-time”>Horaire</th>
    <th class=”event-description”>Evènement</th>
    </tr>
    </thead>

    <tbody>
    <tr>
    <td data-label=”Date”> Le #_EVENTDATES</td>
    <td data-label=”Horaire”>#_EVENTTIMES</td>
    <td data-label=”Evènement”>#_EVENTLINK</td>
    </tr>
    </tbody>
    </table>

Je pense à ajouter un “data-label” à chacun de mes “td”.

Et voici le CSS :

table caption {
    display: none;
}

@media all and (max-width:500px){
    table{
        width:100%;
    }

    table caption {
        display: block;
        background-color: #484d55;
        color:white;
    }

    .table thead {
    display: none;
    }

    .table tr{
    display: block;
    margin-bottom: 40px;
    }

    .table td {
    display: block;
    text-align: right;
    }

    .table td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    }
}

Ajouter un mot de passe à n'importe quelle url.

Des onglets en css pur.

Il m'en manque 4...

    a
    html
    body
    head
    footer
    div
    span
    p
    article
    dd
    dt
    th
    thead
    tbody
    td
    caption
    h1
    h2
    h3
    h4
    h5
    h6
    ul
    li
    ol
    meta
    link
    style
    script
    b
    u
    small
    i
    aside
    video
    object
    iframe
    audio
    svg
    details
    summary
    dialog
    data
    base
    meter
    progress
    nav
    label
    form
    input
    textarea
    fieldset
    button
    pre
    code
    section
    time
    img
    blockquote
    strong
    title
    br
    template
    main
    em
    dl
    datalist
    option
    del
    optgroup
    select
    embed
    output
    canvas
    source
    track
    col
    tfoot
    table
    tr
    q
    cite
    abbr
    address
    sup
    sub
    var
    kbd
    samp
    hr
    noscript
    s
    map
    figure
    figcaption
    ins
    dfn
    bdi
    bdo
    mark
    rb
    rp
    rt
    ruby
    wbr
    area
    param
   hgroup
   picture
   slot
   math

Pour remplacer les puces par des images (ou changer le style de la puce), il faut placer la règle css dans la balise ul, sinon, dans la balise  <style type="text/css">, ça ne fonctionne pas.

Extremely short version

Instead of serving dozens of icons, all you need is just five icons and one JSON file.

In your HTML, for the browser:

<link rel="icon" href="/favicon.ico" /><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any" />
<link rel="apple-touch-icon" href="/apple.png" /><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest" />

And in your web app manifest:

// manifest.webmanifest
{
"icons": [
{ "src": "/192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/512.png", "type": "image/png", "sizes": "512x512" }
]
}

Pour réaliser des présentations simples mais propres en markdown.

Intéressant car souvent Zeal plante avec les docs MDN

Autant le design est pas mal, autant faire appel à docker, jquery et consort pour une simple page html, c'est un peu abusé je trouve.