#UITrend

#Day19 : Issue Tracker

Online demo :
https://teotimepacreau.github.io/Issue-Tracker-Day19-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Issue-Tracker-Day19-Of-100DaysOfCode

Project Goals :
- textArea length Checker with .length string property
- localStorage
- status updater is possible with a button that updates the JSON

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS #DailyUI

an issue tracker website showcase. User can add a new issue with several details. On submit a popover appear with issue details. User can set status of the issue to closed

Téotime Pacreau

1 month ago

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day18 : Github profile insights

Tuto by the great @cferdinandi

Online demo :
https://teotimepacreau.github.io/My-Github-Insights-Day18-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/My-Github-Insights-Day18-of-100DaysOfCode

Project Goals :
- handle multiple API endpoints chaining promises method
- array destructuring, .map(), .join()

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS

Téotime Pacreau

1 month ago

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day17 : List Randomizer

Tuto by the great @cferdinandi

Online demo :
https://teotimepacreau.github.io/Grocery-List-Randomizer-Day17-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Grocery-List-Randomizer-Day17-of-100DaysOfCode

Project Goals :
- FormData JS object
- users can add item, select a random item and see a toast notification
- localStorage

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS

a to-do list website showcase.
users can add item, select a random item and see a toast notification
when reloading items stay thanks to localStorage function, a clear function enable to clear items if wanted

Téotime Pacreau

1 month ago

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day16 : DynamicTable Of Contents

Tuto by the great @cferdinandi

Online demo :
https://teotimepacreau.github.io/Dynamic-Table-of-content-Day16-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Table-of-content-Day16-Of-100DaysOfCode/blob/main/README.md

Project Goals :
- dynamic TOC by retrieving h2 ID's and then set anchor link
- Missing IDS are intentionnally set in
- User generate title

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment

website showcase of a pirate story. TOC, and user generated title function can be seen

Téotime Pacreau

1 month ago

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day15 : Popover API and Anchor Positionning

Tuto by the great @jhey

Online demo :
https://teotimepacreau.github.io/Popover-API-and-Anchor-Positioning-Day15-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Popover-API-and-Anchor-Positioning-Day15-of-100DaysOfCode

Project goals :
- Popover API
- Anchor positioning to avoid position absolute
- Best UI practices for dropdown

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #Front #Components

a website showcase featuring a card. Card is composed with Currents Tame Impala cover art and a dropdown menu opening from the right. Component is made of tints and shades of brown

Téotime Pacreau

2 months ago

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day14 : Interactive Form

Online demo :
https://teotimepacreau.github.io/Interactive-Form-Day-14-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Interactive-Form-Day-14-of-100DaysOfCode/blob/main/README.md

Project goals :
- learning input, forms and radio buttons UI best practices
- form validation, error alerts, password visibility
- checking for best practices to control email, passwords

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode

a form webpage showcase : on the left an astronaut walking in the desert. On the right several inputs : a plan chooser, adress and account info are required. Error message display if problems

Téotime Pacreau

2 months ago

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day13 : Sliding Menu and Grid App View

Online demo :
https://teotimepacreau.github.io/Sliding-menu-and-grip-app-view-Day13-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Sliding-menu-and-grip-app-view-Day13-Of-100DaysOfCode

Project goals :
- lch() color function
- button alignment with ::before technique (vertical-align: middle) and UI principles of 2ex padding-inline for 1ex padding-block

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode

sliding menu website showcase. A grid app view with tinted colors. When you click on the bars icon it opens a sliding-menu coming from the right with an opacity and moving effect

Téotime Pacreau

2 months ago

#100DaysOfCode : #HTML #CSS

#Day12 : Card Hover Reveal

Online demo :
https://teotimepacreau.github.io/Card-Hover-Reveal-Day12-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Card-Hover-Reveal-Day12-Of-100DaysOfCode

Project goals :
- div overlay up to 100% on hover with transition cubic-bezier
- transform: scale() in order to create the zoom effect
- z-index in order to put lettering above

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode #LearningDaily

a website showcase. Four equal white cards hiding
Paulus Moreelse paintings under. When you hover the div the undelrying painting appear with a nice transform scale() effect and a cubic bezier transition. A display serif fonts comply with the general gothic style

Téotime Pacreau

2 months ago

#100DaysOfCode : #HTML #CSS

#Day11 : View Transitions API for MPA

Online demo :
https://teotimepacreau.github.io/View-Transitions-API-for-MPA-Day11-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/View-Transitions-API-for-MPA-Day11-of-100DaysOfCode

Project goals :
- HTML meta tags on both pages to unlock transitions API without JS
- Transition composed by opacity, left and transform scale

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode #LearningDaily #ViewTransitions

a demo furniture website. Sans-serif big heading, a mid century chair and some name of mid century creators on the index page. When you on the "details" button a nice transition playing with opacity, transform and left occurs. It results in a transition. The details page is just the pic of the modernist chair

Téotime Pacreau

2 months ago

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day10 : View Transitions API

Online demo :
https://teotimepacreau.github.io/View-Transitions-API-Day10-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/View-Transitions-API-Day10-Of-100DaysOfCode

Project goal :
- View Transitions API experimentation : understanding principle of implementation with VanillaJS .startViewTransition and DOMChanges activator

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode #LearningDaily

website showcase. On the left side a Lorem Impsum text with vibrant colors. On the right side a Caravaggio painting. Web Animations API allows to sequences transitions in SPA

Téotime Pacreau

2 months ago

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day9 : Expandable FAQ

Online demo :
https://teotimepacreau.github.io/Expandable-FAQ-Day9-of-100DaysofCode/

Source Code : https://github.com/teotimepacreau/Expandable-FAQ-Day9-of-100DaysofCode

Project goals :
- VanillaJS closest selector and lastElementChild + DOM manipulation
- CSS use of linear gradient and box shadows
- multiple flexbox imbrication
- Font awesome icon toggle

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode

a website showcase demo. It's a flight FAQ page, with accordeon opening answer : when you click on the the arrow near the question it opens the answer. Alinear-gradient with shade of blue and pink agrement the UI and on the right there is a photo of TOKYO

Téotime Pacreau

4 months ago

#100DaysOfUI : un suivi des petites tendances de webdesign que j'ai remarquées.

#Day4 : Les lettres désordonnées

Exemple avec le visuel d'illustration de la radio StationStation

#DailyUI #UITrend #UIDesign #WebDesign #UI #Frontend #WebDev #Design #UserInterface

Visuel d'illustration d'un épisode de la radio StationStation

Téotime Pacreau

4 months ago

#100DaysOfUi

2ème cas d'usage avec le @PrixlibrairesQc (Prix des libraires du Québec)

Ici les symboles de lignes aiguisées se rassemblent pour former des livres

#DailyUI #UITrend #UIDesign #WebDesign #UI #Frontend #WebDev #Design #UserInterface

Visuel de présentation du prix des libraires du Québec 2023

Téotime Pacreau

4 months ago

#100DaysOfUI : un suivi des petites tendances de webdesign que j'ai remarquées.

#Day3 : Les symboles constitués de lignes aiguisées

Exemple avec le packaging de Refilled
https://www.behance.net/gallery/128426683/REFILLED-Brand-Identity-Packaging

#DailyUI #UITrend #UIDesign #WebDesign #UI #Frontend #WebDev #Design #UserInterface

Téotime Pacreau

4 months ago

Autre exemple avec la représentation visuelle façon Ikea des échanges commerciaux suédois pour célébrer le début de la présidence de la Suède au Conseil de l’UE @EU_Commission

#DailyUI #UITrend #UIDesign #WebDesign #UI #Frontend #WebDev