uk
Feedback
Dev Nerd

Dev Nerd

Відкрити в Telegram

Roobi | 19 | M | Developer | Dropout

Показати більше
545
Підписники
Немає даних24 години
-17 днів
-1130 день
Архів дописів
#songs@DevNerd0

it's my #Day70 of #100DaysOfCode Project A simple landing page for beauty products with tailwind and js ✅ Mobile responsive ✅
it's my #Day70 of #100DaysOfCode Project A simple landing page for beauty products with tailwind and js ✅ Mobile responsive ✅ Clean design ✅ Integrated product demo video ✅ Testimonials section Yeah it has no that much features cuz I didn't trust Ethiopian electricity😁 .. I was worried like it will go out again .. so I made it fast and kept it simple Check it out👍 Live Link Repo Link #projects@DevNerd0 #100DaysChallenge #coding

Hey guys Sorry for the being off .. we lost electricity yesterday but the lights are back on now⚡️ I've just made up simple project quickly for the missed challenge from yesterday and am gonna post it rn⚡️👍

When I start a startup I'll use Python🐍 for the backend ⚡️ #StartupDreams@DevNerd0

guys searching for assets like imgs, icons.. that looks perfect and fit the design is really a though process🤦‍♂ i was downloading and coding the design from the dribbble.com and the designers doesn't share their assets .. like not even the figma link🤷‍♂.. But we have to keep pushing⚡️ If anyone has tips please share them👍

Have a great week .. everyone⚡️ enjoy this song 🎶 love y'all❤️ #songs@DevNerd0

"የጥበብ መጀመሪያ እግዚአብሔርን መፍራት ነው፤ ሰነፎች ግን ጥበብንና ተግሣጽን ይንቃሉ።" — መጽሐፈ ምሳሌ 1:7 (አማ 1954)

And guess what? someone followed me on GitHub🥳 guys to have a software engineer lezawm Dagmawi_Babi follow me and gave me a
+1
And guess what? someone followed me on GitHub🥳 guys to have a software engineer lezawm Dagmawi_Babi follow me and gave me a star .. it's really crazy, guys I’m feeling super excited to keep pushing⚡️😁 yemir ..

my #Day69 of #100DaysOfCode project It's a simple landing page for guitar store build with tailwind and js Features: ✅ Swipe
my #Day69 of #100DaysOfCode project It's a simple landing page for guitar store build with tailwind and js Features: ✅ Swipe to left and right on the products section ✅ Integrated video at the bottom of the header section with play and pause functionality ✅ User-friendly interface ✅ Smooth animations ✅ Newsletter subscription ✅ Testimonials grid Check it out👍 Live Link Repo Link #100DaysChallenge #coding #projects@DevNerd0

⚡️
⚡️

#songs@DevNerd0

Btw am still a chill guy ;)

Here is my #Day68 of #100daysofcode project a nice landing page It's built in tailwind and JavaScript ⚡️Features: ✅ Smooth an
Here is my #Day68 of #100daysofcode project a nice landing page It's built in tailwind and JavaScript ⚡️Features: ✅ Smooth animations ✅ User-friendly interface ✅ Testimonials grid ✅ Nice grid background ✅ Swipe to left and right on the header section Check it out Live Link: Live Link Repo Link: Repo Link #100DaysChallenge #coding #projects@DevNerd0

#slides #notes@DevNerd0
+9
#slides #notes@DevNerd0

#songs@DevNerd0

Repost from Mira
photo content

Should i do this kind of animation before him

Repost from Chapi Dev Talks
Am not frontend Dev but definitely would love to try this code godamn 🔥

Here are the steps I followed to create the loading effect:
<body class="overflow-hidden">
  <div class="z-10 h-screen w-full flex justify-center items-center bg-[#F7E8DF] fixed top-0 loading-wrapper">
    <div class="loader"></div>
  </div>
  <!-- main content here -->
</body>
Body Class (overflow-hidden): This initially prevents scrolling while the loading animation is visible. loading-wrapper it's like a container for the loader that takes up the entire viewport and centers the loader loader div: it will show the loading animation
@layer utilities {
  .loader {
    width: 60px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side, #e55e11 90%, #ffffff00);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100% / 3) 50%;
    animation: l3 1s infinite linear;
  }
  @keyframes l3 {
    20% {
      background-position: 0% 0%, 50% 50%, 100% 50%;
    }
    40% {
      background-position: 0% 100%, 50% 0%, 100% 50%;
    }
    60% {
      background-position: 0% 50%, 50% 100%, 100% 0%;
    }
    80% {
      background-position: 0% 50%, 50% 50%, 100% 100%;
    }
  }
}
Loader class: Defines the size and animation for the loader element using radial gradients and keyframes. Keyframes (l3): Controls the animation sequence by creating a spinning effect. aspect-ratio: 2: ensures the loader maintains a consistent shape with a width that is twice its height. background var: Positions the gradient circles evenly across the loader's width for a balanced view background-size: Sizes each gradient circle to take up one-third of the loader's width and half its height
window.onload = () => {
  document.querySelector(".loading-wrapper").classList.add("hidden");
  document.body.classList.remove("overflow-hidden");
};
I used the window.onload: the event is triggered when the whole page, including all dependent resources like images, is loaded. overflow-hidden: removes the overflow-hidden class from the body, which re-enables scrolling after the page is fully loaded let's keep pushing forward ⚡️ #codes #notes@DevNerd0