Semaine 2 – Mon premier site interactif responsive

Apprendre à apprendre

• Répétition espacée: Anki
• Annotations: Zotero avec Zotero Connector, hypothes.is

HTML 2

• Ressources
  • Cours: Structuring content with HTML
  • Cheatsheets: MDN Cheatsheet, Quickref cheatsheet, Code with Harry Cheatsheet
  • Référence: MDN elements reference, HTML living spec
  • Validator
• Basic HTML Syntax: element, tags, content, attributes
• head section: title, meta viewport, description (for search engines), Open Graph, favicons, CSS, javascript
• Headings and paragraph elements: h1, h2, h3, h4, h5, h6, p
• Text tags: em, strong, avoid i, u, b
• Lists: ul (unordered list), ol (ordered list)
• Other text features: quotations, abbreviations, addresses, times, superscript, subscript
• Document structure with semantic elements: main, section, article, header, nav, footer
• Non semantic elements: div, span and their use with the class attribute
• Other elements: br, hr
• Links: a
• URLs and paths: absolute URL (starts with /), relative URL (relative from .html file address), document fragments (id attribute and # in URL), same directory (./file-in-same-directory), subdirectory (subdirectory/file), parent directory (../file-in-parent-directory).
• Images: img, responsive images, image guide. Modern formats: webp for raster and SVG for vector images.
• Media: Video & audio. User interaction is needed to play, unless muted.
• Tables
• Forms

Exercice

Actuellement, vos liens personnels pointent directement vers votre fichier index.html.
Exemple : https://lab.tiborudvari.com/students/clement.bonnard/

Déplacez votre index.html actuel dans un nouveau dossier nommé week1.
Créez ensuite un dossier week2 contenant un nouveau fichier index.html.

Enfin, créez une page d’accueil (landing page) uniquement en HTML à la racine de votre dossier.
Cette page doit contenir une liste non ordonnée (<ul>) avec des liens vers week1 et week2, suivant la même structure que celle du cours.

Structure selon l'adresse :

students/
└── prénom.nom/
    ├── index.html       ← page d’accueil avec les liens vers les semaines
    ├── week1/
    │   └── index.html   ← votre premier rendu
    └── week2/
        └── index.html   ← votre deuxième rendu
  

CSS

• Ressources:
  • Cours: CSS Styling Basics
  • Cheatsheet: Quickref cheatsheet
  • Reference: MDN Reference, W3C CSS Snapshot
  • Validator
• Syntax basics: selector, declaration, property, value
• Loading CSS: External Stylesheet, Internal stylesheets, Inline styles
• Commone selectors: elements (elementType), classes (.className), id (#idName)
• Combinators: descendant (li em), next sibling
• State based pseudoclass selectors: a:link , a:visited, a:hover
• Combining selectors and combinators
• CSS Syntax features: functions (calc, transform), rules (media queries), shorthand properties, comments
• Basic selectors: type selectors, class selectors, classes on particular elements, multiple classes, id selectors, selector lists, universal selector, first child
• Attribute selectors
• Pseudo classes: (:first-child, user action pseudo-classes :hover, :focus, etc) and Pseudo elements (::first-line, ::selection)
• Generated content: ::before, ::after
• Combinators: descendent, child, next-sibling, subsequent sibling etc.
• Box model:
  • block and inline and inline-block
• Parts of a box: content, padding, border, margin
• Box-sizig: content, border-box
• Cascade (ce qui vient a la fin fait fois), specificity (plus spéficique est plus important), inheritance and important flag
• Values and units:
  • Absolute length units: px, relative length units: rem, vw, vh
  • Percentages: 20% width is 20% width property of container, 20% font size is 20% font size of container
  • Numbers: opacity: 0.2;
  • Colors: red, #FF0000, rgb(2 121 139), rgb(2 121 139 / 0.3), hsl(188 97% 28%)
  • Images: url("image.png"), linear-gradient, etc
  • Position: top, left, bottom, right, center
  • Math functions: calc(20% + 100px)
• Sizing:
  • Natural (intrinsic) vs extrensic
  • Percentages on margin and padding are according to parent width
  • min-width, min-height, max-width, max-height
  • vw and vh
• Backgrounds and borders
• Overflow
• Sizing images with object-fit
• Styling tables
• Debugging CSS
• Styling text:
  • color
  • font-family: sans-serif, monospace, serif
  • Load custom font with @font-face, use woff2 format, example
  • font-size: 1rem; (1rem = 16px)
  • font-style: normal, italic, oblique
  • font-weight: normal, bold, lighter, bolder, 100, 200, 300, 400, 500, 600, 700, 800, 900
  • text-transform: none, uppercase, lowercase, capitalize, full-width
  • text-decoration: none, underline, overline, line-through
  • text-align: left, right, center, justify
  • line-height: 1.2;
  • letter-spacing, word-spacing
  • Other properties

CSS Layout

• Positions: static, relative, absolute, fixed, sticky
• z-index
• Flexbox
  • CSS tricks guide, flexbox froggy
  • flex-direction: column, row, row-reverse, column-reverse;
  • flex-wrap: wrap;
  • On children: flex: 1;
  • flex-grow, flex-shrink, flex-basis
  • aligns-items, justify-content
• Grid
• Responsive web design:
  • Media Queries, Media Queries Guide

Ligne de commande

• A savoir: arrow keys, tab autocompletion
• New tools: imagemagick, ffmpeg

Pour la prochaine fois

• Dans le dossier de la deuxième semaine, créez une page portfolio adapté pour un layout mobile contenant les éléments suivants :
  • Votre nom
  • Une courte bio
  • Une image représentative (optionnelle)
  • Une grille de projets responsive comprenant :
    • Une image ou une vidéo en boucle
    • Un titre
    • Une brève description
    • Des liens vers des sous-pages
  • Une navigation fixe et responsive (par exemple, un simple lien avec votre nom)
  • Des pages projets minimales :
    • Titre
    • Sous-titre (optionnel)
    • Courte description
    • Image (optionnelle)
    • Grille d’images (optionnelle)
  • Formats: WebP pour les images, WOFF2 pour la typographie