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
16 followers · 41 posts · Server mastodon.design#100DaysOfCode : #HTML #CSS #VanillaJS seulement !
#Day2 : Barre de progression évolutive accompagnée d'icônes
Le projet est à retrouver sur : https://teotimepacreau.github.io/Progress-Steps-Day2-of-100DaysOfCode/
Code source : https://github.com/teotimepacreau/Progress-Steps-Day2-of-100DaysOfCode
Objectifs :
- position relative and position absolute to create the progress bar
- disabling and enabling buttons
- Cursor not-allowed and cursor pointer
- Vanilla JS IF logic
#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #LearningDaily #Development
#development #learningdaily #codingday #learntocode #javascript #codingchallenge #webdesign #frontend #webdev #day2 #vanillajs #css #html #100daysofcode
Téotime Pacreau · @teotimepacreau
16 followers · 37 posts · Server mastodon.design#100DaysOfCode : #HTML #CSS #VanillaJS seulement !
#Day1 : Création de cartes extensibles pour contenir des images dynamiquement
Le projet est à retrouver sur : https://teotimepacreau.github.io/Expanding-Cards-Day1-of-100DaysOfCode/
Code source : https://github.com/teotimepacreau/Expanding-Cards-Day1-of-100DaysOfCode
- handle images with object-fit: cover
- Vanilla JS eventListener, loops, class and attributes handling, create/remove DOM elements
#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #LearningDaily
#learningdaily #codingday #learntocode #javascript #codingchallenge #webdesign #frontend #webdev #day1 #vanillajs #css #html #100daysofcode
· @dpreacher
38 followers · 437 posts · Server social.snopyta.orgThat moment of realization when u feel thankful 2 d more experienced members who have also been 'on ur team' in all sense of d phrase, even tho while u wr charting uncharted terriroty n grumbling abt y they r not just using u as a tool 2 make a tool 2 express their decisions in2 a presentable initiative. The liberty 2 look at a blank slate with d path slowly forming out of ur own decisions n then reaching a definite conclusion thru that path needs a lot of courage n encouragement. #learningdaily
Diabolic Preacher ♒ · @dpreacher
62 followers · 3548 posts · Server freeradical.zoneThat moment of realization when u feel thankful 2 d more experienced members who have also been 'on ur team' in all sense of d phrase, even tho while u wr charting uncharted terriroty n grumbling abt y they r not just using u as a tool 2 make a tool 2 express their decisions in2 a presentable initiative. The liberty 2 look at a blank slate with d path slowly forming out of ur own decisions n then reaching a definite conclusion thru that path needs a lot of courage n encouragement. #learningdaily