Téotime Pacreau · @teotimepacreau
42 followers · 193 posts · Server mastodon.design#100DaysOfCode : #HTML #CSS #VanillaJS
#Day22 : Microblog
Online demo :
https://teotimepacreau.github.io/Callback-blog-Day22-Of-100DaysOfCode/
Source Code : https://github.com/teotimepacreau/Callback-blog-Day22-Of-100DaysOfCode
Project goals :
- use of callbacks, split string method, Map array method, Object.assign method
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS #DailyUI
#js #learnjavascript #webdevelopment #learncode #codingchallenge #dailyui #uitrend #uidesign #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #day22 #vanillajs #css #html #100daysofcode
Téotime Pacreau · @teotimepacreau
42 followers · 190 posts · Server mastodon.design#100DaysOfCode : #HTML #CSS #VanillaJS
#Day21 : Drag and drop
Online demo :
https://teotimepacreau.github.io/Drag-and-drop-Day21-of-100DaysOfCode/
Source Code : https://github.com/teotimepacreau/Drag-and-drop-Day21-of-100DaysOfCode
Project goals :
- discovering the drag and drop API
- first approach to setting data into an object in order to keep properties
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS #DailyUI
#js #learnjavascript #webdevelopment #learncode #codingchallenge #dailyui #uitrend #uidesign #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #Day21 #vanillajs #css #html #100daysofcode
Téotime Pacreau · @teotimepacreau
39 followers · 177 posts · Server mastodon.design#100DaysOfCode : #HTML #CSS #VanillaJS
#Day20 : Bookmark reader using only Raindrop.io API
Inspired by the excellent design and functionality from @iamrobin https://www.iamrob.in/bookmarks
Online demo :
https://teotimepacreau.github.io/Bookmark-reader-using-Raindrop-API-Day20-of-100DaysOfCode/
Source Code : https://github.com/teotimepacreau/Bookmark-reader-using-Raindrop-API-Day20-of-100DaysOfCode
Project goals ↓
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS #DailyUI
#js #learnjavascript #webdevelopment #learncode #codingchallenge #dailyui #uitrend #uidesign #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #Day20 #vanillajs #css #html #100daysofcode
Téotime Pacreau · @teotimepacreau
39 followers · 151 posts · Server mastodon.design#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
#js #learnjavascript #webdevelopment #learncode #codingchallenge #dailyui #uitrend #uidesign #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #Day18 #vanillajs #css #html #100daysofcode
Téotime Pacreau · @teotimepacreau
39 followers · 151 posts · Server mastodon.design#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
#js #learnjavascript #webdevelopment #learncode #codingchallenge #dailyui #uitrend #uidesign #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #Day17 #vanillajs #css #html #100daysofcode
Téotime Pacreau · @teotimepacreau
39 followers · 141 posts · Server mastodon.design#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
#components #front #webdevelopment #learncode #codingchallenge #dailyui #uitrend #uidesign #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #day15 #vanillajs #css #html #100daysofcode
Téotime Pacreau · @teotimepacreau
33 followers · 136 posts · Server mastodon.design#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
#learncode #codingchallenge #uitrend #uidesign #webdevelopment #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #day14 #vanillajs #css #html #100daysofcode
Téotime Pacreau · @teotimepacreau
29 followers · 123 posts · Server mastodon.design#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 #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode #LearningDaily
#learningdaily #learncode #uitrend #uidesign #webdevelopment #frontenddevelopment #codingday #learntocode #javascript #codingchallenge #webdesign #frontend #webdev #day13 #css #html #100daysofcode
Téotime Pacreau · @teotimepacreau
27 followers · 119 posts · Server mastodon.design#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
#learningdaily #learncode #uitrend #uidesign #webdevelopment #frontenddevelopment #codingday #learntocode #javascript #codingchallenge #webdesign #frontend #webdev #Day12 #css #html #100daysofcode
Téotime Pacreau · @teotimepacreau
27 followers · 115 posts · Server mastodon.design#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
#viewtransitions #learningdaily #learncode #uitrend #uidesign #webdevelopment #frontenddevelopment #codingday #learntocode #javascript #codingchallenge #webdesign #frontend #webdev #Day11 #css #html #100daysofcode
Téotime Pacreau · @teotimepacreau
27 followers · 106 posts · Server mastodon.design#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
#learningdaily #learncode #uitrend #uidesign #webdevelopment #frontenddevelopment #codingday #learntocode #javascript #codingchallenge #webdesign #frontend #webdev #day10 #vanillajs #css #html #100daysofcode
Téotime Pacreau · @teotimepacreau
27 followers · 90 posts · Server mastodon.design#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 goal
- 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
#learncode #uitrend #uidesign #webdevelopment #frontenddevelopment #codingday #learntocode #javascript #codingchallenge #webdesign #frontend #webdev #day9 #vanillajs #css #html #100daysofcode
Téotime Pacreau · @teotimepacreau
12 followers · 20 posts · Server mastodon.design
#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
#userinterface #design #webdev #frontend #ui #webdesign #uidesign #uitrend #dailyui #day4 #100daysofui
Téotime Pacreau · @teotimepacreau
12 followers · 16 posts · Server mastodon.design
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
#userinterface #design #webdev #frontend #ui #webdesign #uidesign #uitrend #dailyui #100daysofui
Téotime Pacreau · @teotimepacreau
12 followers · 14 posts · Server mastodon.design
#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
#DailyUI #UITrend #UIDesign #WebDesign #UI #Frontend #WebDev #Design #UserInterface
#userinterface #design #webdev #frontend #ui #webdesign #uidesign #uitrend #dailyui #day3 #100daysofui
Téotime Pacreau · @teotimepacreau
12 followers · 9 posts · Server mastodon.design
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
#webdev #frontend #ui #webdesign #uidesign #uitrend #dailyui
Téotime Pacreau · @teotimepacreau
12 followers · 7 posts · Server mastodon.design
#100DaysOfUI : un suivi des petites tendances de webdesign que j'ai remarquées.
#Day2ofUI : L'utilitarisme inspiré de l'industriel
Visuel de https://temp.studio
#DailyUI #UItrend #UIdesign #Webdesign #UI #FrontEnd #WebDev
#webdev #frontend #ui #webdesign #uidesign #uitrend #dailyui #day2ofui #100daysofui
Téotime Pacreau · @teotimepacreau
11 followers · 5 posts · Server mastodon.design
#100DaysOfUI : un suivi des petites tendances de webdesign que j'ai remarquées.
#Day1 : L'utilisation de formes ovales pour contenir les images
Exemple avec le visuel de promotion pour la typo Winter Sans par
@emile_painchaud
https://www.behance.net/gallery/137192601/Winter-Sans-Free-to-try
#DailyUI #UItrend #UIdesign #Webdesign #UI #FrontEnd #WebDev
#webdev #frontend #ui #webdesign #uidesign #uitrend #dailyui #day1 #100daysofui
Geoffrey Crofte ☕ · @geoffreycrofte
160 followers · 1540 posts · Server mastodon.designMinimalism is not just a silly design trend https://uxdesign.cc/minimalism-is-not-just-a-silly-design-trend-691af1f16de5
Some really good advice to better understand what's behind Minimalism.
#uitrend #userinterface